fix: working material3 theme

feat: Hide 0h on play button when media length is lower than an hour

.gitignore

@@ -26,6 +26,8 @@ package-lock.json
 /ios
 /android
 
+modules/vlc-player/android
+
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 *.apk

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.17.0",
+    "version": "0.18.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -33,7 +33,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 43,
+      "versionCode": 46,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive_icon.png"
       },
@@ -66,13 +66,6 @@
           }
         }
       ],
-      [
-        "./plugins/withAndroidMainActivityAttributes",
-        {
-          "com.reactnative.googlecast.RNGCExpandedControllerActivity": true
-        }
-      ],
-      ["./plugins/withExpandedController.js"],
       [
         "expo-build-properties",
         {
@@ -106,7 +99,12 @@
         {
           "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
         }
-      ]
+      ],
+      [
+        "react-native-edge-to-edge",
+        { "android": { "parentTheme": "Material3" } }
+      ],
+      ["react-native-bottom-tabs"]
     ],
     "experiments": {
       "typedRoutes": true

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

@@ -42,17 +42,11 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name="settings/index"
+        name="settings"
         options={{
           title: "Settings",
         }}
       />
-      <Stack.Screen
-        name="settings/audio-language"
-        options={{
-          title: "Audio Language",
-        }}
-      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

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

@@ -5,7 +5,6 @@ import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionLi
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
-import { TAB_HEIGHT } from "@/constants/Values";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -25,11 +24,10 @@ import {
 import NetInfo from "@react-native-community/netinfo";
 import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
-  Platform,
   RefreshControl,
   ScrollView,
   TouchableOpacity,
@@ -394,9 +392,6 @@ export default function index() {
         paddingRight: insets.right,
         paddingBottom: 16,
       }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
     >
       <View className="flex flex-col space-y-4">
         <LargeMovieCarousel />

app/(auth)/(tabs)/(home)/settings.tsx

@@ -1,18 +1,13 @@
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { ListInputItem } from "@/components/list/ListInputItem";
-import { ListItem } from "@/components/list/ListItem";
-import { ListSection } from "@/components/list/ListSection";
+import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import { clearLogs, readFromLog } from "@/utils/log";
-import { Ionicons } from "@expo/vector-icons";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { Alert, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -21,7 +16,6 @@ import { toast } from "sonner-native";
 export default function settings() {
   const { logout } = useJellyfin();
   const { deleteAllFiles } = useDownload();
-  const [settings, updateSettings] = useSettings();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -63,8 +57,6 @@ export default function settings() {
     );
   };
 
-  const router = useRouter();
-
   return (
     <ScrollView
       contentContainerStyle={{
@@ -81,46 +73,15 @@ export default function settings() {
         >
           registerBackgroundFetchAsync
         </Button> */}
-        <ListSection title="USER INFO">
-          <ListItem title="User" text={user?.Name} />
-          <ListItem title="Server" text={api?.basePath} />
-          <ListItem title="Token" text={api?.accessToken} />
-        </ListSection>
+        <View>
+          <Text className="font-bold text-lg mb-2">User Info</Text>
 
-        <ListSection title="MEDIA">
-          <ListItem
-            title="Audio language"
-            iconAfter={
-              <Ionicons name="chevron-forward" size={20} color="white" />
-            }
-            onPress={() => router.push("/settings/audio-language")}
-          />
-          <ListItem
-            title="Subtitle language"
-            iconAfter={
-              <Ionicons name="chevron-forward" size={20} color="white" />
-            }
-            onPress={() => router.push("/settings/subtitle-language")}
-          />
-          <ListInputItem
-            textInputProps={{
-              placeholder: "30",
-              clearButtonMode: "never",
-              returnKeyType: "done",
-            }}
-            defaultValue={(settings?.forwardSkipTime || "").toString()}
-            title={"Forward skip"}
-            onChange={(val) => {
-              // 1. validate positive number
-              // 2. save settings
-              if (val.length === 0) return;
-              if (val.match(/^\d+$/)) {
-              } else {
-                toast.error("Invalid number");
-              }
-            }}
-          />
-        </ListSection>
+          <View className="flex flex-col rounded-xl 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} />
+            <ListItem title="Token" subTitle={api?.accessToken} />
+          </View>
+        </View>
 
         <View>
           <Text className="font-bold text-lg mb-2">Quick connect</Text>

app/(auth)/(tabs)/(home)/settings/audio-language.tsx

@@ -1,61 +0,0 @@
-import { ScrollView, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { LANGUAGES } from "@/constants/Languages";
-import { ListItem } from "@/components/list/ListItem";
-import { ListSection } from "@/components/list/ListSection";
-import { TAB_HEIGHT } from "@/constants/Values";
-import { DefaultLanguageOption, useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
-import { Colors } from "@/constants/Colors";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const insets = useSafeAreaInsets();
-  const [settings, updateSettings] = useSettings();
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
-    >
-      <View className="py-4 px-4">
-        <ListSection title="LANGUAGES">
-          {LANGUAGES.sort(sortByName).map((l) => (
-            <ListItem
-              key={l.value}
-              title={l.label}
-              onPress={() => {
-                updateSettings({
-                  ...settings,
-                  defaultAudioLanguage: l,
-                });
-              }}
-              iconAfter={
-                settings?.defaultAudioLanguage?.value === l.value ? (
-                  <Ionicons name="checkmark" size={24} color={Colors.primary} />
-                ) : null
-              }
-            />
-          ))}
-        </ListSection>
-      </View>
-    </ScrollView>
-  );
-}
-
-const sortByName = (a: DefaultLanguageOption, b: DefaultLanguageOption) => {
-  if (a.label < b.label) {
-    return -1;
-  }
-  if (a.label > b.label) {
-    return 1;
-  }
-  return 0;
-};

app/(auth)/(tabs)/(home)/settings/subtitle-language.tsx

@@ -1,61 +0,0 @@
-import { ScrollView, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { LANGUAGES } from "@/constants/Languages";
-import { ListItem } from "@/components/list/ListItem";
-import { ListSection } from "@/components/list/ListSection";
-import { TAB_HEIGHT } from "@/constants/Values";
-import { DefaultLanguageOption, useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
-import { Colors } from "@/constants/Colors";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const insets = useSafeAreaInsets();
-  const [settings, updateSettings] = useSettings();
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
-    >
-      <View className="py-4 px-4">
-        <ListSection title="LANGUAGES">
-          {LANGUAGES.sort(sortByName).map((l) => (
-            <ListItem
-              key={l.value}
-              title={l.label}
-              onPress={() => {
-                updateSettings({
-                  ...settings,
-                  defaultSubtitleLanguage: l,
-                });
-              }}
-              iconAfter={
-                settings?.defaultSubtitleLanguage?.value === l.value ? (
-                  <Ionicons name="checkmark" size={24} color={Colors.primary} />
-                ) : null
-              }
-            />
-          ))}
-        </ListSection>
-      </View>
-    </ScrollView>
-  );
-}
-
-const sortByName = (a: DefaultLanguageOption, b: DefaultLanguageOption) => {
-  if (a.label < b.label) {
-    return -1;
-  }
-  if (a.label > b.label) {
-    return 1;
-  }
-  return 0;
-};

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -1,12 +1,8 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";
 
 import { Text } from "@/components/common/Text";
@@ -16,6 +12,7 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
@@ -32,7 +29,6 @@ import {
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import { orientationAtom } from "@/utils/atoms/orientation";
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
@@ -60,12 +56,13 @@ const Page = () => {
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
   const [sortBy, _setSortBy] = useAtom(sortByAtom);
   const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
-  const [orientation] = useAtom(orientationAtom);
   const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
   const [sortOrderPreference, setOderByPreference] = useAtom(
     sortOrderPreferenceAtom
   );
 
+  const { orientation } = useOrientation();
+
   useEffect(() => {
     const sop = getSortOrderPreference(libraryId, sortOrderPreference);
     if (sop) {
@@ -106,11 +103,12 @@ const Page = () => {
     [libraryId, sortOrderPreference]
   );
 
-  const getNumberOfColumns = useCallback(() => {
-    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
-    if (screenWidth < 600) return 5;
-    if (screenWidth < 960) return 6;
-    if (screenWidth < 1280) return 7;
+  const nrOfCols = useMemo(() => {
+    if (screenWidth < 300) return 2;
+    if (screenWidth < 500) return 3;
+    if (screenWidth < 800) return 5;
+    if (screenWidth < 1000) return 6;
+    if (screenWidth < 1500) return 7;
     return 6;
   }, [screenWidth, orientation]);
 
@@ -219,7 +217,7 @@ const Page = () => {
 
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <MemoizedTouchableItemRouter
+      <TouchableItemRouter
         key={item.Id}
         style={{
           width: "100%",
@@ -230,10 +228,10 @@ const Page = () => {
         <View
           style={{
             alignSelf:
-              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                ? index % 3 === 0
+              orientation === ScreenOrientation.OrientationLock.PORTRAIT_UP
+                ? index % nrOfCols === 0
                   ? "flex-end"
-                  : (index + 1) % 3 === 0
+                  : (index + 1) % nrOfCols === 0
                   ? "flex-start"
                   : "center"
                 : "center",
@@ -244,7 +242,7 @@ const Page = () => {
           <ItemPoster item={item} />
           <ItemCardText item={item} />
         </View>
-      </MemoizedTouchableItemRouter>
+      </TouchableItemRouter>
     ),
     [orientation]
   );
@@ -429,6 +427,7 @@ const Page = () => {
 
   return (
     <FlashList
+      key={orientation}
       ListEmptyComponent={
         <View className="flex flex-col items-center justify-center h-full">
           <Text className="font-bold text-xl text-neutral-500">No results</Text>
@@ -437,10 +436,10 @@ const Page = () => {
       contentInsetAdjustmentBehavior="automatic"
       data={flatData}
       renderItem={renderItem}
-      extraData={orientation}
+      extraData={[orientation, nrOfCols]}
       keyExtractor={keyExtractor}
       estimatedItemSize={244}
-      numColumns={getNumberOfColumns()}
+      numColumns={nrOfCols}
       onEndReached={() => {
         if (hasNextPage) {
           fetchNextPage();

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

@@ -1,4 +1,3 @@
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -8,7 +7,6 @@ import { Loader } from "@/components/Loader";
 import AlbumCover from "@/components/posters/AlbumCover";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
-import { TAB_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
@@ -226,10 +224,6 @@ export default function search() {
         contentContainerStyle={{
           paddingLeft: insets.left,
           paddingRight: insets.right,
-          paddingBottom: 16,
-        }}
-        style={{
-          marginBottom: TAB_HEIGHT,
         }}
       >
         <View className="flex flex-col pt-2">

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

@@ -1,87 +1,77 @@
-import { TabBarIcon } from "@/components/navigation/TabBarIcon";
+import React from "react";
+import { Platform } from "react-native";
+
+import { withLayoutContext } from "expo-router";
+
+import {
+  createNativeBottomTabNavigator,
+  NativeBottomTabNavigationEventMap,
+} from "react-native-bottom-tabs/react-navigation";
+
+const { Navigator } = createNativeBottomTabNavigator();
+
+import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
+
 import { Colors } from "@/constants/Colors";
-import { BlurView } from "expo-blur";
-import * as NavigationBar from "expo-navigation-bar";
-import { Tabs } from "expo-router";
-import React, { useEffect } from "react";
-import { Platform, StyleSheet } from "react-native";
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from "@react-navigation/native";
+import { SystemBars } from "react-native-edge-to-edge";
+
+export const NativeTabs = withLayoutContext<
+  BottomTabNavigationOptions,
+  typeof Navigator,
+  TabNavigationState<ParamListBase>,
+  NativeBottomTabNavigationEventMap
+>(Navigator);
 
 export default function TabLayout() {
-  useEffect(() => {
-    if (Platform.OS === "android") {
-      NavigationBar.setBackgroundColorAsync("#121212");
-      NavigationBar.setBorderColorAsync("#121212");
-    }
-  }, []);
-
   return (
-    <Tabs
-      initialRouteName="home"
-      screenOptions={{
-        tabBarActiveTintColor: Colors.tabIconSelected,
-        headerShown: false,
-        tabBarStyle: {
-          position: "absolute",
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-          borderTopWidth: 0,
-          paddingTop: 8,
-          paddingBottom: Platform.OS === "android" ? 8 : 26,
-          height: Platform.OS === "android" ? 58 : 74,
-        },
-        tabBarBackground: () =>
-          Platform.OS === "ios" ? (
-            <BlurView
-              experimentalBlurMethod="dimezisBlurView"
-              intensity={95}
-              style={{
-                ...StyleSheet.absoluteFillObject,
-                overflow: "hidden",
-                borderTopLeftRadius: 0,
-                borderTopRightRadius: 0,
-                backgroundColor: "black",
-              }}
-            />
-          ) : undefined,
-      }}
-    >
-      <Tabs.Screen redirect name="index" />
-      <Tabs.Screen
-        name="(home)"
-        options={{
-          headerShown: false,
-          title: "Home",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? "home" : "home-outline"}
-              color={color}
-            />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="(search)"
-        options={{
-          headerShown: false,
-          title: "Search",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? "search" : "search"} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="(libraries)"
-        options={{
-          headerShown: false,
-          title: "Library",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? "apps" : "apps-outline"}
-              color={color}
-            />
-          ),
-        }}
-      />
-    </Tabs>
+    <>
+      <SystemBars hidden={false} style="light" />
+      <NativeTabs
+        sidebarAdaptable
+        ignoresTopSafeArea
+        barTintColor={Platform.OS === "android" ? "#121212" : undefined}
+        tabBarActiveTintColor={Colors.primary}
+        scrollEdgeAppearance="default"
+      >
+        <NativeTabs.Screen redirect name="index" />
+        <NativeTabs.Screen
+          name="(home)"
+          options={{
+            title: "Home",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/house.fill.png")
+                : () => ({ sfSymbol: "house" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(search)"
+          options={{
+            title: "Search",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/magnifyingglass.png")
+                : () => ({ sfSymbol: "magnifyingglass" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(libraries)"
+          options={{
+            title: "Library",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/server.rack.png")
+                : () => ({ sfSymbol: "rectangle.stack" }),
+          }}
+        />
+      </NativeTabs>
+    </>
   );
 }

app/(auth)/play-music.tsx

@@ -1,7 +1,4 @@
-import { Text } from "@/components/common/Text";
-import AlbumCover from "@/components/posters/AlbumCover";
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
@@ -20,9 +17,9 @@ import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
-import { debounce } from "lodash";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { Dimensions, Pressable, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 
@@ -176,7 +173,6 @@ export default function page() {
 
   const { orientation } = useOrientation();
   useOrientationSettings();
-  useAndroidNavigationBar();
 
   useWebSocket({
     isPlaying: isPlaying,
@@ -194,7 +190,7 @@ export default function page() {
       }}
       className="flex flex-col items-center justify-center"
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
 
       <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
         <Image

app/(auth)/play-offline-video.tsx

@@ -1,5 +1,4 @@
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { apiAtom } from "@/providers/JellyfinProvider";
@@ -7,25 +6,14 @@ import {
   PlaybackType,
   usePlaySettings,
 } from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
 import { secondsToTicks } from "@/utils/secondsToTicks";
 import { Api } from "@jellyfin/sdk";
 import * as Haptics from "expo-haptics";
-import * as NavigationBar from "expo-navigation-bar";
 import { useFocusEffect } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Dimensions, Platform, Pressable, StatusBar, View } from "react-native";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 
@@ -37,7 +25,9 @@ export default function page() {
   const videoSource = useVideoSource(playSettings, api, playUrl);
   const firstTime = useRef(true);
 
-  const screenDimensions = Dimensions.get("screen");
+  const dimensions = useWindowDimensions();
+  useOrientation();
+  useOrientationSettings();
 
   const [showControls, setShowControls] = useState(true);
   const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
@@ -77,10 +67,6 @@ export default function page() {
     }, [play, stop])
   );
 
-  const { orientation } = useOrientation();
-  useOrientationSettings();
-  useAndroidNavigationBar();
-
   const onProgress = useCallback(async (data: OnProgressData) => {
     if (isSeeking.value === true) return;
     progress.value = secondsToTicks(data.currentTime);
@@ -94,13 +80,13 @@ export default function page() {
   return (
     <View
       style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
       className="flex flex-col items-center justify-center"
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
       <Pressable
         onPress={() => {
           setShowControls(!showControls);
@@ -132,7 +118,6 @@ export default function page() {
           }}
         />
       </Pressable>
-
       <Controls
         item={playSettings.item}
         videoRef={videoRef}

app/(auth)/play-video.tsx

@@ -1,5 +1,4 @@
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
@@ -18,15 +17,14 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
-  VideoRef,
-  SelectedTrack,
   SelectedTrackType,
+  VideoRef,
 } from "react-native-video";
-import { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
 
 export default function page() {
   const { playSettings, playUrl, playSessionId } = usePlaySettings();
@@ -36,8 +34,7 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
-
-  const screenDimensions = Dimensions.get("screen");
+  const dimensions = useWindowDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);
@@ -172,9 +169,8 @@ export default function page() {
     }, [play, stop])
   );
 
-  const { orientation } = useOrientation();
+  useOrientation();
   useOrientationSettings();
-  useAndroidNavigationBar();
 
   useWebSocket({
     isPlaying: isPlaying,
@@ -216,23 +212,36 @@ export default function page() {
   return (
     <View
       style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: dimensions.width,
+        height: dimensions.height,
         position: "relative",
       }}
-      className="flex flex-col items-center justify-center"
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
       <Pressable
         onPress={() => {
           setShowControls(!showControls);
         }}
-        className="absolute z-0 h-full w-full"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: dimensions.width,
+          height: dimensions.height,
+          zIndex: 0,
+        }}
       >
         <Video
           ref={videoRef}
           source={videoSource}
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            width: dimensions.width,
+            height: dimensions.height,
+          }}
           resizeMode={ignoreSafeAreas ? "cover" : "contain"}
           onProgress={onProgress}
           onError={() => {}}

app/_layout.tsx

@@ -31,7 +31,6 @@ import * as Notifications from "expo-notifications";
 import { router, Stack } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
-import { StatusBar } from "expo-status-bar";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
@@ -39,6 +38,7 @@ import { AppState } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
+import { SystemBars } from "react-native-edge-to-edge";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -326,7 +326,7 @@ function Layout() {
               <PlaySettingsProvider>
                 <DownloadProvider>
                   <BottomSheetModalProvider>
-                    <StatusBar style="light" backgroundColor="#000" />
+                    <SystemBars style="light" hidden={false} />
                     <ThemeProvider value={DarkTheme}>
                       <Stack initialRouteName="/home">
                         <Stack.Screen
@@ -334,6 +334,7 @@ function Layout() {
                           options={{
                             headerShown: false,
                             title: "",
+                            header: () => null,
                           }}
                         />
                         <Stack.Screen

components/Chromecast.tsx

@@ -1,8 +1,9 @@
 import { Feather } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Platform, TouchableOpacity, ViewProps } from "react-native";
 import GoogleCast, {
+  CastButton,
   CastContext,
   useCastDevice,
   useDevices,
@@ -39,18 +40,32 @@ export const Chromecast: React.FC<Props> = ({
     })();
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
   if (background === "transparent")
     return (
-      <TouchableOpacity
-        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
-        }}
-        className="rounded-full h-10 w-10 flex items-center justify-center b"
-        {...props}
-      >
-        <Feather name="cast" size={22} color={"white"} />
-      </TouchableOpacity>
+      <>
+        <TouchableOpacity
+          onPress={() => {
+            if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+            else CastContext.showCastDialog();
+          }}
+          className="rounded-full h-10 w-10 flex items-center justify-center b"
+          {...props}
+        >
+          <Feather name="cast" size={22} color={"white"} />
+        </TouchableOpacity>
+        <AndroidCastButton />
+      </>
     );
 
   if (Platform.OS === "android")
@@ -82,6 +97,7 @@ export const Chromecast: React.FC<Props> = ({
       >
         <Feather name="cast" size={22} color={"white"} />
       </BlurView>
+      <AndroidCastButton />
     </TouchableOpacity>
   );
 };

components/DownloadItem.tsx

@@ -63,7 +63,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
         getDefaultPlaySettings(item, settings);
 
       // 4. Set states
-      setSelectedMediaSource(mediaSource);
+      setSelectedMediaSource(mediaSource ?? undefined);
       setSelectedAudioStream(audioIndex ?? 0);
       setSelectedSubtitleStream(subtitleIndex ?? -1);
       setMaxBitrate(bitrate);

components/ItemContent.tsx

@@ -26,7 +26,7 @@ import { useFocusEffect, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
+import { Alert, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
@@ -59,6 +59,11 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           audioIndex,
           subtitleIndex,
         });
+
+        if (!mediaSource) {
+          Alert.alert("Error", "No media source found for this item.");
+          navigation.goBack();
+        }
       }, [item, settings])
     );
 
@@ -241,7 +246,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 </View>
               )}
 
-              <PlayButton item={item} url={playUrl} className="grow" />
+              <PlayButton className="grow" />
             </View>
 
             {item.Type === "Episode" && (

components/ListItem.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactNode } from "react";
+import { View, ViewProps } from "react-native";
+import { Text } from "./common/Text";
+
+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"
+      {...props}
+    >
+      <View className="flex flex-col overflow-visible">
+        <Text className="font-bold ">{title}</Text>
+        {subTitle && (
+          <Text uiTextView selectable className="text-xs">
+            {subTitle}
+          </Text>
+        )}
+      </View>
+      {iconAfter}
+    </View>
+  );
+};

components/PlayButton.tsx

@@ -1,4 +1,4 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
@@ -6,10 +6,11 @@ import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useAtom } from "jotai";
-import { useEffect, useMemo } from "react";
-import { Linking, TouchableOpacity, View } from "react-native";
+import { useAtom, useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo } from "react";
+import { Alert, Linking, TouchableOpacity, View } from "react-native";
 import CastContext, {
+  CastButton,
   PlayServicesState,
   useMediaStatus,
   useRemoteMediaClient,
@@ -28,32 +29,31 @@ import { Button } from "./Button";
 import { Text } from "./common/Text";
 import { useRouter } from "expo-router";
 import { useSettings } from "@/utils/atoms/settings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 
-interface Props extends React.ComponentProps<typeof Button> {
-  item?: BaseItemDto | null;
-  url?: string | null;
-}
+interface Props extends React.ComponentProps<typeof Button> {}
 
 const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;
 
-export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
+export const PlayButton: React.FC<Props> = ({ ...props }) => {
+  const { playSettings, playUrl: url } = usePlaySettings();
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const mediaStatus = useMediaStatus();
 
   const [colorAtom] = useAtom(itemThemeColorAtom);
-  const [api] = useAtom(apiAtom);
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
 
   const router = useRouter();
 
-  const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
-  const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
-
   const startWidth = useSharedValue(0);
   const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(memoizedColor);
-  const startColor = useSharedValue(memoizedColor);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
   const [settings] = useSettings();
@@ -62,7 +62,11 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     return !url?.includes("m3u8");
   }, [url]);
 
-  const onPress = async () => {
+  const item = useMemo(() => {
+    return playSettings?.item;
+  }, [playSettings?.item]);
+
+  const onPress = useCallback(async () => {
     if (!url || !item) {
       console.warn(
         "No URL or item provided to PlayButton",
@@ -98,7 +102,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
 
         switch (selectedIndex) {
           case 0:
-            await CastContext.getPlayServicesState().then((state) => {
+            await CastContext.getPlayServicesState().then(async (state) => {
               if (state && state !== PlayServicesState.SUCCESS)
                 CastContext.showPlayServicesErrorDialog(state);
               else {
@@ -108,10 +112,34 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                   CastContext.showExpandedControls();
                   return;
                 }
+
+                // Get a new URL with the Chromecast device profile:
+                const data = await getStreamUrl({
+                  api,
+                  deviceProfile: chromecastProfile,
+                  item,
+                  mediaSourceId: playSettings?.mediaSource?.Id,
+                  startTimeTicks: 0,
+                  maxStreamingBitrate: playSettings?.bitrate?.value,
+                  audioStreamIndex: playSettings?.audioIndex ?? 0,
+                  subtitleStreamIndex: playSettings?.subtitleIndex ?? -1,
+                  userId: user?.Id,
+                  forceDirectPlay: settings?.forceDirectPlay,
+                });
+
+                if (!data?.url) {
+                  console.warn("No URL returned from getStreamUrl", data);
+                  Alert.alert(
+                    "Client error",
+                    "Could not create stream for Chromecast"
+                  );
+                  return;
+                }
+
                 client
                   .loadMedia({
                     mediaInfo: {
-                      contentUrl: url,
+                      contentUrl: data?.url,
                       contentType: "video/mp4",
                       metadata:
                         item.Type === "Episode"
@@ -184,21 +212,32 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         }
       }
     );
-  };
+  }, [
+    url,
+    item,
+    client,
+    settings,
+    api,
+    user,
+    playSettings,
+    router,
+    showActionSheetWithOptions,
+    mediaStatus,
+  ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
-    if (!memoizedItem || !memoizedItem.RunTimeTicks) return 0;
-    const userData = memoizedItem.UserData;
+    if (!item || !item.RunTimeTicks) return 0;
+    const userData = item.UserData;
     if (userData && userData.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
-            (userData.PlaybackPositionTicks / memoizedItem.RunTimeTicks) * 100,
+            (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
             MIN_PLAYBACK_WIDTH
           )
         : 0;
     }
     return 0;
-  }, [memoizedItem]);
+  }, [item]);
 
   useAnimatedReaction(
     () => derivedTargetWidth.value,
@@ -214,7 +253,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   );
 
   useAnimatedReaction(
-    () => memoizedColor,
+    () => colorAtom,
     (newColor) => {
       endColor.value = newColor;
       colorChangeProgress.value = 0;
@@ -223,19 +262,19 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [memoizedColor]
+    [colorAtom]
   );
 
   useEffect(() => {
     const timeout_2 = setTimeout(() => {
-      startColor.value = memoizedColor;
+      startColor.value = colorAtom;
       startWidth.value = targetWidth.value;
     }, ANIMATION_DURATION);
 
     return () => {
       clearTimeout(timeout_2);
     };
-  }, [memoizedColor, memoizedItem]);
+  }, [colorAtom, item]);
 
   /**
    * ANIMATED STYLES
@@ -318,6 +357,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
             {client && (
               <Animated.Text style={animatedTextStyle}>
                 <Feather name="cast" size={22} />
+                <CastButton tintColor="transparent" />
               </Animated.Text>
             )}
             {!client && settings?.openInVLC && (

components/_page_template.tsx

@@ -1,22 +0,0 @@
-import { ScrollView, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { TAB_HEIGHT } from "@/constants/Values";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const insets = useSafeAreaInsets();
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
-    ></ScrollView>
-  );
-}

components/library/LibraryItemCard.tsx

@@ -11,12 +11,9 @@ import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { TouchableOpacityProps, View } from "react-native";
-import { getColors } from "react-native-image-colors";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { useImageColors } from "@/hooks/useImageColors";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 
 interface Props extends TouchableOpacityProps {
   library: BaseItemDto;
@@ -53,10 +50,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     [library]
   );
 
-  // If we want to use image colors for library cards
-  // const [color] = useAtom(itemThemeColorAtom)
-  // useImageColors({ url });
-
   const { data: itemsCount } = useQuery({
     queryKey: ["library-count", library.Id],
     queryFn: async () => {
@@ -68,6 +61,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
       });
       return response.data.TotalRecordCount;
     },
+    staleTime: 1000 * 60 * 60,
   });
 
   if (!url) return null;

components/list/ListInputItem.tsx

@@ -1,64 +0,0 @@
-import { PropsWithChildren, ReactNode, useEffect, useState } from "react";
-import {
-  Pressable,
-  TextInput,
-  TextInputProps,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
-import { Text } from "../common/Text";
-
-interface Props extends ViewProps {
-  title?: string | null | undefined;
-  text?: string | null | undefined;
-  children?: ReactNode;
-  iconAfter?: ReactNode;
-  iconBefore?: ReactNode;
-  textInputProps?: TextInputProps;
-  defaultValue?: string;
-  onChange: (text: string) => void;
-}
-
-export const ListInputItem: React.FC<PropsWithChildren<Props>> = ({
-  title,
-  text,
-  iconAfter,
-  iconBefore,
-  children,
-  onChange,
-  textInputProps,
-  defaultValue,
-  ...props
-}) => {
-  const [value, setValue] = useState<string>(defaultValue || "");
-
-  useEffect(() => {
-    onChange(value);
-  }, [value]);
-
-  return (
-    <View
-      className={`flex flex-row items-center justify-between px-4 h-12 bg-neutral-900`}
-      {...props}
-    >
-      {iconBefore && <View className="mr-2">{iconBefore}</View>}
-      <View>
-        <Text className="">{title}</Text>
-      </View>
-      <View className="ml-auto">
-        <TextInput
-          inputMode="numeric"
-          keyboardType="decimal-pad"
-          style={{ color: "white" }}
-          value={value}
-          onChangeText={setValue}
-          className=""
-          {...textInputProps}
-        />
-      </View>
-      {iconAfter && <View className="ml-2">{iconAfter}</View>}
-    </View>
-  );
-};

components/list/ListItem.tsx

@@ -1,44 +0,0 @@
-import { PropsWithChildren, ReactNode, useState } from "react";
-import {
-  Pressable,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
-import { Text } from "../common/Text";
-
-interface Props extends TouchableOpacityProps {
-  title?: string | null | undefined;
-  text?: string | null | undefined;
-  children?: ReactNode;
-  iconAfter?: ReactNode;
-  iconBefore?: ReactNode;
-}
-
-export const ListItem: React.FC<PropsWithChildren<Props>> = ({
-  title,
-  text,
-  iconAfter,
-  iconBefore,
-  children,
-  ...props
-}) => {
-  return (
-    <TouchableOpacity
-      className={`flex flex-row items-center justify-between px-4 h-12 bg-neutral-900`}
-      {...props}
-    >
-      {iconBefore && <View className="mr-2">{iconBefore}</View>}
-      <View>
-        <Text className="">{title}</Text>
-      </View>
-      <View className="ml-auto">
-        <Text selectable className="">
-          {text}
-        </Text>
-      </View>
-      {iconAfter && <View className="ml-2">{iconAfter}</View>}
-    </TouchableOpacity>
-  );
-};

components/list/ListSection.tsx

@@ -1,24 +0,0 @@
-import { View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { Children, PropsWithChildren } from "react";
-
-interface Props extends ViewProps {
-  title: string;
-}
-
-export const ListSection: React.FC<PropsWithChildren<Props>> = ({
-  children,
-  title,
-  ...props
-}) => {
-  return (
-    <View {...props}>
-      <Text className="ml-4 mb-1 text-xs text-neutral-500 uppercase">
-        {title}
-      </Text>
-      <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800">
-        {children}
-      </View>
-    </View>
-  );
-};

components/settings/SettingToggles.tsx

@@ -10,7 +10,6 @@ import {
   registerBackgroundFetchAsync,
   unregisterBackgroundFetchAsync,
 } from "@/utils/background-tasks";
-import { getStatistics } from "@/utils/optimize-server";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import * as BackgroundFetch from "expo-background-fetch";
@@ -19,6 +18,7 @@ import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import {
+  ActivityIndicator,
   Linking,
   Switch,
   TouchableOpacity,
@@ -32,6 +32,8 @@ import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { MediaToggles } from "./MediaToggles";
+import axios from "axios";
+import { getStatistics } from "@/utils/optimize-server";
 
 interface Props extends ViewProps {}
 

components/video-player/Controls.tsx

@@ -71,44 +71,6 @@ export const Controls: React.FC<Props> = ({
 
   const windowDimensions = Dimensions.get("window");
 
-  const op = useSharedValue<number>(1);
-  const tr = useSharedValue<number>(10);
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-    };
-  });
-  const animatedTopStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: -tr.value,
-        },
-      ],
-    };
-  });
-  const animatedBottomStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: tr.value,
-        },
-      ],
-    };
-  });
-
-  useEffect(() => {
-    if (showControls || isBuffering) {
-      op.value = withTiming(1, { duration: 200 });
-      tr.value = withTiming(0, { duration: 200 });
-    } else {
-      op.value = withTiming(0, { duration: 200 });
-      tr.value = withTiming(10, { duration: 200 });
-    }
-  }, [showControls, isBuffering]);
-
   const { previousItem, nextItem } = useAdjacentItems({ item });
   const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
     item,
@@ -123,17 +85,6 @@ export const Controls: React.FC<Props> = ({
 
   const wasPlayingRef = useRef(false);
 
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - currentProgress);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
   const { showSkipButton, skipIntro } = useIntroSkipper(
     item.Id,
     currentTime,
@@ -180,6 +131,23 @@ export const Controls: React.FC<Props> = ({
     router.replace("/play-video");
   }, [nextItem, settings]);
 
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = ticksToSeconds(currentProgress);
+      const remaining = ticksToSeconds(maxValue - currentProgress);
+
+      setCurrentTime(current);
+      setRemainingTime(remaining);
+
+      if (currentProgress === maxValue) {
+        setShowControls(true);
+        // Automatically play the next item if it exists
+        goToNextItem();
+      }
+    },
+    [goToNextItem]
+  );
+
   useAnimatedReaction(
     () => ({
       progress: progress.value,
@@ -316,7 +284,7 @@ export const Controls: React.FC<Props> = ({
           toggleControls();
         }}
       >
-        <Animated.View
+        <View
           style={[
             {
               position: "absolute",
@@ -325,10 +293,9 @@ export const Controls: React.FC<Props> = ({
               width: windowDimensions.width + 100,
               height: windowDimensions.height + 100,
             },
-            animatedStyles,
           ]}
           className={`bg-black/50 z-0`}
-        ></Animated.View>
+        ></View>
       </Pressable>
 
       <View
@@ -347,14 +314,14 @@ export const Controls: React.FC<Props> = ({
         <Loader />
       </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
             top: insets.top,
             right: insets.right,
+            opacity: showControls ? 1 : 0,
           },
-          animatedTopStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-row items-center space-x-2 z-10 p-4`}
@@ -377,9 +344,9 @@ export const Controls: React.FC<Props> = ({
         >
           <Ionicons name="close" size={24} color="white" />
         </TouchableOpacity>
-      </Animated.View>
+      </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
@@ -387,8 +354,8 @@ export const Controls: React.FC<Props> = ({
             maxHeight: windowDimensions.height,
             left: insets.left,
             bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
+            opacity: showControls ? 1 : 0,
           },
-          animatedBottomStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-col p-4 `}
@@ -523,7 +490,7 @@ export const Controls: React.FC<Props> = ({
             </View>
           </View>
         </View>
-      </Animated.View>
+      </View>
     </View>
   );
 };

eas.json

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

edge-to-edge-fix.patch

@@ -0,0 +1,15 @@
+--- expo.js.original	2024-11-10 09:08:19
++++ node_modules/react-native-edge-to-edge/dist/commonjs/expo.js	2024-11-10 09:08:23
+@@ -19,10 +19,8 @@
+     const {
+       barStyle
+     } = androidStatusBar;
++    const android = props?.android || {};
+     const {
+-      android = {}
+-    } = props;
+-    const {
+       parentTheme = "Default"
+     } = android;
+     config.modResults.resources.style = config.modResults.resources.style?.map(style => {
+\ No newline at end of file

expo.js.original

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _configPlugins = require("@expo/config-plugins");
+const withAndroidEdgeToEdgeTheme = (config, props) => {
+  const themes = {
+    Material2: "Theme.EdgeToEdge.Material2",
+    Material3: "Theme.EdgeToEdge.Material3"
+  };
+  const ignoreList = new Set(["android:enforceNavigationBarContrast", "android:enforceStatusBarContrast", "android:fitsSystemWindows", "android:navigationBarColor", "android:statusBarColor", "android:windowDrawsSystemBarBackgrounds", "android:windowLayoutInDisplayCutoutMode", "android:windowLightNavigationBar", "android:windowLightStatusBar", "android:windowTranslucentNavigation", "android:windowTranslucentStatus"]);
+  return (0, _configPlugins.withAndroidStyles)(config, config => {
+    const {
+      androidStatusBar = {},
+      userInterfaceStyle = "light"
+    } = config;
+    const {
+      barStyle
+    } = androidStatusBar;
+    const {
+      android = {}
+    } = props;
+    const {
+      parentTheme = "Default"
+    } = android;
+    config.modResults.resources.style = config.modResults.resources.style?.map(style => {
+      if (style.$.name === "AppTheme") {
+        style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
+        if (style.item != null) {
+          style.item = style.item.filter(item => !ignoreList.has(item.$.name));
+        }
+        if (barStyle != null) {
+          style.item.push({
+            $: {
+              name: "android:windowLightStatusBar"
+            },
+            _: String(barStyle === "dark-content")
+          });
+        } else if (userInterfaceStyle !== "automatic") {
+          style.item.push({
+            $: {
+              name: "android:windowLightStatusBar"
+            },
+            _: String(userInterfaceStyle === "light")
+          });
+        }
+      }
+      return style;
+    });
+    return config;
+  });
+};
+var _default = exports.default = (0, _configPlugins.createRunOncePlugin)(withAndroidEdgeToEdgeTheme, "react-native-edge-to-edge");
+//# sourceMappingURL=expo.js.map

hooks/useAndroidNavigationBar.ts

@@ -1,17 +0,0 @@
-import * as NavigationBar from "expo-navigation-bar";
-import { useEffect } from "react";
-import { Platform } from "react-native";
-
-export const useAndroidNavigationBar = () => {
-  useEffect(() => {
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-
-      return () => {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      };
-    }
-  }, []);
-};

hooks/useNavigationBarVisibility.ts

@@ -1,27 +0,0 @@
-// hooks/useNavigationBarVisibility.ts
-
-import { useEffect } from "react";
-import { Platform } from "react-native";
-import * as NavigationBar from "expo-navigation-bar";
-
-export const useNavigationBarVisibility = (isPlaying: boolean | null) => {
-  useEffect(() => {
-    const handleVisibility = async () => {
-      if (Platform.OS === "android") {
-        if (isPlaying) {
-          await NavigationBar.setVisibilityAsync("hidden");
-        } else {
-          await NavigationBar.setVisibilityAsync("visible");
-        }
-      }
-    };
-
-    handleVisibility();
-
-    return () => {
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-      }
-    };
-  }, [isPlaying]);
-};

package.json

@@ -9,7 +9,8 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
-    "lint": "expo lint"
+    "lint": "expo lint",
+    "postinstall": "patch-package"
   },
   "jest": {
     "preset": "jest-expo"
@@ -30,14 +31,16 @@
     "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.56.2",
     "@types/lodash": "^4.17.9",
+    "@types/react-native-vector-icons": "^6.4.18",
     "@types/uuid": "^10.0.0",
+    "add": "^2.0.6",
     "axios": "^1.7.7",
-    "expo": "~51.0.36",
+    "expo": "~51.0.39",
     "expo-background-fetch": "~12.0.1",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.27",
+    "expo-dev-client": "~4.0.29",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.10",
     "expo-haptics": "~13.0.1",
@@ -45,13 +48,12 @@
     "expo-keep-awake": "~13.0.2",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
-    "expo-navigation-bar": "~3.0.7",
     "expo-network": "~6.0.1",
-    "expo-notifications": "~0.28.18",
-    "expo-router": "~3.5.23",
+    "expo-notifications": "~0.28.19",
+    "expo-router": "~3.5.24",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.9",
-    "expo-splash-screen": "~0.27.6",
+    "expo-splash-screen": "~0.27.7",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
     "expo-task-manager": "~11.8.2",
@@ -66,8 +68,10 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-awesome-slider": "^2.5.3",
+    "react-native-bottom-tabs": "^0.4.0",
     "react-native-circular-progress": "^1.4.0",
     "react-native-compressor": "^1.8.25",
+    "react-native-edge-to-edge": "^1.1.0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
@@ -101,6 +105,8 @@
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.4",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },

plugins/withAndroidMainActivityAttributes.js

@@ -1,42 +0,0 @@
-const { withAndroidManifest } = require("@expo/config-plugins");
-
-function addAttributesToMainActivity(androidManifest, attributes) {
-  const { manifest } = androidManifest;
-
-  if (!Array.isArray(manifest["application"])) {
-    console.warn("withAndroidMainActivityAttributes: No application array in manifest?");
-    return androidManifest;
-  }
-
-  const application = manifest["application"].find(
-    (item) => item.$["android:name"] === ".MainApplication"
-  );
-  if (!application) {
-    console.warn("withAndroidMainActivityAttributes: No .MainApplication?");
-    return androidManifest;
-  }
-
-  if (!Array.isArray(application["activity"])) {
-    console.warn("withAndroidMainActivityAttributes: No activity array in .MainApplication?");
-    return androidManifest;
-  }
-
-  const activity = application["activity"].find(
-    (item) => item.$["android:name"] === ".MainActivity"
-  );
-  if (!activity) {
-    console.warn("withAndroidMainActivityAttributes: No .MainActivity?");
-    return androidManifest;
-  }
-
-  activity.$ = { ...activity.$, ...attributes };
-
-  return androidManifest;
-}
-
-module.exports = function withAndroidMainActivityAttributes(config, attributes) {
-  return withAndroidManifest(config, (config) => {
-    config.modResults = addAttributesToMainActivity(config.modResults, attributes);
-    return config;
-  });
-};

plugins/withExpandedController.js

@@ -1,20 +0,0 @@
-const { withAppDelegate } = require("@expo/config-plugins");
-
-const withExpandedController = (config) => {
-  return withAppDelegate(config, async (config) => {
-    const contents = config.modResults.contents;
-
-    // Looking for the initialProps string inside didFinishLaunchingWithOptions,
-    // and injecting expanded controller config.
-    // Should be updated once there is an expo config option - see https://github.com/react-native-google-cast/react-native-google-cast/discussions/537
-    const injectionIndex = contents.indexOf("self.initialProps = @{};");
-    config.modResults.contents =
-      contents.substring(0, injectionIndex) +
-      `\n [GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true; \n` +
-      contents.substring(injectionIndex);
-
-    return config;
-  });
-};
-
-module.exports = withExpandedController;

providers/JellyfinProvider.tsx

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

utils/jellyfin/getDefaultPlaySettings.ts

@@ -9,7 +9,7 @@ import { Settings } from "../atoms/settings";
 interface PlaySettings {
   item: BaseItemDto;
   bitrate: (typeof BITRATES)[0];
-  mediaSource: MediaSourceInfo | undefined;
+  mediaSource?: MediaSourceInfo | null;
   audioIndex?: number | null;
   subtitleIndex?: number | null;
 }
@@ -29,9 +29,8 @@ export function getDefaultPlaySettings(
   }
 
   // 1. Get first media source
-  const mediaSource = item.MediaSources?.[0];
 
-  if (!mediaSource) throw new Error("No media source found");
+  const mediaSource = item.MediaSources?.[0];
 
   // 2. Get default or preferred audio
   const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;

utils/time.ts

@@ -16,7 +16,8 @@ export const runtimeTicksToMinutes = (
   const hours = Math.floor(ticks / ticksPerHour);
   const minutes = Math.floor((ticks % ticksPerHour) / ticksPerMinute);
 
-  return `${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  else return `${minutes}m`;
 };
 
 export const runtimeTicksToSeconds = (