Merge branch 'master' into fix-ios-rctswiftlog-collision

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)

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 <View />
   }
 
+  renderTopControl() {
+    return (<>
+      <Text style={[styles.controlOption]}>
+        {this.srcList[this.state.srcListId]?.description || 'local file'}
+      </Text>
+      <View >
+        <TouchableOpacity
+          onPress={() => {
+            this.toggleControls()
+          }}
+        >
+          <Text style={[styles.leftRightControlOption]}>{this.state.showRNVControls ? 'Hide controls' : 'Show controls'}</Text>
+        </TouchableOpacity>
+      </View>
+    </>)
+  }
+
+
   renderOverlay() {
     return (
       <>
         {this.IndicatorLoadingView()}
         <View style={styles.topControls}>
-          <Text style={[styles.controlOption]}>
-            {this.srcList[this.state.srcListId]?.description || 'local file'}
-          </Text>
+          <View style={styles.resizeModeControl}>{this.renderTopControl()}</View>
         </View>
-        <View style={styles.leftControls}>
-          <View style={styles.resizeModeControl}>{this.renderLeftControl()}</View>
-        </View>
-        <View style={styles.rightControls}>
-          <View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
-        </View>
-        <View style={styles.bottomControls}>
-          <View style={styles.generalControls}>
-            <View style={styles.generalControls}>
-              <View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
-            </View>
-            <View style={styles.resizeModeControl}>{this.renderPause()}</View>
-            <View style={styles.resizeModeControl}>
-              {this.renderRepeatModeControl()}
-            </View>
-            <View style={styles.resizeModeControl}>
-              {this.renderFullScreenControl()}
-            </View>
-            <View style={styles.resizeModeControl}>
-              {this.renderDecorationsControl()}
-            </View>
-          </View>
-          <View style={styles.generalControls}>
-            <View style={styles.rateControl}>
-              {this.renderRateControl(0.25)}
-              {this.renderRateControl(0.5)}
-              {this.renderRateControl(1.0)}
-              {this.renderRateControl(1.5)}
-              {this.renderRateControl(2.0)}
-            </View>
+        {!this.state.showRNVControls ? (
+          <>
+            <View style={styles.leftControls}>
+              <View style={styles.resizeModeControl}>{this.renderLeftControl()}</View>
+            </View><View style={styles.rightControls}>
+              <View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
+            </View><View style={styles.bottomControls}>
+              <View style={styles.generalControls}>
+                <View style={styles.generalControls}>
+                  <View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
+                </View>
+                <View style={styles.resizeModeControl}>{this.renderPause()}</View>
+                <View style={styles.resizeModeControl}>
+                  {this.renderRepeatModeControl()}
+                </View>
+                <View style={styles.resizeModeControl}>
+                  {this.renderFullScreenControl()}
+                </View>
+                <View style={styles.resizeModeControl}>
+                  {this.renderDecorationsControl()}
+                </View>
+              </View>
+              <View style={styles.generalControls}>
+                <View style={styles.rateControl}>
+                  {this.renderRateControl(0.25)}
+                  {this.renderRateControl(0.5)}
+                  {this.renderRateControl(1.0)}
+                  {this.renderRateControl(1.5)}
+                  {this.renderRateControl(2.0)}
+                </View>
 
-            <View style={styles.volumeControl}>
-              {this.renderVolumeControl(0.5)}
-              {this.renderVolumeControl(1)}
-              {this.renderVolumeControl(1.5)}
-            </View>
+                <View style={styles.volumeControl}>
+                  {this.renderVolumeControl(0.5)}
+                  {this.renderVolumeControl(1)}
+                  {this.renderVolumeControl(1.5)}
+                </View>
 
-            <View style={styles.resizeModeControl}>
-              {this.renderResizeModeControl('cover')}
-              {this.renderResizeModeControl('contain')}
-              {this.renderResizeModeControl('stretch')}
-            </View>
-          </View>
-          {this.renderSeekBar()}
-          <View style={styles.generalControls}>
-            <Text style={styles.controlOption}>AudioTrack</Text>
-            {this.state.audioTracks?.length <= 0 ? (
-              <Text style={styles.controlOption}>empty</Text>
-            ) : (
-              <Picker
-                style={styles.picker}
-                selectedValue={this.state.selectedAudioTrack?.value}
-                onValueChange={(itemValue, itemIndex) => {
-                  console.log('on audio value change ' + itemValue)
-                  this.setState({
-                    selectedAudioTrack: {
-                      type: 'language',
-                      value: itemValue,
-                    },
-                  })
-                }}
-              >
-                {this.state.audioTracks.map((track) => {
-                  return (
-                    <Picker.Item
-                      label={track.language}
-                      value={track.language}
-                      key={track.language}
-                    />
-                  )
-                })}
-              </Picker>
-            )}
-            <Text style={styles.controlOption}>TextTrack</Text>
-            {this.state.textTracks?.length <= 0 ? (
-              <Text style={styles.controlOption}>empty</Text>
-            ) : (
-              <Picker
-                style={styles.picker}
-                selectedValue={this.state.selectedTextTrack?.value}
-                onValueChange={(itemValue, itemIndex) => {
-                  console.log('on value change ' + itemValue)
-                  this.setState({
-                    selectedTextTrack: {
-                      type: 'language',
-                      value: itemValue,
-                    },
-                  })
-                }}
-              >
-                <Picker.Item label={'none'} value={'none'} key={'none'} />
+                <View style={styles.resizeModeControl}>
+                  {this.renderResizeModeControl('cover')}
+                  {this.renderResizeModeControl('contain')}
+                  {this.renderResizeModeControl('stretch')}
+                </View>
+              </View>
+              {this.renderSeekBar()}
+              <View style={styles.generalControls}>
+                <Text style={styles.controlOption}>AudioTrack</Text>
+                {this.state.audioTracks?.length <= 0 ? (
+                  <Text style={styles.controlOption}>empty</Text>
+                ) : (
+                  <Picker
+                    style={styles.picker}
+                    selectedValue={this.state.selectedAudioTrack?.value}
+                    onValueChange={(itemValue, itemIndex) => {
+                      console.log('on audio value change ' + itemValue);
+                      this.setState({
+                        selectedAudioTrack: {
+                          type: 'language',
+                          value: itemValue,
+                        },
+                      });
+                    }}
+                  >
+                    {this.state.audioTracks.map((track) => {
+                      return (
+                        <Picker.Item
+                          label={track.language}
+                          value={track.language}
+                          key={track.language} />
+                      );
+                    })}
+                  </Picker>
+                )}
+                <Text style={styles.controlOption}>TextTrack</Text>
+                {this.state.textTracks?.length <= 0 ? (
+                  <Text style={styles.controlOption}>empty</Text>
+                ) : (
+                  <Picker
+                    style={styles.picker}
+                    selectedValue={this.state.selectedTextTrack?.value}
+                    onValueChange={(itemValue, itemIndex) => {
+                      console.log('on value change ' + itemValue);
+                      this.setState({
+                        selectedTextTrack: {
+                          type: 'language',
+                          value: itemValue,
+                        },
+                      });
+                    }}
+                  >
+                    <Picker.Item label={'none'} value={'none'} key={'none'} />
 
-                {this.state.textTracks.map((track) => (
-                  <Picker.Item
-                    label={track.language}
-                    value={track.language}
-                    key={track.language}
-                  />
-                ))}
-              </Picker>
-            )}
-          </View>
-        </View>
+                    {this.state.textTracks.map((track) => (
+                      <Picker.Item
+                        label={track.language}
+                        value={track.language}
+                        key={track.language} />
+                    ))}
+                  </Picker>
+                )}
+              </View>
+            </View></>
+        ) : 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}

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"