fix: pip

fixes #21

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,26 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone15Pro]
+ - OS: [e.g. iOS18]
+ - Version [e.g. 0.3.1]

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -27,3 +27,6 @@ Streamyfin.app
 
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
+development.apk
+Streamyfin.apk
+Streamyfin.ipa

README.md

@@ -21,6 +21,10 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
 
 Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These are still in development, and we appreciate your patience and feedback as we work to improve them.
 
+### Downloading
+
+Downloading works by using ffmpeg to convert a HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
+
 ## 🛠️ Beta testing (iOS/Android)
 
 ## TestFlight
@@ -93,6 +97,11 @@ If you have questions or need support, feel free to reach out:
 
 - GitHub Issues: Report bugs or request features here.
 - Email: [fredrik.burmester@gmail.com](mailto:fredrik.burmester@gmail.com)
+-
+
+## Support
+
+<a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
 
 ## 📝 Credits
 

app.json

@@ -2,33 +2,31 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.2.0",
-    "orientation": "portrait",
+    "version": "0.4.0",
+    "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
     "userInterfaceStyle": "dark",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#29164B"
     },
     "jsEngine": "hermes",
     "assetBundlePatterns": ["**/*"],
     "ios": {
+      "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": "jsc",
-      "androidNavigationBar": {
-        "visible": true,
-        "barStyle": "dark-content",
-        "backgroundColor": "#000000"
-      },
+      "jsEngine": "hermes",
+      "versionCode": 13,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -36,8 +34,7 @@
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
-      ],
-      "versionCode": 6
+      ]
     },
     "web": {
       "bundler": "metro",
@@ -59,6 +56,7 @@
         "react-native-video",
         {
           "enableNotificationControls": true,
+          "enableBackgroundAudio": true,
           "androidExtensions": {
             "useExoplayerRtsp": false,
             "useExoplayerSmoothStreaming": false,
@@ -75,6 +73,7 @@
           },
           "android": {
             "minSdkVersion": 24,
+            "usesCleartextTraffic": true,
             "packagingOptions": {
               "jniLibs": {
                 "useLegacyPackaging": true
@@ -82,6 +81,18 @@
             }
           }
         }
+      ],
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
+      ],
+      [
+        "expo-sensors",
+        {
+          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
+        }
       ]
     ],
     "experiments": {

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

@@ -26,10 +26,16 @@ import { PlayButton } from "@/components/PlayButton";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { useCastDevice } from "react-native-google-cast";
+import CastContext, {
+  PlayServicesState,
+  useCastDevice,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
 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();
@@ -40,6 +46,10 @@ 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,
@@ -89,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;
 
@@ -101,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,
@@ -110,13 +130,36 @@ const page: React.FC = () => {
   });
 
   const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
+  const client = useRemoteMediaClient();
 
-  const onPressPlay = useCallback(() => {
+  const onPressPlay = useCallback(async () => {
     if (!playbackUrl || !item) return;
-    setCp({
-      item,
-      playbackUrl,
-    });
+
+    if (chromecastReady && client) {
+      await CastContext.getPlayServicesState().then((state) => {
+        if (state && state !== PlayServicesState.SUCCESS)
+          CastContext.showPlayServicesErrorDialog(state);
+        else {
+          client.loadMedia({
+            mediaInfo: {
+              contentUrl: playbackUrl,
+              contentType: "video/mp4",
+              metadata: {
+                type: item.Type === "Episode" ? "tvShow" : "movie",
+                title: item.Name || "",
+                subtitle: item.Overview || "",
+              },
+            },
+            startTime: 0,
+          });
+        }
+      });
+    } else {
+      setCp({
+        item,
+        playbackUrl,
+      });
+    }
   }, [playbackUrl, item]);
 
   if (l1)
@@ -218,10 +261,22 @@ const page: React.FC = () => {
         <Text>{item.Overview}</Text>
       </View>
       <View className="flex flex-col p-4">
-        <BitrateSelector
-          onChange={(val) => setMaxBitrate(val)}
-          selected={maxBitrate}
-        />
+        <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">

app/_layout.tsx

@@ -2,22 +2,14 @@ import { JellyfinProvider } from "@/providers/JellyfinProvider";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useFonts } from "expo-font";
-import * as NavigationBar from "expo-navigation-bar";
-import { Stack, router } from "expo-router";
+import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { Provider as JotaiProvider } from "jotai";
-import { useEffect, useRef } from "react";
-import { Platform, TouchableOpacity } from "react-native";
+import { useEffect, useRef, useState } from "react";
 import "react-native-reanimated";
-
-import Feather from "@expo/vector-icons/Feather";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { StatusBar } from "expo-status-bar";
-import { Colors } from "@/constants/Colors";
-import { View } from "react-native";
-import { Text } from "@/components/common/Text";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Ionicons } from "@expo/vector-icons";
-import Video from "react-native-video";
 import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
@@ -46,14 +38,36 @@ export default function RootLayout() {
     }),
   );
 
