update: show timer in NowPlaying stacks

src/screens/Settings/index.tsx

@@ -16,7 +16,6 @@ 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/Timer';
 
 export function SettingsList() {
     const navigation = useNavigation<SettingsNavigationProp>();
@@ -26,12 +25,10 @@ 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]);
 
     return (
         <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
-            <ListButton onPress={handleTimerClick}>Set Sleep Timer</ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
@@ -55,7 +52,6 @@ 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: 'Set Sleep 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/Timer.tsx

@@ -1,76 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import Container from '../../components/Container';
-import { Text } from '@/components/Typography';
-import { InputContainer } from '../../components/Input';
-import { useTimeStyles } from './styles';
-import { Switch } from 'react-native-gesture-handler';
-import { SwitchContainer, SwitchLabel } from '../../components/Switch';
-import Button from '@/components/Button';
-import { View } from 'react-native';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import { useTypedSelector } from '@/store';
-import { useDispatch } from 'react-redux';
-import { setDateTime, setEnableSleepTime } from '@/store/settings/actions';
-
-function Timer() {
-    const [show, setShow] = useState<boolean>(false);
-    const { dateTime } = useTypedSelector(state => state.settings);
-    const [date, setDate] = useState<string>(dateTime === undefined ? 'Set Time' : dateTime.toString());
-
-    const timerStyles = useTimeStyles();
-    const { enableSleepTime } = useTypedSelector(state => state.settings);
-
-    const dispatch = useDispatch();
-
-    const handleEnabledSleeper = useCallback((value: boolean) => {
-        dispatch(setEnableSleepTime(value));
-    }, [dispatch]);
-    
-    const handleConfirm = (date: Date) => {
-        setShow(false);
-        setDate(date.toString());
-        dispatch(setDateTime(date));
-    };
-
-    const showDateTimePicker = () => {
-        setShow(!show);
-    };
-
-    const handleCancelDatePicker = () => {
-        setShow(false);
-    };
-    
-    return (
-        <Container>
-            <InputContainer>
-                <Text>{'Set Sleep Time.'}</Text>
-                <SwitchContainer style={timerStyles.checkbox}>
-                    <Switch
-                        value={enableSleepTime}
-                        onValueChange={(value) => handleEnabledSleeper(value)}
-                    />
-                    <SwitchLabel>{'Enable Timer'}</SwitchLabel>
-                </SwitchContainer>
-                <View style={enableSleepTime ? timerStyles.timerSetting : timerStyles.timerSettingsDisabled}>
-                    <View style={timerStyles.timeInput}>
-                        <Text>{'Set Time'}</Text>
-                        <Button
-                            title={date}
-                            onPress={showDateTimePicker}
-                        />
-                    </View>
-                    <Text>{'Set this to automatically stop the audio when time runs out.'}</Text>
-                </View>
-                <DateTimePickerModal
-                    isVisible={show}
-                    mode='datetime'
-                    is24Hour={true}
-                    onConfirm={handleConfirm}
-                    onCancel={handleCancelDatePicker}
-                />
-            </InputContainer>
-        </Container>
-    );
-}
-
-export default Timer;

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

@@ -1,38 +0,0 @@
-import useDefaultStyles from '@/components/Colors';
-import { StyleSheet } from 'react-native';
-
-export function useTimeStyles() {
-    const styles = useDefaultStyles();
-
-    return StyleSheet.create({
-        ...styles,
-        timer: {
-            display: 'flex',
-            flexDirection: 'row'
-        },
-        timeInput: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 3
-        },
-        checkbox: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center'
-        },
-        timerSetting: {
-            marginStart: 10
-        },
-        timerSettingsDisabled: {
-            color: '#cbcbcb',
-            marginStart: 10
-        },
-        showDateTime: {
-            display: 'flex'
-        },
-        hideDateTime: {
-            display: 'none'
-        }
-    });
-}

src/screens/modals/Player/components/Queue.tsx

@@ -27,7 +27,7 @@ const Header = styled.View`
     flex-direction: row;
     align-items: center;
     padding-bottom: 8px;
-    padding-top: 52px;
+    padding-top: 27px;
 `;
 
 const IconButton = styled.TouchableOpacity`

src/screens/modals/Player/components/Timer.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import styled from 'styled-components/native';
+import { THEME_COLOR } from '@/CONSTANTS';
+import { useDispatch } from 'react-redux';
+import { setDateTime } from '@/store/settings/actions';
+import { useTypedSelector } from '@/store';
+import TimerIcon from '@/assets/icons/timer-icon.svg';
+
+const Container = styled.View`
+    align-item: left;
+    margin-top: 60px;
+`;
+
+const View = styled.View`
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+`;
+
+const Text = styled.Text`
+    font-size: 10px;
+`;
+
+export default function Timer() {
+    const [showPicker, setShowPicker] = useState<boolean>(false);
+    const { remainingSleepTime } = useTypedSelector(state => state.settings);
+
+    const dispatch = useDispatch();
+
+    const handleConfirm = (date: Date) => {
+        date.setSeconds(0);
+        dispatch(setDateTime(date));
+        setShowPicker(false);
+    };
+
+    const handleCancelDatePicker = () => {
+        console.log('Handle cancel implement this event');
+    };
+
+    const showDatePicker = () => {
+        setShowPicker(true);
+    };
+    
+    return (
+        <Container>
+            <View>
+                <TimerIcon fill={showPicker || remainingSleepTime !== '' ? THEME_COLOR : undefined} />
+                <Text
+                    style={showPicker || remainingSleepTime !== '' ? {color: THEME_COLOR} : {}}
+                    onPress={showDatePicker}
+                >{remainingSleepTime === '' ? 'Sleep Timer' : remainingSleepTime}</Text>
+                <DateTimePickerModal
+                    isVisible={showPicker}
+                    mode='time'
+                    onConfirm={handleConfirm}
+                    onCancel={handleCancelDatePicker}
+                />
+            </View>
+        </Container>
+    );
+}

src/screens/modals/Player/index.tsx

@@ -8,6 +8,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import StreamStatus from './components/StreamStatus';
 import { Platform } from 'react-native';
 import BackButton from './components/Backbutton';
+import Timer from './components/Timer';
 
 export default function Player() {    
     return (
@@ -20,6 +21,7 @@ export default function Player() {
                     <StreamStatus />
                     <ProgressBar />
                     <MediaControls />
+                    <Timer />
                 </>                    
             )} />
         </GestureHandlerRootView>