From 568e1806a2f5f585cba2a3350b478ebb16685a04 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Sun, 11 Sep 2022 17:01:53 +0200 Subject: [PATCH 01/15] 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 02/15] 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 03/15] 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 57c991363ba4d2f72ae788792c60ce506f6c954f Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Wed, 14 Sep 2022 23:55:14 +0200 Subject: [PATCH 04/15] doc: add link to side project and create a debugging page --- API.md | 10 +--------- README.md | 2 ++ docs/DEBUGGING.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++ docs/PROJECTS.md | 9 +++++++++ 4 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 docs/DEBUGGING.md create mode 100644 docs/PROJECTS.md diff --git a/API.md b/API.md index d9153f77..01314ea8 100644 --- a/API.md +++ b/API.md @@ -1609,12 +1609,4 @@ allprojects { } ``` If you encounter an error `Could not find com.android.support:support-annotations:27.0.0.` reinstall your Android Support Repository. - -## Black Screen on Release build (Android) -If your video work on Debug mode, but on Release you see only black screen, please, check the link to your video. If you use 'http' protocol there, you will need to add next string to your AndroidManifest.xml file. -``` - -``` + \ No newline at end of file diff --git a/README.md b/README.md index 3ad58960..e53e697d 100644 --- a/README.md +++ b/README.md @@ -13,5 +13,7 @@ Version 6.0.0 is introducing dozens of breaking changes, mostly through updated - [Documentation](API.md) - [Changelog](CHANGELOG.md) - [Contribution guide](CONTRIBUTING.md) +- [Usefull Side Project](./docs/PROJECTS.md) +- [Adanced debugging](./docs/DEBUGGING.md) **react-native-video** was originally created by [Brent Vatne](https://github.com/brentvatne) diff --git a/docs/DEBUGGING.md b/docs/DEBUGGING.md new file mode 100644 index 00000000..4ad9fda5 --- /dev/null +++ b/docs/DEBUGGING.md @@ -0,0 +1,47 @@ +# Advanced debuging and common issues + +### HTTP playback doesn't work or Black Screen on Release build (Android) +If your video work on Debug mode, but on Release you see only black screen, please, check the link to your video. If you use 'http' protocol there, you will need to add next string to your AndroidManifest.xml file. [Details here](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) + +``` + +``` + +### Decoder Issue (Android) + +Devices have a maximum of simulataneous possible playback. It means you have reach this limit. Exoplayer returns: 'Unable to instantiate decoder' + +**known issue**: This issue happen really often in debug mode. + +## You cannot play clean content (all OS) + +Here are the steps to consider before opening a ticket in issue tracker + +### Check you can access to remote file + +Ensure you can download to manifest / content file with a browser for exemple + +### Check another player can read the content + +Usually clear playback can be read with all Video player. Then you should ensure content can be played without any issue with another player ([VideoLan/VLC](https://www.videolan.org/vlc/) is a good reference implementation) + +## You cannot play protected content (all OS) + +### Protected content gives error (token error / access forbidden) + +If content is protected with an access token or any other http header, ensure you can access to you data with a wget call or a rest client app. You need to provide all needed access token / authentication parameters. + +### Everything seems correct but content cannot be accessed + +You need to record network trace to ensure communications with server is correct. +[Charles proxy](https://www.charlesproxy.com/) is a simple and usefull tool to sniff all http/https calls. +With this tool you should be able to analyze what is going on with network. You will see all access to content and DRM, audio / vido chuncks, ... + +Then try to compare exchanges with previous tests you made. + +### It's still not working + +You can try to open a ticket now ! diff --git a/docs/PROJECTS.md b/docs/PROJECTS.md new file mode 100644 index 00000000..34b1ef3a --- /dev/null +++ b/docs/PROJECTS.md @@ -0,0 +1,9 @@ +This page links other open source projects which can be usefull for your player implementation + +# UI over react-native-video + - [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls): First reference player UI + - [react-native-media-console](https://github.com/criszz77/react-native-media-console): React-native-video-controls updated and rewritten in typescript + - [react-native-corner-video](https://github.com/Lg0gs/react-native-corner-video): A floating video player + +# Other tools + - [react-native-corner-video](https://github.com/tanguyantoine/react-native-music-control): A toolbox to control player over media session From 417388ab9e55cd2fb5916849eda0797fa1453f23 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Wed, 14 Sep 2022 23:57:46 +0200 Subject: [PATCH 05/15] chore: fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e53e697d..0e9847f8 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,6 @@ Version 6.0.0 is introducing dozens of breaking changes, mostly through updated - [Changelog](CHANGELOG.md) - [Contribution guide](CONTRIBUTING.md) - [Usefull Side Project](./docs/PROJECTS.md) -- [Adanced debugging](./docs/DEBUGGING.md) +- [Advanced debugging](./docs/DEBUGGING.md) **react-native-video** was originally created by [Brent Vatne](https://github.com/brentvatne) From a4900414087a841e733be69e8635394b9da146b7 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Thu, 15 Sep 2022 00:03:56 +0200 Subject: [PATCH 06/15] chore: fix copy past --- docs/PROJECTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/PROJECTS.md b/docs/PROJECTS.md index 34b1ef3a..fca32018 100644 --- a/docs/PROJECTS.md +++ b/docs/PROJECTS.md @@ -6,4 +6,4 @@ This page links other open source projects which can be usefull for your player - [react-native-corner-video](https://github.com/Lg0gs/react-native-corner-video): A floating video player # Other tools - - [react-native-corner-video](https://github.com/tanguyantoine/react-native-music-control): A toolbox to control player over media session + - [react-native-music-control](https://github.com/tanguyantoine/react-native-music-control): A toolbox to control player over media session From 12ed2a25fded20e205a5925905561a0205695ee7 Mon Sep 17 00:00:00 2001 From: olivier bouillet Date: Fri, 16 Sep 2022 08:44:53 +0200 Subject: [PATCH 07/15] doc: fix content comment position in doc & complete it --- API.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/API.md b/API.md index 01314ea8..def2b025 100644 --- a/API.md +++ b/API.md @@ -421,12 +421,12 @@ Determines whether to show player controls. * **true** - Show player controls Note on iOS, controls are always shown when in fullscreen mode. +Note on Android, native controls are available by default. +If needed, you can also add your controls or use a package like [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls) or [react-native-media-console](https://github.com/criszz77/react-native-media-console), see [Usefull Side Project](./docs/PROJECTS.md). ### contentStartTime The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution. -Note on Android, native controls are available by default. If needed, you can also add your controls or use a package like [react-native-video-controls]. - Platforms: Android, iOS #### disableFocus From 3b58fe9c072ddc7f07fd162f69492e50d207b064 Mon Sep 17 00:00:00 2001 From: Licaon_Kter Date: Mon, 19 Sep 2022 09:44:49 +0000 Subject: [PATCH 08/15] Exoplayer is in google() ref: https://github.com/google/ExoPlayer/releases/tag/r2.13.3 ref: https://mvnrepository.com/artifact/com.google.android.exoplayer/exoplayer?repo=google --- android/build.gradle | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index 310d97cd..d465c47b 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -27,8 +27,7 @@ android { } repositories { - // Remove this repository line after google releases to google() or mavenCentral() - maven { url "https://dl.google.com/android/maven2" } + google() } dependencies { From ec8d799be234b8b8891d8e980ed07fa2103b0331 Mon Sep 17 00:00:00 2001 From: Licaon_Kter Date: Wed, 21 Sep 2022 07:21:01 +0000 Subject: [PATCH 09/15] Add to changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 267f52b2..f2734ed0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,7 @@ ## Changelog +### Version 6.0.0-alpha4 +- Android: Switch Google's maven repository to default `google()` [#2860](https://github.com/react-native-video/react-native-video/pull/2860) + ### Version 6.0.0-alpha3 - fix ios build [#2854](https://gthub.com/react-native-video/react-native-video/pull/2854) From a7f0efd27f7f23e4ba5928095c8f77a5017cbb8d Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Mon, 26 Sep 2022 00:10:21 +0100 Subject: [PATCH 10/15] Fix iOS RCTSwiftLog naming collision with rive-react-native --- CHANGELOG.md | 5 ++++- .../RCTVideoSwiftLog.h} | 2 +- .../RCTVideoSwiftLog.m} | 4 ++-- .../RCTVideoSwiftLog.swift} | 10 +++++----- 4 files changed, 12 insertions(+), 9 deletions(-) rename ios/Video/{RCTSwiftLog/RCTSwiftLog.h => RCTVideoSwiftLog/RCTVideoSwiftLog.h} (93%) rename ios/Video/{RCTSwiftLog/RCTSwiftLog.m => RCTVideoSwiftLog/RCTVideoSwiftLog.m} (93%) rename ios/Video/{RCTSwiftLog/RCTSwiftLog.swift => RCTVideoSwiftLog/RCTVideoSwiftLog.swift} (83%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 267f52b2..0076a2d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ ## Changelog +### Version 6.0.0-alpha4 +- 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://gthub.com/react-native-video/react-native-video/pull/2854) +- Fix ios build [#2854](https://github.com/react-native-video/react-native-video/pull/2854) ### Version 6.0.0-alpha.2 diff --git a/ios/Video/RCTSwiftLog/RCTSwiftLog.h b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.h similarity index 93% rename from ios/Video/RCTSwiftLog/RCTSwiftLog.h rename to ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.h index 8f9deab7..f9978dc8 100644 --- a/ios/Video/RCTSwiftLog/RCTSwiftLog.h +++ b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.h @@ -1,6 +1,6 @@ #import -@interface RCTSwiftLog : NSObject +@interface RCTVideoSwiftLog : NSObject + (void)error:(NSString * _Nonnull)message file:(NSString * _Nonnull)file line:(NSUInteger)line; + (void)warn:(NSString * _Nonnull)message file:(NSString * _Nonnull)file line:(NSUInteger)line; diff --git a/ios/Video/RCTSwiftLog/RCTSwiftLog.m b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.m similarity index 93% rename from ios/Video/RCTSwiftLog/RCTSwiftLog.m rename to ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.m index 4e153846..61a38b19 100644 --- a/ios/Video/RCTSwiftLog/RCTSwiftLog.m +++ b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.m @@ -1,8 +1,8 @@ #import -#import "RCTSwiftLog.h" +#import "RCTVideoSwiftLog.h" -@implementation RCTSwiftLog +@implementation RCTVideoSwiftLog + (void)info:(NSString *)message file:(NSString *)file line:(NSUInteger)line { diff --git a/ios/Video/RCTSwiftLog/RCTSwiftLog.swift b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.swift similarity index 83% rename from ios/Video/RCTSwiftLog/RCTSwiftLog.swift rename to ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.swift index ec39d9b1..99ca8e8a 100644 --- a/ios/Video/RCTSwiftLog/RCTSwiftLog.swift +++ b/ios/Video/RCTVideoSwiftLog/RCTVideoSwiftLog.swift @@ -26,23 +26,23 @@ */ func RCTLogError(_ message: String, _ file: String=#file, _ line: UInt=#line) { - RCTSwiftLog.error(message, file: file, line: line) + RCTVideoSwiftLog.error(message, file: file, line: line) } func RCTLogWarn(_ message: String, _ file: String=#file, _ line: UInt=#line) { - RCTSwiftLog.warn(message, file: file, line: line) + RCTVideoSwiftLog.warn(message, file: file, line: line) } func RCTLogInfo(_ message: String, _ file: String=#file, _ line: UInt=#line) { - RCTSwiftLog.info(message, file: file, line: line) + RCTVideoSwiftLog.info(message, file: file, line: line) } func RCTLog(_ message: String, _ file: String=#file, _ line: UInt=#line) { - RCTSwiftLog.log(message, file: file, line: line) + RCTVideoSwiftLog.log(message, file: file, line: line) } func RCTLogTrace(_ message: String, _ file: String=#file, _ line: UInt=#line) { - RCTSwiftLog.trace(message, file: file, line: line) + RCTVideoSwiftLog.trace(message, file: file, line: line) } func DebugLog(_ message: String) { From 1406b9ad08ce9590182cd04a740ac6611eeb9443 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Mon, 26 Sep 2022 01:51:18 +0100 Subject: [PATCH 11/15] Add focusable prop --- API.md | 9 +++++++++ CHANGELOG.md | 1 + Video.js | 1 + .../brentvatne/exoplayer/ReactExoplayerView.java | 16 ++++++++++++---- .../exoplayer/ReactExoplayerViewManager.java | 6 ++++++ 5 files changed, 29 insertions(+), 4 deletions(-) diff --git a/API.md b/API.md index def2b025..cb781e2c 100644 --- a/API.md +++ b/API.md @@ -277,6 +277,7 @@ var styles = StyleSheet.create({ |[disableDisconnectError](#disableDisconnectError)|Android| |[filter](#filter)|iOS| |[filterEnabled](#filterEnabled)|iOS| +|[focusable](#focusable)|Android| |[fullscreen](#fullscreen)|iOS| |[fullscreenAutorotate](#fullscreenautorotate)|iOS| |[fullscreenOrientation](#fullscreenorientation)|iOS| @@ -486,6 +487,14 @@ Enable video filter. Platforms: iOS +#### Focusable +Whether this video view should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. +* **false** - Makes view unfocusable +* **true (default)** - Makes view focusable + +Platforms: Android + + #### fullscreen Controls whether the player enters fullscreen on play. * **false (default)** - Don't display the video in fullscreen diff --git a/CHANGELOG.md b/CHANGELOG.md index f2734ed0..3f207b56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## Changelog ### Version 6.0.0-alpha4 - 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) ### Version 6.0.0-alpha3 - fix ios build [#2854](https://gthub.com/react-native-video/react-native-video/pull/2854) diff --git a/Video.js b/Video.js index 287573a1..71fa94a3 100644 --- a/Video.js +++ b/Video.js @@ -483,6 +483,7 @@ Video.propTypes = { reportBandwidth: PropTypes.bool, contentStartTime: PropTypes.number, disableFocus: PropTypes.bool, + focusable: PropTypes.bool, disableBuffering: PropTypes.bool, controls: PropTypes.bool, audioOnly: PropTypes.bool, diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index 2f663197..6d94dc6c 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -190,6 +190,7 @@ class ReactExoplayerView extends FrameLayout implements private Dynamic textTrackValue; private ReadableArray textTracks; private boolean disableFocus; + private boolean focusable = true; private boolean disableBuffering; private long contentStartTime = -1L; private boolean disableDisconnectError; @@ -284,6 +285,8 @@ class ReactExoplayerView extends FrameLayout implements addView(exoPlayerView, 0, layoutParams); + exoPlayerView.setFocusable(this.focusable); + mainHandler = new Handler(); } @@ -571,7 +574,7 @@ class ReactExoplayerView extends FrameLayout implements } } }, 1); - + } private void initializePlayerCore(ReactExoplayerView self) { @@ -1119,7 +1122,7 @@ class ReactExoplayerView extends FrameLayout implements WritableArray videoTracks = Arguments.createArray(); MappingTrackSelector.MappedTrackInfo info = trackSelector.getCurrentMappedTrackInfo(); - + if (info == null || trackRendererIndex == C.INDEX_UNSET) { return videoTracks; } @@ -1578,7 +1581,7 @@ class ReactExoplayerView extends FrameLayout implements for (int j = 0; j < group.length; j++) { allTracks.add(j); } - + // Valiate list of all tracks and add only supported formats int supportedFormatLength = 0; ArrayList supportedTrackList = new ArrayList(); @@ -1737,13 +1740,18 @@ class ReactExoplayerView extends FrameLayout implements this.disableFocus = disableFocus; } + public void setFocusable(boolean focusable) { + this.focusable = focusable; + exoPlayerView.setFocusable(this.focusable); + } + public void setBackBufferDurationMs(int backBufferDurationMs) { Runtime runtime = Runtime.getRuntime(); long usedMemory = runtime.totalMemory() - runtime.freeMemory(); long freeMemory = runtime.maxMemory() - usedMemory; long reserveMemory = (long)minBackBufferMemoryReservePercent * runtime.maxMemory(); if (reserveMemory > freeMemory) { - // We don't have enough memory in reserve so we will + // We don't have enough memory in reserve so we will Log.w("ExoPlayer Warning", "Not enough reserve memory, setting back buffer to 0ms to reduce memory pressure!"); this.backBufferDurationMs = 0; return; diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java index ce1d6a8c..d9297a71 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java @@ -70,6 +70,7 @@ public class ReactExoplayerViewManager extends ViewGroupManager Date: Wed, 28 Sep 2022 20:45:49 +0100 Subject: [PATCH 12/15] Readme updates - Add warning and link to documentation for 5.2.x - Explain how to install version 6 from npm --- README.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0e9847f8..a992aefd 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,27 @@ # react-native-video -#### A `