chore: versions

fixes #47

.gitignore

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

README.md

@@ -28,11 +28,17 @@ Downloading works by using ffmpeg to convert a HLS stream into a video file on t
 
 ## Get it now
 
-<a href="https://apps.apple.com/se/app/streamyfin/id6593660679?l=en-GB">
-  <img height=75 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/>
-</a>
+<div style="display:flex;">
+  <a href="https://apps.apple.com/se/app/streamyfin/id6593660679?l=en-GB">
+    <img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/>
+  </a>
 
-### TestFlight
+  <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin">
+    <img height=75 alt="Get the beta on Google Play" src="./assets/en_badge_web_generic.png"/>
+  </a>
+</div>
+
+### Beta testing
 
 Get the latest updates by using the TestFlight version of the app.
 
@@ -40,11 +46,7 @@ Get the latest updates by using the TestFlight version of the app.
   <img height=75 alt="Get the beta on TestFlight" src="./assets/Get_the_beta_on_Testflight.svg"/>
 </a>
 
-### Play Store Open Beta
-
-<a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin">
-  <img height=75 alt="Get the beta on Google Play" src="./assets/en_badge_web_generic.png"/>
-</a>
+Or download the APKs here on GitHub for Android.
 
 ## 🚀 Getting Started
 
@@ -100,6 +102,8 @@ Key points of the MPL-2.0:
 
 ## 🌐 Connect with Us
 
