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

* fix: revert last media3 upgrade --------- Co-authored-by: olivier <olivier.bouillet@ifeelsmart.com>
2023-11-22 15:03:57 +01:00 · 2023-11-22 15:03:57 +01:00 · 5beef383cb
commit 5beef383cb
parent 11f62013e3
10 changed files with 760 additions and 1563 deletions
--- a/android/gradle.properties
+++ b/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
--- a/examples/basic/.eslintrc
+++ b/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
+  }
+}
--- a/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java
+++ b/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;
--- a/examples/basic/package.json
+++ b/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"
  }
--- a/examples/basic/src/MultiValueControl.tsx
+++ b/examples/basic/src/MultiValueControl.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, {FunctionComponent} from 'react';

 import {
  StyleSheet,
@ -7,21 +7,26 @@ 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
-*/
+ * MultiValueControl displays a list clickable text view
+ */

 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}>
-      {values.map((value: string | number) => {
-          const _style = value === selected ? selectedStyle : unselectedStyle
-          return (
-            <TouchableOpacity
-              key={value}
-              onPress={() => {
-                onPress?.(value)
-              }}>
+  return (
+    <View style={styles.container}>
+      {values.map((value: MultiValueControlPropType) => {
+        const _style = value === selected ? selectedStyle : unselectedStyle;
+        return (
+          <TouchableOpacity
+            key={value}
+            onPress={() => {
+              onPress?.(value);
+            }}>
            <Text style={_style}>{value}</Text>
-            </TouchableOpacity>)
-        })}
-      </View>
-}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

 const styles = StyleSheet.create({
  option: {
--- a/examples/basic/src/ToggleControl.tsx
+++ b/examples/basic/src/ToggleControl.tsx
@ -9,23 +9,29 @@ import {
 } from 'react-native';

 /*
-* ToggleControl displays a 2 states clickable text
-*/
+ * ToggleControl displays a 2 states clickable text
+ */

 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'},
@ -36,17 +42,16 @@ const ToggleControl = ({ isSelected, selectedText, unselectedText, text, onPress
    {fontWeight: 'normal'},
  ]);

-    const style = isSelected ? selectedStyle : unselectedStyle;
-    const _text = text ? text : isSelected ? selectedText : unselectedText;
-    return (
-      <View style={styles.resizeModeControl}>
-      <TouchableOpacity
-        onPress={onPress}>
+  const style = isSelected ? selectedStyle : unselectedStyle;
+  const _text = text ? text : isSelected ? selectedText : unselectedText;
+  return (
+    <View style={styles.resizeModeControl}>
+      <TouchableOpacity onPress={onPress}>
        <Text style={style}>{_text}</Text>
      </TouchableOpacity>
-      </View>
-    );
-}
+    </View>
+  );
+};

 const styles = StyleSheet.create({
  controlOption: {
--- a/examples/basic/src/VideoPlayer.tsx
+++ b/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,9 +147,8 @@ class VideoPlayer extends Component {
    },
  ];

-  
  srcList = this.srcAllPlatformList.concat(
-      Platform.OS === 'android' ? this.srcAndroidList : this.srcIosList,
+    Platform.OS === 'android' ? this.srcAndroidList : this.srcIosList,
  );

  video?: VideoRef;
@ -135,11 +162,11 @@ class VideoPlayer extends Component {
            this.toast(
              true,
              'Widevine level: ' +
-              widevineLevel +
-              '\n hevc: ' +
-              hevc +
-              '\n avc: ' +
-              avc,
+                widevineLevel +
+                '\n hevc: ' +
+                hevc +
+                '\n avc: ' +
+                avc,
            );
          },
        );
@ -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,8 +561,8 @@ class VideoPlayer extends Component {
                onPress={() => {
                  this.channelUp();
                }}
-                text='ChUp'
-              /> 
+                text="ChUp"
+              />
            </View>
            <View style={styles.bottomControls}>
              <View style={styles.generalControls}>
@ -545,38 +572,38 @@ class VideoPlayer extends Component {
                      onPress={() => {
                        this.popupInfo();
                      }}
-                      text='decoderInfo'
+                      text="decoderInfo"
                    />
-                </View>
+                  </View>
                ) : null}
                <ToggleControl
                  isSelected={this.state.paused}
                  onPress={() => {
                    this.setState({paused: !this.state.paused});
                  }}
-                  selectedText='pause'
-                  unselectedText='playing'
+                  selectedText="pause"
+                  unselectedText="playing"
                />
                <ToggleControl
                  isSelected={this.state.loop}
                  onPress={() => {
                    this.setState({loop: !this.state.loop});
                  }}
-                  selectedText='loop enable'
-                  unselectedText='loop disable'
+                  selectedText="loop enable"
+                  unselectedText="loop disable"
                />
                <ToggleControl
                  onPress={() => {
                    this.toggleFullscreen();
                  }}
-                  text='fullscreen'
+                  text="fullscreen"
                />
                <ToggleControl
                  onPress={() => {
                    this.toggleDecoration();
                  }}
-                  text='decoration'
-                /> 
+                  text="decoration"
+                />
              </View>
              <View style={styles.generalControls}>
                <MultiValueControl
@ -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}
--- a/examples/basic/src/VideoPlayer.windows.tsx
+++ b/examples/basic/src/VideoPlayer.windows.tsx
@ -1,17 +1,16 @@
 'use strict';

-import React, {
-  Component
-} from 'react';
+import 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}) }}>
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
-          {rate}x
-        </Text>
+      <TouchableOpacity
+        onPress={() => {
+          this.setState({rate: rate});
+        }}>
+        <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}) }}>
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
-          {resizeMode}
-        </Text>
+      <TouchableOpacity
+        onPress={() => {
+          this.setState({resizeMode: resizeMode});
+        }}>
+        <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}) }}>
-        <Text style={[styles.controlOption, {fontWeight: isSelected ? "bold" : "normal"}]}>
-          {volume * 100}%
-        </Text>
+      <TouchableOpacity
+        onPress={() => {
+          this.setState({volume: volume});
+        }}>
+        <Text style={style}>{volume * 100}%</Text>
      </TouchableOpacity>
-    )
+    );
  }

  render() {
@ -88,18 +102,26 @@ class VideoPlayer extends Component {

    return (
      <View style={styles.container}>
-        <TouchableOpacity 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}
-                 volume={this.state.volume}
-                 muted={this.state.muted}
-                 resizeMode={this.state.resizeMode}
-                 onLoad={this.onLoad}
-                 onProgress={this.onProgress}
-                 onEnd={() => { console.log('Done!') }}
-                 repeat={true} />
+        <TouchableOpacity
+          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}
+            volume={this.state.volume}
+            muted={this.state.muted}
+            resizeMode={this.state.resizeMode}
+            onLoad={this.onLoad}
+            onProgress={this.onProgress}
+            onEnd={() => {
+              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 style={[styles.innerProgressRemaining, {flex: flexRemaining}]} />
+              <View
+                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;
--- a/examples/basic/tsconfig.json
+++ b/examples/basic/tsconfig.json
@ -5,6 +5,6 @@
      "react-native-video": ["../../src/index"]
    }
  },
-  "include": ["src"],
-  "exclude": ["node_modules"]
+  "include": ["src", "**/*.js"],
+  "exclude": ["node_modules"],
 }
--- a/examples/basic/yarn.lock
+++ b/examples/basic/yarn.lock