Update: allow user to set time

src/screens/Settings/index.tsx

@@ -16,12 +16,11 @@ 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 Timer from './stacks/timer/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]);
@@ -33,10 +32,28 @@ export function SettingsList() {
 
     const { sleepTime } = useTypedSelector(state => state.settings);
 
+    const getTime = () => {
+        if (!Number.isNaN(sleepTime)) {
+            const hours = Math.round(sleepTime / 3600);
+            const timeRemaining = sleepTime % 3600;
+            let minutes = 0;
+
+            if (timeRemaining > 60) {
+                minutes = Math.round(timeRemaining / 60);
+            }
+            return `${hours} hrs ${minutes} min`;
+        } else {
+            return 0;
+        }
+    }
+
     return (
         <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
-            <ListButton onPress={handleTimerClick}>{t('timer')} <Text>Set Time: {sleepTime}</Text></ListButton>
+            <ListButton onPress={handleTimerClick}>
+                {t('timer')}
+                <Text> {`Set Time: ${getTime()}s`}</Text>
+            </ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>

src/screens/Settings/stacks/Timer.tsx

@@ -1,37 +0,0 @@
-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/stacks/timer/Timer.tsx

@@ -0,0 +1,90 @@
+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';
+import { ScrollView, ToastAndroid, View } from 'react-native';
+import { generateTimerStyles } from './styles';
+import { useTypedSelector } from '@/store';
+import SelectableFilter from '@/screens/Search/stacks/Search/components/SelectableFilter';
+import MicrophoneIcon from '@/assets/icons/microphone.svg';
+import AlbumIcon from '@/assets/icons/collection.svg';
+import TrackIcon from '@/assets/icons/note.svg';
+import SelectDropdown from 'react-native-select-dropdown';
+import { time } from 'console';
+
+function Timer() {
+    const { sleepTime } = useTypedSelector(state => state.settings);
+
+    const [minutes, setMinutes] = useState<number>();
+    const [hours, setHours] = useState<number>();
+
+    const timerStyles = generateTimerStyles();
+
+    const navigation = useNavigation();
+    const dispatch = useDispatch();
+
+    const setSleeper = useCallback((value: number, timeType: string) => {
+        if (timeType == 'Hours' && value > 0) {
+            dispatch(setSleepTime(value * 3600));
+        } else if (timeType == 'Minutes' && value > 0) {
+            dispatch(setSleepTime(value * 60));
+        }
+    }, [navigation, dispatch]);
+
+    const getTime = () => {
+        if (!Number.isNaN(sleepTime)) {
+            const hours = Math.round(sleepTime / 3600);
+            const timeRemaining = sleepTime % 3600;
+            let minutes = 0;
+
+            if (timeRemaining > 60) {
+                minutes = Math.round(timeRemaining / 60);
+            }
+            return `${hours} hrs ${minutes} min`;
+        } else {
+            return 0;
+        }
+    }
+
+    return (
+        <Container>
+            <InputContainer>
+                <Text>Set Sleep Timer. Time Set Previously: {getTime()}</Text>
+                <View style={timerStyles.timer}>
+                    <View style={timerStyles.timeInput}>
+                        <Text>H:</Text>
+                        <Input
+                            placeholder='60'
+                            editable={true}
+                            style={timerStyles.input}
+                            keyboardType='phone-pad'
+                            onChangeText={(value: string) => {
+                                setSleeper(parseInt(value), 'Hours');
+                            }}
+                        />
+                    </View>
+                    <View style={timerStyles.timeInput}>
+                        <Text>M:</Text>
+                        <Input
+                            placeholder='60'
+                            editable={true}
+                            style={timerStyles.input}
+                            keyboardType='phone-pad'
+                            onChangeText={(value: string) => {
+                                setSleeper(parseInt(value), 'Minutes');
+                            }}
+                        />
+                    </View>
+                </View>
+                <Text>Set this to automatically stop the audio when time runs out.</Text>
+            </InputContainer>
+        </Container>
+    );
+}
+
+export default Timer;

src/screens/Settings/stacks/timer/styles.tsx

@@ -0,0 +1,21 @@
+import useDefaultStyles from "@/components/Colors";
+import { ColorScheme } from "@/store/settings/types";
+import { StyleSheet } from "react-native";
+
+export function generateTimerStyles() {
+    const styles = useDefaultStyles();
+
+    return StyleSheet.create({
+        ...styles,
+        timer: {
+            display: 'flex',
+            flexDirection: 'row'
+        },
+        timeInput: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3
+        }
+    })
+}