-  const insets = useSafeAreaInsets();
-
   useEffect(() => {
     if (loaded) {
       SplashScreen.hideAsync();
     }
   }, [loaded]);
 
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP,
+  );
+
+  useEffect(() => {
+    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
+
+    ScreenOrientation.getOrientationAsync().then((info) => {
+      setOrientation(info);
+    });
+
+    // subscribe to future changes
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (evt) => {
+        setOrientation(evt.orientationInfo.orientation);
+      },
+    );
+
+    // return a clean up function to unsubscribe from notifications
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
   if (!loaded) {
     return null;
   }
@@ -64,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) {
@@ -71,7 +67,7 @@ const Login: React.FC = () => {
       >
         <View className="flex flex-col px-4 justify-center h-full gap-y-2">
           <View>
-            <Text className="text-3xl font-bold">Jellyfin</Text>
+            <Text className="text-3xl font-bold">Streamyfin</Text>
             <Text className="opacity-50 mb-2">Server: {api.basePath}</Text>
             <Button
               color="black"
@@ -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>
@@ -137,24 +135,20 @@ const Login: React.FC = () => {
     >
       <View className="flex flex-col px-4 justify-center h-full">
         <View className="flex flex-col gap-y-2">
-          <Text className="text-3xl font-bold">Jellyfin</Text>
+          <Text className="text-3xl font-bold">Streamyfin</Text>
           <Text className="opacity-50">Enter a server adress</Text>
           <Input
             className="mb-2"
             placeholder="http(s)://..."
             onChangeText={setServerURL}
             value={serverURL}
-            autoFocus
-            secureTextEntry={false}
             keyboardType="url"
             returnKeyType="done"
             autoCapitalize="none"
             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,10 +21,17 @@
       }
     },
     "production": {
-      "channel": "0.0.6",
+      "channel": "0.4.0",
       "android": {
         "image": "latest"
       }
+    },
+    "production-apk": {
+      "channel": "0.4.0",
+      "android": {
+        "buildType": "apk",
+        "image": "latest"
+      }
     }
   },
   "submit": {

package.json

@@ -25,6 +25,7 @@
     "@react-navigation/native": "^6.0.2",
     "@tanstack/react-query": "^5.51.16",
     "@types/uuid": "^10.0.0",
+    "axios": "^1.7.3",
     "expo": "~51.0.26",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
@@ -38,6 +39,8 @@
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
     "expo-router": "~3.5.21",
+    "expo-screen-orientation": "~7.0.5",
+    "expo-sensors": "~13.0.9",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",

providers/JellyfinProvider.tsx

@@ -12,6 +12,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import { Platform } from "react-native";
 import uuid from "react-native-uuid";
 
 interface Server {
@@ -30,7 +31,7 @@ interface JellyfinContextValue {
 }
 
 const JellyfinContext = createContext<JellyfinContextValue | undefined>(
-  undefined
+  undefined,
 );
 
 const getOrSetDeviceId = async () => {
@@ -56,8 +57,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
         () =>
           new Jellyfin({
             clientInfo: { name: "Streamyfin", version: "1.0.0" },
-            deviceInfo: { name: "iOS", id },
-          })
+            deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
+          }),
       );
     })();
   }, []);
@@ -66,9 +67,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const [user, setUser] = useAtom(userAtom);
 
   const discoverServers = async (url: string): Promise<Server[]> => {
-    const servers = await jellyfin?.discovery.getRecommendedServerCandidates(
-      url
-    );
+    const servers =
+      await jellyfin?.discovery.getRecommendedServerCandidates(url);
     return servers?.map((server) => ({ address: server.address })) || [];
   };
 
@@ -144,7 +144,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
         const token = await AsyncStorage.getItem("token");
         const serverUrl = await AsyncStorage.getItem("serverUrl");
         const user = JSON.parse(
-          (await AsyncStorage.getItem("user")) as string
+          (await AsyncStorage.getItem("user")) as string,
         ) as UserDto;
 
         if (serverUrl && token && user.Id && jellyfin) {

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;
+};