fix(deps): update dependency react-native-reanimated to ~3.19.0

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.30.2",
+    "version": "0.30.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -37,7 +37,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 58,
+      "versionCode": 57,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -39,44 +39,26 @@ export default function page() {
     }
   }, [getDownloadedItems]);
 
-  // Group episodes by season in a single pass
-  const seasonGroups = useMemo(() => {
-    const groups: Record<number, BaseItemDto[]> = {};
-
-    series.forEach((episode) => {
-      const seasonNumber = episode.item.ParentIndexNumber;
-      if (seasonNumber !== undefined && seasonNumber !== null) {
-        if (!groups[seasonNumber]) {
-          groups[seasonNumber] = [];
-        }
-        groups[seasonNumber].push(episode.item);
-      }
-    });
-
-    // Sort episodes within each season
-    Object.values(groups).forEach((episodes) => {
-      episodes.sort((a, b) => (a.IndexNumber || 0) - (b.IndexNumber || 0));
-    });
-
-    return groups;
-  }, [series]);
-
-  // Get unique seasons (just the season numbers, sorted)
-  const uniqueSeasons = useMemo(() => {
-    const seasonNumbers = Object.keys(seasonGroups)
-      .map(Number)
-      .sort((a, b) => a - b);
-    return seasonNumbers.map((seasonNum) => seasonGroups[seasonNum][0]); // First episode of each season
-  }, [seasonGroups]);
-
   const seasonIndex =
     seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
     episodeSeasonIndex ||
     "";
 
   const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    return seasonGroups[Number(seasonIndex)] ?? [];
