General refactoring (#559)

components/video-player/controls/contexts/VideoContext.tsx

@@ -1,16 +1,5 @@
 import { TrackInfo } from "@/modules/vlc-player";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import React, {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
-  useMemo,
-} from "react";
+import React, { createContext, useContext, useState, ReactNode, useEffect, useMemo } from "react";
 import { useControlContext } from "./ControlContext";
 import { Track } from "../types";
 import { router, useLocalSearchParams } from "expo-router";
@@ -27,14 +16,8 @@ const VideoContext = createContext<VideoContextProps | undefined>(undefined);
 
 interface VideoProviderProps {
   children: ReactNode;
-  getAudioTracks:
-    | (() => Promise<TrackInfo[] | null>)
-    | (() => TrackInfo[])
-    | undefined;
-  getSubtitleTracks:
-    | (() => Promise<TrackInfo[] | null>)
-    | (() => TrackInfo[])
-    | undefined;
+  getAudioTracks: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]) | undefined;
+  getSubtitleTracks: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]) | undefined;
   setAudioTrack: ((index: number) => void) | undefined;
   setSubtitleTrack: ((index: number) => void) | undefined;
   setSubtitleURL: ((url: string, customName: string) => void) | undefined;
@@ -55,23 +38,19 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   const isVideoLoaded = ControlContext?.isVideoLoaded;
   const mediaSource = ControlContext?.mediaSource;
 
-  const allSubs =
-    mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
+  const allSubs = mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
 
-  const { itemId, audioIndex, bitrateValue, subtitleIndex } =
-    useLocalSearchParams<{
-      itemId: string;
-      audioIndex: string;
-      subtitleIndex: string;
-      mediaSourceId: string;
-      bitrateValue: string;
-    }>();
+  const { itemId, audioIndex, bitrateValue, subtitleIndex } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
 
   const onTextBasedSubtitle = useMemo(
     () =>
-      allSubs.find(
-        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream
-      ) || subtitleIndex === "-1",
+      allSubs.find((s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream) || subtitleIndex === "-1",
     [allSubs, subtitleIndex]
   );
 
@@ -95,21 +74,14 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
     router.replace(`player/direct-player?${queryParams}`);
   };
 
-  const setTrackParams = (
-    type: "audio" | "subtitle",
-    index: number,
-    serverIndex: number
-  ) => {
+  const setTrackParams = (type: "audio" | "subtitle", index: number, serverIndex: number) => {
     const setTrack = type === "audio" ? setAudioTrack : setSubtitleTrack;
     const paramKey = type === "audio" ? "audioIndex" : "subtitleIndex";
 
     // If we're transcoding and we're going from a image based subtitle
     // to a text based subtitle, we need to change the player params.
 
-    const shouldChangePlayerParams =
-      type === "subtitle" &&
-      mediaSource?.TranscodingUrl &&
-      !onTextBasedSubtitle;
+    const shouldChangePlayerParams = type === "subtitle" && mediaSource?.TranscodingUrl && !onTextBasedSubtitle;
 
     console.log("Set player params", index, serverIndex);
     if (shouldChangePlayerParams) {
@@ -129,23 +101,22 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       if (getSubtitleTracks) {
         const subtitleData = await getSubtitleTracks();
 
+        // Step 1: Move external subs to the end, because VLC puts external subs at the end
+        const sortedSubs = allSubs.sort((a, b) => Number(a.IsExternal) - Number(b.IsExternal));
+
+        // Step 2: Apply VLC indexing logic
         let textSubIndex = 0;
-        const subtitles: Track[] = allSubs?.map((sub) => {
+        const processedSubs: Track[] = sortedSubs?.map((sub) => {
           // Always increment for non-transcoding subtitles
           // Only increment for text-based subtitles when transcoding
-          const shouldIncrement =
-            !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
-
-          const displayTitle = sub.DisplayTitle || "Undefined Subtitle";
+          const shouldIncrement = !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
           const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
-
           const finalIndex = shouldIncrement ? vlcIndex : sub.Index ?? -1;
 
           if (shouldIncrement) textSubIndex++;
           return {
-            name: displayTitle,
+            name: sub.DisplayTitle || "Undefined Subtitle",
             index: sub.Index ?? -1,
-            originalIndex: finalIndex,
             setTrack: () =>
               shouldIncrement
                 ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
@@ -155,6 +126,9 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
           };
         });
 
+        // Step 3: Restore the original order
+        const subtitles: Track[] = processedSubs.sort((a, b) => a.index - b.index);
+
         // Add a "Disable Subtitles" option
         subtitles.unshift({
           name: "Disable",
@@ -164,36 +138,25 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
               ? setTrackParams("subtitle", -1, -1)
               : setPlayerParams({ chosenSubtitleIndex: "-1" }),
         });
-
         setSubtitleTracks(subtitles);
       }
-      if (
-        getAudioTracks &&
-        (audioTracks === null || audioTracks.length === 0)
-      ) {
+      if (getAudioTracks) {
         const audioData = await getAudioTracks();
-        if (!audioData) return;
-
-        console.log("audioData", audioData);
-
-        const allAudio =
-          mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
 
+        const allAudio = mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
         const audioTracks: Track[] = allAudio?.map((audio, idx) => {
           if (!mediaSource?.TranscodingUrl) {
             const vlcIndex = audioData?.at(idx)?.index ?? -1;
             return {
               name: audio.DisplayTitle ?? "Undefined Audio",
               index: audio.Index ?? -1,
-              setTrack: () =>
-                setTrackParams("audio", vlcIndex, audio.Index ?? -1),
+              setTrack: () => setTrackParams("audio", vlcIndex, audio.Index ?? -1),
             };
           }
           return {
             name: audio.DisplayTitle ?? "Undefined Audio",
             index: audio.Index ?? -1,
-            setTrack: () =>
-              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
+            setTrack: () => setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
           };
         });
         setAudioTracks(audioTracks);