diff --git a/CHANGELOG.md b/CHANGELOG.md
index cecf7813..33907369 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,14 @@
## Changelog
-### Version 6.0.0-alpha4
+
+### Version 6.0.0-alpha.4
+
+- Sample: Add react-native-video controls support [#2852](https://github.com/react-native-video/react-native-video/pull/2852)
- Android: Switch Google's maven repository to default `google()` [#2860](https://github.com/react-native-video/react-native-video/pull/2860)
- Android: Implement focusable prop so the video view can toggle whether it is focusable for non-touch devices [#2819](https://github.com/react-native-video/react-native-video/issues/2819)
- Fix iOS RCTSwiftLog naming collision [#2868](https://github.com/react-native-video/react-native-video/issues/2868)
-
### Version 6.0.0-alpha3
+
- Fix ios build [#2854](https://github.com/react-native-video/react-native-video/pull/2854)
### Version 6.0.0-alpha.2
@@ -33,6 +36,7 @@
- Fix video endless loop when repeat set to false or not specified. [#2329](https://github.com/react-native-video/react-native-video/pull/2329)
### Version 6.0.0-alpha.0
+
- Support disabling buffering [#2689](https://github.com/react-native-video/react-native-video/pull/2689)
- Fix AudioFocus bug that could cause the player to stop responding to play/pause in some instances. [#2689](https://github.com/react-native-video/react-native-video/pull/2689)
- Fix player crashing when it is being cleared. [#2689](https://github.com/react-native-video/react-native-video/pull/2689)
diff --git a/examples/basic/src/VideoPlayer.android.tsx b/examples/basic/src/VideoPlayer.android.tsx
index ef53c752..9faa9cb6 100644
--- a/examples/basic/src/VideoPlayer.android.tsx
+++ b/examples/basic/src/VideoPlayer.android.tsx
@@ -43,6 +43,7 @@ class VideoPlayer extends Component {
selectedTextTrack: undefined,
srcListId: 0,
loop: false,
+ showRNVControls: false,
};
seekerWidth = 0
@@ -258,6 +259,9 @@ class VideoPlayer extends Component {
toggleFullscreen() {
this.setState({ fullscreen: !this.state.fullscreen })
}
+ toggleControls() {
+ this.setState({ showRNVControls: !this.state.showRNVControls })
+ }
toggleDecoration() {
this.setState({ decoration: !this.state.decoration })
@@ -558,118 +562,134 @@ class VideoPlayer extends Component {
else return
}
+ renderTopControl() {
+ return (<>
+
+ {this.srcList[this.state.srcListId]?.description || 'local file'}
+
+
+ {
+ this.toggleControls()
+ }}
+ >
+ {this.state.showRNVControls ? 'Hide controls' : 'Show controls'}
+
+
+ >)
+ }
+
+
renderOverlay() {
return (
<>
{this.IndicatorLoadingView()}
-
- {this.srcList[this.state.srcListId]?.description || 'local file'}
-
+ {this.renderTopControl()}
-
- {this.renderLeftControl()}
-
-
- {this.renderRightControl()}
-
-
-
-
- {this.renderInfoControl()}
-
- {this.renderPause()}
-
- {this.renderRepeatModeControl()}
-
-
- {this.renderFullScreenControl()}
-
-
- {this.renderDecorationsControl()}
-
-
-
-
- {this.renderRateControl(0.25)}
- {this.renderRateControl(0.5)}
- {this.renderRateControl(1.0)}
- {this.renderRateControl(1.5)}
- {this.renderRateControl(2.0)}
-
+ {!this.state.showRNVControls ? (
+ <>
+
+ {this.renderLeftControl()}
+
+ {this.renderRightControl()}
+
+
+
+ {this.renderInfoControl()}
+
+ {this.renderPause()}
+
+ {this.renderRepeatModeControl()}
+
+
+ {this.renderFullScreenControl()}
+
+
+ {this.renderDecorationsControl()}
+
+
+
+
+ {this.renderRateControl(0.25)}
+ {this.renderRateControl(0.5)}
+ {this.renderRateControl(1.0)}
+ {this.renderRateControl(1.5)}
+ {this.renderRateControl(2.0)}
+
-
- {this.renderVolumeControl(0.5)}
- {this.renderVolumeControl(1)}
- {this.renderVolumeControl(1.5)}
-
+
+ {this.renderVolumeControl(0.5)}
+ {this.renderVolumeControl(1)}
+ {this.renderVolumeControl(1.5)}
+
-
- {this.renderResizeModeControl('cover')}
- {this.renderResizeModeControl('contain')}
- {this.renderResizeModeControl('stretch')}
-
-
- {this.renderSeekBar()}
-
- AudioTrack
- {this.state.audioTracks?.length <= 0 ? (
- empty
- ) : (
- {
- console.log('on audio value change ' + itemValue)
- this.setState({
- selectedAudioTrack: {
- type: 'language',
- value: itemValue,
- },
- })
- }}
- >
- {this.state.audioTracks.map((track) => {
- return (
-
- )
- })}
-
- )}
- TextTrack
- {this.state.textTracks?.length <= 0 ? (
- empty
- ) : (
- {
- console.log('on value change ' + itemValue)
- this.setState({
- selectedTextTrack: {
- type: 'language',
- value: itemValue,
- },
- })
- }}
- >
-
+
+ {this.renderResizeModeControl('cover')}
+ {this.renderResizeModeControl('contain')}
+ {this.renderResizeModeControl('stretch')}
+
+
+ {this.renderSeekBar()}
+
+ AudioTrack
+ {this.state.audioTracks?.length <= 0 ? (
+ empty
+ ) : (
+ {
+ console.log('on audio value change ' + itemValue);
+ this.setState({
+ selectedAudioTrack: {
+ type: 'language',
+ value: itemValue,
+ },
+ });
+ }}
+ >
+ {this.state.audioTracks.map((track) => {
+ return (
+
+ );
+ })}
+
+ )}
+ TextTrack
+ {this.state.textTracks?.length <= 0 ? (
+ empty
+ ) : (
+ {
+ console.log('on value change ' + itemValue);
+ this.setState({
+ selectedTextTrack: {
+ type: 'language',
+ value: itemValue,
+ },
+ });
+ }}
+ >
+
- {this.state.textTracks.map((track) => (
-
- ))}
-
- )}
-
-
+ {this.state.textTracks.map((track) => (
+
+ ))}
+
+ )}
+
+ >
+ ) : null
+ }
>
)
}
@@ -689,6 +709,7 @@ class VideoPlayer extends Component {
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
+ controls={this.state.showRNVControls}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onProgress={this.onProgress}
diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock
index 4eddaeb5..bc9f9405 100644
--- a/examples/basic/yarn.lock
+++ b/examples/basic/yarn.lock
@@ -2573,11 +2573,6 @@ electron-to-chromium@^1.4.17:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.59.tgz#657f2588c048fb95975779f8fea101fad854de89"
integrity sha512-AOJ3cAE0TWxz4fQ9zkND5hWrQg16nsZKVz9INOot1oV//u4wWu5xrj9CQMmPTYskkZRunSRc9sAnr4EkexXokg==
-eme-encryption-scheme-polyfill@^2.0.3:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.4.tgz#7d818302af3f3b19d5974255dcc92dc087413845"
- integrity sha512-MHYJX1v145Pjj2YJTrVVuJOYyXrxGVy8LWf6kV5M4jrV/GyoeuJKyTuD+GaD+VAiE8Ip+MptiH4dXk6ZVmMNow==
-
emitter-listener@^1.0.1, emitter-listener@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/emitter-listener/-/emitter-listener-1.1.2.tgz#56b140e8f6992375b3d7cb2cab1cc7432d9632e8"
@@ -5774,13 +5769,12 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.4, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-react-native-video@../..:
- version "6.0.0-alpha1"
+react-native-video@../../:
+ version "6.0.0-alpha.1"
dependencies:
deprecated-react-native-prop-types "^2.2.0"
keymirror "^0.1.1"
prop-types "^15.7.2"
- shaka-player "^3.3.2"
react-native-windows@0.63.41:
version "0.63.41"
@@ -6309,13 +6303,6 @@ setprototypeof@1.2.0:
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
-shaka-player@^3.3.2:
- version "3.3.4"
- resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-3.3.4.tgz#7d137a18fc0f55c50852a4348c8319495b5fa546"
- integrity sha512-8PrUBA8aOABGvhQVa59XMoPo5myAoQF4ptx6gvZWPOBtdsyVaamqQKELY77ikZJ1ejup7BmHf42MXGFmxQfcaA==
- dependencies:
- eme-encryption-scheme-polyfill "^2.0.3"
-
shallow-clone@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"