From c96f7d41f38499baefde2b7fa7cf10441463438e Mon Sep 17 00:00:00 2001 From: Olivier Bouillet <62574056+freeboub@users.noreply.github.com> Date: Fri, 20 Sep 2024 16:26:20 +0200 Subject: [PATCH] chore(sample): fix default track identification and add audio tracks selection option (#4184) --- examples/basic/ios/Podfile.lock | 8 +-- examples/basic/src/VideoPlayer.tsx | 52 ++++++++++--------- .../src/components/AudioTracksSelector.tsx | 26 +++++++--- examples/basic/src/components/Overlay.tsx | 15 +++--- examples/basic/src/constants/general.ts | 3 +- 5 files changed, 62 insertions(+), 42 deletions(-) diff --git a/examples/basic/ios/Podfile.lock b/examples/basic/ios/Podfile.lock index 5149fb84..cf2fba38 100644 --- a/examples/basic/ios/Podfile.lock +++ b/examples/basic/ios/Podfile.lock @@ -994,7 +994,7 @@ PODS: - React-Mapbuffer (0.74.5): - glog - React-debug - - react-native-video (6.5.0): + - react-native-video (6.6.1): - DoubleConversion - glog - hermes-engine @@ -1008,7 +1008,7 @@ PODS: - React-featureflags - React-graphics - React-ImageManager - - react-native-video/Video (= 6.5.0) + - react-native-video/Video (= 6.6.1) - React-NativeModulesApple - React-RCTFabric - React-rendererdebug @@ -1038,7 +1038,7 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga - - react-native-video/Video (6.5.0): + - react-native-video/Video (6.6.1): - DoubleConversion - glog - hermes-engine @@ -1559,7 +1559,7 @@ SPEC CHECKSUMS: React-jsitracing: c83efb63c8e9e1dff72a3c56e88ae1c530a87795 React-logger: 257858bd55f3a4e1bc0cf07ddc8fb9faba6f8c7c React-Mapbuffer: dce508662b995ffefd29e278a16b78217039d43d - react-native-video: 9f0b3c888537f9ded698f762f541b13573dd3686 + react-native-video: 8c6d22c8eedf4359fca199e217e4f53581f7b4ab react-native-video-plugin-sample: d3a93b7ad777cad7fa2c30473de75a2635ce5feb React-nativeconfig: f326487bc61eba3f0e328da6efb2711533dcac46 React-NativeModulesApple: d89733f5baed8b9249ca5a8e497d63c550097312 diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx index 6381f34b..569f93ef 100644 --- a/examples/basic/src/VideoPlayer.tsx +++ b/examples/basic/src/VideoPlayer.tsx @@ -39,6 +39,7 @@ import { isAndroid, srcList, textTracksSelectionBy, + audioTracksSelectionBy, } from './constants'; import {Overlay, toast, VideoLoader} from './components'; import * as NavigationBar from 'expo-navigation-bar'; @@ -117,18 +118,23 @@ const VideoPlayer: FC = ({}) => { }, []); const onAudioTracks = (data: OnAudioTracksData) => { + console.log('onAudioTracks', data); const selectedTrack = data.audioTracks?.find((x: AudioTrack) => { return x.selected; }); - if (selectedTrack?.index) { - setAudioTracks(data.audioTracks); - setSelectedAudioTrack({ - type: SelectedTrackType.INDEX, - value: selectedTrack.index, - }); - } else { - setAudioTracks(data.audioTracks); + let value; + if (audioTracksSelectionBy === SelectedTrackType.INDEX) { + value = selectedTrack?.index; + } else if (audioTracksSelectionBy === SelectedTrackType.LANGUAGE) { + value = selectedTrack?.language; + } else if (audioTracksSelectionBy === SelectedTrackType.TITLE) { + value = selectedTrack?.title; } + setAudioTracks(data.audioTracks); + setSelectedAudioTrack({ + type: audioTracksSelectionBy, + value: value, + }); }; const onVideoTracks = (data: OnVideoTracksData) => { @@ -141,23 +147,19 @@ const VideoPlayer: FC = ({}) => { return x?.selected; }); - if (selectedTrack?.language) { - setTextTracks(data.textTracks); - let value; - if (textTracksSelectionBy === SelectedTrackType.INDEX) { - value = selectedTrack?.index; - } else if (textTracksSelectionBy === SelectedTrackType.LANGUAGE) { - value = selectedTrack?.language; - } else if (textTracksSelectionBy === SelectedTrackType.TITLE) { - value = selectedTrack?.title; - } - setSelectedTextTrack({ - type: textTracksSelectionBy, - value: value, - }); - } else { - setTextTracks(data.textTracks); + setTextTracks(data.textTracks); + let value; + if (textTracksSelectionBy === SelectedTrackType.INDEX) { + value = selectedTrack?.index; + } else if (textTracksSelectionBy === SelectedTrackType.LANGUAGE) { + value = selectedTrack?.language; + } else if (textTracksSelectionBy === SelectedTrackType.TITLE) { + value = selectedTrack?.title; } + setSelectedTextTrack({ + type: textTracksSelectionBy, + value: value, + }); }; const onLoad = (data: OnLoadData) => { @@ -246,7 +248,7 @@ const VideoPlayer: FC = ({}) => { const _bufferConfig = { ...bufferConfig, cacheSizeMB: useCache ? 200 : 0, - } + }; return ( diff --git a/examples/basic/src/components/AudioTracksSelector.tsx b/examples/basic/src/components/AudioTracksSelector.tsx index 02b72f54..d0e10059 100644 --- a/examples/basic/src/components/AudioTracksSelector.tsx +++ b/examples/basic/src/components/AudioTracksSelector.tsx @@ -1,19 +1,25 @@ import {Picker} from '@react-native-picker/picker'; import {Text} from 'react-native'; -import type {AudioTrack, SelectedTrack} from 'react-native-video'; +import { + SelectedTrackType, + type AudioTrack, + type SelectedTrack, +} from 'react-native-video'; import styles from '../styles'; import React from 'react'; export interface AudioTrackSelectorType { audioTracks: Array; selectedAudioTrack: SelectedTrack | undefined; - onValueChange: (arg0: string) => void; + onValueChange: (arg0: string | number) => void; + audioTracksSelectionBy: SelectedTrackType; } export const AudioTrackSelector = ({ audioTracks, selectedAudioTrack, onValueChange, + audioTracksSelectionBy, }: AudioTrackSelectorType) => { return ( <> @@ -25,7 +31,7 @@ export const AudioTrackSelector = ({ onValueChange={itemValue => { if (itemValue !== 'empty') { console.log('on audio value change ' + itemValue); - onValueChange(`${itemValue}`); + onValueChange(itemValue); } }}> {audioTracks?.length <= 0 ? ( @@ -37,11 +43,19 @@ export const AudioTrackSelector = ({ if (!track) { return; } + let value; + if (audioTracksSelectionBy === SelectedTrackType.INDEX) { + value = track.index; + } else if (audioTracksSelectionBy === SelectedTrackType.LANGUAGE) { + value = track.language; + } else if (audioTracksSelectionBy === SelectedTrackType.TITLE) { + value = track.title; + } return ( ); })} diff --git a/examples/basic/src/components/Overlay.tsx b/examples/basic/src/components/Overlay.tsx index 3c9c487b..8af4d7a7 100644 --- a/examples/basic/src/components/Overlay.tsx +++ b/examples/basic/src/components/Overlay.tsx @@ -7,7 +7,12 @@ import React, { } from 'react'; import {View} from 'react-native'; import styles from '../styles.tsx'; -import {isAndroid, isIos, textTracksSelectionBy} from '../constants'; +import { + isAndroid, + isIos, + textTracksSelectionBy, + audioTracksSelectionBy, +} from '../constants'; import { ResizeMode, VideoRef, @@ -148,17 +153,14 @@ const _Overlay = forwardRef((props, ref) => { setShowNotificationControls(prev => !prev); }; - const onSelectedAudioTrackChange = (itemValue: string) => { + const onSelectedAudioTrackChange = (itemValue: string | number) => { console.log('on audio value change ' + itemValue); if (itemValue === 'none') { setSelectedAudioTrack({ type: SelectedTrackType.DISABLED, }); } else { - setSelectedAudioTrack({ - type: SelectedTrackType.INDEX, - value: itemValue, - }); + setSelectedAudioTrack({type: audioTracksSelectionBy, value: itemValue}); } }; @@ -324,6 +326,7 @@ const _Overlay = forwardRef((props, ref) => { audioTracks={audioTracks} selectedAudioTrack={selectedAudioTrack} onValueChange={onSelectedAudioTrackChange} + audioTracksSelectionBy={audioTracksSelectionBy} />