Added temporary fix

app/(auth)/player/transcoding-player.tsx

@@ -38,7 +38,6 @@ import Video, {
   SelectedTrackType,
   VideoRef,
 } from "react-native-video";
-import index from "../(tabs)/(home)";
 
 const Player = () => {
   const api = useAtomValue(apiAtom);
@@ -54,6 +53,7 @@ const Player = () => {
   const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
 
   const setShowControls = useCallback((show: boolean) => {
     _setShowControls(show);
@@ -117,7 +117,14 @@ const Player = () => {
     isLoading: isLoadingStreamUrl,
     isError: isErrorStreamUrl,
   } = useQuery({
-    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId],
+    queryKey: [
+      "stream-url",
+      itemId,
+      bitrateValue,
+      mediaSourceId,
+      subtitleIndex,
+      audioIndex,
+    ],
 
     queryFn: async () => {
       if (!api) {

components/video-player/controls/Controls.tsx

@@ -318,7 +318,7 @@ export const Controls: React.FC<Props> = ({
       const minutes = Math.floor((progressInSeconds % 3600) / 60);
       const seconds = progressInSeconds % 60;
       setTime({ hours, minutes, seconds });
-    }, 10),
+    }, 3),
     []
   );
 

components/video-player/controls/dropdown/DropdownViewTranscoding.tsx

@@ -34,10 +34,15 @@ 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(subtitleIndex) && x.IsTextSubtitleStream
-    ) || subtitleIndex === "-1";
+
+  const isOnTextSubtitle = useMemo(() => {
+    const res = Boolean(
+      mediaSource?.MediaStreams?.find(
+        (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+      ) || subtitleIndex === "-1"
+    );
+    return res;
+  }, []);
 
   const allSubs =
     mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
@@ -76,8 +81,6 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
         }
       });
 
-      console.log("sortedSubtitles", sortedSubtitles);
-
       return [disableSubtitle, ...sortedSubtitles];
     }
 
@@ -90,7 +93,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
     return [disableSubtitle, ...transcodedSubtitle];
   }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
 
-  const ChangeTranscodingSubtitle = useCallback(
+  const changeToImageBasedSub = useCallback(
     (subtitleIndex: number) => {
       const queryParams = new URLSearchParams({
         itemId: item.Id ?? "", // Ensure itemId is a string
@@ -180,7 +183,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                   <DropdownMenu.CheckboxItem
                     value={
                       subtitleIndex ===
-                      (sub.IsTextSubtitleStream && isOnTextSubtitle
+                      (isOnTextSubtitle && sub.IsTextSubtitleStream
                         ? getSourceSubtitleIndex(sub.index).toString()
                         : sub?.index.toString())
                     }
@@ -189,7 +192,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                       console.log("sub", sub);
                       if (
                         subtitleIndex ===
-                        (sub.IsTextSubtitleStream && isOnTextSubtitle
+                        (isOnTextSubtitle && sub.IsTextSubtitleStream
                           ? getSourceSubtitleIndex(sub.index).toString()
                           : sub?.index.toString())
                       )
@@ -206,8 +209,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
                         setSubtitleTrack && setSubtitleTrack(sub.index);
                         return;
                       }
-                      console.log("ChangeTranscodingSubtitle", subtitleIndex);
-                      ChangeTranscodingSubtitle(sub.index);
+                      changeToImageBasedSub(sub.index);
                     }}
                   >
                     <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>