From 308447a5ba1d5a8fbc025520ec43521ef967bd98 Mon Sep 17 00:00:00 2001
From: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
Date: Mon, 2 Sep 2024 19:10:39 +0200
Subject: [PATCH] Fix/track selection by title (#4129)

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

* fix(android): fix test for track selection by title
---
 .../exoplayer/ReactExoplayerView.java         |  2 +-
 examples/basic/src/VideoPlayer.tsx            | 21 ++++++-------
 examples/basic/src/components/Overlay.tsx     |  6 +---
 .../src/components/TextTracksSelector.tsx     | 30 ++++++++-----------
 examples/basic/src/constants/general.ts       |  7 ++++-
 5 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
index dacae937..37b68f48 100644
--- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
+++ b/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;
                 }
diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx
index b77f97c9..5784a4e3 100644
--- a/examples/basic/src/VideoPlayer.tsx
+++ b/examples/basic/src/VideoPlayer.tsx
@@ -130,17 +130,18 @@ const VideoPlayer: FC<Props> = ({}) => {
 
     if (selectedTrack?.language) {
       setTextTracks(data.textTracks);
-      if (textTracksSelectionBy === 'index') {
-        setSelectedTextTrack({
-          type: SelectedTrackType.INDEX,
-          value: selectedTrack?.index,
-        });
-      } else {
-        setSelectedTextTrack({
-          type: SelectedTrackType.LANGUAGE,
-          value: selectedTrack?.language,
-        });
+      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);
     }
diff --git a/examples/basic/src/components/Overlay.tsx b/examples/basic/src/components/Overlay.tsx
index ba964b2f..3c9c487b 100644
--- a/examples/basic/src/components/Overlay.tsx
+++ b/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 =
-      textTracksSelectionBy === 'index'
-        ? SelectedTrackType.INDEX
-        : SelectedTrackType.LANGUAGE;
-    setSelectedTextTrack({type, value: itemValue});
+    setSelectedTextTrack({type: textTracksSelectionBy, value: itemValue});
   };
 
   const onSelectedVideoTrackChange = (itemValue: string) => {
diff --git a/examples/basic/src/components/TextTracksSelector.tsx b/examples/basic/src/components/TextTracksSelector.tsx
index ad4c1bff..b1fb04ff 100644
--- a/examples/basic/src/components/TextTracksSelector.tsx
+++ b/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') {
-            return (
-              <Picker.Item
-                label={`${track.index}`}
-                value={track.index}
-                key={track.index}
-              />
-            );
-          } else {
-            return (
-              <Picker.Item
-                label={track.language}
-                value={track.language}
-                key={track.language}
-              />
-            );
+          let value;
+          if (textTracksSelectionBy === SelectedTrackType.INDEX) {
+            value = track.index;
+          } else if (textTracksSelectionBy === SelectedTrackType.LANGUAGE) {
+            value = track.language;
+          } else if (textTracksSelectionBy === SelectedTrackType.TITLE) {
+            value = track.title;
           }
+          return <Picker.Item label={`${value}`} value={value} key={value} />;
         })}
       </Picker>
     </>
diff --git a/examples/basic/src/constants/general.ts b/examples/basic/src/constants/general.ts
index e0d12185..6325877d 100644
--- a/examples/basic/src/constants/general.ts
+++ b/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';