From 568e1806a2f5f585cba2a3350b478ebb16685a04 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Sun, 11 Sep 2022 17:01:53 +0200 Subject: [PATCH 1/4] feat(sample): add an option to make controls testable in basic sample --- examples/basic/src/VideoPlayer.android.tsx | 227 +++++++++++---------- 1 file changed, 124 insertions(+), 103 deletions(-) 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} From 747665b5a3d8dbc138001c2fdc1614107bb777ed Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Sun, 11 Sep 2022 17:02:06 +0200 Subject: [PATCH 2/4] chore: update yarn.lock --- examples/basic/yarn.lock | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) 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" From 4c10195b32249005f9062d5d8f2548d1eed1a206 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Sun, 11 Sep 2022 17:09:09 +0200 Subject: [PATCH 3/4] doc: fix changelog --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2bec6ed..8b5e1de8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,10 @@ ## Changelog -### Version 6.0.0-alpha3 -- Upgrade ExoPlayer to 2.18.1 [#2846](https://github.com/react-native-video/react-native-video/pull/2846) ### Version 6.0.0-alpha.2 +- Sample: Add react-native-video controls support [#2852](https://github.com/react-native-video/react-native-video/pull/2852) +- Add full screen button in default android controls [#2763](https://github.com/react-native-video/react-native-video/pull/2763) +- Upgrade ExoPlayer to 2.18.1 [#2846](https://github.com/react-native-video/react-native-video/pull/2846) - Feature add new APIs to query supported features of device decoder (widevine level & codec capabilities) on android [#2740](https://github.com/react-native-video/react-native-video/pull/2740) - Feature add support of subtitle styling on android [#2759](https://github.com/react-native-video/react-native-video/pull/2759) - Fix Android #2690 ensure onEnd is not sent twice [#2690](https://github.com/react-native-video/react-native-video/issues/2690) From 78a57e10f7cc2f97e9d6e693a11747feeeb0f05c Mon Sep 17 00:00:00 2001 From: Olivier Bouillet <62574056+freeboub@users.noreply.github.com> Date: Wed, 28 Sep 2022 23:31:09 +0200 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce25e7f3..9dbe56a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,6 @@ ### 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: Add full screen button in default android controls [#2763](https://github.com/react-native-video/react-native-video/pull/2763) - 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)