fix(android): revert media3 update, back to 1.1.1 (#3369)

* fix: revert last media3 upgrade

---------

Co-authored-by: olivier <olivier.bouillet@ifeelsmart.com>

android/gradle.properties

@@ -4,5 +4,5 @@ RNVideo_targetSdkVersion=31
 RNVideo_compileSdkVersion=31
 RNVideo_ndkversion=21.4.7075529
 RNVideo_buildToolsVersion=30.0.2
-RNVideo_media3Version=1.2.0
+RNVideo_media3Version=1.1.1
 RNVideo_RNVUseExoplayerIMA=false

examples/basic/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "@react-native",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parserOptions": {
+    "requireConfigFile": false
+  }
+}

examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java

@@ -29,7 +29,6 @@ public class MainApplication extends Application implements ReactApplication {
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
-          packages.add(new ReactVideoPackage());
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
           return packages;

examples/basic/package.json

@@ -34,6 +34,9 @@
     "prettier": "^2.4.1",
     "typescript": "4.8.4"
   },
+  "resolutions": {
+    "@types/react": "^18.0.24"
+  },
   "engines": {
     "node": ">=16"
   }

examples/basic/src/MultiValueControl.tsx

@@ -7,6 +7,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import {ResizeMode} from 'react-native-video';
+
+export type MultiValueControlPropType = number | string | ResizeMode;
 
 /*
  * MultiValueControl displays a list clickable text view
@@ -14,14 +17,16 @@ import {
 
 interface MultiValueControlType<T> {
   // a list a string or number to be displayed
-  values: Array<T>
+  values: Array<T>;
   // The selected value in values
-  selected?: T
+  selected?: T;
   // callback to press onPress
-  onPress: (arg: T) => any
+  onPress: (arg: MultiValueControlPropType) => void;
 }
 
-const MultiValueControl: FunctionComponent<MultiValueControlType<any>> = ({ values, selected, onPress }) => {
+const MultiValueControl: FunctionComponent<
+  MultiValueControlType<MultiValueControlPropType>
+> = ({values, selected, onPress}) => {
   const selectedStyle: TextStyle = StyleSheet.flatten([
     styles.option,
     {fontWeight: 'bold'},
@@ -32,20 +37,23 @@ const MultiValueControl: FunctionComponent<MultiValueControlType<any>> = ({ valu
     {fontWeight: 'normal'},
   ]);
 
-    return <View style={styles.container}>
+  return (
-      {values.map((value: string | number) => {
+    <View style={styles.container}>
-          const _style = value === selected ? selectedStyle : unselectedStyle
+      {values.map((value: MultiValueControlPropType) => {
+        const _style = value === selected ? selectedStyle : unselectedStyle;
         return (
           <TouchableOpacity
             key={value}
             onPress={() => {
-                onPress?.(value)
+              onPress?.(value);
             }}>
             <Text style={_style}>{value}</Text>
-            </TouchableOpacity>)
+          </TouchableOpacity>
+        );
       })}
     </View>
-}
+  );
+};
 
 const styles = StyleSheet.create({
   option: {

examples/basic/src/ToggleControl.tsx

@@ -14,18 +14,24 @@ import {
 
 interface ToggleControlType {
   // boolean indicating if text is selected state
-  isSelected?: boolean
+  isSelected?: boolean;
   // value of text when selected
-  selectedText?: string
+  selectedText?: string;
   // value of text when NOT selected
-  unselectedText?: string
+  unselectedText?: string;
   // default text if no only one text field is needed
-  text?: string
+  text?: string;
   // callback called when pressing the component
-  onPress: () => any
+  onPress: () => void;
 }
 
-const ToggleControl = ({ isSelected, selectedText, unselectedText, text, onPress }: ToggleControlType) => {
+const ToggleControl = ({
+  isSelected,
+  selectedText,
+  unselectedText,
+  text,
+  onPress,
+}: ToggleControlType) => {
   const selectedStyle: TextStyle = StyleSheet.flatten([
     styles.controlOption,
     {fontWeight: 'bold'},
@@ -40,13 +46,12 @@ const ToggleControl = ({ isSelected, selectedText, unselectedText, text, onPress
   const _text = text ? text : isSelected ? selectedText : unselectedText;
   return (
     <View style={styles.resizeModeControl}>
-      <TouchableOpacity
+      <TouchableOpacity onPress={onPress}>
-        onPress={onPress}>
         <Text style={style}>{_text}</Text>
       </TouchableOpacity>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   controlOption: {

examples/basic/src/VideoPlayer.tsx

@@ -30,13 +30,42 @@ import Video, {
   OnAudioFocusChangedData,
   OnVideoErrorData,
   VideoRef,
-  ResizeMode
+  ResizeMode,
+  SelectedTrack,
 } from 'react-native-video';
 import ToggleControl from './ToggleControl';
-import MultiValueControl from './MultiValueControl';
+import MultiValueControl, {
+  MultiValueControlPropType,
+} from './MultiValueControl';
+
+interface StateType {
+  rate: number;
+  volume: number;
+  muted: boolean;
+  resizeMode: ResizeMode;
+  duration: number;
+  currentTime: number;
+  videoWidth: number;
+  videoHeight: number;
+  paused: boolean;
+  fullscreen: true;
+  decoration: true;
+  isLoading: boolean;
+  seekerFillWidth: number;
+  seekerPosition: number;
+  seekerOffset: number;
+  seeking: boolean;
+  audioTracks: Array<AudioTrack>;
+  textTracks: Array<TextTrack>;
+  selectedAudioTrack: SelectedTrack | undefined;
+  selectedTextTrack: SelectedTrack | undefined;
+  srcListId: number;
+  loop: boolean;
+  showRNVControls: boolean;
+}
 
 class VideoPlayer extends Component {
-  state = {
+  state: StateType = {
     rate: 1,
     volume: 1,
     muted: false,
@@ -86,12 +115,11 @@ class VideoPlayer extends Component {
     },
     {
       description: 'another bunny (can be saved)',
-      uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4'
+      uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4',
-    }
+    },
   ];
 
-  srcIosList = [
+  srcIosList = [];
-  ]
 
   srcAndroidList = [
     {
@@ -119,7 +147,6 @@ class VideoPlayer extends Component {
     },
   ];
 
-  
   srcList = this.srcAllPlatformList.concat(
     Platform.OS === 'android' ? this.srcAndroidList : this.srcIosList,
   );
@@ -276,7 +303,7 @@ class VideoPlayer extends Component {
     }
   }
 
-  goToChannel(channel: any) {
+  goToChannel(channel: number) {
     this.setState({
       srcListId: channel,
       duration: 0.0,
@@ -500,15 +527,15 @@ class VideoPlayer extends Component {
     );
   }
 
-  onRateSelected = (value: string | number) => {
+  onRateSelected = (value: MultiValueControlPropType) => {
     this.setState({rate: value});
-  }
+  };
-  onVolumeSelected = (value: string | number) => {
+  onVolumeSelected = (value: MultiValueControlPropType) => {
     this.setState({volume: value});
-  }
+  };
-  onResizeModeSelected = (value: ResizeMode) => {
+  onResizeModeSelected = (value: MultiValueControlPropType) => {
     this.setState({resizeMode: value});
-  }
+  };
 
   renderOverlay() {
     return (
@@ -526,7 +553,7 @@ class VideoPlayer extends Component {
                 onPress={() => {
                   this.channelDown();
                 }}
-                text='ChDown'
+                text="ChDown"
               />
             </View>
             <View style={styles.rightControls}>
@@ -534,7 +561,7 @@ class VideoPlayer extends Component {
                 onPress={() => {
                   this.channelUp();
                 }}
-                text='ChUp'
+                text="ChUp"
               />
             </View>
             <View style={styles.bottomControls}>
@@ -545,7 +572,7 @@ class VideoPlayer extends Component {
                       onPress={() => {
                         this.popupInfo();
                       }}
-                      text='decoderInfo'
+                      text="decoderInfo"
                     />
                   </View>
                 ) : null}
@@ -554,28 +581,28 @@ class VideoPlayer extends Component {
                   onPress={() => {
                     this.setState({paused: !this.state.paused});
                   }}
-                  selectedText='pause'
+                  selectedText="pause"
-                  unselectedText='playing'
+                  unselectedText="playing"
                 />
                 <ToggleControl
                   isSelected={this.state.loop}
                   onPress={() => {
                     this.setState({loop: !this.state.loop});
                   }}
-                  selectedText='loop enable'
+                  selectedText="loop enable"
-                  unselectedText='loop disable'
+                  unselectedText="loop disable"
                 />
                 <ToggleControl
                   onPress={() => {
                     this.toggleFullscreen();
                   }}
-                  text='fullscreen'
+                  text="fullscreen"
                 />
                 <ToggleControl
                   onPress={() => {
                     this.toggleDecoration();
                   }}
-                  text='decoration'
+                  text="decoration"
                 />
               </View>
               <View style={styles.generalControls}>
@@ -590,21 +617,27 @@ class VideoPlayer extends Component {
                   selected={this.state.volume}
                 />
                 <MultiValueControl
-                  values={[ResizeMode.COVER, ResizeMode.CONTAIN, ResizeMode.STRETCH]}
+                  values={[
+                    ResizeMode.COVER,
+                    ResizeMode.CONTAIN,
+                    ResizeMode.STRETCH,
+                  ]}
                   onPress={this.onResizeModeSelected}
                   selected={this.state.resizeMode}
                 />
                 <ToggleControl
                   isSelected={this.state.paused}
                   onPress={() => {
-                      this.video?.save({}).then((response) => {
+                    this.video
+                      ?.save({})
+                      .then(response => {
                         console.log('Downloaded URI', response);
-                      }).catch((error) => {
+                      })
-                        console.log('error during save ', error)
+                      .catch(error => {
+                        console.log('error during save ', error);
                       });
-                    }
+                  }}
-                  }
+                  text="save"
-                  text='save'
                 />
               </View>
               {this.renderSeekBar()}
@@ -616,7 +649,7 @@ class VideoPlayer extends Component {
                   <Picker
                     style={styles.picker}
                     selectedValue={this.state.selectedAudioTrack?.value}
-                    onValueChange={(itemValue, itemIndex) => {
+                    onValueChange={itemValue => {
                       console.log('on audio value change ' + itemValue);
                       this.setState({
                         selectedAudioTrack: {
@@ -643,7 +676,7 @@ class VideoPlayer extends Component {
                   <Picker
                     style={styles.picker}
                     selectedValue={this.state.selectedTextTrack?.value}
-                    onValueChange={(itemValue, itemIndex) => {
+                    onValueChange={itemValue => {
                       console.log('on value change ' + itemValue);
                       this.setState({
                         selectedTextTrack: {
@@ -701,7 +734,7 @@ class VideoPlayer extends Component {
           onAudioBecomingNoisy={this.onAudioBecomingNoisy}
           onAudioFocusChanged={this.onAudioFocusChanged}
           onLoadStart={this.onVideoLoadStart}
-          onVideoAspectRatio={this.onAspectRatio}
+          onAspectRatio={this.onAspectRatio}
           onReadyForDisplay={this.onReadyForDisplay}
           onBuffer={this.onVideoBuffer}
           repeat={this.state.loop}

examples/basic/src/VideoPlayer.windows.tsx

@@ -1,17 +1,16 @@
 'use strict';
 
-import React, {
+import React, {Component} from 'react';
-  Component
-} from 'react';
 
 import {
   StyleSheet,
   Text,
+  TextStyle,
   TouchableOpacity,
   View,
 } from 'react-native';
 
-import Video from 'react-native-video';
+import Video, {ResizeMode} from 'react-native-video';
 
 class VideoPlayer extends Component {
   constructor(props: any) {
@@ -24,10 +23,10 @@ class VideoPlayer extends Component {
     rate: 1,
     volume: 1,
     muted: false,
-    resizeMode: 'contain',
+    resizeMode: ResizeMode.CONTAIN,
     duration: 0.0,
     currentTime: 0.0,
-    paused: 0,
+    paused: false,
   };
 
   onLoad(data: any) {
@@ -47,39 +46,54 @@ class VideoPlayer extends Component {
   }
 
   renderRateControl(rate: number) {
-    const isSelected = (this.state.rate == rate);
+    const isSelected = this.state.rate === rate;
+    const style: TextStyle = StyleSheet.flatten([
+      styles.controlOption,
+      {fontWeight: isSelected ? 'bold' : 'normal'},
+    ]);
 
     return (
-      <TouchableOpacity onPress={() => { this.setState({rate: rate}) }}>
+      <TouchableOpacity
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
+        onPress={() => {
-          {rate}x
+          this.setState({rate: rate});
-        </Text>
+        }}>
+        <Text style={style}>{rate}x</Text>
       </TouchableOpacity>
-    )
+    );
   }
 
   renderResizeModeControl(resizeMode: string) {
-    const isSelected = (this.state.resizeMode == resizeMode);
+    const isSelected = this.state.resizeMode === resizeMode;
+    const style: TextStyle = StyleSheet.flatten([
+      styles.controlOption,
+      {fontWeight: isSelected ? 'bold' : 'normal'},
+    ]);
 
     return (
-      <TouchableOpacity onPress={() => { this.setState({resizeMode: resizeMode}) }}>
+      <TouchableOpacity
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
+        onPress={() => {
-          {resizeMode}
+          this.setState({resizeMode: resizeMode});
-        </Text>
+        }}>
+        <Text style={style}>{resizeMode}</Text>
       </TouchableOpacity>
-    )
+    );
   }
 
   renderVolumeControl(volume: number) {
-    const isSelected = (this.state.volume == volume);
+    const isSelected = this.state.volume === volume;
+    const style: TextStyle = StyleSheet.flatten([
+      styles.controlOption,
+      {fontWeight: isSelected ? 'bold' : 'normal'},
+    ]);
 
     return (
-      <TouchableOpacity onPress={() => { this.setState({volume: volume}) }}>
+      <TouchableOpacity
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
+        onPress={() => {
-          {volume * 100}%
+          this.setState({volume: volume});
-        </Text>
+        }}>
+        <Text style={style}>{volume * 100}%</Text>
       </TouchableOpacity>
-    )
+    );
   }
 
   render() {
@@ -88,8 +102,13 @@ class VideoPlayer extends Component {
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={styles.fullScreen} onPress={() => {this.setState({paused: !this.state.paused})}}>
+        <TouchableOpacity
-          <Video source={require('./broadchurch.mp4')}
+          style={styles.fullScreen}
+          onPress={() => {
+            this.setState({paused: !this.state.paused});
+          }}>
+          <Video
+            source={require('./broadchurch.mp4')}
             style={styles.fullScreen}
             rate={this.state.rate}
             paused={this.state.paused}
@@ -98,8 +117,11 @@ class VideoPlayer extends Component {
             resizeMode={this.state.resizeMode}
             onLoad={this.onLoad}
             onProgress={this.onProgress}
-                 onEnd={() => { console.log('Done!') }}
+            onEnd={() => {
-                 repeat={true} />
+              console.log('Done!');
+            }}
+            repeat={true}
+          />
         </TouchableOpacity>
 
         <View style={styles.controls}>
@@ -127,8 +149,12 @@ class VideoPlayer extends Component {
 
           <View style={styles.trackingControls}>
             <View style={styles.progress}>
-              <View style={[styles.innerProgressCompleted, {flex: flexCompleted}]} />
+              <View
-              <View style={[styles.innerProgressRemaining, {flex: flexRemaining}]} />
+                style={[styles.innerProgressCompleted, {flex: flexCompleted}]}
+              />
+              <View
+                style={[styles.innerProgressRemaining, {flex: flexRemaining}]}
+              />
             </View>
           </View>
         </View>
@@ -137,7 +163,6 @@ class VideoPlayer extends Component {
   }
 }
 
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -153,7 +178,7 @@ const styles = StyleSheet.create({
     right: 0,
   },
   controls: {
-    backgroundColor: "transparent",
+    backgroundColor: 'transparent',
     borderRadius: 5,
     position: 'absolute',
     bottom: 20,
@@ -200,7 +225,7 @@ const styles = StyleSheet.create({
   controlOption: {
     alignSelf: 'center',
     fontSize: 11,
-    color: "white",
+    color: 'white',
     paddingLeft: 2,
     paddingRight: 2,
     lineHeight: 12,
@@ -212,4 +237,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
-export default VideoPlayer
+export default VideoPlayer;

examples/basic/tsconfig.json

@@ -5,6 +5,6 @@
       "react-native-video": ["../../src/index"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "**/*.js"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }