chore(sample): fix default track identification and add audio tracks selection option (#4184)

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

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<Props> = ({}) => {
   }, []);
 
   const onAudioTracks = (data: OnAudioTracksData) => {
+    console.log('onAudioTracks', data);
     const selectedTrack = data.audioTracks?.find((x: AudioTrack) => {
       return x.selected;
     });
-    if (selectedTrack?.index) {
+    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: SelectedTrackType.INDEX,
+      type: audioTracksSelectionBy,
-        value: selectedTrack.index,
+      value: value,
     });
-    } else {
-      setAudioTracks(data.audioTracks);
-    }
   };
 
   const onVideoTracks = (data: OnVideoTracksData) => {
@@ -141,7 +147,6 @@ const VideoPlayer: FC<Props> = ({}) => {
       return x?.selected;
     });
 
-    if (selectedTrack?.language) {
     setTextTracks(data.textTracks);
     let value;
     if (textTracksSelectionBy === SelectedTrackType.INDEX) {
@@ -155,9 +160,6 @@ const VideoPlayer: FC<Props> = ({}) => {
       type: textTracksSelectionBy,
       value: value,
     });
-    } else {
-      setTextTracks(data.textTracks);
-    }
   };
 
   const onLoad = (data: OnLoadData) => {
@@ -246,7 +248,7 @@ const VideoPlayer: FC<Props> = ({}) => {
   const _bufferConfig = {
     ...bufferConfig,
     cacheSizeMB: useCache ? 200 : 0,
-  }
+  };
 
   return (
     <View style={styles.container}>

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<AudioTrack>;
   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 (
             <Picker.Item
-              label={`${track.language} - ${track.title} - ${track.selected}`}
+              label={`${value} - ${track.selected}`}
-              value={`${track.index}`}
+              value={`${value}`}
-              key={`${track.index}`}
+              key={`${value}`}
             />
           );
         })}

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<VideoRef, Props>((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({
+      setSelectedAudioTrack({type: audioTracksSelectionBy, value: itemValue});
-        type: SelectedTrackType.INDEX,
-        value: itemValue,
-      });
     }
   };
 
@@ -324,6 +326,7 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
                 audioTracks={audioTracks}
                 selectedAudioTrack={selectedAudioTrack}
                 onValueChange={onSelectedAudioTrackChange}
+                audioTracksSelectionBy={audioTracksSelectionBy}
               />
               <TextTrackSelector
                 textTracks={textTracks}

examples/basic/src/constants/general.ts

@@ -9,11 +9,12 @@ import {SampleVideoSource} from '../types';
 import {localeVideo} from '../assets';
 import {Platform} from 'react-native';
 
-// This constant allows to change how the sample behaves regarding to texts selection.
+// This constant allows to change how the sample behaves regarding to audio and texts selection.
 // You can change it to change how selector will use tracks information.
 // by default, index will be displayed and index will be applied to selected tracks.
 // You can also use LANGUAGE or TITLE
 export const textTracksSelectionBy = SelectedTrackType.INDEX;
+export const audioTracksSelectionBy = SelectedTrackType.INDEX;
 
 export const isIos = Platform.OS === 'ios';