fix player reporting when exiting and app splash load

Fixed an issue where the playback would continue when the player was
exited
Fixed an issue where the splash screen would take forever to load when
server is not reachable tested with 192.0.2.1 documentation IP (RFC 5737) — packets to it are silently dropped by routers

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

GLOBAL_MODAL_GUIDE.md

@@ -143,6 +143,14 @@ interface ModalOptions {
 }
 ```
 
+## Examples
+
+See `components/ExampleGlobalModalUsage.tsx` for comprehensive examples including:
+- Simple content modal
+- Modal with custom snap points
+- Complex component in modal
+- Success/error modals triggered from functions
+
 ## Default Styling
 
 The modal uses these default styles (can be overridden via options):

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

@@ -439,21 +439,15 @@ export default function DirectPlayerPage() {
     if (!item?.Id || !stream?.sessionId || offline || !api) return;
 
     const currentTimeInTicks = msToTicks(progress.get());
-    await getPlaystateApi(api).onPlaybackStopped({
-      itemId: item.Id,
-      mediaSourceId: mediaSourceId,
-      positionTicks: currentTimeInTicks,
-      playSessionId: stream.sessionId,
+    await getPlaystateApi(api).reportPlaybackStopped({
+      playbackStopInfo: {
+        ItemId: item.Id,
+        MediaSourceId: mediaSourceId,
+        PositionTicks: currentTimeInTicks,
+        PlaySessionId: stream.sessionId,
+      },
     });
-  }, [
-    api,
-    item,
-    mediaSourceId,
-    stream,
-    progress,
-    offline,
-    revalidateProgressCache,
-  ]);
+  }, [api, item, mediaSourceId, stream, progress, offline]);
 
   const stop = useCallback(() => {
     // Update URL with final playback position before stopping
@@ -471,9 +465,10 @@ export default function DirectPlayerPage() {
   useEffect(() => {
     const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
     return () => {
+      reportPlaybackStopped();
       beforeRemoveListener();
     };
-  }, [navigation, stop]);
+  }, [navigation, stop, reportPlaybackStopped]);
 
   const currentPlayStateInfo = useCallback(():
     | PlaybackProgressInfo

augmentations/index.ts

@@ -1,3 +1,4 @@
 export * from "./api";
 export * from "./mmkv";
 export * from "./number";
+export * from "./string";

augmentations/number.ts

@@ -3,6 +3,7 @@ declare global {
     bytesToReadable(decimals?: number): string;
     secondsToMilliseconds(): number;
     minutesToMilliseconds(): number;
+    hoursToMilliseconds(): number;
   }
 }
 
@@ -27,4 +28,8 @@ Number.prototype.minutesToMilliseconds = function () {
   return this.valueOf() * (60).secondsToMilliseconds();
 };
 
+Number.prototype.hoursToMilliseconds = function () {
+  return this.valueOf() * (60).minutesToMilliseconds();
+};
+
 export {};

augmentations/string.ts

@@ -0,0 +1,14 @@
+declare global {
+  interface String {
+    toTitle(): string;
+  }
+}
+
+String.prototype.toTitle = function () {
+  return this.replaceAll("_", " ").replace(
+    /\w\S*/g,
+    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),
+  );
+};
+
+export {};

components/ExampleGlobalModalUsage.tsx

@@ -0,0 +1,203 @@
+/**
+ * Example Usage of Global Modal
+ *
+ * This file demonstrates how to use the global modal system from anywhere in your app.
+ * You can delete this file after understanding how it works.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+/**
+ * Example 1: Simple Content Modal
+ */
+export const SimpleModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6'>
+        <Text className='text-2xl font-bold mb-4 text-white'>Simple Modal</Text>
+        <Text className='text-white mb-4'>
+          This is a simple modal with just some text content.
+        </Text>
+        <Text className='text-neutral-400'>
+          Swipe down or tap outside to close.
+        </Text>
+      </View>,
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-purple-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Open Simple Modal</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 2: Modal with Custom Snap Points
+ */
+export const CustomSnapPointsExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(
+      <View className='p-6' style={{ minHeight: 400 }}>
+        <Text className='text-2xl font-bold mb-4 text-white'>
+          Custom Snap Points
+        </Text>
+        <Text className='text-white mb-4'>
+          This modal has custom snap points (25%, 50%, 90%).
+        </Text>
+        <View className='bg-neutral-800 p-4 rounded-lg'>
+          <Text className='text-white'>
+            Try dragging the modal to different heights!
+          </Text>
+        </View>
+      </View>,
+      {
+        snapPoints: ["25%", "50%", "90%"],
+        enableDynamicSizing: false,
+      },
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-blue-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Custom Snap Points</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 3: Complex Component in Modal
+ */
+const SettingsModalContent = () => {
+  const { hideModal } = useGlobalModal();
+
+  const settings = [
+    {
+      id: 1,
+      title: "Notifications",
+      icon: "notifications-outline" as const,
+      enabled: true,
+    },
+    { id: 2, title: "Dark Mode", icon: "moon-outline" as const, enabled: true },
+    {
+      id: 3,
+      title: "Auto-play",
+      icon: "play-outline" as const,
+      enabled: false,
+    },
+  ];
+
+  return (
+    <View className='p-6'>
+      <Text className='text-2xl font-bold mb-6 text-white'>Settings</Text>
+
+      {settings.map((setting, index) => (
+        <View
+          key={setting.id}
+          className={`flex-row items-center justify-between py-4 ${
+            index !== settings.length - 1 ? "border-b border-neutral-700" : ""
+          }`}
+        >
+          <View className='flex-row items-center gap-3'>
+            <Ionicons name={setting.icon} size={24} color='white' />
+            <Text className='text-white text-lg'>{setting.title}</Text>
+          </View>
+          <View
+            className={`w-12 h-7 rounded-full ${
+              setting.enabled ? "bg-purple-600" : "bg-neutral-600"
+            }`}
+          >
+            <View
+              className={`w-5 h-5 rounded-full bg-white shadow-md transform ${
+                setting.enabled ? "translate-x-6" : "translate-x-1"
+              }`}
+              style={{ marginTop: 4 }}
+            />
+          </View>
+        </View>
+      ))}
+
+      <TouchableOpacity
+        onPress={hideModal}
+        className='bg-purple-600 px-4 py-3 rounded-lg mt-6'
+      >
+        <Text className='text-white font-semibold text-center'>Close</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export const ComplexModalExample = () => {
+  const { showModal } = useGlobalModal();
+
+  const handleOpenModal = () => {
+    showModal(<SettingsModalContent />);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenModal}
+      className='bg-green-600 px-4 py-2 rounded-lg'
+    >
+      <Text className='text-white font-semibold'>Complex Component</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * Example 4: Modal Triggered from Function (e.g., API response)
+ */
+export const useShowSuccessModal = () => {
+  const { showModal } = useGlobalModal();
+
+  return (message: string) => {
+    showModal(
+      <View className='p-6 items-center'>
+        <View className='bg-green-500 rounded-full p-4 mb-4'>
+          <Ionicons name='checkmark' size={48} color='white' />
+        </View>
+        <Text className='text-2xl font-bold mb-2 text-white'>Success!</Text>
+        <Text className='text-white text-center'>{message}</Text>
+      </View>,
+    );
+  };
+};
+
+/**
+ * Main Demo Component
+ */
+export const GlobalModalDemo = () => {
+  const showSuccess = useShowSuccessModal();
+
+  return (
+    <View className='p-6 gap-4'>
+      <Text className='text-2xl font-bold mb-4 text-white'>
+        Global Modal Examples
+      </Text>
+
+      <SimpleModalExample />
+      <CustomSnapPointsExample />
+      <ComplexModalExample />
+
+      <TouchableOpacity
+        onPress={() => showSuccess("Operation completed successfully!")}
+        className='bg-orange-600 px-4 py-2 rounded-lg'
+      >
+        <Text className='text-white font-semibold'>Show Success Modal</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

components/common/LargePoster.tsx

@@ -0,0 +1,20 @@
+import { Image } from "expo-image";
+import { View } from "react-native";
+
+export const LargePoster: React.FC<{ url?: string | null }> = ({ url }) => {
+  if (!url)
+    return (
+      <View className='p-4 rounded-xl overflow-hidden '>
+        <View className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800' />
+      </View>
+    );
+
+  return (
+    <View className='p-4 rounded-xl overflow-hidden '>
+      <Image
+        source={{ uri: url }}
+        className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800'
+      />
+    </View>
+  );
+};

components/common/VerticalSkeleton.tsx

@@ -0,0 +1,28 @@
+import { View, type ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  index: number;
+}
+
+export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
+  return (
+    <View
+      key={index}
+      style={{
+        width: "32%",
+      }}
+      className='flex flex-col'
+      {...props}
+    >
+      <View
+        style={{
+          aspectRatio: "10/15",
+        }}
+        className='w-full bg-neutral-800 mb-2 rounded-lg'
+      />
+      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
+      <View className='h-2 bg-neutral-800 rounded-full mb-1' />
+      <View className='h-2 bg-neutral-800 rounded-full mb-2 w-1/2' />
+    </View>
+  );
+};

components/navigation/TabBarIcon.tsx

@@ -0,0 +1,12 @@
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import type { IconProps } from "@expo/vector-icons/build/createIconSet";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import type { ComponentProps } from "react";
+
+export function TabBarIcon({
+  style,
+  ...rest
+}: IconProps<ComponentProps<typeof Ionicons>["name"]>) {
+  return <Ionicons size={26} style={[{ marginBottom: -3 }, style]} {...rest} />;
+}

components/posters/EpisodePoster.tsx

@@ -0,0 +1,63 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+type MoviePosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+export const EpisodePoster: React.FC<MoviePosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+    }
+  }, [item]);
+
+  const [progress, _setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0,
+  );
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.Primary as string;
+    return item.ImageBlurHashes?.Primary?.[key];
+  }, [item]);
+
+  return (
+    <View className='relative rounded-lg overflow-hidden border border-neutral-900'>
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          aspectRatio: "10/15",
+          width: "100%",
+        }}
+      />
+      <WatchedIndicator item={item} />
+      {showProgress && progress > 0 && (
+        <View className='h-1 bg-red-600 w-full' />
+      )}
+    </View>
+  );
+};

components/posters/ParentPoster.tsx

@@ -0,0 +1,48 @@
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+type PosterProps = {
+  id?: string;
+  showProgress?: boolean;
+};
+
+const ParentPoster: React.FC<PosterProps> = ({ id }) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () => `${api?.basePath}/Items/${id}/Images/Primary`,
+    [id],
+  );
+
+  if (!url || !id)
+    return (
+      <View
+        className='border border-neutral-900'
+        style={{
+          aspectRatio: "10/15",
+        }}
+      />
+    );
+
+  return (
+    <View className='rounded-lg overflow-hidden border border-neutral-900'>
+      <Image
+        key={id}
+        id={id}
+        source={{
+          uri: url,
+        }}
+        cachePolicy={"memory-disk"}
+        contentFit='cover'
+        style={{
+          aspectRatio: "10/15",
+        }}
+      />
+    </View>
+  );
+};
+
+export default ParentPoster;

components/settings/Dashboard.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import useRouter from "@/hooks/useAppRouter";
+import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
+import { useSettings } from "@/utils/atoms/settings";
+import { ListGroup } from "../list/ListGroup";
+import { ListItem } from "../list/ListItem";
+
+export const Dashboard = () => {
+  const { settings } = useSettings();
+  const { sessions = [] } = useSessions({} as useSessionsProps);
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  if (!settings) return null;
+  return (
+    <View>
+      <ListGroup title={t("home.settings.dashboard.title")} className='mt-4'>
+        <ListItem
+          className={sessions.length !== 0 ? "bg-purple-900" : ""}
+          onPress={() => router.push("/settings/dashboard/sessions")}
+          title={t("home.settings.dashboard.sessions_title")}
+          showArrow
+        />
+      </ListGroup>
+    </View>
+  );
+};

components/settings/DownloadSettings.tsx

@@ -0,0 +1,3 @@
+export default function DownloadSettings() {
+  return null;
+}

components/settings/DownloadSettings.tv.tsx

@@ -0,0 +1,3 @@
+export default function DownloadSettings() {
+  return null;
+}

components/settings/Jellyseerr.tsx

@@ -115,6 +115,9 @@ export const JellyseerrSettings = () => {
           </>
         ) : (
           <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
+            <Text className='text-xs text-red-600 mb-2'>
+              {t("home.settings.plugins.jellyseerr.jellyseerr_warning")}
+            </Text>
             <Text className='font-bold mb-1'>
               {t("home.settings.plugins.jellyseerr.server_url")}
             </Text>

constants/Languages.ts

@@ -0,0 +1,39 @@
+import type { DefaultLanguageOption } from "@/utils/atoms/settings";
+
+export const LANGUAGES: DefaultLanguageOption[] = [
+  { label: "English", value: "eng" },
+  { label: "Spanish", value: "spa" },
+  { label: "Chinese (Mandarin)", value: "cmn" },
+  { label: "Hindi", value: "hin" },
+  { label: "Arabic", value: "ara" },
+  { label: "French", value: "fra" },
+  { label: "Russian", value: "rus" },
+  { label: "Portuguese", value: "por" },
+  { label: "Japanese", value: "jpn" },
+  { label: "German", value: "deu" },
+  { label: "Italian", value: "ita" },
+  { label: "Korean", value: "kor" },
+  { label: "Turkish", value: "tur" },
+  { label: "Dutch", value: "nld" },
+  { label: "Polish", value: "pol" },
+  { label: "Vietnamese", value: "vie" },
+  { label: "Thai", value: "tha" },
+  { label: "Indonesian", value: "ind" },
+  { label: "Greek", value: "ell" },
+  { label: "Swedish", value: "swe" },
+  { label: "Danish", value: "dan" },
+  { label: "Norwegian", value: "nor" },
+  { label: "Finnish", value: "fin" },
+  { label: "Czech", value: "ces" },
+  { label: "Hungarian", value: "hun" },
+  { label: "Romanian", value: "ron" },
+  { label: "Ukrainian", value: "ukr" },
+  { label: "Hebrew", value: "heb" },
+  { label: "Bengali", value: "ben" },
+  { label: "Punjabi", value: "pan" },
+  { label: "Tagalog", value: "tgl" },
+  { label: "Swahili", value: "swa" },
+  { label: "Malay", value: "msa" },
+  { label: "Persian", value: "fas" },
+  { label: "Urdu", value: "urd" },
+];

hooks/useControlsVisibility.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useSharedValue } from "react-native-reanimated";
+
+export const useControlsVisibility = (timeout = 3000) => {
+  const opacity = useSharedValue(1);
+
+  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const showControls = useCallback(() => {
+    opacity.value = 1;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+    hideControlsTimerRef.current = setTimeout(() => {
+      opacity.value = 0;
+    }, timeout);
+  }, [timeout]);
+
+  const hideControls = useCallback(() => {
+    opacity.value = 0;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (hideControlsTimerRef.current) {
+        clearTimeout(hideControlsTimerRef.current);
+      }
+    };
+  }, []);
+
+  return { opacity, showControls, hideControls };
+};

hooks/useDownloadedFileOpener.ts

@@ -0,0 +1,35 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useCallback } from "react";
+import useRouter from "@/hooks/useAppRouter";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
+
+export const useDownloadedFileOpener = () => {
+  const router = useRouter();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
+
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      if (!item.Id) {
+        writeToLog("ERROR", "Attempted to open a file without an ID.");
+        console.error("Attempted to open a file without an ID.");
+        return;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      try {
+        router.push(`/player/direct-player?${queryParams.toString()}`);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
+      }
+    },
+    [setOfflineSettings, setPlayUrl, router],
+  );
+
+  return { openFile };
+};

hooks/useImageColors.ts

@@ -0,0 +1,120 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import type * as ImageColorsType from "react-native-image-colors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+// Conditionally import react-native-image-colors only on non-TV platforms
+const ImageColors = Platform.isTV
+  ? null
+  : (require("react-native-image-colors") as typeof ImageColorsType);
+
+import {
+  adjustToNearBlack,
+  calculateTextColor,
+  isCloseToBlack,
+  itemThemeColorAtom,
+} from "@/utils/atoms/primaryColor";
+import { getItemImage } from "@/utils/getItemImage";
+import { storage } from "@/utils/mmkv";
+
+/**
+ * Custom hook to extract and manage image colors for a given item.
+ *
+ * @param item - The BaseItemDto object representing the item.
+ * @param disabled - A boolean flag to disable color extraction.
+ *
+ */
+export const useImageColors = ({
+  item,
+  url,
+  disabled,
+}: {
+  item?: BaseItemDto | null;
+  url?: string | null;
+  disabled?: boolean;
+}) => {
+  const api = useAtomValue(apiAtom);
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  const isTv = Platform.isTV;
+
+  const source = useMemo(() => {
+    if (!api) return;
+    if (url) return { uri: url };
+    if (item)
+      return getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 80,
+        width: 300,
+      });
+    return null;
+  }, [api, item, url]);
+
+  useEffect(() => {
+    if (isTv) return;
+    if (disabled) return;
+    if (source?.uri) {
+      const _primary = storage.getString(`${source.uri}-primary`);
+      const _text = storage.getString(`${source.uri}-text`);
+
+      if (_primary && _text) {
+        setPrimaryColor({
+          primary: _primary,
+          text: _text,
+        });
+        return;
+      }
+
+      // Extract colors from the image
+      if (!ImageColors?.getColors) return;
+
+      ImageColors.getColors(source.uri, {
+        fallback: "#fff",
+        cache: false,
+      })
+        .then((colors: ImageColorsType.ImageColorsResult) => {
+          let primary = "#fff";
+          let text = "#000";
+          let backup = "#fff";
+
+          // Select the appropriate color based on the platform
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            backup = colors.vibrant;
+          } else if (colors.platform === "ios") {
+            primary = colors.detail;
+            backup = colors.primary;
+          }
+
+          // Adjust the primary color if it's too close to black
+          if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
+            primary = adjustToNearBlack(primary);
+          }
+
+          // Calculate the text color based on the primary color
+          if (primary) text = calculateTextColor(primary);
+
+          setPrimaryColor({
+            primary,
+            text,
+          });
+
+          // Cache the colors in storage
+          if (source.uri && primary) {
+            storage.set(`${source.uri}-primary`, primary);
+            storage.set(`${source.uri}-text`, text);
+          }
+        })
+        .catch((error: any) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [isTv, source?.uri, setPrimaryColor, disabled]);
+
+  if (isTv) return;
+};

providers/JellyfinProvider.tsx

@@ -619,6 +619,11 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
             setUser(storedUser);
           }
 
+          // Dismiss splash screen with cached data immediately,
+          // fetch fresh user data in the background
+          setInitialLoaded(true);
+
+          try {
             const response = await getUserApi(apiInstance).getCurrentUser();
             setUser(response.data);
 
@@ -653,10 +658,15 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
                 });
               }
             }
+          } catch (e) {
+            // Background fetch failed — app already rendered with cached data
+            console.warn("Background user fetch failed, using cached data:", e);
+          }
+        } else {
+          setInitialLoaded(true);
         }
       } catch (e) {
         console.error(e);
-      } finally {
         setInitialLoaded(true);
       }
     };

translations/en.json

@@ -108,7 +108,7 @@
       "features_description": "Streamyfin has a bunch of features and integrates with a wide array of software which you can find in the settings menu, these include:",
       "jellyseerr_feature_description": "Connect to your Seerr instance and request movies directly in the app.",
       "downloads_feature_title": "Downloads",
-      "downloads_feature_description": "Download movies and tv-shows to view offline.",
+      "downloads_feature_description": "Download movies and tv-shows to view offline. Use either the default method or install the optimize server to download files in the background.",
       "chromecast_feature_description": "Cast movies and tv-shows to your Chromecast devices.",
       "centralised_settings_plugin_title": "Centralised Settings Plugin",
       "centralised_settings_plugin_description": "Configure settings from a centralised location on your Jellyfin server. All client settings for all users will be synced automatically.",
@@ -384,6 +384,7 @@
       "plugins": {
         "plugins_title": "Plugins",
         "jellyseerr": {
+          "jellyseerr_warning": "This integration is in its early stages. Expect things to change.",
           "server_url": "Server URL",
           "server_url_hint": "Example: http(s)://your-host.url\n(add port if required)",
           "server_url_placeholder": "Seerr URL",

utils/bToMb.ts

@@ -0,0 +1,18 @@
+/**
+ * Convert bits to megabits or gigabits
+ *
+ * Return nice looking string
+ * If under 1000Mb, return XXXMB, else return X.XGB
+ */
+
+export function convertBitsToMegabitsOrGigabits(bits?: number | null): string {
+  if (!bits) return "0MB";
+
+  const megabits = bits / 1000000;
+
+  if (megabits < 1000) {
+    return `${Math.round(megabits)}MB`;
+  }
+  const gigabits = megabits / 1000;
+  return `${gigabits.toFixed(1)}GB`;
+}

utils/collectionTypeToItemType.ts

@@ -0,0 +1,47 @@
+import {
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client";
+
+/**
+ * Converts a ColletionType to a BaseItemKind (also called ItemType)
+ *
+ * CollectionTypes
+ *  readonly Unknown: "unknown";
+    readonly Movies: "movies";
+    readonly Tvshows: "tvshows";
+    readonly Trailers: "trailers";
+    readonly Homevideos: "homevideos";
+    readonly Boxsets: "boxsets";
+    readonly Books: "books";
+    readonly Photos: "photos";
+    readonly Livetv: "livetv";
+    readonly Playlists: "playlists";
+    readonly Folders: "folders";
+ */
+export const colletionTypeToItemType = (
+  collectionType?: CollectionType | null,
+): BaseItemKind | undefined => {
+  if (!collectionType) return undefined;
+
+  switch (collectionType) {
+    case CollectionType.Movies:
+      return BaseItemKind.Movie;
+    case CollectionType.Tvshows:
+      return BaseItemKind.Series;
+    case CollectionType.Homevideos:
+      return BaseItemKind.Video;
+    case CollectionType.Books:
+      return BaseItemKind.Book;
+    case CollectionType.Playlists:
+      return BaseItemKind.Playlist;
+    case CollectionType.Folders:
+      return BaseItemKind.Folder;
+    case CollectionType.Photos:
+      return BaseItemKind.Photo;
+    case CollectionType.Trailers:
+      return BaseItemKind.Trailer;
+  }
+
+  return undefined;
+};

utils/hls/parseM3U8ForSubtitles.ts

@@ -0,0 +1,56 @@
+import axios from "axios";
+
+export interface SubtitleTrack {
+  index: number;
+  name: string;
+  uri: string;
+  language: string;
+  default: boolean;
+  forced: boolean;
+  autoSelect: boolean;
+}
+
+export async function parseM3U8ForSubtitles(
+  url: string,
+): Promise<SubtitleTrack[]> {
+  try {
+    const response = await axios.get(url, { responseType: "text" });
+    const lines = response.data.split(/\r?\n/);
+    const subtitleTracks: SubtitleTrack[] = [];
+    let index = 0;
+
+    lines.forEach((line: string) => {
+      if (line.startsWith("#EXT-X-MEDIA:TYPE=SUBTITLES")) {
+        const attributes = parseAttributes(line);
+        const track: SubtitleTrack = {
+          index: index++,
+          name: attributes.NAME || "",
+          uri: attributes.URI || "",
+          language: attributes.LANGUAGE || "",
+          default: attributes.DEFAULT === "YES",
+          forced: attributes.FORCED === "YES",
+          autoSelect: attributes.AUTOSELECT === "YES",
+        };
+        subtitleTracks.push(track);
+      }
+    });
+
+    return subtitleTracks;
+  } catch (error) {
+    console.error("Failed to fetch or parse the M3U8 file:", error);
+    throw error;
+  }
+}
+
+function parseAttributes(line: string): { [key: string]: string } {
+  const attributes: { [key: string]: string } = {};
+  const regex = /([A-Z-]+)=(?:"([^"]*)"|([^,]*))/g;
+
+  for (const match of line.matchAll(regex)) {
+    const key = match[1];
+    const value = match[2] ?? match[3]; // quoted or unquoted
+    attributes[key] = value;
+  }
+
+  return attributes;
+}

utils/jellyfin/session/capabilities.ts

@@ -0,0 +1,56 @@
+import type { Api } from "@jellyfin/sdk";
+import type { AxiosResponse } from "axios";
+import type { Settings } from "../../atoms/settings";
+import { generateDeviceProfile } from "../../profiles/native";
+import { getAuthHeaders } from "../jellyfin";
+
+interface PostCapabilitiesParams {
+  api: Api | null | undefined;
+  itemId: string | null | undefined;
+  sessionId: string | null | undefined;
+  deviceProfile: Settings["deviceProfile"];
+}
+
+/**
+ * Marks a media item as not played for a specific user.
+ *
+ * @param params - The parameters for marking an item as not played
+ * @returns A promise that resolves to true if the operation was successful, false otherwise
+ */
+export const postCapabilities = async ({
+  api,
+  itemId,
+  sessionId,
+}: PostCapabilitiesParams): Promise<AxiosResponse> => {
+  if (!api || !itemId || !sessionId) {
+    throw new Error("Missing parameters for marking item as not played");
+  }
+
+  try {
+    const d = api.axiosInstance.post(
+      `${api.basePath}/Sessions/Capabilities/Full`,
+      {
+        playableMediaTypes: ["Audio", "Video"],
+        supportedCommands: [
+          "PlayState",
+          "Play",
+          "ToggleFullscreen",
+          "DisplayMessage",
+          "Mute",
+          "Unmute",
+          "SetVolume",
+          "ToggleMute",
+        ],
+        supportsMediaControl: true,
+        id: sessionId,
+        DeviceProfile: generateDeviceProfile(),
+      },
+      {
+        headers: getAuthHeaders(api),
+      },
+    );
+    return d;
+  } catch (_error) {
+    throw new Error("Failed to mark as not played");
+  }
+};

utils/jellyfin/tvshows/nextUp.ts

@@ -0,0 +1,44 @@
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getAuthHeaders } from "../jellyfin";
+
+interface NextUpParams {
+  itemId?: string | null;
+  userId?: string | null;
+  api?: Api | null;
+}
+
+/**
+ * Fetches the next up episodes for a series or all series for a user.
+ *
+ * @param params - The parameters for fetching next up episodes
+ * @returns A promise that resolves to an array of BaseItemDto representing the next up episodes
+ */
+export const nextUp = async ({
+  itemId,
+  userId,
+  api,
+}: NextUpParams): Promise<BaseItemDto[]> => {
+  if (!userId || !api) {
+    console.error("Invalid parameters for nextUp: missing userId or api");
+    return [];
+  }
+
+  try {
+    const response = await api.axiosInstance.get<{ Items: BaseItemDto[] }>(
+      `${api.basePath}/Shows/NextUp`,
+      {
+        params: {
+          SeriesId: itemId || undefined,
+          UserId: userId,
+          Fields: "MediaSourceCount",
+        },
+        headers: getAuthHeaders(api),
+      },
+    );
+
+    return response.data.Items;
+  } catch (_error) {
+    return [];
+  }
+};

utils/jellyfin/user-library/getItemById.ts

@@ -0,0 +1,34 @@
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+
+/**
+ * Retrieves an item by its ID from the API.
+ *
+ * @param api - The Jellyfin API instance.
+ * @param itemId - The ID of the item to retrieve.
+ * @returns The item object or undefined if no item matches the ID.
+ */
+export const getItemById = async (
+  api?: Api | null | undefined,
+  itemId?: string | null | undefined,
+): Promise<BaseItemDto | undefined> => {
+  if (!api || !itemId) {
+    return undefined;
+  }
+
+  try {
+    const itemData = await getUserLibraryApi(api).getItem({ itemId });
+
+    const item = itemData.data;
+    if (!item) {
+      console.error("No items found with the specified ID:", itemId);
+      return undefined;
+    }
+
+    return item;
+  } catch (error) {
+    console.error("Failed to retrieve the item:", error);
+    throw new Error(`Failed to retrieve the item due to an error: ${error}`);
+  }
+};

utils/log.tsx

@@ -72,6 +72,21 @@ export const readFromLog = (): LogEntry[] => {
   return logs ? JSON.parse(logs) : [];
 };
 
+export const clearLogs = () => {
+  storage.remove("logs");
+};
+
+export const dumpDownloadDiagnostics = (extra: any = {}) => {
+  const diagnostics = {
+    timestamp: new Date().toISOString(),
+    processes: extra?.processes || [],
+    nativeTasks: extra?.nativeTasks || [],
+    focusedProcess: extra?.focusedProcess || null,
+  };
+  writeDebugLog("Download diagnostics", diagnostics);
+  return diagnostics;
+};
+
 export function useLog() {
   const context = useContext(LogContext);
   if (context === null) {

utils/secondsToTicks.ts

@@ -0,0 +1,5 @@
+// seconds to ticks util
+
+export function secondsToTicks(seconds: number): number {
+  return seconds * 10000000;
+}

utils/secureCredentials.ts

@@ -203,6 +203,27 @@ export async function hasAccountCredential(
   return stored !== null;
 }
 
+/**
+ * Delete all credentials for all accounts on all servers.
+ */
+export async function clearAllCredentials(): Promise<void> {
+  const previousServers = getPreviousServers();
+
+  for (const server of previousServers) {
+    for (const account of server.accounts) {
+      const key = credentialKey(server.address, account.userId);
+      await SecureStore.deleteItemAsync(key);
+    }
+  }
+
+  // Clear all accounts from servers
+  const clearedServers = previousServers.map((server) => ({
+    ...server,
+    accounts: [],
+  }));
+  storage.set("previousServers", JSON.stringify(clearedServers));
+}
+
 /**
  * Add or update an account in a server's accounts list.
  */