Merge branch 'master' of https://github.com/react-native-community/react-native-video (5435e5d5) · Commits · codevise / react-native-video

CHANGELOG.md

+8 −0

Changes for CHANGELOG.md: 8 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		## Changelog

		### Next Version
		* Basic fullscreen support for Android MediaPlayer [#1138](https://github.com/react-native-community/react-native-video/pull/1138)
		* Simplify default Android SDK code [#1145](https://github.com/react-native-community/react-native-video/pull/1145) [#1146](https://github.com/react-native-community/react-native-video/pull/1146)

		### Version 3.1.0
		* Support sidecar text tracks on iOS [#1109](https://github.com/react-native-community/react-native-video/pull/1109)
		* Support onAudioBecomingNoisy on iOS [#1131](https://github.com/react-native-community/react-native-video/pull/1131)

		### Version 3.0
		* Inherit Android buildtools and SDK version from the root project [#1081](https://github.com/react-native-community/react-native-video/pull/1081)
		* Automatically play on ExoPlayer when the paused prop is not set [#1083](https://github.com/react-native-community/react-native-video/pull/1083)

README.md

+117 −19

Changes for README.md: 117 added lines, 19 removed lines.
Original line number	Diff line number	Diff line
		@@ -180,6 +180,10 @@ using System.Collections.Generic;
		## Usage

		```javascript
		// Load the module

		import Video from 'react-native-video';

		// Within your render function, assuming you have a file called
		// "background.mp4" in your project. You can include multiple videos
		// on a single screen if you like.
		@@ -191,21 +195,8 @@ using System.Collections.Generic;
		onBuffer={this.onBuffer} // Callback when remote video is buffering
		onEnd={this.onEnd} // Callback when playback finishes
		onError={this.videoError} // Callback when video cannot be loaded
		onFullscreenPlayerWillPresent={this.fullScreenPlayerWillPresent} // Callback before fullscreen starts
		onFullscreenPlayerDidPresent={this.fullScreenPlayerDidPresent} // Callback after fullscreen started
		onFullscreenPlayerWillDismiss={this.fullScreenPlayerWillDismiss} // Callback before fullscreen stops
		onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDismiss} // Callback after fullscreen stopped
		style={styles.backgroundVideo} />

		// Later to trigger fullscreen
		this.player.presentFullscreenPlayer()

		// Disable fullscreen
		this.player.dismissFullscreenPlayer()

		// To set video position in seconds (seek)
		this.player.seek(0)

		// Later on in your styles..
		var styles = StyleSheet.create({
		backgroundVideo: {
		@@ -232,6 +223,7 @@ var styles = StyleSheet.create({
		* [rate](#rate)
		* [repeat](#repeat)
		* [resizeMode](#resizemode)
		* [selectedAudioTrack](#selectedaudiotrack)
		* [selectedTextTrack](#selectedtexttrack)
		* [stereoPan](#stereopan)
		* [textTracks](#texttracks)
		@@ -239,12 +231,19 @@ var styles = StyleSheet.create({
		* [volume](#volume)

		### Event props
		* [onAudioBecomingNoisy](#onaudiobecomingnoisy)
		* [onFullscreenPlayerWillPresent](#onfullscreenplayerwillpresent)
		* [onFullscreenPlayerDidPresent](#onfullscreenplayerdidpresent)
		* [onFullscreenPlayerWillDismiss](#onfullscreenplayerwilldismiss)
		* [onFullscreenPlayerDidDismiss](#onfullscreenplayerdiddismiss)
		* [onLoad](#onload)
		* [onLoadStart](#onloadstart)
		* [onProgress](#onprogress)
		* [onTimedMetadata](#ontimedmetadata)

		### Methods
		* [dismissFullscreenPlayer](#dismissfullscreenplayer)
		* [presentFullscreenPlayer](#presentfullscreenplayer)
		* [seek](#seek)

		### Configurable props
		@@ -355,6 +354,36 @@ Determines how to resize the video when the frame doesn't match the raw video di

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP

		#### selectedAudioTrack
		Configure which audio track, if any, is played.

		```
		selectedAudioTrack={{
		type: Type,
		value: Value
		}}
		```

		Example:
		```
		selectedAudioTrack={{
		type: "title",
		value: "Dubbing"
		}}
		```

		Type \| Value \| Description
		--- \| --- \| ---
		"system" (default) \| N/A \| Play the audio track that matches the system language. If none match, play the first track.
		"disabled" \| N/A \| Turn off audio
		"title" \| string \| Play the audio track with the title specified as the Value, e.g. "French"
		"language" \| string \| Play the audio track with the language specified as the Value, e.g. "fr"
		"index" \| number \| Play the audio track with the index specified as the value, e.g. 0

		If a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used.

		Platforms: Android ExoPlayer, iOS

		#### selectedTextTrack
		Configure which text track (caption or subtitle), if any, is shown.

		@@ -402,9 +431,11 @@ Property \| Description
		--- \| ---
		title \| Descriptive name for the track
		language \| 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language
		type \| Mime type of the track<br> * TextTrackType.SRT - .srt SubRip Subtitle<br> * TextTrackType.TTML - .ttml TTML<br> * TextTrackType.VTT - .vtt WebVTT
		type \| Mime type of the track<br> * TextTrackType.SRT - SubRip (.srt)<br> * TextTrackType.TTML - TTML (.ttml)<br> * TextTrackType.VTT - WebVTT (.vtt)<br>iOS only supports VTT, Android ExoPlayer supports all 3
		uri \| URL for the text track. Currently, only tracks hosted on a webserver are supported

		On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.

		Example:
		```
		import { TextTrackType }, Video from 'react-native-video';
		@@ -413,21 +444,20 @@ textTracks={[
		{
		title: "English CC",
		language: "en",
		type: "text/vtt", TextTrackType.VTT,
		type: TextTrackType.VTT, // "text/vtt"
		uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
		},
		{
		title: "Spanish Subtitles",
		language: "es",
		type: "application/x-subrip", TextTrackType.SRT,
		type: TextTrackType.SRT, // "application/x-subrip"
		uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
		}
		]}
		```

		This isn't support on iOS because AVPlayer doesn't support it. Text tracks must be loaded as part of an HLS playlist.

		Platforms: Android ExoPlayer
		Platforms: Android ExoPlayer, iOS

		#### useTextureView
		Output to a TextureView instead of the default SurfaceView. In general, you will want to use SurfaceView because it is more efficient and provides better performance. However, SurfaceViews has two limitations:
		@@ -451,6 +481,41 @@ Platforms: all

		### Event props

		#### onAudioBecomingNoisy
		Callback function that is called when the audio is about to become 'noisy' due to a change in audio outputs. Typically this is called when audio output is being switched from an external source like headphones back to the internal speaker. It's a good idea to pause the media when this happens so the speaker doesn't start blasting sound.

		Payload: none

		Platforms: Android ExoPlayer, iOS

		#### onFullscreenPlayerWillPresent
		Callback function that is called when the player is about to enter fullscreen mode.

		Payload: none

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### onFullscreenPlayerDidPresent
		Callback function that is called when the player has entered fullscreen mode.

		Payload: none

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### onFullscreenPlayerWillDismiss
		Callback function that is called when the player is about to exit fullscreen mode.

		Payload: none

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### onFullscreenPlayerDidDismiss
		Callback function that is called when the player has exited fullscreen mode.

		Payload: none

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### onLoad
		Callback function that is called when the media is loaded and ready to play.

		@@ -461,7 +526,8 @@ Property \| Type \| Description
		currentPosition \| number \| Time in seconds where the media will start
		duration \| number \| Length of the media in seconds
		naturalSize \| object \| Properties:<br> * width - Width in pixels that the video was encoded at<br> * height - Height in pixels that the video was encoded at<br> * orientation - "portrait" or "landscape"
		textTracks \| array \| An array of text track info objects with the following properties:<br> * index - Index number<br> * title - Description of the track<br> * language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) language code<br> * type - Mime type of track
		audioTracks \| array \| An array of audio track info objects with the following properties:<br> * index - Index number<br> * title - Description of the track<br> * language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br> * type - Mime type of track
		textTracks \| array \| An array of text track info objects with the following properties:<br> * index - Index number<br> * title - Description of the track<br> * language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br> * type - Mime type of track

		Example:
		```
		@@ -479,6 +545,10 @@ Example:
		orientation: 'landscape'
		width: '1920'
		},
		audioTracks: [
		{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },
		{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 } ],
		],
		textTracks: [
		{ title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },
		{ title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },
		@@ -560,6 +630,34 @@ return (
		);
		```

		#### dismissFullscreenPlayer
		`dismissFullscreenPlayer()`

		Take the player out of fullscreen mode.

		Example:
		```
		this.player.dismissFullscreenPlayer();
		```

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### FullscreenPlayer
		`presentFullscreenPlayer()`

		Put the player in fullscreen mode.

		On iOS, this displays the video in a fullscreen view controller with controls.

		On Android ExoPlayer & MediaPlayer, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.

		Example:
		```
		this.player.presentFullscreenPlayer();
		```

		Platforms: Android ExoPlayer, Android MediaPlayer, iOS

		#### seek()
		`seek(seconds)`

Video.js

+9 −0

Changes for Video.js: 9 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -235,6 +235,7 @@ export default class Video extends Component {
		onVideoEnd: this._onEnd,
		onVideoBuffer: this._onBuffer,
		onTimedMetadata: this._onTimedMetadata,
		onVideoAudioBecomingNoisy: this._onAudioBecomingNoisy,
		onVideoFullscreenPlayerWillPresent: this._onFullscreenPlayerWillPresent,
		onVideoFullscreenPlayerDidPresent: this._onFullscreenPlayerDidPresent,
		onVideoFullscreenPlayerWillDismiss: this._onFullscreenPlayerWillDismiss,
		@@ -296,6 +297,7 @@ Video.propTypes = {
		onVideoSeek: PropTypes.func,
		onVideoEnd: PropTypes.func,
		onTimedMetadata: PropTypes.func,
		onVideoAudioBecomingNoisy: PropTypes.func,
		onVideoFullscreenPlayerWillPresent: PropTypes.func,
		onVideoFullscreenPlayerDidPresent: PropTypes.func,
		onVideoFullscreenPlayerWillDismiss: PropTypes.func,
		@@ -314,6 +316,13 @@ Video.propTypes = {
		posterResizeMode: Image.propTypes.resizeMode,
		repeat: PropTypes.bool,
		allowsExternalPlayback: PropTypes.bool,
		selectedAudioTrack: PropTypes.shape({
		type: PropTypes.string.isRequired,
		value: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number
		])
		}),
		selectedTextTrack: PropTypes.shape({
		type: PropTypes.string.isRequired,
		value: PropTypes.oneOfType([

android-exoplayer/build.gradle

+8 −12

Changes for android-exoplayer/build.gradle: 8 added lines, 12 removed lines.
Original line number	Diff line number	Diff line
		apply plugin: 'com.android.library'

		def _ext = rootProject.ext

		def _reactNativeVersion = _ext.has('reactNative') ? _ext.reactNative : '+'
		def _compileSdkVersion = _ext.has('compileSdkVersion') ? _ext.compileSdkVersion : 27
		def _buildToolsVersion = _ext.has('buildToolsVersion') ? _ext.buildToolsVersion : '27.0.3'
		def _minSdkVersion = _ext.has('minSdkVersion') ? _ext.minSdkVersion : 16
		def _targetSdkVersion = _ext.has('targetSdkVersion') ? _ext.targetSdkVersion : 27
		def safeExtGet(prop, fallback) {
		rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
		}

		android {
		compileSdkVersion _compileSdkVersion
		buildToolsVersion _buildToolsVersion
		compileSdkVersion safeExtGet('compileSdkVersion', 27)
		buildToolsVersion safeExtGet('buildToolsVersion', '27.0.3')

		defaultConfig {
		minSdkVersion _minSdkVersion
		targetSdkVersion _targetSdkVersion
		minSdkVersion safeExtGet('minSdkVersion', 16)
		targetSdkVersion safeExtGet('targetSdkVersion', 27)
		versionCode 1
		versionName "1.0"
		}
		@@ -22,7 +18,7 @@ android {

		dependencies {
		//noinspection GradleDynamicVersion
		provided "com.facebook.react:react-native:${_reactNativeVersion}"
		provided "com.facebook.react:react-native:${safeExtGet('reactNativeVersion', '+')}"
		compile 'com.google.android.exoplayer:exoplayer:2.7.3'
		compile('com.google.android.exoplayer:extension-okhttp:2.7.3') {
		exclude group: 'com.squareup.okhttp3', module: 'okhttp'

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

+87 −17

Changes for android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java: 87 added lines, 17 removed lines.
Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@ import android.text.TextUtils;
		import android.util.Log;
		import android.view.View;
		import android.view.Window;
		import android.view.accessibility.CaptioningManager;
		import android.widget.FrameLayout;

		import com.brentvatne.react.R;
		@@ -68,6 +69,7 @@ import java.lang.Math;
		import java.util.Map;
		import java.lang.Object;
		import java.util.ArrayList;
		import java.util.Locale;

		@SuppressLint("ViewConstructor")
		class ReactExoplayerView extends FrameLayout implements
		@@ -111,6 +113,9 @@ class ReactExoplayerView extends FrameLayout implements
		private Uri srcUri;
		private String extension;
		private boolean repeat;
		private String audioTrackType;
		private Dynamic audioTrackValue;
		private ReadableArray audioTracks;
		private String textTrackType;
		private Dynamic textTrackValue;
		private ReadableArray textTracks;
		@@ -499,20 +504,43 @@ class ReactExoplayerView extends FrameLayout implements
		private void videoLoaded() {
		if (loadVideoStarted) {
		loadVideoStarted = false;
		setSelectedAudioTrack(audioTrackType, audioTrackValue);
		setSelectedTextTrack(textTrackType, textTrackValue);
		Format videoFormat = player.getVideoFormat();
		int width = videoFormat != null ? videoFormat.width : 0;
		int height = videoFormat != null ? videoFormat.height : 0;
		eventEmitter.load(player.getDuration(), player.getCurrentPosition(), width, height,
		getTextTrackInfo());
		getAudioTrackInfo(), getTextTrackInfo());
		}
		}

		private WritableArray getAudioTrackInfo() {
		WritableArray audioTracks = Arguments.createArray();

		MappingTrackSelector.MappedTrackInfo info = trackSelector.getCurrentMappedTrackInfo();
		int index = getTrackRendererIndex(C.TRACK_TYPE_AUDIO);
		if (info == null \|\| index == C.INDEX_UNSET) {
		return audioTracks;
		}

		TrackGroupArray groups = info.getTrackGroups(index);
		for (int i = 0; i < groups.length; ++i) {
		Format format = groups.get(i).getFormat(0);
		WritableMap textTrack = Arguments.createMap();
		textTrack.putInt("index", i);
		textTrack.putString("title", format.id != null ? format.id : "");
		textTrack.putString("type", format.sampleMimeType);
		textTrack.putString("language", format.language != null ? format.language : "");
		audioTracks.pushMap(textTrack);
		}
		return audioTracks;
		}

		private WritableArray getTextTrackInfo() {
		WritableArray textTracks = Arguments.createArray();

		MappingTrackSelector.MappedTrackInfo info = trackSelector.getCurrentMappedTrackInfo();
		int index = getTextTrackRendererIndex();
		int index = getTrackRendererIndex(C.TRACK_TYPE_TEXT);
		if (info == null \|\| index == C.INDEX_UNSET) {
		return textTracks;
		}
		@@ -645,10 +673,10 @@ class ReactExoplayerView extends FrameLayout implements
		return false;
		}

		public int getTextTrackRendererIndex() {
		public int getTrackRendererIndex(int trackType) {
		int rendererCount = player.getRendererCount();
		for (int rendererIndex = 0; rendererIndex < rendererCount; rendererIndex++) {
		if (player.getRendererType(rendererIndex) == C.TRACK_TYPE_TEXT) {
		if (player.getRendererType(rendererIndex) == trackType) {
		return rendererIndex;
		}
		}
		@@ -722,12 +750,9 @@ class ReactExoplayerView extends FrameLayout implements
		this.repeat = repeat;
		}

		public void setSelectedTextTrack(String type, Dynamic value) {
		textTrackType = type;
		textTrackValue = value;

		int index = getTextTrackRendererIndex();
		if (index == C.INDEX_UNSET) {
		public void setSelectedTrack(int trackType, String type, Dynamic value) {
		int rendererIndex = getTrackRendererIndex(trackType);
		if (rendererIndex == C.INDEX_UNSET) {
		return;
		}
		MappingTrackSelector.MappedTrackInfo info = trackSelector.getCurrentMappedTrackInfo();
		@@ -735,12 +760,15 @@ class ReactExoplayerView extends FrameLayout implements
		return;
		}

		TrackGroupArray groups = info.getTrackGroups(index);
		TrackGroupArray groups = info.getTrackGroups(rendererIndex);
		int trackIndex = C.INDEX_UNSET;

		if (TextUtils.isEmpty(type)) {
		// Do nothing
		} else if (type.equals("disabled")) {
		trackSelector.setSelectionOverride(index, groups, null);
		type = "default";
		}

		if (type.equals("disabled")) {
		trackSelector.setSelectionOverride(rendererIndex, groups, null);
		return;
		} else if (type.equals("language")) {
		for (int i = 0; i < groups.length; ++i) {
		@@ -759,11 +787,26 @@ class ReactExoplayerView extends FrameLayout implements
		}
		}
		} else if (type.equals("index")) {
		if (value.asInt() < groups.length) {
		trackIndex = value.asInt();
		} else { // default. invalid type or "system"
		trackSelector.clearSelectionOverrides(index);
		}
		} else { // default
		if (rendererIndex == C.TRACK_TYPE_TEXT) { // Use system settings if possible
		int sdk = android.os.Build.VERSION.SDK_INT;
		if (sdk > 18 && groups.length > 0) {
		CaptioningManager captioningManager
		= (CaptioningManager)themedReactContext.getSystemService(Context.CAPTIONING_SERVICE);
		if (captioningManager != null && captioningManager.isEnabled()) {
		trackIndex = getTrackIndexForDefaultLocale(groups);
		}
		} else {
		trackSelector.setSelectionOverride(rendererIndex, groups, null);
		return;
		}
		} else if (rendererIndex == C.TRACK_TYPE_AUDIO) {
		trackIndex = getTrackIndexForDefaultLocale(groups);
		}
		}

		if (trackIndex == C.INDEX_UNSET) {
		trackSelector.clearSelectionOverrides(trackIndex);
		@@ -773,7 +816,34 @@ class ReactExoplayerView extends FrameLayout implements
		MappingTrackSelector.SelectionOverride override
		= new MappingTrackSelector.SelectionOverride(
		new FixedTrackSelection.Factory(), trackIndex, 0);
		trackSelector.setSelectionOverride(index, groups, override);
		trackSelector.setSelectionOverride(rendererIndex, groups, override);
		}

		private int getTrackIndexForDefaultLocale(TrackGroupArray groups) {
		int trackIndex = 0; // default if no match
		String locale2 = Locale.getDefault().getLanguage(); // 2 letter code
		String locale3 = Locale.getDefault().getISO3Language(); // 3 letter code
		for (int i = 0; i < groups.length; ++i) {
		Format format = groups.get(i).getFormat(0);
		String language = format.language;
		if (language != null && (language.equals(locale2) \|\| language.equals(locale3))) {
		trackIndex = i;
		break;
		}
		}
		return trackIndex;
		}

		public void setSelectedAudioTrack(String type, Dynamic value) {
		audioTrackType = type;
		audioTrackValue = value;
		setSelectedTrack(C.TRACK_TYPE_AUDIO, audioTrackType, audioTrackValue);
		}

		public void setSelectedTextTrack(String type, Dynamic value) {
		textTrackType = type;
		textTrackValue = value;
		setSelectedTrack(C.TRACK_TYPE_TEXT, textTrackType, textTrackValue);
		}

		public void setPausedModifier(boolean paused) {