update: show timer in NowPlaying stacks

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>