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

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) {
-      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<Props> = ({}) => {
       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<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}`}
-              value={`${track.index}`}
-              key={`${track.index}`}
+              label={`${value} - ${track.selected}`}
+              value={`${value}`}
+              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({
-        type: SelectedTrackType.INDEX,
-        value: itemValue,
-      });
+      setSelectedAudioTrack({type: audioTracksSelectionBy, 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';