fix: pip

fixes #21

app.json

@@ -2,8 +2,8 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.3.2",
-    "orientation": "portrait",
+    "version": "0.4.0",
+    "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
@@ -18,20 +18,15 @@
       "requireFullScreen": true,
       "infoPlist": {
         "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
-        "NSMicrophoneUsageDescription": "The app needs access to your microphone."
+        "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
+        "UIBackgroundModes": ["audio", "movie-playback", "picture-in-picture"]
       },
       "supportsTablet": true,
       "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 10,
-      "orientation": "default",
-      "androidNavigationBar": {
-        "visible": true,
-        "barStyle": "dark-content",
-        "backgroundColor": "#000000"
-      },
+      "versionCode": 13,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -61,6 +56,7 @@
         "react-native-video",
         {
           "enableNotificationControls": true,
+          "enableBackgroundAudio": true,
           "androidExtensions": {
             "useExoplayerRtsp": false,
             "useExoplayerSmoothStreaming": false,

app/(auth)/collections/[collection]/page.tsx

@@ -3,12 +3,15 @@ import { Loading } from "@/components/Loading";
 import MoviePoster from "@/components/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  ItemSortBy,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
   ScrollView,
@@ -23,16 +26,21 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  useEffect(() => {
+    console.log("CollectionId", collectionId);
+  }, [collectionId]);
+
   const { data: collection } = useQuery({
     queryKey: ["collection", collectionId],
-    queryFn: async () =>
-      (api &&
-        (
-          await getItemsApi(api).getItems({
-            userId: user?.Id,
-          })
-        ).data.Items?.find((item) => item.Id == collectionId)) ||
-      null,
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [collectionId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
     enabled: !!api && !!user?.Id,
     staleTime: 0,
   });
@@ -45,40 +53,84 @@ const page: React.FC = () => {
   }>({
     queryKey: ["collection-items", collectionId, startIndex],
     queryFn: async () => {
-      if (!api) return [];
+      if (!api || !collectionId)
+        return {
+          Items: [],
+          TotalRecordCount: 0,
+        };
 
-      const response = await api.axiosInstance.get(
-        `${api.basePath}/Users/${user?.Id}/Items`,
-        {
-          params: {
-            SortBy:
-              collection?.CollectionType === "movies"
-                ? "SortName,ProductionYear"
-                : "SortName",
-            SortOrder: "Ascending",
-            IncludeItemTypes:
-              collection?.CollectionType === "movies" ? "Movie" : "Series",
-            Recursive: true,
-            Fields:
-              collection?.CollectionType === "movies"
-                ? "PrimaryImageAspectRatio,MediaSourceCount"
-                : "PrimaryImageAspectRatio",
-            ImageTypeLimit: 1,
-            EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-            ParentId: collectionId,
-            Limit: 100,
-            StartIndex: startIndex,
-          },
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        },
-      );
+      const sortBy: ItemSortBy[] = [];
 
-      return response.data || [];
+      switch (collection?.CollectionType) {
+        case "movies":
+          sortBy.push("SortName", "ProductionYear");
+          break;
+        case "boxsets":
+          sortBy.push("IsFolder", "SortName");
+          break;
+        default:
+          sortBy.push("SortName");
+          break;
+      }
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: collectionId,
+        limit: 100,
+        startIndex,
+        sortBy,
+        sortOrder: ["Ascending"],
+      });
+
+      const data = response.data.Items;
+
+      return {
+        Items: data || [],
+        TotalRecordCount: response.data.TotalRecordCount || 0,
+      };
     },
-    enabled: !!collection && !!api,
+    enabled: !!collectionId && !!api,
   });
+  // const { data, isLoading, isError } = useQuery<{
+  //   Items: BaseItemDto[];
+  //   TotalRecordCount: number;
+  // }>({
+  //   queryKey: ["collection-items", collectionId, startIndex],
+  //   queryFn: async () => {
+  //     if (!api) return [];
+
+  //     const response = await api.axiosInstance.get(
+  //       `${api.basePath}/Users/${user?.Id}/Items`,
+  //       {
+  //         params: {
+  //           SortBy:
+  //             collection?.CollectionType === "movies"
+  //               ? "SortName,ProductionYear"
+  //               : "SortName",
+  //           SortOrder: "Ascending",
+  //           IncludeItemTypes:
+  //             collection?.CollectionType === "movies" ? "Movie" : "Series",
+  //           Recursive: true,
+  //           Fields:
+  //             collection?.CollectionType === "movies"
+  //               ? "PrimaryImageAspectRatio,MediaSourceCount"
+  //               : "PrimaryImageAspectRatio",
+  //           ImageTypeLimit: 1,
+  //           EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+  //           ParentId: collectionId,
+  //           Limit: 100,
+  //           StartIndex: startIndex,
+  //         },
+  //         headers: {
+  //           Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+  //         },
+  //       },
+  //     );
+
+  //     return response.data || [];
+  //   },
+  //   enabled: !!collection && !!api,
+  // });
 
   const totalItems = useMemo(() => {
     return data?.TotalRecordCount;
@@ -91,7 +143,8 @@ const page: React.FC = () => {
           <Text className="font-bold text-3xl mb-2">{collection?.Name}</Text>
           <View className="flex flex-row items-center justify-between">
             <Text>
-              {startIndex + 1}-{startIndex + 100} of {totalItems}
+              {startIndex + 1}-{Math.min(startIndex + 100, totalItems || 0)} of{" "}
+              {totalItems}
             </Text>
             <View className="flex flex-row items-center space-x-2">
               <TouchableOpacity
@@ -125,7 +178,7 @@ const page: React.FC = () => {
           </View>
         ) : (
           <View className="flex flex-row flex-wrap">
-            {data?.Items?.map((item: any, index: number) => (
+            {data?.Items?.map((item: BaseItemDto, index: number) => (
               <TouchableOpacity
                 style={{
                   maxWidth: "33%",
@@ -134,10 +187,12 @@ const page: React.FC = () => {
                 }}
                 key={index}
                 onPress={() => {
-                  if (collection?.CollectionType === "movies") {
-                    router.push(`/items/${item.Id}/page`);
-                  } else if (collection?.CollectionType === "tvshows") {
+                  if (item?.Type === "Series") {
                     router.push(`/series/${item.Id}/page`);
+                  } else if (item.IsFolder) {
+                    router.push(`/collections/${item?.Id}/page`);
+                  } else {
+                    router.push(`/items/${item.Id}/page`);
                   }
                 }}
               >

app/(auth)/downloads.tsx

@@ -16,14 +16,18 @@ import { runningProcesses } from "@/utils/atoms/downloads";
 import { router } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { FFmpegKit } from "ffmpeg-kit-react-native";
+import * as FileSystem from "expo-file-system";
 
 const downloads: React.FC = () => {
+  const [process, setProcess] = useAtom(runningProcesses);
+
   const { data: downloadedFiles, isLoading } = useQuery({
-    queryKey: ["downloaded_files"],
+    queryKey: ["downloaded_files", process?.item.Id],
     queryFn: async () =>
       JSON.parse(
         (await AsyncStorage.getItem("downloaded_files")) || "[]",
       ) as BaseItemDto[],
+    staleTime: 0,
   });
 
   const movies = useMemo(
@@ -41,8 +45,6 @@ const downloads: React.FC = () => {
     return Object.values(series);
   }, [downloadedFiles]);
 
-  const [process, setProcess] = useAtom(runningProcesses);
-
   const eta = useMemo(() => {
     const length = process?.item?.RunTimeTicks || 0;
 
@@ -77,7 +79,7 @@ const downloads: React.FC = () => {
               <View>
                 <Text className="font-semibold">{process.item.Name}</Text>
                 <Text className="text-xs opacity-50">{process.item.Type}</Text>
-                <View className="flex flex-row items-center space-x-2 mt-1 text-red-600">
+                <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
                   <Text className="text-xs">
                     {process.progress.toFixed(0)}%
                   </Text>
@@ -97,7 +99,7 @@ const downloads: React.FC = () => {
               </TouchableOpacity>
               <View
                 className={`
-                  absolute bottom-0 left-0 h-1 bg-red-600
+                  absolute bottom-0 left-0 h-1 bg-purple-600
                 `}
                 style={{
                   width: process.progress

app/(auth)/items/[id]/page.tsx

@@ -34,6 +34,8 @@ import CastContext, {
 import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios12 from "@/utils/profiles/ios12";
 import { currentlyPlayingItemAtom } from "@/components/CurrentlyPlayingBar";
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -45,7 +47,9 @@ const page: React.FC = () => {
   const castDevice = useCastDevice();
 
   const chromecastReady = useMemo(() => !!castDevice?.deviceId, [castDevice]);
-
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
   const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
     key: "Max",
     value: undefined,
@@ -95,7 +99,13 @@ const page: React.FC = () => {
   });
 
   const { data: playbackUrl } = useQuery({
-    queryKey: ["playbackUrl", item?.Id, maxBitrate, castDevice],
+    queryKey: [
+      "playbackUrl",
+      item?.Id,
+      maxBitrate,
+      castDevice,
+      selectedAudioStream,
+    ],
     queryFn: async () => {
       if (!api || !user?.Id || !sessionData) return null;
 
@@ -107,8 +117,12 @@ const page: React.FC = () => {
         maxStreamingBitrate: maxBitrate.value,
         sessionData,
         deviceProfile: castDevice?.deviceId ? chromecastProfile : ios12,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
       });
 
+      console.log("Transcode URL: ", url);
+
       return url;
     },
     enabled: !!sessionData,
@@ -247,15 +261,23 @@ const page: React.FC = () => {
         <Text>{item.Overview}</Text>
       </View>
       <View className="flex flex-col p-4">
-        <BitrateSelector
-          onChange={(val) => setMaxBitrate(val)}
-          selected={maxBitrate}
-        />
-        <PlayButton
-          item={item}
-          chromecastReady={chromecastReady}
-          onPress={onPressPlay}
-        />
+        <View className="flex flex-row items-center space-x-2 w-full">
+          <BitrateSelector
+            onChange={(val) => setMaxBitrate(val)}
+            selected={maxBitrate}
+          />
+          <AudioTrackSelector
+            item={item}
+            onChange={setSelectedAudioStream}
+            selected={selectedAudioStream}
+          />
+          <SubtitleTrackSelector
+            item={item}
+            onChange={setSelectedSubtitleStream}
+            selected={selectedSubtitleStream}
+          />
+        </View>
+        <PlayButton item={item} chromecastReady={false} onPress={onPressPlay} />
       </View>
       <ScrollView horizontal className="flex px-4 mb-4">
         <View className="flex flex-row space-x-2 ">

app/_layout.tsx

@@ -78,7 +78,7 @@ export default function RootLayout() {
         <JellyfinProvider>
           <StatusBar style="light" backgroundColor="#000" />
           <ThemeProvider value={DarkTheme}>
-            <Stack screenOptions={{}}>
+            <Stack>
               <Stack.Screen
                 name="(auth)/(tabs)"
                 options={{

app/login.tsx

@@ -3,6 +3,7 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
+import { AxiosError } from "axios";
 import { useAtom } from "jotai";
 import React, { useMemo, useState } from "react";
 import { KeyboardAvoidingView, Platform, View } from "react-native";
@@ -18,6 +19,7 @@ const Login: React.FC = () => {
   const [api] = useAtom(apiAtom);
 
   const [serverURL, setServerURL] = useState<string>("");
+  const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
     password: string;
@@ -36,31 +38,25 @@ const Login: React.FC = () => {
         await login(credentials.username, credentials.password);
       }
     } catch (error) {
-      console.error(error);
+      const e = error as AxiosError | z.ZodError;
+      if (e instanceof z.ZodError) {
+        setError("An error occured.");
+      } else {
+        if (e.response?.status === 401) {
+          setError("Invalid credentials.");
+        } else {
+          setError(
+            "A network error occurred. Did you enter the correct server URL?",
+          );
+        }
+      }
     } finally {
       setLoading(false);
     }
   };
 
-  const parsedServerURL = useMemo(() => {
-    let parsedServerURL = serverURL.trim();
-
-    if (parsedServerURL) {
-      parsedServerURL = parsedServerURL.endsWith("/")
-        ? parsedServerURL.replace("/", "")
-        : parsedServerURL;
-      parsedServerURL = parsedServerURL.startsWith("http")
-        ? parsedServerURL
-        : "http://" + parsedServerURL;
-
-      return parsedServerURL;
-    }
-
-    return "";
-  }, [serverURL]);
-
   const handleConnect = (url: string) => {
-    setServer({ address: url });
+    setServer({ address: url.trim() });
   };
 
   if (api?.basePath) {
@@ -122,6 +118,8 @@ const Login: React.FC = () => {
             />
           </View>
 
+          <Text className="text-red-600 mb-2">{error}</Text>
+
           <Button onPress={handleLogin} loading={loading}>
             Log in
           </Button>
@@ -150,9 +148,7 @@ const Login: React.FC = () => {
             textContentType="URL"
             maxLength={500}
           />
-          <Button onPress={() => handleConnect(parsedServerURL)}>
-            Connect
-          </Button>
+          <Button onPress={() => handleConnect(serverURL)}>Connect</Button>
         </View>
       </View>
     </KeyboardAvoidingView>

components/AudioTrackSelector.tsx

@@ -0,0 +1,80 @@
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "./common/Text";
+import { atom, useAtom } from "jotai";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
+
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: number) => void;
+  selected: number;
+}
+
+export const AudioTrackSelector: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const audioStreams = useMemo(
+    () =>
+      item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
+    [item],
+  );
+
+  const selectedAudioSteam = useMemo(
+    () => audioStreams?.find((x) => x.Index === selected),
+    [audioStreams, selected],
+  );
+
+  useEffect(() => {
+    const index = item.MediaSources?.[0].DefaultAudioStreamIndex;
+    if (index !== undefined && index !== null) onChange(index);
+  }, []);
+
+  return (
+    <View className="flex flex-row items-center justify-between" {...props}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col mb-2">
+            <Text className="opacity-50 mb-1 text-xs">Audio streams</Text>
+            <View className="flex flex-row">
+              <TouchableOpacity className="bg-neutral-900 max-w-32 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text className="">
+                  {tc(selectedAudioSteam?.DisplayTitle, 13)}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
+          {audioStreams?.map((audio, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                if (audio.Index !== null && audio.Index !== undefined)
+                  onChange(audio.Index);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {audio.DisplayTitle}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};

components/BitrateSelector.tsx

@@ -27,20 +27,24 @@ const BITRATES: Bitrate[] = [
   },
 ];
 
-type Props = {
+interface Props extends React.ComponentProps<typeof View> {
   onChange: (value: Bitrate) => void;
   selected: Bitrate;
-};
+}
 
-export const BitrateSelector: React.FC<Props> = ({ onChange, selected }) => {
+export const BitrateSelector: React.FC<Props> = ({
+  onChange,
+  selected,
+  ...props
+}) => {
   return (
-    <View className="flex flex-row items-center justify-between">
+    <View className="flex flex-row items-center justify-between" {...props}>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col mb-2">
             <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
             <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <TouchableOpacity className="bg-neutral-900 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
                 <Text>
                   {BITRATES.find((b) => b.value === selected.value)?.key}
                 </Text>

components/ContinueWatchingPoster.tsx

@@ -61,7 +61,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
             style={{
               width: `${progress}%`,
             }}
-            className={`absolute bottom-0 left-0 h-1 bg-red-600 w-full`}
+            className={`absolute bottom-0 left-0 h-1 bg-purple-600 w-full`}
           ></View>
         </>
       )}

components/CurrentlyPlayingBar.tsx

@@ -8,7 +8,12 @@ import { Text } from "./common/Text";
 import { Ionicons } from "@expo/vector-icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { atom, useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -28,6 +33,9 @@ import Animated, {
 } from "react-native-reanimated";
 import { useRouter, useSegments } from "expo-router";
 import { BlurView } from "expo-blur";
+import { writeToLog } from "@/utils/log";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { Image } from "expo-image";
 
 export const currentlyPlayingItemAtom = atom<{
   item: BaseItemDto;
@@ -49,6 +57,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
   const [paused, setPaused] = useState(true);
   const [progress, setProgress] = useState(0);
 
+  const [pip, setPip] = useState(false);
+
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
   const aHeight = useSharedValue(100);
@@ -173,6 +183,17 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [item],
   );
 
+  const backdropUrl = useMemo(
+    () =>
+      getBackdropUrl({
+        api,
+        item,
+        quality: 70,
+        width: 200,
+      }),
+    [item],
+  );
+
   useEffect(() => {
     if (cp?.playbackUrl) {
       play();
@@ -203,31 +224,64 @@ export const CurrentlyPlayingBar: React.FC = () => {
               onPress={() => {
                 videoRef.current?.presentFullscreenPlayer();
               }}
-              className="aspect-video h-full bg-neutral-800 rounded-md overflow-hidden"
+              className={`relative h-full bg-neutral-800 rounded-md overflow-hidden
+                ${item?.Type === "Audio" ? "aspect-square" : "aspect-video"}
+                `}
             >
               {cp.playbackUrl && (
                 <Video
+                  ref={videoRef}
+                  allowsExternalPlayback
                   style={{ width: "100%", height: "100%" }}
+                  playWhenInactive={true}
+                  playInBackground={true}
+                  showNotificationControls={true}
+                  ignoreSilentSwitch="ignore"
+                  controls={false}
+                  pictureInPicture={true}
+                  onPictureInPictureStatusChanged={(e) => {
+                    setPip(e.isActive);
+                  }}
+                  poster={
+                    backdropUrl && item?.Type === "Audio"
+                      ? backdropUrl
+                      : undefined
+                  }
+                  paused={paused}
+                  onProgress={(e) => onProgress(e)}
+                  subtitleStyle={{
+                    fontSize: 16,
+                  }}
                   source={{
                     uri: cp.playbackUrl,
                     isNetwork: true,
                     startPosition,
                   }}
-                  controls={false}
-                  ref={videoRef}
                   onBuffer={(e) =>
                     e.isBuffering ? console.log("Buffering...") : null
                   }
-                  onProgress={(e) => onProgress(e)}
-                  paused={paused}
-                  onFullscreenPlayerDidDismiss={() => {
-                    play();
+                  onPlaybackStateChanged={(e) => {
+                    if (e.isPlaying) {
+                      setPaused(false);
+                    } else if (e.isSeeking) {
+                      return;
+                    } else {
+                      setPaused(true);
+                    }
+                  }}
+                  onError={(e) => {
+                    console.log(e);
+                    writeToLog(
+                      "ERROR",
+                      "Video playback error: " + JSON.stringify(e),
+                    );
                   }}
-                  ignoreSilentSwitch="ignore"
                   renderLoader={
-                    <View className="flex flex-col items-center justify-center h-full">
-                      <ActivityIndicator size={"small"} color={"white"} />
-                    </View>
+                    item?.Type !== "Audio" && (
+                      <View className="flex flex-col items-center justify-center h-full">
+                        <ActivityIndicator size={"small"} color={"white"} />
+                      </View>
+                    )
                   }
                 />
               )}

components/DownloadItem.tsx

@@ -88,7 +88,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({
       {process ? (
         <TouchableOpacity
           onPress={() => {
-            cancelRemuxing();
+            router.push("/downloads");
           }}
           className="flex flex-row items-center"
         >
@@ -122,17 +122,14 @@ export const DownloadItem: React.FC<DownloadProps> = ({
       ) : downloaded ? (
         <TouchableOpacity
           onPress={() => {
-            router.push(
-              `/(auth)/player/offline/page?url=${item.Id}.mp4&itemId=${item.Id}`,
-            );
+            router.push("/downloads");
           }}
         >
-          <Ionicons name="cloud-download" size={26} color="#16a34a" />
+          <Ionicons name="cloud-download" size={26} color="#9333ea" />
         </TouchableOpacity>
       ) : (
         <TouchableOpacity
           onPress={() => {
-            // downloadFile();
             startRemuxing();
           }}
         >

components/SubtitleTrackSelector.tsx

@@ -0,0 +1,92 @@
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "./common/Text";
+import { atom, useAtom } from "jotai";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
+
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: number) => void;
+  selected: number;
+}
+
+export const SubtitleTrackSelector: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const subtitleStreams = useMemo(
+    () =>
+      item.MediaSources?.[0].MediaStreams?.filter(
+        (x) => x.Type === "Subtitle",
+      ) ?? [],
+    [item],
+  );
+
+  const selectedSubtitleSteam = useMemo(
+    () => subtitleStreams.find((x) => x.Index === selected),
+    [subtitleStreams, selected],
+  );
+
+  useEffect(() => {
+    const index = item.MediaSources?.[0].DefaultSubtitleStreamIndex;
+    if (index !== undefined && index !== null) {
+      onChange(index);
+    } else {
+      // Get first subtitle stream
+      const firstSubtitle = subtitleStreams.find((x) => x.Index !== undefined);
+      if (firstSubtitle?.Index !== undefined) {
+        onChange(firstSubtitle.Index);
+      }
+    }
+  }, []);
+
+  if (subtitleStreams.length === 0) return null;
+
+  return (
+    <View className="flex flex-row items-center justify-between" {...props}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col mb-2">
+            <Text className="opacity-50 mb-1 text-xs">Subtitles</Text>
+            <View className="flex flex-row">
+              <TouchableOpacity className="bg-neutral-900 max-w-32 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text className="">
+                  {tc(selectedSubtitleSteam?.DisplayTitle, 13)}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Subtitles</DropdownMenu.Label>
+          {subtitleStreams?.map((subtitle, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                if (subtitle.Index !== undefined && subtitle.Index !== null)
+                  onChange(subtitle.Index);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {subtitle.DisplayTitle}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};

components/downloads/EpisodeCard.tsx

@@ -13,6 +13,22 @@ export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
   const [_, setCp] = useAtom(currentlyPlayingItemAtom);
 
+  // const fetchFileSize = async () => {
+  //   try {
+  //     const filePath = `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  //     const info = await FileSystem.getInfoAsync(filePath);
+  //     return info.exists ? info.size : null;
+  //   } catch (e) {
+  //     console.log(e);
+  //     return null;
+  //   }
+  // };
+
+  // const { data: fileSize } = useQuery({
+  //   queryKey: ["fileSize", item?.Id],
+  //   queryFn: fetchFileSize,
+  // });
+
   const openFile = useCallback(() => {
     setCp({
       item,
@@ -43,6 +59,12 @@ export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             <Text className=" text-xs opacity-50">
               Episode {item.IndexNumber}
             </Text>
+            {/* <Text className=" text-xs opacity-50">
+              Size:{" "}
+              {fileSize
+                ? `${(fileSize / 1000000).toFixed(0)} MB`
+                : "Calculating..."}{" "}
+                </Text> */}
           </TouchableOpacity>
         </ContextMenu.Trigger>
         <ContextMenu.Content

components/downloads/MovieCard.tsx

@@ -9,11 +9,23 @@ import { useCallback } from "react";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
+import { useQuery } from "@tanstack/react-query";
 
 export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const { deleteFile } = useFiles();
   const [_, setCp] = useAtom(currentlyPlayingItemAtom);
 
+  // const fetchFileSize = async () => {
+  //   const filePath = `${FileSystem.documentDirectory}/${item.Id}.mp4`;
+  //   const info = await FileSystem.getInfoAsync(filePath);
+  //   return info.exists ? info.size : null;
+  // };
+
+  // const { data: fileSize } = useQuery({
+  //   queryKey: ["fileSize", item?.Id],
+  //   queryFn: fetchFileSize,
+  // });
+
   const openFile = useCallback(() => {
     setCp({
       item,
@@ -41,11 +53,17 @@ export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
           >
             <Text className=" font-bold">{item.Name}</Text>
-            <View className="flex flex-row items-center justify-between">
+            <View className="flex flex-col">
               <Text className=" text-xs opacity-50">{item.ProductionYear}</Text>
               <Text className=" text-xs opacity-50">
                 {runtimeTicksToMinutes(item.RunTimeTicks)}
               </Text>
+              {/* <Text className=" text-xs opacity-50">
+                Size:{" "}
+                {fileSize
+                  ? `${(fileSize / 1000000).toFixed(0)} MB`
+                  : "Calculating..."}{" "}
+                  </Text>*/}
             </View>
           </TouchableOpacity>
         </ContextMenu.Trigger>

constants/Colors.ts

@@ -12,5 +12,5 @@ export const Colors = {
   tint: tintColorDark,
   icon: "#9BA1A6",
   tabIconDefault: "#9BA1A6",
-  tabIconSelected: "#EE4B2B",
+  tabIconSelected: "#9333ea",
 };

eas.json

@@ -21,13 +21,13 @@
       }
     },
     "production": {
-      "channel": "0.3.1",
+      "channel": "0.4.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.3.1",
+      "channel": "0.4.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

utils/jellyfin/media/getStreamUrl.ts

@@ -14,6 +14,8 @@ export const getStreamUrl = async ({
   maxStreamingBitrate,
   sessionData,
   deviceProfile = ios12,
+  audioStreamIndex = 0,
+  subtitleStreamIndex = 0,
 }: {
   api: Api | null | undefined;
   item: BaseItemDto | null | undefined;
@@ -22,6 +24,8 @@ export const getStreamUrl = async ({
   maxStreamingBitrate?: number;
   sessionData: PlaybackInfoResponse;
   deviceProfile: any;
+  audioStreamIndex?: number;
+  subtitleStreamIndex?: number;
 }) => {
   if (!api || !userId || !item?.Id) {
     return null;
@@ -40,6 +44,8 @@ export const getStreamUrl = async ({
       AutoOpenLiveStream: true,
       MediaSourceId: itemId,
       AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
+      AudioStreamIndex: audioStreamIndex,
+      SubtitleStreamIndex: subtitleStreamIndex,
     },
     {
       headers: {
@@ -58,8 +64,28 @@ export const getStreamUrl = async ({
   }
 
   if (mediaSource.SupportsDirectPlay) {
-    console.log("Using direct stream!");
-    return `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData.PlaySessionId}&mediaSourceId=${itemId}&static=true`;
+    if (item.MediaType === "Video") {
+      console.log("Using direct stream for video!");
+      return `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData.PlaySessionId}&mediaSourceId=${itemId}&static=true`;
+    } else if (item.MediaType === "Audio") {
+      console.log("Using direct stream for audio!");
+      const searchParams = new URLSearchParams({
+        UserId: userId,
+        DeviceId: api.deviceInfo.id,
+        MaxStreamingBitrate: "140000000",
+        Container:
+          "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
+        TranscodingContainer: "mp4",
+        TranscodingProtocol: "hls",
+        AudioCodec: "aac",
+        api_key: api.accessToken,
+        PlaySessionId: sessionData.PlaySessionId,
+        StartTimeTicks: "0",
+        EnableRedirection: "true",
+        EnableRemoteMedia: "false",
+      });
+      return `${api.basePath}/Audio/${itemId}/universal?${searchParams.toString()}`;
+    }
   }
 
   console.log("Using transcoded stream!");

utils/textTools.ts

@@ -0,0 +1,7 @@
+/*
+ * Truncate a text longer than a certain length
+ */
+export const tc = (text: string | null | undefined, length: number = 20) => {
+  if (!text) return "";
+  return text.length > length ? text.substr(0, length) + "..." : text;
+};