Merge pull request #266 from Alexk2309/hotfix/bug-fixes-for-player

Hotfix/bug fixes for player

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

@@ -342,22 +342,11 @@ export default function page() {
       : 0;
   }, [item]);
 
-  const backAction = () => {
-    videoRef.current?.stop();
-    return false;
-  };
-
   useFocusEffect(
     React.useCallback(() => {
-      const onBackPress = () => {
-        return backAction();
-      };
-
-      BackHandler.addEventListener("hardwareBackPress", onBackPress);
-
       return async () => {
-        videoRef.current?.stop();
-        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+        stop();
+        console.log("Unmounted");
       };
     }, [])
   );

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

@@ -362,23 +362,10 @@ const Player = () => {
     }));
   };
 
-  const backAction = () => {
-    videoRef.current?.pause();
-    return false;
-  };
-
   useFocusEffect(
     React.useCallback(() => {
-      const onBackPress = () => {
-        return backAction();
-      };
-
-      BackHandler.addEventListener("hardwareBackPress", onBackPress);
-      play();
-
       return async () => {
-        videoRef.current?.pause();
-        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+        stop();
       };
     }, [])
   );

components/video-player/controls/Controls.tsx

@@ -526,7 +526,6 @@ export const Controls: React.FC<Props> = ({
             )}
             <TouchableOpacity
               onPress={async () => {
-                if (stop) await stop();
                 router.back();
               }}
               className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"

components/video-player/controls/EpisodeList.tsx

@@ -17,7 +17,7 @@ import {
   HorizontalScroll,
   HorizontalScrollRef,
 } from "@/components/common/HorrizontalScroll";
-import { router } from "expo-router";
+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";
@@ -155,22 +155,28 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
     }
   }, [episodes, item.Id]);
 
+  const { audioIndex, subtitleIndex, bitrateValue } = useLocalSearchParams<{
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
   const gotoEpisode = async (itemId: string) => {
     const item = await getItemById(api, itemId);
     if (!settings || !item) return;
 
-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(item, settings);
+    const { mediaSource } = 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: bitrate.toString(),
+      bitrateValue: bitrateValue,
     }).toString();
 
-    if (!bitrate.value) {
+    if (!bitrateValue) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
       return;
@@ -179,116 +185,105 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
     router.replace(`player/transcoding-player?${queryParams}`);
   };
 
+  if (!episodes) {
+    return <Loader />;
+  }
+
   return (
     <View
       style={{
         position: "absolute",
-        left: insets.left,
-        right: insets.right,
         backgroundColor: "black",
+        height: "100%",
+        width: "100%",
       }}
     >
-      {isFetching ? (
-        <View className="flex flex-col items-center justify-center">
-          <Loader />
-        </View>
-      ) : (
-        <>
-          <View
-            style={{
-              justifyContent: "space-between",
-            }}
-            className={`flex flex-row items-center space-x-2 z-10 p-4`}
-          >
-            {seriesItem && (
-              <SeasonDropdown
-                item={seriesItem}
-                seasons={seasons}
-                state={seasonIndexState}
-                onSelect={(season) => {
-                  setSeasonIndexState((prev) => ({
-                    ...prev,
-                    [item.SeriesId ?? ""]: season.IndexNumber,
-                  }));
-                }}
-              />
-            )}
-            <TouchableOpacity
-              onPress={async () => {
-                close();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-          <View
-            style={{
-              alignSelf: "center",
-            }}
-          >
-            <HorizontalScroll
-              ref={scrollViewRef}
-              data={episodes}
-              extraData={item}
-              renderItem={(_item, idx) => (
-                <View
-                  key={_item.Id}
-                  style={{}}
-                  className={`flex flex-col w-44 opacity-100`}
-                >
-                  <TouchableOpacity
-                    onPress={() => {
-                      gotoEpisode(_item.Id);
-                    }}
-                  >
-                    <ContinueWatchingPoster
-                      item={_item}
-                      useEpisodePoster
-                      showPlayButton={_item.Id !== item.Id}
-                    />
-                  </TouchableOpacity>
-                  <View className="shrink">
-                    <Text
-                      numberOfLines={2}
-                      style={{
-                        lineHeight: 18, // Adjust this value based on your text size
-                        height: 36, // lineHeight * 2 for consistent two-line space
-                      }}
-                    >
-                      {_item.Name}
-                    </Text>
-                    <Text
-                      numberOfLines={1}
-                      className="text-xs text-neutral-475"
-                    >
-                      {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
-                    </Text>
-                    <Text className="text-xs text-neutral-500">
-                      {runtimeTicksToSeconds(_item.RunTimeTicks)}
-                    </Text>
-                  </View>
-                  <View className="self-start mt-2">
-                    <DownloadSingleItem item={_item} />
-                  </View>
-                  <Text
-                    numberOfLines={5}
-                    className="text-xs text-neutral-500 shrink"
-                  >
-                    {_item.Overview}
-                  </Text>
-                </View>
-              )}
-              keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
-              estimatedItemSize={200}
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={{
-                paddingHorizontal: 16,
+      <>
+        <View
+          style={{
+            justifyContent: "space-between",
+          }}
+          className={`flex flex-row items-center space-x-2 z-10 py-4 pr-4`}
+        >
+          {seriesItem && (
+            <SeasonDropdown
+              item={seriesItem}
+              seasons={seasons}
+              state={seasonIndexState}
+              onSelect={(season) => {
+                setSeasonIndexState((prev) => ({
+                  ...prev,
+                  [item.SeriesId ?? ""]: season.IndexNumber,
+                }));
               }}
             />
-          </View>
-        </>
-      )}
+          )}
+          <TouchableOpacity
+            onPress={async () => {
+              close();
+            }}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        <HorizontalScroll
+          ref={scrollViewRef}
+          data={episodes}
+          extraData={item}
+          renderItem={(_item, idx) => (
+            <View
+              key={_item.Id}
+              style={{}}
+              className={`flex flex-col w-44 ${
+                item.Id !== _item.Id ? "opacity-75" : ""
+              }`}
+            >
+              <TouchableOpacity
+                onPress={() => {
+                  gotoEpisode(_item.Id);
+                }}
+              >
+                <ContinueWatchingPoster
+                  item={_item}
+                  useEpisodePoster
+                  showPlayButton={_item.Id !== item.Id}
+                />
+              </TouchableOpacity>
+              <View className="shrink">
+                <Text
+                  numberOfLines={2}
+                  style={{
+                    lineHeight: 18, // Adjust this value based on your text size
+                    height: 36, // lineHeight * 2 for consistent two-line space
+                  }}
+                >
+                  {_item.Name}
+                </Text>
+                <Text numberOfLines={1} className="text-xs text-neutral-475">
+                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
+                </Text>
+                <Text className="text-xs text-neutral-500">
+                  {runtimeTicksToSeconds(_item.RunTimeTicks)}
+                </Text>
+              </View>
+              <View className="self-start mt-2">
+                <DownloadSingleItem item={_item} />
+              </View>
+              <Text
+                numberOfLines={5}
+                className="text-xs text-neutral-500 shrink"
+              >
+                {_item.Overview}
+              </Text>
+            </View>
+          )}
+          keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
+          estimatedItemSize={200}
+          showsHorizontalScrollIndicator={false}
+        />
+      </>
     </View>
   );
 };