chore: version

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

@@ -29,3 +29,4 @@ pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 development.apk
 Streamyfin.apk
+Streamyfin.ipa

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.3.1",
+    "version": "0.3.4",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -15,6 +15,7 @@
     "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."
@@ -23,7 +24,9 @@
       "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
-      "jsEngine": "jsc",
+      "jsEngine": "hermes",
+      "versionCode": 12,
+      "orientation": "default",
       "androidNavigationBar": {
         "visible": true,
         "barStyle": "dark-content",
@@ -36,8 +39,7 @@
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
-      ],
-      "versionCode": 9
+      ]
     },
     "web": {
       "bundler": "metro",
@@ -59,6 +61,7 @@
         "react-native-video",
         {
           "enableNotificationControls": true,
+          "enableBackgroundAudio": true,
           "androidExtensions": {
             "useExoplayerRtsp": false,
             "useExoplayerSmoothStreaming": false,
@@ -83,6 +86,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)/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

@@ -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,7 +38,18 @@ 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);
     }
@@ -71,7 +84,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 +135,8 @@ const Login: React.FC = () => {
             />
           </View>
 
+          <Text className="text-red-600 mb-2">{error}</Text>
+
           <Button onPress={handleLogin} loading={loading}>
             Log in
           </Button>
@@ -137,7 +152,7 @@ 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"

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/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;
@@ -173,6 +181,17 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [item],
   );
 
+  const backdropUrl = useMemo(
+    () =>
+      getBackdropUrl({
+        api,
+        item,
+        quality: 70,
+        width: 200,
+      }),
+    [item],
+  );
+
   useEffect(() => {
     if (cp?.playbackUrl) {
       play();
@@ -203,32 +222,54 @@ 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}
                   style={{ width: "100%", height: "100%" }}
+                  allowsExternalPlayback={true}
+                  playInBackground={true}
+                  playWhenInactive={true}
+                  showNotificationControls={true}
+                  ignoreSilentSwitch="ignore"
+                  controls={false}
+                  poster={backdropUrl ? 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();
                   }}
-                  ignoreSilentSwitch="ignore"
+                  onError={(e) => {
+                    console.log(e);
+                    writeToLog(
+                      "ERROR",
+                      "Video playback error: " + JSON.stringify(e),
+                    );
+                  }}
                   renderLoader={
-                    <View className="flex flex-col items-center justify-center h-full">
-                      <ActivityIndicator size={"small"} color={"white"} />
-                    </View>
+                    item?.Type === "Video" && (
+                      <View className="flex flex-col items-center justify-center h-full">
+                        <ActivityIndicator size={"small"} color={"white"} />
+                      </View>
+                    )
                   }
+                  subtitleStyle={{
+                    fontSize: 20,
+                  }}
                 />
               )}
             </TouchableOpacity>

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

eas.json

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

package.json

@@ -39,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",

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