WIP

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -45,7 +45,7 @@ body:
       label: Version
       description: What version of Streamyfin are you running?
       options:
-        - 0.24.0
+        - 0.23.0
         - 0.22.0
         - 0.21.0
         - older

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.24.0",
+    "version": "0.23.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -36,7 +36,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 50,
+      "versionCode": 49,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive_icon.png"
       },

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

@@ -435,6 +435,7 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
+          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
         }}
       >
         <VlcPlayerView

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

@@ -387,6 +387,7 @@ const Player = () => {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
         }}
       >
         {videoSource ? (

app/_layout.tsx

@@ -13,7 +13,7 @@ import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
 import { LogProvider, writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
+import { formatItemName, storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -385,18 +385,15 @@ function Layout() {
 function saveDownloadedItemInfo(item: BaseItemDto) {
   try {
     const downloadedItems = storage.getString("downloadedItems");
-    let items: BaseItemDto[] = downloadedItems
+    let items: { [key: string]: BaseItemDto } = downloadedItems
       ? JSON.parse(downloadedItems)
-      : [];
+      : {};
 
-    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
-    if (existingItemIndex !== -1) {
-      items[existingItemIndex] = item;
-    } else {
-      items.push(item);
+    if (item.Id) {
+      item.Path = `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`;
+      items[item.Id] = item;
+      storage.set("downloadedItems", JSON.stringify(items));
     }
-
-    storage.set("downloadedItems", JSON.stringify(items));
   } catch (error) {
     writeToLog("ERROR", "Failed to save downloaded item information:", error);
     console.error("Failed to save downloaded item information:", error);

app/login.tsx

@@ -189,129 +189,133 @@ const Login: React.FC = () => {
     }
   };
 
-  return (
-    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-      >
-        {api?.basePath ? (
-          <>
-            <View className="flex flex-col h-full relative items-center justify-center">
-              <View className="px-4 -mt-20 w-full">
-                <View className="flex flex-col space-y-2">
-                  <Text className="text-2xl font-bold -mb-2">
-                    Log in
-                    <>
-                      {serverName ? (
-                        <>
-                          {" to "}
-                          <Text className="text-purple-600">{serverName}</Text>
-                        </>
-                      ) : null}
-                    </>
-                  </Text>
-                  <Text className="text-xs text-neutral-400">
-                    {api.basePath}
-                  </Text>
-                  <Input
-                    placeholder="Username"
-                    onChangeText={(text) =>
-                      setCredentials({ ...credentials, username: text })
-                    }
-                    value={credentials.username}
-                    autoFocus
-                    secureTextEntry={false}
-                    keyboardType="default"
-                    returnKeyType="done"
-                    autoCapitalize="none"
-                    textContentType="username"
-                    clearButtonMode="while-editing"
-                    maxLength={500}
-                  />
-
-                  <Input
-                    className="mb-2"
-                    placeholder="Password"
-                    onChangeText={(text) =>
-                      setCredentials({ ...credentials, password: text })
-                    }
-                    value={credentials.password}
-                    secureTextEntry
-                    keyboardType="default"
-                    returnKeyType="done"
-                    autoCapitalize="none"
-                    textContentType="password"
-                    clearButtonMode="while-editing"
-                    maxLength={500}
-                  />
-                </View>
-
-                <Text className="text-red-600 mb-2">{error}</Text>
-              </View>
-
-              <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
-                <Button
-                  color="black"
-                  onPress={handleQuickConnect}
-                  className="w-full mb-2"
-                >
-                  Use Quick Connect
-                </Button>
-                <Button onPress={handleLogin} loading={loading}>
+  if (api?.basePath) {
+    return (
+      <SafeAreaView style={{ flex: 1 }}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          style={{ flex: 1, height: "100%" }}
+        >
+          <View className="flex flex-col h-full relative items-center justify-center">
+            <View className="px-4 -mt-20 w-full">
+              <View className="flex flex-col space-y-2">
+                <Text className="text-2xl font-bold -mb-2">
                   Log in
-                </Button>
-              </View>
-            </View>
-          </>
-        ) : (
-          <>
-            <View className="flex flex-col h-full relative items-center justify-center w-full">
-              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
-                <Image
-                  style={{
-                    width: 100,
-                    height: 100,
-                    marginLeft: -23,
-                    marginBottom: -20,
-                  }}
-                  source={require("@/assets/images/StreamyFinFinal.png")}
-                />
-                <Text className="text-3xl font-bold">Streamyfin</Text>
-                <Text className="text-neutral-500">
-                  Enter the URL to your Jellyfin server
+                  <>
+                    {serverName ? (
+                      <>
+                        {" to "}
+                        <Text className="text-purple-600">{serverName}</Text>
+                      </>
+                    ) : null}
+                  </>
                 </Text>
+                <Text className="text-xs text-neutral-400">{api.basePath}</Text>
                 <Input
-                  placeholder="Server URL"
-                  onChangeText={setServerURL}
-                  value={serverURL}
-                  keyboardType="url"
+                  placeholder="Username"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, username: text })
+                  }
+                  value={credentials.username}
+                  autoFocus
+                  secureTextEntry={false}
+                  keyboardType="default"
                   returnKeyType="done"
                   autoCapitalize="none"
-                  textContentType="URL"
+                  textContentType="username"
+                  clearButtonMode="while-editing"
                   maxLength={500}
                 />
-                <Text className="text-xs text-neutral-500 ml-4">
-                  Make sure to include http or https
-                </Text>
-                <PreviousServersList
-                  onServerSelect={(s) => {
-                    handleConnect(s.address);
-                  }}
+
+                <Input
+                  className="mb-2"
+                  placeholder="Password"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, password: text })
+                  }
+                  value={credentials.password}
+                  secureTextEntry
+                  keyboardType="default"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="password"
+                  clearButtonMode="while-editing"
+                  maxLength={500}
                 />
               </View>
-              <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
-                <Button
-                  loading={loadingServerCheck}
-                  disabled={loadingServerCheck}
-                  onPress={async () => await handleConnect(serverURL)}
-                  className="w-full grow"
-                >
-                  Connect
-                </Button>
-              </View>
+
+              <Text className="text-red-600 mb-2">{error}</Text>
             </View>
-          </>
-        )}
+
+            <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
+              <Button
+                color="black"
+                onPress={handleQuickConnect}
+                className="w-full mb-2"
+              >
+                Use Quick Connect
+              </Button>
+              <Button onPress={handleLogin} loading={loading}>
+                Log in
+              </Button>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1, height: "100%" }}
+      >
+        <View className="flex flex-col h-full relative items-center justify-center w-full">
+          <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+            <Image
+              style={{
+                width: 100,
+                height: 100,
+                marginLeft: -23,
+                marginBottom: -20,
+              }}
+              source={require("@/assets/images/StreamyFinFinal.png")}
+            />
+            <Text className="text-3xl font-bold">Streamyfin</Text>
+            <Text className="text-neutral-500">
+              Enter the URL to your Jellyfin server
+            </Text>
+            <Input
+              placeholder="Server URL"
+              onChangeText={setServerURL}
+              value={serverURL}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              maxLength={500}
+            />
+            <Text className="text-xs text-neutral-500 ml-4">
+              Make sure to include http or https
+            </Text>
+            <PreviousServersList
+              onServerSelect={(s) => {
+                handleConnect(s.address);
+              }}
+            />
+          </View>
+          <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
+            <Button
+              loading={loadingServerCheck}
+              disabled={loadingServerCheck}
+              onPress={async () => await handleConnect(serverURL)}
+              className="w-full grow"
+            >
+              Connect
+            </Button>
+          </View>
+        </View>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

components/AirplayButton.tsx

@@ -1,455 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import { Controls } from "@/components/video-player/controls/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { TrackInfo } from "@/modules/vlc-player";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import transcoding from "@/utils/profiles/transcoding";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import {
-  getPlaystateApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ActivityIndicator, View, ViewProps } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import Video, {
-  OnProgressData,
-  SelectedTrack,
-  SelectedTrackType,
-  VideoRef,
-} from "react-native-video";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
-import {
-  EvilIcons,
-  Feather,
-  FontAwesome,
-  FontAwesome5,
-  FontAwesome6,
-  Ionicons,
-} from "@expo/vector-icons";
-import { RoundButton } from "./RoundButton";
-
-interface Props extends ViewProps {
-  itemId: string;
-  audioIndexStr: string;
-  subtitleIndexStr: string;
-  mediaSourceId: string;
-  bitrateValueStr: string;
-}
-
-export const AirplayButton: React.FC<Props> = ({
-  itemId,
-  audioIndexStr,
-  subtitleIndexStr,
-  mediaSourceId,
-  bitrateValueStr,
-  ...props
-}) => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const [settings] = useSettings();
-  const videoRef = useRef<VideoRef | null>(null);
-
-  const firstTime = useRef(true);
-  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
-
-  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, _setShowControls] = useState(true);
-  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);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-  }, []);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
-  const subtitleIndex = subtitleIndexStr
-    ? parseInt(subtitleIndexStr, 10)
-    : undefined;
-  const bitrateValue = bitrateValueStr
-    ? parseInt(bitrateValueStr, 10)
-    : undefined;
-
-  const {
-    data: item,
-    isLoading: isLoadingItem,
-    isError: isErrorItem,
-  } = useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () => {
-      if (!api) {
-        throw new Error("No api");
-      }
-
-      if (!itemId) {
-        console.warn("No itemId");
-        return null;
-      }
-
-      const res = await getUserLibraryApi(api).getItem({
-        itemId,
-        userId: user?.Id,
-      });
-
-      return res.data;
-    },
-    staleTime: 0,
-  });
-
-  // TODO: NEED TO FIND A WAY TO FROM SWITCHING TO IMAGE BASED TO TEXT BASED SUBTITLES, THERE IS A BUG.
-  // MOST LIKELY LIKELY NEED A MASSIVE REFACTOR.
-  const {
-    data: stream,
-    isLoading: isLoadingStreamUrl,
-    isError: isErrorStreamUrl,
-  } = useQuery({
-    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId, audioIndex],
-
-    queryFn: async () => {
-      if (!api) {
-        throw new Error("No api");
-      }
-
-      if (!item) {
-        console.warn("No item", itemId, item);
-        return null;
-      }
-
-      const res = await getStreamUrl({
-        api,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
-        userId: user?.Id,
-        audioStreamIndex: audioIndex,
-        maxStreamingBitrate: bitrateValue,
-        mediaSourceId: mediaSourceId,
-        subtitleStreamIndex: subtitleIndex,
-        deviceProfile: transcoding,
-      });
-
-      if (!res) return null;
-
-      const { mediaSource, sessionId, url } = res;
-
-      if (!sessionId || !mediaSource || !url) {
-        console.warn("No sessionId or mediaSource or url", url);
-        return null;
-      }
-
-      return {
-        mediaSource,
-        sessionId,
-        url,
-      };
-    },
-    enabled: !!item,
-    staleTime: 0,
-  });
-
-  const poster = usePoster(item, api);
-  const videoSource = useVideoSource(item, api, poster, stream?.url);
-
-  const togglePlay = useCallback(async () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    if (isPlaying) {
-      videoRef.current?.pause();
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item?.Id!,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.floor(progress.value),
-        isPaused: true,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream?.sessionId,
-      });
-    } else {
-      videoRef.current?.resume();
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item?.Id!,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.floor(progress.value),
-        isPaused: false,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream?.sessionId,
-      });
-    }
-  }, [
-    isPlaying,
-    api,
-    item,
-    videoRef,
-    settings,
-    stream,
-    audioIndex,
-    subtitleIndex,
-    mediaSourceId,
-  ]);
-
-  const play = useCallback(() => {
-    videoRef.current?.resume();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  const seek = useCallback(
-    (seconds: number) => {
-      videoRef.current?.seek(seconds);
-    },
-    [videoRef]
-  );
-
-  const reportPlaybackStopped = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStopped({
-      itemId: item.Id,
-      mediaSourceId: mediaSourceId,
-      positionTicks: Math.floor(progress.value),
-      playSessionId: stream?.sessionId,
-    });
-    revalidateProgressCache();
-  };
-
-  const stop = useCallback(() => {
-    reportPlaybackStopped();
-    videoRef.current?.pause();
-    setIsPlaybackStopped(true);
-  }, [videoRef, reportPlaybackStopped]);
-
-  const reportPlaybackStart = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStart({
-      itemId: item.Id,
-      audioStreamIndex: audioIndex ? audioIndex : undefined,
-      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-      mediaSourceId: mediaSourceId,
-      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream?.sessionId,
-    });
-  };
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      if (isPlaybackStopped === true) return;
-
-      const ticks = secondsToTicks(data.currentTime);
-
-      progress.value = ticks;
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-
-      // TODO: Use this when streaming with HLS url, but NOT when direct playing
-      // TODO: since playable duration is always 0 then.
-      setIsBuffering(data.playableDuration === 0);
-
-      if (!item?.Id || data.currentTime === 0) {
-        return;
-      }
-
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item.Id,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.round(ticks),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream?.sessionId,
-      });
-    },
-    [
-      item,
-      isPlaying,
-      api,
-      isPlaybackStopped,
-      isSeeking,
-      stream,
-      mediaSourceId,
-      audioIndex,
-      subtitleIndex,
-    ]
-  );
-
-  useOrientation();
-  useOrientationSettings();
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    togglePlay: togglePlay,
-    stopPlayback: stop,
-    offline: false,
-  });
-
-  const [selectedTextTrack, setSelectedTextTrack] = useState<
-    SelectedTrack | undefined
-  >();
-
-  const [embededTextTracks, setEmbededTextTracks] = useState<
-    {
-      index: number;
-      language?: string | undefined;
-      selected?: boolean | undefined;
-      title?: string | undefined;
-      type: any;
-    }[]
-  >([]);
-
-  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
-  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
-    SelectedTrack | undefined
-  >(undefined);
-
-  useEffect(() => {
-    if (selectedTextTrack === undefined) {
-      const subtitleHelper = new SubtitleHelper(
-        stream?.mediaSource.MediaStreams ?? []
-      );
-      const embeddedTrackIndex = subtitleHelper.getEmbeddedTrackIndex(
-        subtitleIndex!
-      );
-
-      // Most likely the subtitle is burned in.
-      if (embeddedTrackIndex === -1) return;
-
-      setSelectedTextTrack({
-        type: SelectedTrackType.INDEX,
-        value: embeddedTrackIndex,
-      });
-    }
-  }, [embededTextTracks]);
-
-  useFocusEffect(
-    React.useCallback(() => {
-      return async () => {
-        stop();
-      };
-    }, [])
-  );
-
-  const [open, setOpen] = useState(false);
-
-  if (videoSource)
-    return (
-      <View {...props}>
-        <RoundButton
-          onPress={async () => {
-            setOpen(true);
-            setTimeout(() => {
-              videoRef.current?.presentFullscreenPlayer();
-            }, 1000);
-          }}
-          size="large"
-          iconComponent={() => (
-            <Feather name="airplay" size={22} color="white" />
-          )}
-        />
-        {open ? (
-          <>
-            <Video
-              ref={videoRef}
-              style={{
-                width: 0,
-                height: 0,
-              }}
-              source={videoSource}
-              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-              progressUpdateInterval={500}
-              playWhenInactive={true}
-              allowsExternalPlayback={true}
-              playInBackground={true}
-              pictureInPicture={true}
-              showNotificationControls={true}
-              ignoreSilentSwitch="ignore"
-              controls={true}
-              fullscreen={open}
-            />
-          </>
-        ) : null}
-      </View>
-    );
-  else return <RoundButton icon="close" />;
-};
-
-export function usePoster(
-  item: BaseItemDto | null | undefined,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!item || !api) return undefined;
-    return item.Type === "Audio"
-      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: item,
-          quality: 70,
-          width: 200,
-        });
-  }, [item, api]);
-
-  return poster ?? undefined;
-}
-
-export function useVideoSource(
-  item: BaseItemDto | null | undefined,
-  api: Api | null,
-  poster: string | undefined,
-  url?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!item || !api || !url) {
-      return null;
-    }
-
-    const startPosition = item?.UserData?.PlaybackPositionTicks
-      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-
-    return {
-      uri: url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: item?.AlbumArtist ?? undefined,
-        title: item?.Name || "Unknown",
-        description: item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: item?.Album ?? undefined,
-      },
-    };
-  }, [item, api, poster, url]);
-
-  return videoSource;
-}

