Made transcoding content use react-native-video insted

components/PlayButton.tsx

@@ -65,9 +65,18 @@ export const PlayButton: React.FC<Props> = ({
   const colorChangeProgress = useSharedValue(0);
   const [settings] = useSettings();
 
+
+
+  // console.log(bitrateValue);
   const goToPlayer = useCallback(
-    (q: string) => {
-      router.push(`/player/player?${q}`);
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        // @ts-expect-error
+        router.push(`/player/direct-player?${q}`);
+        return;
+      }
+      // @ts-expect-error
+      router.push(`/player/transcoding-player?${q}`);
     },
     [router]
   );
@@ -86,7 +95,7 @@ export const PlayButton: React.FC<Props> = ({
     const queryString = queryParams.toString();
 
     if (!client) {
-      goToPlayer(queryString);
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
       return;
     }
 
@@ -207,7 +216,7 @@ export const PlayButton: React.FC<Props> = ({
             });
             break;
           case 1:
-            goToPlayer(queryString);
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
             break;
           case cancelButtonIndex:
             break;

components/video-player/controls/Controls.tsx

@@ -145,8 +145,13 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrate.toString(),
     }).toString();
 
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
     // @ts-expect-error
-    router.replace(`player/player?${queryParams}`);
+    router.replace(`player/transcoding-player?${queryParams}`);
   }, [previousItem, settings]);
 
   const goToNextItem = useCallback(() => {
@@ -163,8 +168,13 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrate.toString(),
     }).toString();
 
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
     // @ts-expect-error
-    router.replace(`player/player?${queryParams}`);
+    router.replace(`player/transcoding-player?${queryParams}`);
   }, [nextItem, settings]);
 
   const updateTimes = useCallback(

components/video-player/controls/DropdownView.tsx

@@ -61,16 +61,9 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
     )[];
   }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
 
-  // const audioForTranscodingStream = mediaSource?.MediaStreams?.filter(
-  //   (x) => x.Type === "Audio"
-  // ).map((x) => ({
-  //   name: x.DisplayTitle!,
-  //   index: x.Index!,
-  // }));
-
   // Only used for transcoding streams.
   const {
-    subtitleIndex: subtitleIndexStr,
+    subtitleIndex,
     audioIndex,
     bitrateValue,
   } = useLocalSearchParams<{
@@ -84,11 +77,12 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
   // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
   const isOnTextSubtitle =
     mediaSource?.MediaStreams?.find(
-      (x) => x.Index === parseInt(subtitleIndexStr) && x.IsTextSubtitleStream
-    ) || subtitleIndexStr === "-1";
+      (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+    ) || subtitleIndex === "-1";
 
-  // TODO: Add support for text sorting subtitles renaming.
+  // Need to sort in the right order when on text mode. So its seamless.
   const allSubtitleTracksForTranscodingStream = useMemo(() => {
+    const disableSubtitle = { name: 'Disable', index: -1, IsTextSubtitleStream: true } as TranscodedSubtitle;
     const allSubs =
       mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
     if (isOnTextSubtitle) {
@@ -109,7 +103,11 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
               IsTextSubtitleStream: x.IsTextSubtitleStream,
             } as TranscodedSubtitle)
         );
-      return [...textSubtitles, ...imageSubtitles];
+      return [
+        disableSubtitle,
+        ...textSubtitles,
+        ...imageSubtitles
+      ];
     }
 
     const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
@@ -119,11 +117,12 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
     }));
 
     return [
-      { name: 'Disable', index: -1, IsTextSubtitleStream: true } as TranscodedSubtitle,
+      disableSubtitle,
       ...transcodedSubtitle
     ];
   }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
 
+
   const ChangeTranscodingSubtitle = useCallback(
     (subtitleIndex: number) => {
       const queryParams = new URLSearchParams({
@@ -135,7 +134,29 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
       }).toString();
 
       // @ts-expect-error
-      router.replace(`player/player?${queryParams}`);
+      router.replace(`player/transcoding?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  // Audio tracks for transcoding streams.
+  const allAudio =
+  mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
+    name: x.DisplayTitle!,
+    index: x.Index!,
+  })) || [];
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex,
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding?${queryParams}`);
     },
     [mediaSource]
   );
@@ -211,7 +232,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                     <DropdownMenu.Item
                       key={`subtitle-item-${idx}`}
                       onSelect={() => {
-                        if (subtitleIndexStr === sub.index.toString()) return;
+                        if (subtitleIndex === sub.index.toString()) return;
 
                         if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
                           setSubtitleTrack && setSubtitleTrack(sub.index);
@@ -242,7 +263,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
               loop={true}
               sideOffset={10}
             >
-              {audioTracks?.map((track, idx: number) => (
+              {!mediaSource?.TranscodingUrl && audioTracks?.map((track, idx: number) => (
                 <DropdownMenu.Item
                   key={`audio-item-${idx}`}
                   onSelect={() => {
@@ -255,6 +276,21 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                   </DropdownMenu.ItemTitle>
                 </DropdownMenu.Item>
               ))}
+
+              {mediaSource?.TranscodingUrl && allAudio?.map((track, idx: number) => (
+                <DropdownMenu.Item
+                  key={`audio-item-${idx}`}
+                  onSelect={() => {
+                    if (audioIndex === track.index.toString()) return;
+                    ChangeTranscodingAudio(track.index);
+                  }}
+                >
+                  <DropdownMenu.ItemIndicator />
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
             </DropdownMenu.SubContent>
           </DropdownMenu.Sub>
         </DropdownMenu.Content>