chore

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)/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)/play-video.tsx

@@ -22,11 +22,9 @@ import { Dimensions, Pressable, StatusBar, View } from "react-native";
 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();

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])
     );
 

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/_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/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

@@ -123,17 +123,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 +169,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,

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;