-  }, [seasonGroups, seasonIndex]);
+    const seasons: Record<string, BaseItemDto[]> = {};
+
+    series?.forEach((episode) => {
+      if (!seasons[episode.item.ParentIndexNumber!]) {
+        seasons[episode.item.ParentIndexNumber!] = [];
+      }
+
+      seasons[episode.item.ParentIndexNumber!].push(episode.item);
+    });
+    return (
+      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
+      []
+    );
+  }, [series, seasonIndex]);
 
   const initialSeasonIndex = useMemo(
     () =>
@@ -120,7 +102,7 @@ export default function page() {
         <View className='flex flex-row items-center justify-start my-2 px-4'>
           <SeasonDropdown
             item={series[0].item}
-            seasons={uniqueSeasons}
+            seasons={series.map((s) => s.item)}
             state={seasonIndexState}
             initialSeasonIndex={initialSeasonIndex!}
             onSelect={(season) => {

bun.lock

@@ -67,7 +67,7 @@
         "react-native-ios-utilities": "5.1.8",
         "react-native-mmkv": "2.12.2",
         "react-native-pager-view": "^6.9.1",
-        "react-native-reanimated": "~3.16.7",
+        "react-native-reanimated": "~3.19.0",
         "react-native-reanimated-carousel": "4.0.2",
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.11.1",
@@ -1642,7 +1642,7 @@
 
     "react-native-pager-view": ["react-native-pager-view@6.9.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-uUT0MMMbNtoSbxe9pRvdJJKEi9snjuJ3fXlZhG8F2vVMOBJVt/AFtqMPUHu9yMflmqOr08PewKzj9EPl/Yj+Gw=="],
 
-    "react-native-reanimated": ["react-native-reanimated@3.16.7", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-qoUUQOwE1pHlmQ9cXTJ2MX9FQ9eHllopCLiWOkDkp6CER95ZWeXhJCP4cSm6AD4jigL5jHcZf/SkWrg8ttZUsw=="],
+    "react-native-reanimated": ["react-native-reanimated@3.19.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-ILL0FSNzSVIg6WuawrsMBvNxk2yJFiTUcahimXDAeNiE/09eagVUlHhYWXAAmH0umvAOafBaGjO7YfBhUrf5ZQ=="],
 
     "react-native-reanimated-carousel": ["react-native-reanimated-carousel@4.0.2", "", { "peerDependencies": { "react": ">=18.0.0", "react-native": ">=0.70.3", "react-native-gesture-handler": ">=2.9.0", "react-native-reanimated": ">=3.0.0" } }, "sha512-vNpCfPlFoOVKHd+oB7B0luoJswp+nyz0NdJD8+LCrf25JiNQXfM22RSJhLaksBHqk3fm8R4fKWPNcfy5w7wL1Q=="],
 
@@ -2216,6 +2216,8 @@
 
     "react-native/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
+    "react-native-reanimated/react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
+
     "react-native-web/@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],
 
     "react-native-web/memoize-one": ["memoize-one@6.0.0", "", {}, "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="],

components/common/HorrizontalScroll.tsx

@@ -1,5 +1,5 @@
 import { FlashList, type FlashListProps } from "@shopify/flash-list";
-import React, { useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { View, type ViewStyle } from "react-native";
 import { Text } from "./Text";
 
@@ -19,58 +19,64 @@ interface HorizontalScrollProps<T>
   keyExtractor?: (item: T, index: number) => string;
   containerStyle?: ViewStyle;
   contentContainerStyle?: ViewStyle;
+  loadingContainerStyle?: ViewStyle;
   height?: number;
   loading?: boolean;
   extraData?: any;
   noItemsText?: string;
 }
 
-export const HorizontalScroll = <T,>(
-  props: HorizontalScrollProps<T> & {
-    ref?: React.ForwardedRef<HorizontalScrollRef>;
-  },
-) => {
-  const {
-    data = [],
-    keyExtractor,
-    renderItem,
-    containerStyle,
-    contentContainerStyle,
-    loading = false,
-    height = 164,
-    extraData,
-    noItemsText,
-    ref,
-    ...restProps
-  } = props;
-  const flashListRef = useRef<FlashList<T>>(null);
+export const HorizontalScroll = forwardRef<
+  HorizontalScrollRef,
+  HorizontalScrollProps<any>
+>(
+  <T,>(
+    {
+      data = [],
+      keyExtractor,
+      renderItem,
+      containerStyle,
+      contentContainerStyle,
+      loadingContainerStyle,
+      loading = false,
+      height = 164,
+      extraData,
+      noItemsText,
+      ...props
+    }: HorizontalScrollProps<T>,
+    ref: React.ForwardedRef<HorizontalScrollRef>,
+  ) => {
+    const flashListRef = useRef<FlashList<T>>(null);
 
-  useImperativeHandle(ref!, () => ({
-    scrollToIndex: (index: number, viewOffset: number) => {
-      flashListRef.current?.scrollToIndex({
-        index,
-        animated: true,
-        viewPosition: 0,
-        viewOffset,
-      });
-    },
-  }));
+    useImperativeHandle(ref!, () => ({
+      scrollToIndex: (index: number, viewOffset: number) => {
+        flashListRef.current?.scrollToIndex({
+          index,
+          animated: true,
+          viewPosition: 0,
+          viewOffset,
+        });
+      },
+    }));
 
-  const renderFlashListItem = ({ item, index }: { item: T; index: number }) => (
-    <View className='mr-2'>{renderItem(item, index)}</View>
-  );
+    const renderFlashListItem = ({
+      item,
+      index,
+    }: {
+      item: T;
+      index: number;
+    }) => <View className='mr-2'>{renderItem(item, index)}</View>;
+
+    if (!data || loading) {
+      return (
+        <View className='px-4 mb-2'>
+          <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
+          <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
+        </View>
+      );
+    }
 
-  if (!data || loading) {
     return (
-      <View className='px-4 mb-2'>
-        <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
-        <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
-      </View>
-    );
-  }
-
-  return (
-    <View style={containerStyle}>
       <FlashList<T>
         ref={flashListRef}
         data={data}
@@ -91,8 +97,8 @@ export const HorizontalScroll = <T,>(
             </Text>
           </View>
         )}
-        {...restProps}
+        {...props}
       />
-    </View>
-  );
-};
+    );
+  },
+);

components/downloads/ActiveDownloads.tsx

@@ -157,7 +157,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
           <TouchableOpacity
             disabled={cancelJobMutation.isPending}
             onPress={() => cancelJobMutation.mutate(process.id)}
-            className='ml-auto p-2 rounded-full'
+            className='ml-auto'
           >
             {cancelJobMutation.isPending ? (
               <ActivityIndicator size='small' color='white' />

components/video-player/controls/Controls.tsx

@@ -5,6 +5,7 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { useAtom } from "jotai";
 import { debounce } from "lodash";
 import {
   type Dispatch,
@@ -40,8 +41,10 @@ import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useTrickplay } from "@/hooks/useTrickplay";
 import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
 import { writeToLog } from "@/utils/log";
 import {
   formatTimeString,
@@ -121,6 +124,7 @@ export const Controls: FC<Props> = ({
   const [settings, updateSettings] = useSettings();
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const [api] = useAtom(apiAtom);
 
   const [episodeView, setEpisodeView] = useState(false);
   const [isSliding, setIsSliding] = useState(false);
@@ -342,9 +346,7 @@ export const Controls: FC<Props> = ({
         previousIndexes,
         mediaSource ?? undefined,
       );
-
       const queryParams = new URLSearchParams({
-        ...(offline && { offline: "true" }),
         itemId: item.Id ?? "",
         audioIndex: defaultAudioIndex?.toString() ?? "",
         subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
@@ -436,6 +438,25 @@ export const Controls: FC<Props> = ({
     [goToNextItem],
   );
 
+  const goToItem = useCallback(
+    async (itemId: string) => {
+      if (offline) {
+        const queryParams = new URLSearchParams({
+          itemId: itemId,
+          playbackPosition:
+            item.UserData?.PlaybackPositionTicks?.toString() ?? "",
+        }).toString();
+        // @ts-expect-error
+        router.replace(`player/direct-player?${queryParams}`);
+        return;
+      }
+      const gotoItem = await getItemById(api, itemId);
+      if (!gotoItem) return;
+      goToItemCommon(gotoItem);
+    },
+    [goToItemCommon, api],
+  );
+
   const updateTimes = useCallback(
     (currentProgress: number, maxValue: number) => {
       const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
@@ -694,7 +715,7 @@ export const Controls: FC<Props> = ({
         <EpisodeList
           item={item}
           close={() => setEpisodeView(false)}
-          goToItem={goToItemCommon}
+          goToItem={goToItem}
         />
       ) : (
         <>

components/video-player/controls/EpisodeList.tsx

@@ -27,7 +27,7 @@ import { runtimeTicksToSeconds } from "@/utils/time";
 type Props = {
   item: BaseItemDto;
   close: () => void;
-  goToItem: (item: BaseItemDto) => void;
+  goToItem: (itemId: string) => Promise<void>;
 };
 
 export const seasonIndexAtom = atom<SeasonIndexState>({});
@@ -221,24 +221,23 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
           ref={scrollViewRef}
           data={episodes}
           extraData={item}
-          // Note otherItem is the item that is being rendered, not the item that is currently selected
-          renderItem={(otherItem, _idx) => (
+          renderItem={(_item, _idx) => (
             <View
-              key={otherItem.Id}
+              key={_item.Id}
               style={{}}
               className={`flex flex-col w-44 ${
-                item.Id !== otherItem.Id ? "opacity-75" : ""
+                item.Id !== _item.Id ? "opacity-75" : ""
               }`}
             >
               <TouchableOpacity
                 onPress={() => {
-                  goToItem(otherItem);
+                  goToItem(_item.Id);
                 }}
               >
                 <ContinueWatchingPoster
-                  item={otherItem}
+                  item={_item}
                   useEpisodePoster
-                  showPlayButton={otherItem.Id !== item.Id}
+                  showPlayButton={_item.Id !== item.Id}
                 />
               </TouchableOpacity>
               <View className='shrink'>
@@ -249,20 +248,20 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
                     height: 36, // lineHeight * 2 for consistent two-line space
                   }}
                 >
-                  {otherItem.Name}
+                  {_item.Name}
                 </Text>
                 <Text numberOfLines={1} className='text-xs text-neutral-475'>
-                  {`S${otherItem.ParentIndexNumber?.toString()}:E${otherItem.IndexNumber?.toString()}`}
+                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
                 </Text>
                 <Text className='text-xs text-neutral-500'>
-                  {runtimeTicksToSeconds(otherItem.RunTimeTicks)}
+                  {runtimeTicksToSeconds(_item.RunTimeTicks)}
                 </Text>
               </View>
               <Text
-                numberOfLines={7}
+                numberOfLines={5}
                 className='text-xs text-neutral-500 shrink'
               >
-                {otherItem.Overview}
+                {_item.Overview}
               </Text>
             </View>
           )}

eas.json

@@ -46,14 +46,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.30.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.30.0",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -61,7 +61,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.30.2",
+      "channel": "0.30.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/usePlaybackManager.ts

@@ -152,37 +152,22 @@ export const usePlaybackManager = ({
 
     // Handle local state update for downloaded items
     if (localItem) {
-      const runTimeTicks = localItem.item.RunTimeTicks ?? 0;
-      const playedPercentage =
-        runTimeTicks > 0 ? (positionTicks / runTimeTicks) * 100 : 0;
-
-      // Jellyfin thresholds
-      const MINIMUM_PERCENTAGE = 5; // 5% minimum to save progress
-      const PLAYED_THRESHOLD_PERCENTAGE = 90; // 90% to mark as played
-
       const isItemConsideredPlayed =
-        playedPercentage > PLAYED_THRESHOLD_PERCENTAGE;
-      const meetsMinimumPercentage = playedPercentage >= MINIMUM_PERCENTAGE;
-
-      const shouldSaveProgress =
-        meetsMinimumPercentage && !isItemConsideredPlayed;
-
+        (localItem.item.UserData?.PlayedPercentage ?? 0) > 90;
       updateDownloadedItem(itemId, {
         ...localItem,
         item: {
           ...localItem.item,
           UserData: {
             ...localItem.item.UserData,
-            PlaybackPositionTicks:
-              isItemConsideredPlayed || !shouldSaveProgress
-                ? 0
-                : Math.floor(positionTicks),
+            PlaybackPositionTicks: isItemConsideredPlayed
+              ? 0
+              : Math.floor(positionTicks),
             Played: isItemConsideredPlayed,
             LastPlayedDate: new Date().toISOString(),
-            PlayedPercentage:
-              isItemConsideredPlayed || !shouldSaveProgress
-                ? 0
-                : playedPercentage,
+            PlayedPercentage: isItemConsideredPlayed
+              ? 0
+              : (positionTicks / localItem.item.RunTimeTicks!) * 100,
           },
         },
       });

package.json

@@ -82,7 +82,7 @@
     "react-native-ios-utilities": "5.1.8",
     "react-native-mmkv": "2.12.2",
     "react-native-pager-view": "^6.9.1",
-    "react-native-reanimated": "~3.16.7",
+    "react-native-reanimated": "~3.19.0",
     "react-native-reanimated-carousel": "4.0.2",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",

providers/JellyfinProvider.tsx

@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.30.2" },
+            clientInfo: { name: "Streamyfin", version: "0.30.0" },
             deviceInfo: {
               name: deviceName,
               id,
@@ -93,7 +93,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.30.2"`,
+      }, DeviceId="${deviceId}", Version="0.30.0"`,
     };
   }, [deviceId]);