update pause playback when timer completes

src/screens/Settings/index.tsx

@@ -33,18 +33,18 @@ export function SettingsList() {
     const { sleepTime } = useTypedSelector(state => state.settings);
 
     const getTime = () => {
+        let hours = 0;
+        let minutes = 0;
         if (!Number.isNaN(sleepTime)) {
-            const hours = Math.round(sleepTime / 3600);
+            hours = Math.round(sleepTime / 3600);
             const timeRemaining = sleepTime % 3600;
-            let minutes = 0;
 
-            if (timeRemaining > 60) {
+            if (timeRemaining >= 60) {
                 minutes = Math.round(timeRemaining / 60);
             }
-            return `${hours} hrs ${minutes} min`;
-        } else {
-            return 0;
         }
+
+        return `${hours} hrs ${minutes} min`;
     }
 
     return (

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

@@ -4,7 +4,7 @@ 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 { setEnabledSleeper, setSleepTime } from '@/store/settings/actions';
 import { useNavigation } from '@react-navigation/native';
 import { useDispatch } from 'react-redux';
 import { ScrollView, ToastAndroid, View } from 'react-native';
@@ -16,12 +16,16 @@ 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';
+import CheckBox from '@react-native-community/checkbox';
+import TrackPlayer from 'react-native-track-player';
 
 function Timer() {
     const { sleepTime } = useTypedSelector(state => state.settings);
+    const enabledSleeper = useTypedSelector((state) => state.settings.enabledSleeper);
 
     const [minutes, setMinutes] = useState<number>();
     const [hours, setHours] = useState<number>();
+    const [enableSleeper, setEnableSleeper] = useState<boolean>(enabledSleeper);
 
     const timerStyles = generateTimerStyles();
 
@@ -37,51 +41,72 @@ function Timer() {
     }, [navigation, dispatch]);
 
     const getTime = () => {
+        let hours = 0;
+        let minutes = 0;
         if (!Number.isNaN(sleepTime)) {
-            const hours = Math.round(sleepTime / 3600);
+            hours = Math.round(sleepTime / 3600);
             const timeRemaining = sleepTime % 3600;
-            let minutes = 0;
 
-            if (timeRemaining > 60) {
+            if (timeRemaining >= 60) {
                 minutes = Math.round(timeRemaining / 60);
             }
-            return `${hours} hrs ${minutes} min`;
-        } else {
-            return 0;
         }
+
+        return `${hours} hrs ${minutes} min`;
     }
 
+    const handleEnabledSleeper = useCallback((value: boolean) => {
+        dispatch(setEnabledSleeper(value));
+        setEnableSleeper(value);
+
+        // If value is true sleeper has been enabled, pause then play tack
+        // to trigger play state and start sleeper timer
+        if (value) {
+            TrackPlayer.pause()
+            TrackPlayer.play()
+        }
+    }, [dispatch]);
+
     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 style={timerStyles.checkbox}>
+                    <CheckBox
+                        value={enableSleeper}
+                        onValueChange={(value) => handleEnabledSleeper(value)}
+                    />
+                    <Text> Enable Sleeper</Text>
+                </View>
+                <View style={enabledSleeper ? timerStyles.timerSetting : timerStyles.timerSettingsDisabled}>
+                    <View style={timerStyles.timer}>
+                        <View style={timerStyles.timeInput}>
+                            <Text>H:</Text>
+                            <Input
+                                placeholder='60'
+                                editable={enabledSleeper}
+                                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={enabledSleeper}
+                                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>
                 </View>
-                <Text>Set this to automatically stop the audio when time runs out.</Text>
             </InputContainer>
         </Container>
     );

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

@@ -16,6 +16,18 @@ export function generateTimerStyles() {
             flexDirection: 'row',
             alignItems: 'center',
             gap: 3
+        },
+        checkbox: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
+        },
+        timerSetting: {
+            marginStart: 30
+        },
+        timerSettingsDisabled: {
+            color: '#cbcbcb',
+            marginStart: 30
         }
     })
 }