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

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 boolean getUseDeveloperSupport() {
         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

@@ -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: {

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: {