Completed subtitle feature

2024-12-12 04:23:09 +11:00
parent 3fb20a8ca2
commit 35fcb5ca0c
7 changed files with 137 additions and 190 deletions
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -9,7 +9,10 @@ import {
  VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
 import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import {
+  getDefaultPlaySettings,
+  previousIndexes,
+} from "@/utils/jellyfin/getDefaultPlaySettings";
 import { writeToLog } from "@/utils/log";
 import {
  formatTimeString,
@@ -128,8 +131,9 @@ export const Controls: React.FC<Props> = ({
  const wasPlayingRef = useRef(false);
  const lastProgressRef = useRef<number>(0);

-  const { bitrateValue, usedSubtitleIndex } = useLocalSearchParams<{
+  const { bitrateValue, subtitleIndex, audioIndex } = useLocalSearchParams<{
    bitrateValue: string;
+    audioIndex: string;
    subtitleIndex: string;
  }>();

@@ -154,21 +158,26 @@ export const Controls: React.FC<Props> = ({

    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
+
    const {
      mediaSource: newMediaSource,
-      audioIndex,
-      subtitleIndex,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
    } = getDefaultPlaySettings(
      previousItem,
      settings,
-      item,
+      previousIndexes,
      mediaSource ?? undefined
    );

    const queryParams = new URLSearchParams({
      itemId: previousItem.Id ?? "", // Ensure itemId is a string
-      audioIndex: audioIndex?.toString() ?? "",
-      subtitleIndex: subtitleIndex?.toString() ?? "",
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
      bitrateValue: bitrateValue.toString(),
    }).toString();
@@ -180,23 +189,34 @@ export const Controls: React.FC<Props> = ({
    }
    // @ts-expect-error
    router.replace(`player/transcoding-player?${queryParams}`);
-  }, [previousItem, settings]);
+  }, [previousItem, settings, subtitleIndex, audioIndex]);

  const goToNextItem = useCallback(() => {
    if (!nextItem || !settings) return;

    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

-    const { mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(
+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(
      nextItem,
-      settings
+      settings,
+      previousIndexes,
+      mediaSource ?? undefined
    );

    const queryParams = new URLSearchParams({
      itemId: nextItem.Id ?? "", // Ensure itemId is a string
-      audioIndex: audioIndex?.toString() ?? "",
-      subtitleIndex: subtitleIndex?.toString() ?? "",
-      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
      bitrateValue: bitrateValue.toString(),
    }).toString();

@@ -207,7 +227,7 @@ export const Controls: React.FC<Props> = ({
    }
    // @ts-expect-error
    router.replace(`player/transcoding-player?${queryParams}`);
-  }, [nextItem, settings]);
+  }, [nextItem, settings, subtitleIndex, audioIndex]);

  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
@@ -422,32 +442,51 @@ export const Controls: React.FC<Props> = ({
    if (isPlaying) togglePlay();
  };

-  const gotoEpisode = async (itemId: string) => {
-    const item = await getItemById(api, itemId);
-    console.log("Item", item);
-    if (!settings || !item) return;
+  const goToItem = useCallback(
+    async (itemId: string) => {
+      try {
+        const gotoItem = await getItemById(api, itemId);
+        if (!settings || !gotoItem) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(item, settings);
+        const previousIndexes: previousIndexes = {
+          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+          audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+        };

-    const queryParams = new URLSearchParams({
-      itemId: item.Id ?? "", // Ensure itemId is a string
-      audioIndex: audioIndex?.toString() ?? "",
-      subtitleIndex: subtitleIndex?.toString() ?? "",
-      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-      bitrateValue: bitrate.toString(),
-    }).toString();
+        const {
+          mediaSource: newMediaSource,
+          audioIndex: defaultAudioIndex,
+          subtitleIndex: defaultSubtitleIndex,
+        } = getDefaultPlaySettings(
+          gotoItem,
+          settings,
+          previousIndexes,
+          mediaSource ?? undefined
+        );

-    if (!bitrate.value) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
-    // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
-  };
+        const queryParams = new URLSearchParams({
+          itemId: gotoItem.Id ?? "", // Ensure itemId is a string
+          audioIndex: defaultAudioIndex?.toString() ?? "",
+          subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+          mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+          bitrateValue: bitrateValue.toString(),
+        }).toString();
+
+        if (!bitrateValue) {
+          // @ts-expect-error
+          router.replace(`player/direct-player?${queryParams}`);
+          return;
+        }
+        // @ts-expect-error
+        router.replace(`player/transcoding-player?${queryParams}`);
+      } catch (error) {
+        console.error("Error in gotoEpisode:", error);
+      }
+    },
+    [settings, subtitleIndex, audioIndex]
+  );

  // Used when user changes audio through audio button on device.
  const [showAudioSlider, setShowAudioSlider] = useState(false);
@@ -459,7 +498,11 @@ export const Controls: React.FC<Props> = ({
      isVideoLoaded={isVideoLoaded}
    >
      {EpisodeView ? (
-        <EpisodeList item={item} close={() => setEpisodeView(false)} />
+        <EpisodeList
+          item={item}
+          close={() => setEpisodeView(false)}
+          goToItem={goToItem}
+        />
      ) : (
        <>
          <VideoProvider
--- a/components/video-player/controls/EpisodeList.tsx
+++ b/components/video-player/controls/EpisodeList.tsx
@@ -17,10 +17,6 @@ import {
  HorizontalScroll,
  HorizontalScrollRef,
 } from "@/components/common/HorrizontalScroll";
-import { router, useLocalSearchParams } from "expo-router";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
-import { useSettings } from "@/utils/atoms/settings";
 import {
  SeasonDropdown,
  SeasonIndexState,
@@ -29,15 +25,15 @@ import {
 type Props = {
  item: BaseItemDto;
  close: () => void;
+  goToItem: (itemId: string) => Promise<void>;
 };

 export const seasonIndexAtom = atom<SeasonIndexState>({});

-export const EpisodeList: React.FC<Props> = ({ item, close }) => {
+export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const insets = useSafeAreaInsets(); // Get safe area insets
-  const [settings] = useSettings();
  const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
  const scrollViewRef = useRef<HorizontalScrollRef>(null); // Reference to the HorizontalScroll
  const scrollToIndex = (index: number) => {
@@ -154,36 +150,6 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
    }
  }, [episodes, item.Id]);

-  const { bitrateValue } = useLocalSearchParams<{
-    bitrateValue: string;
-  }>();
-
-  const gotoEpisode = async (itemId: string) => {
-    const item = await getItemById(api, itemId);
-    if (!settings || !item) return;
-
-    const { mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(
-      item,
-      settings
-    );
-
-    const queryParams = new URLSearchParams({
-      itemId: item.Id ?? "", // Ensure itemId is a string
-      audioIndex: audioIndex?.toString() ?? "",
-      subtitleIndex: subtitleIndex?.toString() ?? "",
-      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-      bitrateValue: bitrateValue,
-    }).toString();
-
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
-    // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
-  };
-
  if (!episodes) {
    return <Loader />;
  }
@@ -241,7 +207,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
            >
              <TouchableOpacity
                onPress={() => {
-                  gotoEpisode(_item.Id);
+                  goToItem(_item.Id);
                }}
              >
                <ContinueWatchingPoster
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -187,12 +187,20 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                    key={`subtitle-item-${idx}`}
                    onValueChange={() => {
                      console.log("sub", sub);
-                      if (subtitleIndex === sub?.index.toString()) return;
+                      if (
+                        subtitleIndex ===
+                        (sub.IsTextSubtitleStream && isOnTextSubtitle
+                          ? getSourceSubtitleIndex(sub.index).toString()
+                          : sub?.index.toString())
+                      )
+                        return;
+
                      router.setParams({
                        subtitleIndex: getSourceSubtitleIndex(
                          sub.index
                        ).toString(),
                      });
+                      console.log("Got here");

                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
                        setSubtitleTrack && setSubtitleTrack(sub.index);