Fix/track selection by title (#4129)

* chore(sample): make track selection by title possible

* fix(android): fix test for track selection by title

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -1940,7 +1940,7 @@ public class ReactExoplayerView extends FrameLayout implements
         } else if ("title".equals(type)) {
             for (int i = 0; i < groups.length; ++i) {
                 Format format = groups.get(i).getFormat(0);
-                if (format.id != null && format.id.equals(value)) {
+                if (format.label != null && format.label.equals(value)) {
                     groupIndex = i;
                     break;
                 }

examples/basic/src/VideoPlayer.tsx

@@ -130,17 +130,18 @@ const VideoPlayer: FC<Props> = ({}) => {
 
     if (selectedTrack?.language) {
       setTextTracks(data.textTracks);
-      if (textTracksSelectionBy === 'index') {
+      let value;
-        setSelectedTextTrack({
+      if (textTracksSelectionBy === SelectedTrackType.INDEX) {
-          type: SelectedTrackType.INDEX,
+        value = selectedTrack?.index;
-          value: selectedTrack?.index,
+      } else if (textTracksSelectionBy === SelectedTrackType.LANGUAGE) {
-        });
+        value = selectedTrack?.language;
-      } else {
+      } else if (textTracksSelectionBy === SelectedTrackType.TITLE) {
-        setSelectedTextTrack({
+        value = selectedTrack?.title;
-          type: SelectedTrackType.LANGUAGE,
-          value: selectedTrack?.language,
-        });
       }
+      setSelectedTextTrack({
+        type: textTracksSelectionBy,
+        value: value,
+      });
     } else {
       setTextTracks(data.textTracks);
     }

examples/basic/src/components/Overlay.tsx

@@ -164,11 +164,7 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
 
   const onSelectedTextTrackChange = (itemValue: string) => {
     console.log('on value change ' + itemValue);
-    const type =
+    setSelectedTextTrack({type: textTracksSelectionBy, value: itemValue});
-      textTracksSelectionBy === 'index'
-        ? SelectedTrackType.INDEX
-        : SelectedTrackType.LANGUAGE;
-    setSelectedTextTrack({type, value: itemValue});
   };
 
   const onSelectedVideoTrackChange = (itemValue: string) => {

examples/basic/src/components/TextTracksSelector.tsx

@@ -1,6 +1,10 @@
 import {Picker} from '@react-native-picker/picker';
 import {Text} from 'react-native';
-import type {TextTrack, SelectedTrack} from 'react-native-video';
+import {
+  type TextTrack,
+  type SelectedTrack,
+  SelectedTrackType,
+} from 'react-native-video';
 import styles from '../styles';
 import React from 'react';
 
@@ -38,23 +42,15 @@ export const TextTrackSelector = ({
           if (!track) {
             return;
           }
-          if (textTracksSelectionBy === 'index') {
+          let value;
-            return (
+          if (textTracksSelectionBy === SelectedTrackType.INDEX) {
-              <Picker.Item
+            value = track.index;
-                label={`${track.index}`}
+          } else if (textTracksSelectionBy === SelectedTrackType.LANGUAGE) {
-                value={track.index}
+            value = track.language;
-                key={track.index}
+          } else if (textTracksSelectionBy === SelectedTrackType.TITLE) {
-              />
+            value = track.title;
-            );
-          } else {
-            return (
-              <Picker.Item
-                label={track.language}
-                value={track.language}
-                key={track.language}
-              />
-            );
           }
+          return <Picker.Item label={`${value}`} value={value} key={value} />;
         })}
       </Picker>
     </>

examples/basic/src/constants/general.ts

@@ -2,13 +2,18 @@ import {
   BufferConfig,
   DRMType,
   ISO639_1,
+  SelectedTrackType,
   TextTrackType,
 } from 'react-native-video';
 import {SampleVideoSource} from '../types';
 import {localeVideo} from '../assets';
 import {Platform} from 'react-native';
 
-export const textTracksSelectionBy = 'index';
+// This constant allows to change how the sample behaves regarding to 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 isIos = Platform.OS === 'ios';