From 5beef383cba13d3ac471bfde27e4acfaa19adfec Mon Sep 17 00:00:00 2001 From: Olivier Bouillet <62574056+freeboub@users.noreply.github.com> Date: Wed, 22 Nov 2023 15:03:57 +0100 Subject: [PATCH] fix(android): revert media3 update, back to 1.1.1 (#3369) * fix: revert last media3 upgrade --------- Co-authored-by: olivier --- android/gradle.properties | 2 +- examples/basic/.eslintrc | 13 + .../java/com/videoplayer/MainApplication.java | 1 - examples/basic/package.json | 3 + examples/basic/src/MultiValueControl.tsx | 48 +- examples/basic/src/ToggleControl.tsx | 39 +- examples/basic/src/VideoPlayer.tsx | 119 +- examples/basic/src/VideoPlayer.windows.tsx | 109 +- examples/basic/tsconfig.json | 4 +- examples/basic/yarn.lock | 1985 +++++------------ 10 files changed, 760 insertions(+), 1563 deletions(-) create mode 100644 examples/basic/.eslintrc diff --git a/android/gradle.properties b/android/gradle.properties index 0c2a73da..72deab30 100644 --- 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 \ No newline at end of file diff --git a/examples/basic/.eslintrc b/examples/basic/.eslintrc new file mode 100644 index 00000000..2c39af83 --- /dev/null +++ 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 + } +} diff --git a/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java b/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java index 7c47cb1a..437d0f64 100644 --- 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 getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List 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; diff --git a/examples/basic/package.json b/examples/basic/package.json index 212b6b50..0ca16261 100644 --- 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" } diff --git a/examples/basic/src/MultiValueControl.tsx b/examples/basic/src/MultiValueControl.tsx index ae33dad2..bf58f3a9 100644 --- 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 { // a list a string or number to be displayed - values: Array + values: Array; // The selected value in values - selected?: T + selected?: T; // callback to press onPress - onPress: (arg: T) => any + onPress: (arg: MultiValueControlPropType) => void; } -const MultiValueControl: FunctionComponent> = ({ values, selected, onPress }) => { +const MultiValueControl: FunctionComponent< + MultiValueControlType +> = ({values, selected, onPress}) => { const selectedStyle: TextStyle = StyleSheet.flatten([ styles.option, {fontWeight: 'bold'}, @@ -32,20 +37,23 @@ const MultiValueControl: FunctionComponent> = ({ valu {fontWeight: 'normal'}, ]); - return - {values.map((value: string | number) => { - const _style = value === selected ? selectedStyle : unselectedStyle - return ( - { - onPress?.(value) - }}> + return ( + + {values.map((value: MultiValueControlPropType) => { + const _style = value === selected ? selectedStyle : unselectedStyle; + return ( + { + onPress?.(value); + }}> {value} - ) - })} - -} + + ); + })} + + ); +}; const styles = StyleSheet.create({ option: { diff --git a/examples/basic/src/ToggleControl.tsx b/examples/basic/src/ToggleControl.tsx index 65b30c72..fd5f83a5 100644 --- 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 ( - - + const style = isSelected ? selectedStyle : unselectedStyle; + const _text = text ? text : isSelected ? selectedText : unselectedText; + return ( + + {_text} - - ); -} + + ); +}; const styles = StyleSheet.create({ controlOption: { diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx index d159d606..197483b5 100644 --- 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; + textTracks: Array; + 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" /> @@ -534,8 +561,8 @@ class VideoPlayer extends Component { onPress={() => { this.channelUp(); }} - text='ChUp' - /> + text="ChUp" + /> @@ -545,38 +572,38 @@ class VideoPlayer extends Component { onPress={() => { this.popupInfo(); }} - text='decoderInfo' + text="decoderInfo" /> - + ) : null} { this.setState({paused: !this.state.paused}); }} - selectedText='pause' - unselectedText='playing' + selectedText="pause" + unselectedText="playing" /> { this.setState({loop: !this.state.loop}); }} - selectedText='loop enable' - unselectedText='loop disable' + selectedText="loop enable" + unselectedText="loop disable" /> { this.toggleFullscreen(); }} - text='fullscreen' + text="fullscreen" /> { this.toggleDecoration(); }} - text='decoration' - /> + text="decoration" + /> { - 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" /> {this.renderSeekBar()} @@ -616,7 +649,7 @@ class VideoPlayer extends Component { { + onValueChange={itemValue => { console.log('on audio value change ' + itemValue); this.setState({ selectedAudioTrack: { @@ -643,7 +676,7 @@ class VideoPlayer extends Component { { + 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} diff --git a/examples/basic/src/VideoPlayer.windows.tsx b/examples/basic/src/VideoPlayer.windows.tsx index 217fcc6e..f39f177b 100644 --- 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 ( - { this.setState({rate: rate}) }}> - - {rate}x - + { + this.setState({rate: rate}); + }}> + {rate}x - ) + ); } 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 ( - { this.setState({resizeMode: resizeMode}) }}> - - {resizeMode} - + { + this.setState({resizeMode: resizeMode}); + }}> + {resizeMode} - ) + ); } 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 ( - { this.setState({volume: volume}) }}> - - {volume * 100}% - + { + this.setState({volume: volume}); + }}> + {volume * 100}% - ) + ); } render() { @@ -88,18 +102,26 @@ class VideoPlayer extends Component { return ( - {this.setState({paused: !this.state.paused})}}> -