allow user to set sleep time

src/screens/Settings/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { t } from '@/localisation';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
@@ -16,8 +16,12 @@ import ColorScheme from './stacks/ColorScheme';
 import PlaybackReporting from './stacks/PlaybackReporting';
 import { SafeScrollView } from '@/components/SafeNavigatorView';
 import PrivacyPolicy from './components/PrivacyPolicy';
+import Timer from './stacks/Timer';
+import { Paragraph, Text } from '@/components/Typography';
+import { useTypedSelector } from '@/store';
 
 export function SettingsList() {
+    const defaultStyles = useDefaultStyles();
     const navigation = useNavigation<SettingsNavigationProp>();
     const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
     const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
@@ -25,10 +29,14 @@ export function SettingsList() {
     const handlePlaybackReportingClick = useCallback(() => { navigation.navigate('Playback Reporting'); }, [navigation]);
     const handleColorSchemeClick = useCallback(() => { navigation.navigate('Color Scheme'); }, [navigation]);
     const handlePrivacyPolicyClick = useCallback(() => { navigation.navigate('PrivacyPolicy'); }, [navigation]);
+    const handleTimerClick = useCallback(() => { navigation.navigate('Timer'); }, [navigation]);
+
+    const { sleepTime } = useTypedSelector(state => state.settings);
 
     return (
         <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+            <ListButton onPress={handleTimerClick}>{t('timer')} <Text>Set Time: {sleepTime}</Text></ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
@@ -52,6 +60,7 @@ export default function Settings() {
         }}>
             <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
             <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
+            <Stack.Screen name="Timer" component={Timer} options={{ headerTitle: t('timer') }} />
             <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
             <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
             <Stack.Screen name="Playback Reporting" component={PlaybackReporting} options={{ headerTitle: t('playback-reporting')}} />

src/screens/Settings/stacks/Timer.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useState } from 'react';
+import Container from '../components/Container';
+import { Text } from '@/components/Typography';
+import { InputContainer } from '../components/Input';
+import Input from '@/components/Input';
+import useDefaultStyles from '@/components/Colors';
+import { setSleepTime } from '@/store/settings/actions';
+import { useNavigation } from '@react-navigation/native';
+import { useDispatch } from 'react-redux';
+
+function Timer() {
+    const defaultStyles = useDefaultStyles();
+
+    const navigation = useNavigation();
+    const dispatch = useDispatch();
+
+    const setSleeper = useCallback((sleepTime) => {
+        dispatch(setSleepTime(Number.parseInt(sleepTime)));
+    }, [navigation, dispatch]);
+
+    return (
+        <Container>
+            <InputContainer>
+                <Text>Set Sleep Timer (min)</Text>
+                <Input
+                    placeholder='60'
+                    editable={true}
+                    style={defaultStyles.input}
+                    onChangeText={setSleeper}/>
+
+                <Text>Set this to automatically stop the audio when time runs out.</Text>
+            </InputContainer>
+        </Container>
+    );
+}
+
+export default Timer;

src/screens/Settings/types.ts

@@ -6,6 +6,7 @@ export type SettingsStackParams = {
     Library: undefined;
     Cache: undefined;
     Sentry: undefined;
+    Timer: undefined;
 };
 
 export type SettingsNavigationProp = StackNavigationProp<SettingsStackParams>;