components/ItemContent.tsx

@@ -27,7 +27,7 @@ import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
@@ -35,7 +35,6 @@ import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { AddToFavorites } from "./AddToFavorites";
-import { AirplayButton } from "./AirplayButton";
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -88,21 +87,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           item && (
             <View className="flex flex-row items-center space-x-2">
               <Chromecast background="blur" width={22} height={22} />
-              {Platform.OS === "ios" && (
-                <AirplayButton
-                  audioIndexStr={selectedOptions?.audioIndex?.toString() ?? "0"}
-                  bitrateValueStr={
-                    selectedOptions?.bitrate?.value?.toString() ?? "250000"
-                  }
-                  itemId={item.Id!}
-                  mediaSourceId={
-                    selectedOptions?.mediaSource?.Id!.toString() ?? "0"
-                  }
-                  subtitleIndexStr={
-                    selectedOptions?.subtitleIndex?.toString() ?? "0"
-                  }
-                />
-              )}
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center space-x-2">
                   <DownloadSingleItem item={item} size="large" />

components/RoundButton.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import {
   Platform,
   TouchableOpacity,
@@ -11,7 +11,6 @@ import * as Haptics from "expo-haptics";
 interface Props extends TouchableOpacityProps {
   onPress?: () => void;
   icon?: keyof typeof Ionicons.glyphMap;
-  iconComponent?: React.ComponentType<any>;
   background?: boolean;
   size?: "default" | "large";
   fillColor?: "primary";
@@ -21,7 +20,6 @@ interface Props extends TouchableOpacityProps {
 export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
   background = true,
   icon,
-  iconComponent: IconComponent,
   onPress,
   children,
   size = "default",
@@ -53,9 +51,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
-        {IconComponent ? (
-          <IconComponent size={size === "large" ? 22 : 18} color="white" />
-        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -74,9 +69,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
-        {IconComponent ? (
-          <IconComponent size={size === "large" ? 22 : 18} color="white" />
-        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -97,9 +89,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
-        {IconComponent ? (
-          <IconComponent size={size === "large" ? 22 : 18} color="white" />
-        ) : null}
         {children ? children : null}
       </TouchableOpacity>
     );
@@ -118,9 +107,6 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
             color={"white"}
           />
         ) : null}
-        {IconComponent ? (
-          <IconComponent size={size === "large" ? 22 : 18} color="white" />
-        ) : null}
         {children ? children : null}
       </BlurView>
     </TouchableOpacity>

components/video-player/controls/Controls.tsx

@@ -497,6 +497,33 @@ export const Controls: React.FC<Props> = ({
         />
       ) : (
         <>
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
+          >
+            <View
+              style={[
+                {
+                  position: "absolute",
+                  top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+                  left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+                  opacity: showControls ? 1 : 0,
+                  zIndex: 1000,
+                },
+              ]}
+              className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+            >
+              {!mediaSource?.TranscodingUrl ? (
+                <DropdownViewDirect showControls={showControls} />
+              ) : (
+                <DropdownViewTranscoding showControls={showControls} />
+              )}
+            </View>
+          </VideoProvider>
+
           <Pressable
             onPressIn={() => {
               toggleControls();
@@ -505,8 +532,6 @@ export const Controls: React.FC<Props> = ({
               position: "absolute",
               width: Dimensions.get("window").width,
               height: Dimensions.get("window").height,
-              backgroundColor: "black",
-              opacity: showControls ? 0.5 : 0,
             }}
           ></Pressable>
 
@@ -516,82 +541,61 @@ export const Controls: React.FC<Props> = ({
                 position: "absolute",
                 top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
                 right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-                width: settings?.safeAreaInControlsEnabled
-                  ? Dimensions.get("window").width - insets.left - insets.right
-                  : Dimensions.get("window").width,
                 opacity: showControls ? 1 : 0,
               },
             ]}
             pointerEvents={showControls ? "auto" : "none"}
-            className={`flex flex-row w-full p-4 `}
+            className={`flex flex-row items-center space-x-2 z-10 p-4 `}
           >
-            <View className="mr-auto">
-              <VideoProvider
-                getAudioTracks={getAudioTracks}
-                getSubtitleTracks={getSubtitleTracks}
-                setAudioTrack={setAudioTrack}
-                setSubtitleTrack={setSubtitleTrack}
-                setSubtitleURL={setSubtitleURL}
-              >
-                {!mediaSource?.TranscodingUrl ? (
-                  <DropdownViewDirect showControls={showControls} />
-                ) : (
-                  <DropdownViewTranscoding showControls={showControls} />
-                )}
-              </VideoProvider>
-            </View>
-
-            <View className="flex flex-row items-center space-x-2 ">
-              {item?.Type === "Episode" && !offline && (
-                <TouchableOpacity
-                  onPress={() => {
-                    switchOnEpisodeMode();
-                  }}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons name="list" size={24} color="white" />
-                </TouchableOpacity>
-              )}
-              {previousItem && !offline && (
-                <TouchableOpacity
-                  onPress={goToPreviousItem}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-              )}
-
-              {nextItem && !offline && (
-                <TouchableOpacity
-                  onPress={goToNextItem}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              )}
-
-              {mediaSource?.TranscodingUrl && (
-                <TouchableOpacity
-                  onPress={toggleIgnoreSafeAreas}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons
-                    name={ignoreSafeAreas ? "contract-outline" : "expand"}
-                    size={24}
-                    color="white"
-                  />
-                </TouchableOpacity>
-              )}
+            {item?.Type === "Episode" && !offline && (
               <TouchableOpacity
-                onPress={async () => {
-                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-                  router.back();
+                onPress={() => {
+                  switchOnEpisodeMode();
                 }}
                 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" />
+                <Ionicons name="list" size={24} color="white" />
               </TouchableOpacity>
-            </View>
+            )}
+            {previousItem && !offline && (
+              <TouchableOpacity
+                onPress={goToPreviousItem}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="play-skip-back" size={24} color="white" />
+              </TouchableOpacity>
+            )}
+
+            {nextItem && !offline && (
+              <TouchableOpacity
+                onPress={goToNextItem}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="play-skip-forward" size={24} color="white" />
+              </TouchableOpacity>
+            )}
+
+            {mediaSource?.TranscodingUrl && (
+              <TouchableOpacity
+                onPress={toggleIgnoreSafeAreas}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons
+                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                  size={24}
+                  color="white"
+                />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity
+              onPress={async () => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                router.back();
+              }}
+              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

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

@@ -118,7 +118,14 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
   );
 
   return (
-    <View>
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">

eas.json

@@ -22,13 +22,13 @@
       }
     },
     "production": {
-      "channel": "0.24.0",
+      "channel": "0.23.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.24.0",
+      "channel": "0.23.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useDownloadedFileOpener.ts

@@ -1,5 +1,6 @@
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
+import { getFilePathFromItemId } from "@/utils/mmkv";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -17,13 +18,13 @@ export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
   }
 
   const files = await FileSystem.readDirectoryAsync(directory);
-  const path = itemId!;
-  const matchingFile = files.find((file) => file.startsWith(path));
+  const filePath = getFilePathFromItemId(itemId);
+
+  const matchingFile = files.find((file) => file === filePath);
 
   if (!matchingFile) {
-    throw new Error(`No file found for item ${path}`);
+    throw new Error(`No file found for item ${filePath}`);
   }
-
   return `${directory}${matchingFile}`;
 };
 

hooks/useRemuxHlsToMp4.ts

@@ -18,6 +18,7 @@ import useDownloadHelper from "@/utils/download";
 import { Api } from "@jellyfin/sdk";
 import { useSettings } from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
+import { formatItemName } from "@/utils/mmkv";
 
 const createFFmpegCommand = (url: string, output: string) => [
   "-y", // overwrite output files without asking
@@ -53,7 +54,12 @@ export const useRemuxHlsToMp4 = () => {
   const [settings] = useSettings();
   const { saveImage } = useImageStorage();
   const { saveSeriesPrimaryImage } = useDownloadHelper();
-  const { saveDownloadedItemInfo, setProcesses, processes, APP_CACHE_DOWNLOAD_DIRECTORY } = useDownload();
+  const {
+    saveDownloadedItemInfo,
+    setProcesses,
+    processes,
+    APP_CACHE_DOWNLOAD_DIRECTORY,
+  } = useDownload();
 
   const onSaveAssets = async (api: Api, item: BaseItemDto) => {
     await saveSeriesPrimaryImage(item);
@@ -73,13 +79,12 @@ export const useRemuxHlsToMp4 = () => {
       try {
         console.log("completeCallback");
         const returnCode = await session.getReturnCode();
-
         if (returnCode.isValueSuccess()) {
           const stat = await session.getLastReceivedStatistics();
           await FileSystem.moveAsync({
-              from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
-              to: `${FileSystem.documentDirectory}${item.Id}.mp4`
-          })
+            from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
+            to: `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`,
+          });
           await queryClient.invalidateQueries({
             queryKey: ["downloadedItems"],
           });
@@ -131,12 +136,16 @@ export const useRemuxHlsToMp4 = () => {
 
   const startRemuxing = useCallback(
     async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
-      const cacheDir = await FileSystem.getInfoAsync(APP_CACHE_DOWNLOAD_DIRECTORY);
+      const cacheDir = await FileSystem.getInfoAsync(
+        APP_CACHE_DOWNLOAD_DIRECTORY
+      );
       if (!cacheDir.exists) {
-        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {intermediates: true})
+        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {
+          intermediates: true,
+        });
       }
 
-      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`
+      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`;
 
       if (!api) throw new Error("API is not defined");
       if (!item.Id) throw new Error("Item must have an Id");

package.json

@@ -76,7 +76,7 @@
     "react-native-circular-progress": "^1.4.1",
     "react-native-compressor": "^1.9.0",
     "react-native-device-info": "^14.0.1",
-    "react-native-edge-to-edge": "^1.1.3",
+    "react-native-edge-to-edge": "^1.1.1",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",

providers/DownloadProvider.tsx

@@ -19,14 +19,7 @@ import {
   download,
   setConfig,
 } from "@kesha-antonov/react-native-background-downloader";
-import MMKV from "react-native-mmkv";
-import {
-  focusManager,
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { focusManager, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -45,7 +38,7 @@ import { apiAtom } from "./JellyfinProvider";
 import * as Notifications from "expo-notifications";
 import { getItemImage } from "@/utils/getItemImage";
 import useImageStorage from "@/hooks/useImageStorage";
-import { storage } from "@/utils/mmkv";
+import { formatItemName, saveItemMapping, storage } from "@/utils/mmkv";
 import useDownloadHelper from "@/utils/download";
 import { FileInfo } from "expo-file-system";
 import * as Haptics from "expo-haptics";
@@ -54,8 +47,11 @@ import * as Application from "expo-application";
 export type DownloadedItem = {
   item: Partial<BaseItemDto>;
   mediaSource: MediaSourceInfo;
+  fileSize: number;
 };
 
+export type DownloadedItem2 = {};
+
 export const processesAtom = atom<JobStatus[]>([]);
 
 function onAppStateChange(status: AppStateStatus) {
@@ -512,8 +508,10 @@ function useDownloadProvider() {
 
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        let items = JSON.parse(downloadedItems) as DownloadedItem[];
-        items = items.filter((item) => item.item.Id !== id);
+        let items: { [key: string]: BaseItemDto } = downloadedItems
+          ? JSON.parse(downloadedItems)
+          : {};
+        delete items[id];
         storage.set("downloadedItems", JSON.stringify(items));
       }
 
@@ -586,7 +584,7 @@ function useDownloadProvider() {
   const appSizeUsage = useMemo(async () => {
     const sizes: number[] =
       downloadedFiles?.map((d) => {
-        return getDownloadedItemSize(d.item.Id!!);
+        return d.fileSize;
       }) || [];
 
     await forEveryDocumentDirFile(
@@ -608,8 +606,10 @@ function useDownloadProvider() {
     try {
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        const items: DownloadedItem[] = JSON.parse(downloadedItems);
-        const item = items.find((i) => i.item.Id === itemId);
+        const items: { [key: string]: BaseItemDto } = downloadedItems
+          ? JSON.parse(downloadedItems)
+          : {};
+        const item = items[itemId] as DownloadedItem;
         return item || null;
       }
       return null;
@@ -623,7 +623,7 @@ function useDownloadProvider() {
     try {
       const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        return JSON.parse(downloadedItems) as DownloadedItem[];
+        return Object.values(JSON.parse(downloadedItems)) as DownloadedItem[];
       } else {
         return [];
       }
@@ -636,11 +636,11 @@ function useDownloadProvider() {
   function saveDownloadedItemInfo(item: BaseItemDto, size: number = 0) {
     try {
       const downloadedItems = storage.getString("downloadedItems");
-      let items: DownloadedItem[] = downloadedItems
+      const items: { [key: string]: BaseItemDto } = downloadedItems
         ? JSON.parse(downloadedItems)
-        : [];
+        : {};
 
-      const existingItemIndex = items.findIndex((i) => i.item.Id === item.Id);
+      const chosenItem = items[item.Id!] || {};
 
       const data = getDownloadItemInfoFromDiskTmp(item.Id!);
 
@@ -651,12 +651,6 @@ function useDownloadProvider() {
 
       const newItem = { item, mediaSource: data.mediaSource };
 
-      if (existingItemIndex !== -1) {
-        items[existingItemIndex] = newItem;
-      } else {
-        items.push(newItem);
-      }
-
       deleteDownloadItemInfoFromDiskTmp(item.Id!);
 
       storage.set("downloadedItems", JSON.stringify(items));

providers/JellyfinProvider.tsx

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

utils/mmkv.ts

@@ -1,3 +1,30 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { MMKV } from "react-native-mmkv";
 
-export const storage = new MMKV();
+const storage = new MMKV();
+
+const saveItemMapping = (itemId: string | undefined, fileName: string) => {
+  if (!itemId) return;
+  storage.set(itemId, fileName);
+};
+
+const getFilePathFromItemId = (itemId: string): string | undefined => {
+  return storage.getString(itemId);
+};
+
+const formatItemName = (item: BaseItemDto) => {
+  if (item.Type === "Episode") {
+    const formattedParentIndexNumber = (item.ParentIndexNumber ?? 0)
+      .toString()
+      .padStart(2, "0");
+    const formattedIndexNumber = (item.IndexNumber ?? 0)
+      .toString()
+      .padStart(2, "0");
+
+    const formattedString = `S${formattedParentIndexNumber}E${formattedIndexNumber}`;
+    return `${item.SeriesName} - ${formattedString} - ${item.Name}`;
+  }
+  return item.Name;
+};
+
+export { saveItemMapping, getFilePathFromItemId, storage, formatItemName };