+Join our Discord: [https://discord.gg/zyGKHJZvv4](https://discord.gg/zyGKHJZvv4)
+
 If you have questions or need support, feel free to reach out:
 
 - GitHub Issues: Report bugs or request features here.

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.4.1",
+    "version": "0.5.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -13,17 +13,13 @@
       "backgroundColor": "#29164B"
     },
     "jsEngine": "hermes",
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "requireFullScreen": true,
       "infoPlist": {
         "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
-        "UIBackgroundModes": [
-          "audio"
-        ],
+        "UIBackgroundModes": ["audio"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true,
@@ -39,7 +35,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 14,
+      "versionCode": 16,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -57,7 +53,6 @@
     "plugins": [
       "expo-router",
       "expo-font",
-      "react-native-compressor",
       "@config-plugins/ffmpeg-kit-react-native",
       [
         "react-native-google-cast",
@@ -106,8 +101,7 @@
         {
           "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
         }
-      ],
-      "expo-video"
+      ]
     ],
     "experiments": {
       "typedRoutes": true

app/(auth)/(tabs)/_layout.tsx

@@ -3,8 +3,9 @@ import React, { useEffect } from "react";
 import * as NavigationBar from "expo-navigation-bar";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
-import { Platform, TouchableOpacity } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Feather } from "@expo/vector-icons";
+import { Chromecast } from "@/components/Chromecast";
 
 export default function TabLayout() {
   useEffect(() => {
@@ -24,9 +25,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          headerShown: true,
-          headerStyle: { backgroundColor: "black" },
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Home",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon
@@ -34,34 +33,12 @@ export default function TabLayout() {
               color={color}
             />
           ),
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{ marginHorizontal: 17 }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-            >
-              <Feather name="download" color={"white"} size={24} />
-            </TouchableOpacity>
-          ),
-          headerRight: () => (
-            <TouchableOpacity
-              style={{ marginHorizontal: 17 }}
-              onPress={() => {
-                router.push("/(auth)/settings");
-              }}
-            >
-              <Feather name="settings" color={"white"} size={24} />
-            </TouchableOpacity>
-          ),
         }}
       />
       <Tabs.Screen
         name="search"
         options={{
-          headerStyle: { backgroundColor: "black" },
-          headerShown: true,
-          headerShadowVisible: false,
+          headerShown: false,
           title: "Search",
           tabBarIcon: ({ color, focused }) => (
             <TabBarIcon name={focused ? "search" : "search"} color={color} />

app/(auth)/(tabs)/index/_layout.tsx

@@ -0,0 +1,48 @@
+import { Chromecast } from "@/components/Chromecast";
+import { Feather } from "@expo/vector-icons";
+import { Stack, useRouter } from "expo-router";
+import { Platform, View } from "react-native";
+import { TouchableOpacity } from "react-native";
+
+export default function IndexLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Home",
+          headerStyle: { backgroundColor: "black" },
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{
+                marginRight: Platform.OS === "android" ? 17 : 0,
+              }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={"white"} size={22} />
+            </TouchableOpacity>
+          ),
+          headerRight: () => (
+            <View className="flex flex-row items-center space-x-2">
+              <Chromecast />
+              <TouchableOpacity
+                onPress={() => {
+                  router.push("/(auth)/settings");
+                }}
+              >
+                <View className="h-10 aspect-square flex items-center justify-center rounded">
+                  <Feather name="settings" color={"white"} size={22} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          ),
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/index/index.tsx

@@ -237,6 +237,7 @@ export default function index() {
   return (
     <ScrollView
       nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }

app/(auth)/(tabs)/search/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+
+export default function SearchLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="search"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Search",
+          headerStyle: { backgroundColor: "black" },
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/search/search.tsx

@@ -11,10 +11,10 @@ import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
+import { router, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import React, { useLayoutEffect, useState } from "react";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 
 export default function search() {
   const [search, setSearch] = useState<string>("");
@@ -22,6 +22,18 @@ export default function search() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  const navigation = useNavigation();
+  useLayoutEffect(() => {
+    if (Platform.OS === "ios")
+      navigation.setOptions({
+        headerSearchBarOptions: {
+          placeholder: "Search...",
+          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
+          hideWhenScrolling: false,
+        },
+      });
+  }, [navigation]);
+
   const { data: movies } = useQuery({
     queryKey: ["search-movies", search],
     queryFn: async () => {
@@ -67,19 +79,23 @@ export default function search() {
   });
 
   return (
-    <ScrollView keyboardDismissMode="on-drag">
+    <ScrollView
+      keyboardDismissMode="on-drag"
+      contentInsetAdjustmentBehavior="automatic"
+    >
       <View className="flex flex-col pt-2 pb-20">
-        <View className="mb-4 px-4">
-          <Input
-            autoCorrect={false}
-            returnKeyType="done"
-            keyboardType="web-search"
-            placeholder="Search here..."
-            value={search}
-            onChangeText={(text) => setSearch(text)}
-          />
-        </View>
-
+        {Platform.OS === "android" && (
+          <View className="mb-4 px-4">
+            <Input
+              autoCorrect={false}
+              returnKeyType="done"
+              keyboardType="web-search"
+              placeholder="Search here..."
+              value={search}
+              onChangeText={(text) => setSearch(text)}
+            />
+          </View>
+        )}
         <Text className="font-bold text-2xl px-4 mb-2">Movies</Text>
         <SearchItemWrapper
           ids={movies?.map((m) => m.Id!)}

app/(auth)/downloads.tsx

@@ -17,9 +17,11 @@ 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";
+import { queueAtom } from "@/utils/atoms/queue";
 
 const downloads: React.FC = () => {
   const [process, setProcess] = useAtom(runningProcesses);
+  const [queue, setQueue] = useAtom(queueAtom);
 
   const { data: downloadedFiles, isLoading } = useQuery({
     queryKey: ["downloaded_files", process?.item.Id],
@@ -67,50 +69,84 @@ const downloads: React.FC = () => {
   return (
     <ScrollView>
       <View className="px-4 py-4">
-        <View className="mb-4">
-          <Text className="text-2xl font-bold mb-2">Active download</Text>
-          {process?.item ? (
-            <TouchableOpacity
-              onPress={() =>
-                router.push(`/(auth)/items/${process.item.Id}/page`)
-              }
-              className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-            >
-              <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-purple-600">
-                  <Text className="text-xs">
-                    {process.progress.toFixed(0)}%
-                  </Text>
-                  <Text className="text-xs">{process.speed?.toFixed(2)}x</Text>
+        <View className="mb-4 flex flex-col space-y-4">
+          <View>
+            <Text className="text-2xl font-bold mb-2">Queue</Text>
+            <View className="flex flex-col space-y-2">
+              {queue.map((q) => (
+                <TouchableOpacity
+                  onPress={() => router.push(`/(auth)/items/${q.item.Id}/page`)}
+                  className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+                >
                   <View>
-                    <Text className="text-xs">ETA {eta}</Text>
+                    <Text className="font-semibold">{q.item.Name}</Text>
+                    <Text className="text-xs opacity-50">{q.item.Type}</Text>
+                  </View>
+                  <TouchableOpacity
+                    onPress={() => {
+                      setQueue((prev) => prev.filter((i) => i.id !== q.id));
+                    }}
+                  >
+                    <Ionicons name="close" size={24} color="red" />
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {queue.length === 0 && (
+              <Text className="opacity-50">No items in queue</Text>
+            )}
+          </View>
+
+          <View>
+            <Text className="text-2xl font-bold mb-2">Active download</Text>
+            {process?.item ? (
+              <TouchableOpacity
+                onPress={() =>
+                  router.push(`/(auth)/items/${process.item.Id}/page`)
+                }
+                className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+              >
+                <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-purple-600">
+                    <Text className="text-xs">
+                      {process.progress.toFixed(0)}%
+                    </Text>
+                    <Text className="text-xs">
+                      {process.speed?.toFixed(2)}x
+                    </Text>
+                    <View>
+                      <Text className="text-xs">ETA {eta}</Text>
+                    </View>
                   </View>
                 </View>
-              </View>
-              <TouchableOpacity
-                onPress={() => {
-                  FFmpegKit.cancel();
-                  setProcess(null);
-                }}
-              >
-                <Ionicons name="close" size={24} color="red" />
-              </TouchableOpacity>
-              <View
-                className={`
+                <TouchableOpacity
+                  onPress={() => {
+                    FFmpegKit.cancel();
+                    setProcess(null);
+                  }}
+                >
+                  <Ionicons name="close" size={24} color="red" />
+                </TouchableOpacity>
+                <View
+                  className={`
                   absolute bottom-0 left-0 h-1 bg-purple-600
                 `}
-                style={{
-                  width: process.progress
-                    ? `${Math.max(5, process.progress)}%`
-                    : "5%",
-                }}
-              ></View>
-            </TouchableOpacity>
-          ) : (
-            <Text className="opacity-50">No active downloads</Text>
-          )}
+                  style={{
+                    width: process.progress
+                      ? `${Math.max(5, process.progress)}%`
+                      : "5%",
+                  }}
+                ></View>
+              </TouchableOpacity>
+            ) : (
+              <Text className="opacity-50">No active downloads</Text>
+            )}
+          </View>
         </View>
         {movies.length > 0 && (
           <View className="mb-4">

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

@@ -1,23 +1,16 @@
-import { Chromecast } from "@/components/Chromecast";
 import { Text } from "@/components/common/Text";
 import { DownloadItem } from "@/components/DownloadItem";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SimilarItems } from "@/components/SimilarItems";
-import { VideoPlayer } from "@/components/VideoPlayer";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { router, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { useCallback, useMemo, useState } from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
 import { ParallaxScrollView } from "../../../../components/ParallaxPage";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -33,13 +26,17 @@ import CastContext, {
 } from "react-native-google-cast";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios12 from "@/utils/profiles/ios12";
-import { currentlyPlayingItemAtom } from "@/components/CurrentlyPlayingBar";
+import {
+  currentlyPlayingItemAtom,
+  triggerPlayAtom,
+} from "@/components/CurrentlyPlayingBar";
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Button } from "@/components/Button";
-import { Ionicons } from "@expo/vector-icons";
 import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
+import { Ratings } from "@/components/Ratings";
+import { SeriesTitleHeader } from "@/components/series/SeriesTitleHeader";
+import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
+import { OverviewText } from "@/components/OverviewText";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -109,6 +106,7 @@ const page: React.FC = () => {
       maxBitrate,
       castDevice,
       selectedAudioStream,
+      selectedSubtitleStream,
     ],
     queryFn: async () => {
       if (!api || !user?.Id || !sessionData) return null;
@@ -133,38 +131,45 @@ const page: React.FC = () => {
     staleTime: 0,
   });
 
-  const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
+  const [, setCp] = useAtom(currentlyPlayingItemAtom);
   const client = useRemoteMediaClient();
+  const [, setPlayTrigger] = useAtom(triggerPlayAtom);
 
-  const onPressPlay = useCallback(async () => {
-    if (!playbackUrl || !item) return;
+  const onPressPlay = useCallback(
+    async (type: "device" | "cast" = "device") => {
+      if (!playbackUrl || !item) return;
 
-    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 || "",
+      if (type === "cast" && 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]);
+              startTime: 0,
+            });
+          }
+        });
+      } else {
+        setCp({
+          item,
+          playbackUrl,
+        });
+
+        // Use this trigger to initiate playback in another component (CurrentlyPlayingBar)
+        setPlayTrigger((prev) => prev + 1);
+      }
+    },
+    [playbackUrl, item],
+  );
 
   if (l1)
     return (
@@ -208,50 +213,14 @@ const page: React.FC = () => {
       <View className="flex flex-col px-4 pt-4">
         <View className="flex flex-col">
           {item.Type === "Episode" ? (
-            <>
-              <TouchableOpacity
-                onPress={() =>
-                  router.push(`/(auth)/series/${item.SeriesId}/page`)
-                }
-              >
-                <Text className="text-center opacity-50">
-                  {item?.SeriesName}
-                </Text>
-              </TouchableOpacity>
-              <View className="flex flex-row items-center self-center px-4">
-                <Text className="text-center font-bold text-2xl mr-2">
-                  {item?.Name}
-                </Text>
-              </View>
-              <View>
-                <View className="flex flex-row items-center self-center">
-                  <TouchableOpacity onPress={() => {}}>
-                    <Text className="text-center opacity-50">
-                      {item?.SeasonName}
-                    </Text>
-                  </TouchableOpacity>
-                  <Text className="text-center opacity-50 mx-2">{"—"}</Text>
-                  <Text className="text-center opacity-50">
-                    {`Episode ${item.IndexNumber}`}
-                  </Text>
-                </View>
-              </View>
-              <Text className="text-center opacity-50">
-                {item.ProductionYear}
-              </Text>
-            </>
+            <SeriesTitleHeader item={item} />
           ) : (
             <>
-              <View className="flex flex-row items-center self-center px-4">
-                <Text className="text-center font-bold text-2xl mr-2">
-                  {item?.Name}
-                </Text>
-              </View>
-              <Text className="text-center opacity-50">
-                {item?.ProductionYear}
-              </Text>
+              <MoviesTitleHeader item={item} />
             </>
           )}
+          <Text className="text-center opacity-50">{item?.ProductionYear}</Text>
+          <Ratings item={item} />
         </View>
 
         <View className="flex flex-row justify-between items-center w-full my-4">
@@ -261,9 +230,9 @@ const page: React.FC = () => {
             <View className="h-12 aspect-square flex items-center justify-center"></View>
           )}
           <PlayedStatus item={item} />
-          <Chromecast />
         </View>
-        <Text>{item.Overview}</Text>
+
+        <OverviewText text={item.Overview} />
       </View>
       <View className="flex flex-col p-4 w-full">
         <View className="flex flex-row items-center space-x-2 w-full">
@@ -286,7 +255,7 @@ const page: React.FC = () => {
           <NextEpisodeButton item={item} type="previous" className="mr-2" />
           <PlayButton
             item={item}
-            chromecastReady={false}
+            chromecastReady={chromecastReady}
             onPress={onPressPlay}
             className="grow"
           />

app/(auth)/settings.tsx

@@ -4,11 +4,11 @@ import { ListItem } from "@/components/ListItem";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
 import { useAtom } from "jotai";
 import { ScrollView, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { useFiles } from "@/hooks/useFiles";
+import { SettingToggles } from "@/components/settings/SettingToggles";
 
 export default function settings() {
   const { logout } = useJellyfin();
@@ -28,11 +28,13 @@ export default function settings() {
       <View className="p-4 flex flex-col gap-y-4 pb-12">
         <Text className="font-bold text-2xl">Information</Text>
 
-        <View className="rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-neutral-900">
+        <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
           <ListItem title="User" subTitle={user?.Name} />
           <ListItem title="Server" subTitle={api?.basePath} />
         </View>
 
+        <SettingToggles />
+
         <View className="flex flex-col space-y-2">
           <Button color="black" onPress={logout}>
             Log out

app/_layout.tsx

@@ -9,8 +9,12 @@ import { useEffect, useRef, useState } from "react";
 import "react-native-reanimated";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { StatusBar } from "expo-status-bar";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
+import { useJobProcessor } from "@/utils/atoms/queue";
+import { JobQueueProvider } from "@/providers/JobQueueProvider";
+import { useKeepAwake } from "expo-keep-awake";
+import { useSettings } from "@/utils/atoms/settings";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -24,6 +28,28 @@ export default function RootLayout() {
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
 
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <JotaiProvider>
+      <Layout />
+    </JotaiProvider>
+  );
+}
+
+function Layout() {
+  const [settings, updateSettings] = useSettings();
+
+  useKeepAwake();
+
   const queryClientRef = useRef<QueryClient>(
     new QueryClient({
       defaultOptions: {
@@ -39,104 +65,81 @@ export default function RootLayout() {
   );
 
   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;
-  }
+    if (settings?.autoRotate === true)
+      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
+    else
+      ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+  }, [settings]);
 
   return (
     <QueryClientProvider client={queryClientRef.current}>
-      <JotaiProvider>
-        <JellyfinProvider>
-          <StatusBar style="light" backgroundColor="#000" />
-          <ThemeProvider value={DarkTheme}>
-            <Stack>
-              <Stack.Screen
-                name="(auth)/(tabs)"
-                options={{
-                  headerShown: false,
-                  title: "Home",
-                }}
-              />
-              <Stack.Screen
-                name="(auth)/settings"
-                options={{
-                  headerShown: true,
-                  title: "Settings",
-                  headerStyle: { backgroundColor: "black" },
-                  headerShadowVisible: false,
-                }}
-              />
-              <Stack.Screen
-                name="(auth)/downloads"
-                options={{
-                  headerShown: true,
-                  title: "Downloads",
-                  headerStyle: { backgroundColor: "black" },
-                  headerShadowVisible: false,
-                }}
-              />
-              <Stack.Screen
-                name="(auth)/items/[id]/page"
-                options={{
-                  title: "",
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="(auth)/collections/[collection]/page"
-                options={{
-                  title: "",
-                  headerShown: true,
-                  headerStyle: { backgroundColor: "black" },
-                  headerShadowVisible: false,
-                }}
-              />
-              <Stack.Screen
-                name="(auth)/series/[id]/page"
-                options={{
-                  title: "",
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="login"
-                options={{ headerShown: false, title: "Login" }}
-              />
-              <Stack.Screen name="+not-found" />
-            </Stack>
-            <CurrentlyPlayingBar />
-          </ThemeProvider>
-        </JellyfinProvider>
-      </JotaiProvider>
+      <JobQueueProvider>
+        <ActionSheetProvider>
+          <JellyfinProvider>
+            <StatusBar style="light" backgroundColor="#000" />
+            <ThemeProvider value={DarkTheme}>
+              <Stack>
+                <Stack.Screen
+                  name="(auth)/(tabs)"
+                  options={{
+                    headerShown: false,
+                    title: "Home",
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/settings"
+                  options={{
+                    headerShown: true,
+                    title: "Settings",
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/downloads"
+                  options={{
+                    headerShown: true,
+                    title: "Downloads",
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/items/[id]/page"
+                  options={{
+                    title: "",
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/collections/[collection]/page"
+                  options={{
+                    title: "",
+                    headerShown: true,
+                    headerStyle: { backgroundColor: "black" },
+                    headerShadowVisible: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="(auth)/series/[id]/page"
+                  options={{
+                    title: "",
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="login"
+                  options={{ headerShown: false, title: "Login" }}
+                />
+                <Stack.Screen name="+not-found" />
+              </Stack>
+              <CurrentlyPlayingBar />
+            </ThemeProvider>
+          </JellyfinProvider>
+        </ActionSheetProvider>
+      </JobQueueProvider>
     </QueryClientProvider>
   );
 }

app/login.tsx

@@ -38,18 +38,8 @@ const Login: React.FC = () => {
         await login(credentials.username, credentials.password);
       }
     } catch (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?",
-          );
-        }
-      }
+      const e = error as AxiosError;
+      setError(e.message);
     } finally {
       setLoading(false);
     }

components/Badge.tsx

@@ -0,0 +1,36 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "./common/Text";
+
+interface Props extends ViewProps {
+  text?: string | number | null;
+  variant?: "gray" | "purple";
+  iconLeft?: React.ReactNode;
+}
+
+export const Badge: React.FC<Props> = ({
+  iconLeft,
+  text,
+  variant = "purple",
+  ...props
+}) => {
+  return (
+    <View
+      {...props}
+      className={`
+      rounded p-1 shrink grow-0 self-start flex flex-row items-center px-1.5
+      ${variant === "purple" && "bg-purple-600"}
+      ${variant === "gray" && "bg-neutral-800"}
+      `}
+    >
+      {iconLeft && <View className="mr-1">{iconLeft}</View>}
+      <Text
+        className={`
+          text-xs
+          ${variant === "purple" && "text-white"}
+      `}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+};

components/BitrateSelector.tsx

@@ -13,6 +13,10 @@ const BITRATES: Bitrate[] = [
     key: "Max",
     value: undefined,
   },
+  {
+    key: "8 Mb/s",
+    value: 8000000,
+  },
   {
     key: "4 Mb/s",
     value: 4000000,
@@ -25,6 +29,10 @@ const BITRATES: Bitrate[] = [
     key: "500 Kb/s",
     value: 500000,
   },
+  {
+    key: "250 Kb/s",
+    value: 250000,
+  },
 ];
 
 interface Props extends React.ComponentProps<typeof View> {

components/Chromecast.tsx

@@ -10,11 +10,11 @@ import {
 import GoogleCast from "react-native-google-cast";
 
 type Props = {
-  item?: BaseItemDto | null;
-  startTimeTicks?: number | null;
+  width?: number;
+  height?: number;
 };
 
-export const Chromecast: React.FC<Props> = () => {
+export const Chromecast: React.FC<Props> = ({ width = 48, height = 48 }) => {
   const client = useRemoteMediaClient();
   const castDevice = useCastDevice();
   const devices = useDevices();
@@ -32,8 +32,8 @@ export const Chromecast: React.FC<Props> = () => {
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
   return (
-    <View className="rounded h-12 aspect-square flex items-center justify-center">
-      <CastButton style={{ tintColor: "white", height: 48, width: 48 }} />
+    <View className="rounded h-10 aspect-square flex items-center justify-center">
+      <CastButton style={{ tintColor: "white", height, width }} />
     </View>
   );
 };

components/CurrentlyPlayingBar.tsx

@@ -6,7 +6,15 @@ import {
 } from "react-native";
 import { Text } from "./common/Text";
 import { Ionicons } from "@expo/vector-icons";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { atom, useAtom } from "jotai";
@@ -25,12 +33,17 @@ import { useRouter, useSegments } from "expo-router";
 import { BlurView } from "expo-blur";
 import { writeToLog } from "@/utils/log";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { useSettings } from "@/utils/atoms/settings";
+import * as ScreenOrientation from "expo-screen-orientation";
 
 export const currentlyPlayingItemAtom = atom<{
   item: BaseItemDto;
   playbackUrl: string;
 } | null>(null);
 
+export const triggerPlayAtom = atom(0);
+
 export const CurrentlyPlayingBar: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -38,10 +51,12 @@ export const CurrentlyPlayingBar: React.FC = () => {
 
   const queryClient = useQueryClient();
   const segments = useSegments();
+  const [settings] = useSettings();
 
   const videoRef = useRef<VideoRef | null>(null);
   const [paused, setPaused] = useState(true);
   const [progress, setProgress] = useState(0);
+  const [fullScreen, setFullScreen] = useState(false);
 
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
@@ -89,6 +104,14 @@ export const CurrentlyPlayingBar: React.FC = () => {
     }
   }, [segments]);
 
+  // TODO: Fix this
+  // useEffect(() => {
+  //   if (settings?.forceLandscapeInVideoPlayer === true && fullScreen)
+  //     ScreenOrientation.lockAsync(
+  //       ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+  //     );
+  // }, [settings, fullScreen]);
+
   const { data: item } = useQuery({
     queryKey: ["item", cp?.item.Id],
     queryFn: async () =>
@@ -178,13 +201,30 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [item],
   );
 
+  /**
+   * These two useEffects are used to start playing the
+   * video when the playbackUrl is available.
+   *
+   * The trigger playback is triggered from the button component.
+   */
   useEffect(() => {
     if (cp?.playbackUrl) {
       play();
+      if (settings?.openFullScreenVideoPlayerByDefault) {
+        videoRef.current?.presentFullscreenPlayer();
+      }
     }
   }, [cp?.playbackUrl]);
 
-  if (!cp) return null;
+  const [triggerPlay] = useAtom(triggerPlayAtom);
+  useEffect(() => {
+    play();
+    if (settings?.openFullScreenVideoPlayerByDefault) {
+      videoRef.current?.presentFullscreenPlayer();
+    }
+  }, [triggerPlay]);
+
+  if (!cp || !api) return null;
 
   return (
     <Animated.View
@@ -228,6 +268,10 @@ export const CurrentlyPlayingBar: React.FC = () => {
                       ? backdropUrl
                       : undefined
                   }
+                  debug={{
+                    enable: true,
+                    thread: true,
+                  }}
                   paused={paused}
                   onProgress={(e) => onProgress(e)}
                   subtitleStyle={{
@@ -237,19 +281,27 @@ export const CurrentlyPlayingBar: React.FC = () => {
                     uri: cp.playbackUrl,
                     isNetwork: true,
                     startPosition,
+                    headers: getAuthHeaders(api),
                   }}
                   onBuffer={(e) =>
                     e.isBuffering ? console.log("Buffering...") : null
                   }
+                  onFullscreenPlayerDidDismiss={() => {
+                    setFullScreen(false);
+                  }}
+                  onFullscreenPlayerDidPresent={() => {
+                    setFullScreen(true);
+                  }}
                   onPlaybackStateChanged={(e) => {
                     if (e.isPlaying) {
                       setPaused(false);
                     } else if (e.isSeeking) {
                       return;
                     } else {
-                      setPaused(true);
+                      pause();
                     }
                   }}
+                  progressUpdateInterval={1000}
                   onError={(e) => {
                     console.log(e);
                     writeToLog(

components/DownloadItem.tsx

@@ -1,18 +1,16 @@
+import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runningProcesses } from "@/utils/atoms/downloads";
+import { queueActions, queueAtom } from "@/utils/atoms/queue";
+import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import ProgressCircle from "./ProgressCircle";
-import { Text } from "./common/Text";
-import { useDownloadMedia } from "@/hooks/useDownloadMedia";
-import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
-import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
 
 type DownloadProps = {
   item: BaseItemDto;
@@ -26,46 +24,32 @@ export const DownloadItem: React.FC<DownloadProps> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [process] = useAtom(runningProcesses);
+  const [queue, setQueue] = useAtom(queueAtom);
 
-  const { downloadMedia, isDownloading, error, cancelDownload } =
-    useDownloadMedia(api, user?.Id);
-
-  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(playbackUrl, item);
+  const { startRemuxing } = useRemuxHlsToMp4(playbackUrl, item);
 
   const { data: playbackInfo, isLoading } = useQuery({
     queryKey: ["playbackInfo", item.Id],
     queryFn: async () => getPlaybackInfo(api, item.Id, user?.Id),
   });
 
-  const downloadFile = useCallback(async () => {
-    if (!playbackInfo) return;
+  const { data: downloaded, isLoading: isLoadingDownloaded } = useQuery({
+    queryKey: ["downloaded", item.Id],
+    queryFn: async () => {
+      if (!item.Id) return false;
 
-    const source = playbackInfo.MediaSources?.[0];
-
-    if (source?.SupportsDirectPlay && item.CanDownload) {
-      downloadMedia(item);
-    } else {
-      throw new Error(
-        "Direct play not supported thus the file cannot be downloaded",
-      );
-    }
-  }, [item, user, playbackInfo]);
-
-  const [downloaded, setDownloaded] = useState<boolean>(false);
-
-  useEffect(() => {
-    (async () => {
       const data: BaseItemDto[] = JSON.parse(
         (await AsyncStorage.getItem("downloaded_files")) || "[]",
       );
 
-      if (data.find((d) => d.Id === item.Id)) setDownloaded(true);
-    })();
-  }, [process]);
+      return data.some((d) => d.Id === item.Id);
+    },
+    enabled: !!item.Id,
+  });
 
-  if (isLoading) {
+  if (isLoading || isLoadingDownloaded) {
     return (
-      <View className="rounded h-12 aspect-square flex items-center justify-center">
+      <View className="rounded h-10 aspect-square flex items-center justify-center">
         <ActivityIndicator size={"small"} color={"white"} />
       </View>
     );
@@ -73,67 +57,60 @@ export const DownloadItem: React.FC<DownloadProps> = ({
 
   if (playbackInfo?.MediaSources?.[0].SupportsDirectPlay === false) {
     return (
-      <View className="rounded h-12 aspect-square flex items-center justify-center opacity-50">
+      <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
         <Ionicons name="cloud-download-outline" size={24} color="white" />
       </View>
     );
   }
 
-  if (process && process.item.Id !== item.Id!) {
+  if (process && process?.item.Id === item.Id) {
     return (
-      <TouchableOpacity onPress={() => {}}>
-        <View className="rounded h-12 aspect-square flex items-center justify-center opacity-50">
-          <Ionicons name="cloud-download-outline" size={24} color="white" />
+      <TouchableOpacity
+        onPress={() => {
+          router.push("/downloads");
+        }}
+      >
+        <View className="rounded h-10 aspect-square flex items-center justify-center">
+          {process.progress === 0 ? (
+            <ActivityIndicator size={"small"} color={"white"} />
+          ) : (
+            <View className="-rotate-45">
+              <ProgressCircle
+                size={24}
+                fill={process.progress}
+                width={4}
+                tintColor="#9334E9"
+                backgroundColor="#bdc3c7"
+              />
+            </View>
+          )}
         </View>
       </TouchableOpacity>
     );
   }
 
-  if (process) {
+  if (queue.some((i) => i.id === item.Id)) {
     return (
       <TouchableOpacity
         onPress={() => {
           router.push("/downloads");
         }}
       >
-        <View className="rounded h-12 aspect-square flex items-center justify-center">
-          {process.progress === 0 ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <View className="relative">
-              <View className="-rotate-45">
-                <ProgressCircle
-                  size={28}
-                  fill={process.progress}
-                  width={4}
-                  tintColor="#3498db"
-                  backgroundColor="#bdc3c7"
-                />
-              </View>
-              <View className="absolute top-0 left-0 font-bold w-full h-full flex flex-col items-center justify-center">
-                <Text className="text-[7px]">
-                  {process.progress.toFixed(0)}%
-                </Text>
-              </View>
-            </View>
-          )}
-
-          {process?.speed && process.speed > 0 ? (
-            <View className="ml-2">
-              <Text>{process.speed.toFixed(2)}x</Text>
-            </View>
-          ) : null}
+        <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
+          <Ionicons name="hourglass" size={24} color="white" />
         </View>
       </TouchableOpacity>
     );
-  } else if (downloaded) {
+  }
+
+  if (downloaded) {
     return (
       <TouchableOpacity
         onPress={() => {
           router.push("/downloads");
         }}
       >
-        <View className="rounded h-12 aspect-square flex items-center justify-center">
+        <View className="rounded h-10 aspect-square flex items-center justify-center">
           <Ionicons name="cloud-download" size={26} color="#9333ea" />
         </View>
       </TouchableOpacity>
@@ -142,10 +119,16 @@ export const DownloadItem: React.FC<DownloadProps> = ({
     return (
       <TouchableOpacity
         onPress={() => {
-          startRemuxing();
+          queueActions.enqueue(queue, setQueue, {
+            id: item.Id!,
+            execute: async () => {
+              await startRemuxing();
+            },
+            item,
+          });
         }}
       >
-        <View className="rounded h-12 aspect-square flex items-center justify-center">
+        <View className="rounded h-10 aspect-square flex items-center justify-center">
           <Ionicons name="cloud-download-outline" size={26} color="white" />
         </View>
       </TouchableOpacity>

components/ItemCardText.tsx

@@ -7,6 +7,17 @@ type ItemCardProps = {
   item: BaseItemDto;
 };
 
+function seasonNameToIndex(seasonName: string | null | undefined) {
+  if (!seasonName) return -1;
+  if (seasonName.startsWith("Season")) {
+    return parseInt(seasonName.replace("Season ", ""));
+  }
+  if (seasonName.startsWith("Specials")) {
+    return 0;
+  }
+  return -1;
+}
+
 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
   return (
     <View className="mt-2 flex flex-col grow-0">
@@ -17,9 +28,8 @@ export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
             style={{ flexWrap: "wrap" }}
             className="flex text-xs opacity-50 break-all"
           >
-            {`S${item.SeasonName?.replace(
-              "Season ",
-              ""
+            {`S${seasonNameToIndex(
+              item?.SeasonName,
             )}:E${item.IndexNumber?.toString()}`}{" "}
             {item.Name}
           </Text>

components/ListItem.tsx

@@ -1,22 +1,26 @@
 import { PropsWithChildren, ReactNode } from "react";
-import { View } from "react-native";
+import { View, ViewProps } from "react-native";
 import { Text } from "./common/Text";
 
-type Props = {
+interface Props extends ViewProps {
   title?: string | null | undefined;
   subTitle?: string | null | undefined;
   children?: ReactNode;
   iconAfter?: ReactNode;
-};
+}
 
 export const ListItem: React.FC<PropsWithChildren<Props>> = ({
   title,
   subTitle,
   iconAfter,
   children,
+  ...props
 }) => {
   return (
-    <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+    <View
+      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
+      {...props}
+    >
       <View className="flex flex-col">
         <Text className="font-bold ">{title}</Text>
         {subTitle && <Text className="text-xs">{subTitle}</Text>}

components/OverviewText.tsx

@@ -0,0 +1,38 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { tc } from "@/utils/textTools";
+import { useState } from "react";
+
+interface Props extends ViewProps {
+  text?: string | null;
+}
+
+const LIMIT = 140;
+
+export const OverviewText: React.FC<Props> = ({ text, ...props }) => {
+  const [limit, setLimit] = useState(LIMIT);
+
+  if (!text) return null;
+
+  if (text.length > LIMIT)
+    return (
+      <TouchableOpacity
+        onPress={() =>
+          setLimit((prev) => (prev === LIMIT ? text.length : LIMIT))
+        }
+      >
+        <View {...props} className="">
+          <Text>{tc(text, limit)}</Text>
+          <Text className="text-purple-600 mt-1">
+            {limit === LIMIT ? "Show more" : "Show less"}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+
+  return (
+    <View {...props}>
+      <Text>{text}</Text>
+    </View>
+  );
+};

components/ParallaxPage.tsx

@@ -9,6 +9,7 @@ import Animated, {
   useScrollViewOffset,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Chromecast } from "./Chromecast";
 
 const HEADER_HEIGHT = 400;
 
@@ -72,6 +73,15 @@ export const ParallaxScrollView: React.FC<Props> = ({
           />
         </TouchableOpacity>
 
+        <View
+          className="absolute right-4 z-50 bg-black rounded-full p-0.5"
+          style={{
+            top: inset.top + 17,
+          }}
+        >
+          <Chromecast width={22} height={22} />
+        </View>
+
         {logo && (
           <View className="absolute top-[250px] h-[130px] left-0 w-full z-40 px-4 flex justify-center items-center">
             {logo}

components/PlayButton.tsx

@@ -2,10 +2,12 @@ import { Button } from "./Button";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { runtimeTicksToMinutes } from "@/utils/time";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import { View } from "react-native";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
-  onPress: () => void;
+  onPress: (type?: "cast" | "device") => void;
   chromecastReady: boolean;
 }
 
@@ -15,15 +17,45 @@ export const PlayButton: React.FC<Props> = ({
   chromecastReady,
   ...props
 }) => {
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const _onPress = () => {
+    if (!chromecastReady) {
+      onPress("device");
+      return;
+    }
+
+    const options = ["Chromecast", "Device", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      (selectedIndex: number | undefined) => {
+        switch (selectedIndex) {
+          case 0:
+            onPress("cast");
+            break;
+          case 1:
+            onPress("device");
+            break;
+          case cancelButtonIndex:
+            console.log("calcel");
+        }
+      },
+    );
+  };
+
   return (
     <Button
-      onPress={onPress}
+      onPress={_onPress}
       iconRight={
-        chromecastReady ? (
-          <Feather name="cast" size={20} color="white" />
-        ) : (
+        <View className="flex flex-row items-center space-x-2">
           <Ionicons name="play-circle" size={24} color="white" />
-        )
+          {chromecastReady && <Feather name="cast" size={22} color="white" />}
+        </View>
       }
       {...props}
     >

components/PlayedStatus.tsx

@@ -47,8 +47,8 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             invalidateQueries();
           }}
         >
-          <View className="rounded h-12 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle" size={26} color="white" />
+          <View className="rounded h-10 aspect-square flex items-center justify-center">
+            <Ionicons name="checkmark-circle" size={30} color="white" />
           </View>
         </TouchableOpacity>
       ) : (
@@ -63,8 +63,8 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             invalidateQueries();
           }}
         >
-          <View className="rounded h-12 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle-outline" size={26} color="white" />
+          <View className="rounded h-10 aspect-square flex items-center justify-center">
+            <Ionicons name="checkmark-circle-outline" size={30} color="white" />
           </View>
         </TouchableOpacity>
       )}

components/Ratings.tsx

@@ -0,0 +1,41 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";
+import { Badge } from "./Badge";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const Ratings: React.FC<Props> = ({ item }) => {
+  return (
+    <View className="flex flex-row items-center justify-center mt-2 space-x-2">
+      {item.OfficialRating && (
+        <Badge text={item.OfficialRating} variant="gray" />
+      )}
+      {item.CommunityRating && (
+        <Badge
+          text={item.CommunityRating}
+          variant="gray"
+          iconLeft={<Ionicons name="star" size={14} color="gold" />}
+        />
+      )}
+      {item.CriticRating && (
+        <Badge
+          text={item.CriticRating}
+          variant="gray"
+          iconLeft={
+            <Image
+              source={require("@/assets/images/rotten-tomatoes.png")}
+              style={{
+                width: 14,
+                height: 14,
+              }}
+            />
+          }
+        />
+      )}
+    </View>
+  );
+};

components/_template.tsx

@@ -0,0 +1,12 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+
+interface Props extends ViewProps {}
+
+export const TitleHeader: React.FC<Props> = ({ ...props }) => {
+  return (
+    <View {...props}>
+      <Text></Text>
+    </View>
+  );
+};

components/movies/MoviesTitleHeader.tsx

@@ -0,0 +1,21 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const MoviesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
+  const router = useRouter();
+  return (
+    <>
+      <View className="flex flex-row items-center self-center px-4">
+        <Text className="text-center font-bold text-2xl mr-2">
+          {item?.Name}
+        </Text>
+      </View>
+    </>
+  );
+};

components/series/SeriesTitleHeader.tsx

@@ -0,0 +1,37 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const SeriesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
+  const router = useRouter();
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => router.push(`/(auth)/series/${item.SeriesId}/page`)}
+      >
+        <Text className="text-center opacity-50">{item?.SeriesName}</Text>
+      </TouchableOpacity>
+      <View className="flex flex-row items-center self-center px-4">
+        <Text className="text-center font-bold text-2xl mr-2">
+          {item?.Name}
+        </Text>
+      </View>
+      <View>
+        <View className="flex flex-row items-center self-center">
+          <TouchableOpacity onPress={() => {}}>
+            <Text className="text-center opacity-50">{item?.SeasonName}</Text>
+          </TouchableOpacity>
+          <Text className="text-center opacity-50 mx-2">{"—"}</Text>
+          <Text className="text-center opacity-50">
+            {`Episode ${item.IndexNumber}`}
+          </Text>
+        </View>
+      </View>
+    </>
+  );
+};

components/settings/SettingToggles.tsx

@@ -0,0 +1,29 @@
+import { Switch, View } from "react-native";
+import { Text } from "../common/Text";
+import { useAtom } from "jotai";
+import { useSettings } from "@/utils/atoms/settings";
+
+export const SettingToggles: React.FC = () => {
+  const [settings, updateSettings] = useSettings();
+
+  return (
+    <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+        <Text>Auto rotate</Text>
+        <Switch
+          value={settings?.autoRotate}
+          onValueChange={(value) => updateSettings({ autoRotate: value })}
+        />
+      </View>
+      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+        <Text>Start videos in fullscreen</Text>
+        <Switch
+          value={settings?.openFullScreenVideoPlayerByDefault}
+          onValueChange={(value) =>
+            updateSettings({ openFullScreenVideoPlayerByDefault: value })
+          }
+        />
+      </View>
+    </View>
+  );
+};

eas.json

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

hooks/useRemuxHlsToMp4.ts

@@ -23,7 +23,7 @@ export const useRemuxHlsToMp4 = (url: string, item: BaseItemDto) => {
   }
 
   const output = `${FileSystem.documentDirectory}${item.Id}.mp4`;
-  const command = `-y -fflags +genpts -i ${url} -c copy -bufsize 10M -max_muxing_queue_size 4096 ${output}`;
+  const command = `-y -loglevel quiet -thread_queue_size 512 -protocol_whitelist file,http,https,tcp,tls,crypto -multiple_requests 1 -tcp_nodelay 1 -fflags +genpts -i ${url} -c copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
 
   const startRemuxing = useCallback(async () => {
     writeToLog(
@@ -54,28 +54,38 @@ export const useRemuxHlsToMp4 = (url: string, item: BaseItemDto) => {
         );
       });
 
-      await FFmpegKit.executeAsync(command, async (session) => {
-        const returnCode = await session.getReturnCode();
+      // Await the execution of the FFmpeg command and ensure that the callback is awaited properly.
+      await new Promise<void>((resolve, reject) => {
+        FFmpegKit.executeAsync(command, async (session) => {
+          try {
+            const returnCode = await session.getReturnCode();
 
-        if (returnCode.isValueSuccess()) {
-          await updateDownloadedFiles(item);
-          writeToLog(
-            "INFO",
-            `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}`,
-          );
-        } else if (returnCode.isValueError()) {
-          writeToLog(
-            "ERROR",
-            `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`,
-          );
-        } else if (returnCode.isValueCancel()) {
-          writeToLog(
-            "INFO",
-            `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}`,
-          );
-        }
+            if (returnCode.isValueSuccess()) {
+              await updateDownloadedFiles(item);
+              writeToLog(
+                "INFO",
+                `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}`,
+              );
+              resolve();
+            } else if (returnCode.isValueError()) {
+              writeToLog(
+                "ERROR",
+                `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`,
+              );
+              reject(new Error("Remuxing failed")); // Reject the promise on error
+            } else if (returnCode.isValueCancel()) {
+              writeToLog(
+                "INFO",
+                `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}`,
+              );
+              resolve();
+            }
 
-        setProgress(null);
+            setProgress(null);
+          } catch (error) {
+            reject(error);
+          }
+        });
       });
     } catch (error) {
       console.error("Failed to remux:", error);
@@ -84,6 +94,7 @@ export const useRemuxHlsToMp4 = (url: string, item: BaseItemDto) => {
         `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`,
       );
       setProgress(null);
+      throw error; // Re-throw the error to propagate it to the caller
     }
   }, [output, item, command, setProgress]);
 

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
+    "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/vector-icons": "^14.0.2",
     "@jellyfin/sdk": "^0.10.0",
     "@kesha-antonov/react-native-background-downloader": "^3.2.0",
@@ -26,7 +27,7 @@
     "@tanstack/react-query": "^5.51.16",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.3",
-    "expo": "~51.0.26",
+    "expo": "~51.0.27",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
@@ -45,7 +46,6 @@
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
     "expo-updates": "~0.25.22",
-    "expo-video": "^1.2.4",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
     "jotai": "^2.9.1",

providers/JellyfinProvider.tsx

@@ -56,7 +56,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "1.0.0" },
+            clientInfo: { name: "Streamyfin", version: "0.4.2" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           }),
       );

providers/JobQueueProvider.tsx

@@ -0,0 +1,14 @@
+import React, { createContext } from "react";
+import { useJobProcessor } from "@/utils/atoms/queue";
+
+const JobQueueContext = createContext(null);
+
+export const JobQueueProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  useJobProcessor();
+
+  return (
+    <JobQueueContext.Provider value={null}>{children}</JobQueueContext.Provider>
+  );
+};

utils/atoms/queue.ts

@@ -0,0 +1,55 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { atom, useAtom } from "jotai";
+import { useEffect } from "react";
+
+export interface Job {
+  id: string;
+  item: BaseItemDto;
+  execute: () => void | Promise<void>;
+}
+
+export const queueAtom = atom<Job[]>([]);
+export const isProcessingAtom = atom(false);
+
+export const queueActions = {
+  enqueue: (queue: Job[], setQueue: (update: Job[]) => void, job: Job) => {
+    const updatedQueue = [...queue, job];
+    console.info("Enqueueing job", job, updatedQueue);
+    setQueue(updatedQueue);
+  },
+  processJob: async (
+    queue: Job[],
+    setQueue: (update: Job[]) => void,
+    setProcessing: (processing: boolean) => void,
+  ) => {
+    const [job, ...rest] = queue;
+    setQueue(rest);
+
+    console.info("Processing job", job);
+
+    setProcessing(true);
+    await job.execute();
+    console.info("Job done", job);
+    setProcessing(false);
+  },
+  clear: (
+    setQueue: (update: Job[]) => void,
+    setProcessing: (processing: boolean) => void,
+  ) => {
+    setQueue([]);
+    setProcessing(false);
+  },
+};
+
+export const useJobProcessor = () => {
+  const [queue, setQueue] = useAtom(queueAtom);
+  const [isProcessing, setProcessing] = useAtom(isProcessingAtom);
+
+  useEffect(() => {
+    console.info("Queue changed", queue, isProcessing);
+    if (queue.length > 0 && !isProcessing) {
+      console.info("Processing queue", queue);
+      queueActions.processJob(queue, setQueue, setProcessing);
+    }
+  }, [queue, isProcessing, setQueue, setProcessing]);
+};

utils/atoms/settings.ts

@@ -0,0 +1,55 @@
+import { atom, useAtom } from "jotai";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useEffect } from "react";
+
+type Settings = {
+  autoRotate?: boolean;
+  forceLandscapeInVideoPlayer?: boolean;
+  openFullScreenVideoPlayerByDefault?: boolean;
+};
+
+/**
+ *
+ * The settings atom is a Jotai atom that stores the user's settings.
+ * It is initialized with a default value of null, which indicates that the settings have not been loaded yet.
+ * The settings are loaded from AsyncStorage when the atom is read for the first time.
+ *
+ */
+
+// Utility function to load settings from AsyncStorage
+const loadSettings = async (): Promise<Settings> => {
+  const jsonValue = await AsyncStorage.getItem("settings");
+  return jsonValue != null
+    ? JSON.parse(jsonValue)
+    : { theme: "light", notificationsEnabled: true, language: "en" };
+};
+
+// Utility function to save settings to AsyncStorage
+const saveSettings = async (settings: Settings) => {
+  const jsonValue = JSON.stringify(settings);
+  await AsyncStorage.setItem("settings", jsonValue);
+};
+
+// Create an atom to store the settings in memory
+const settingsAtom = atom<Settings | null>(null);
+
+// A hook to manage settings, loading them on initial mount and providing a way to update them
+export const useSettings = () => {
+  const [settings, setSettings] = useAtom(settingsAtom);
+
+  useEffect(() => {
+    if (settings === null) {
+      loadSettings().then(setSettings);
+    }
+  }, [settings, setSettings]);
+
+  const updateSettings = async (update: Partial<Settings>) => {
+    if (settings) {
+      const newSettings = { ...settings, ...update };
+      setSettings(newSettings);
+      await saveSettings(newSettings);
+    }
+  };
+
+  return [settings, updateSettings] as const;
+};