allow user to set sleep time

src/localisation/lang/en/locale.json

@@ -41,6 +41,7 @@
     "more-info": "More Info",
     "track": "Track",
     "playlists": "Playlists",
+    "timer": "Set Sleep Timer",
     "playlist": "Playlist",
     "play-playlist": "Play Playlist",
     "shuffle-album": "Shuffle Album",

src/localisation/lang/nl/locale.json

@@ -41,6 +41,7 @@
     "more-info": "Meer informatie",
     "track": "Track",
     "playlists": "Playlists",
+    "timer": "Set Sleep Timer",
     "playlist": "Playlist",
     "play-playlist": "Speel Playlist",
     "shuffle-album": "Shuffle Album",

src/localisation/types.ts

@@ -69,3 +69,4 @@ export type LocaleKeys = 'play-next'
 | 'color-scheme-dark'
 | 'artists'
 | 'privacy-policy'
+| 'timer'

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>; 

src/store/index.ts

@@ -55,6 +55,18 @@ const persistConfig: PersistConfig<Omit<AppState, '_persist'>> = {
                 }
             };
         },
+        // @ts-expect-error migrations are poorly typed
+        4: (state: AppState) => {
+            return {
+                ...state,
+                settings: {
+                    ...state.settings,
+                    enableSleepTimer: false,
+                    sleepTime: 60,
+                    remainingSleepTime: 0
+                }
+            };
+        },
     })
 };
 

src/store/settings/actions.ts

@@ -7,3 +7,6 @@ export const setOnboardingStatus = createAction<boolean>('SET_ONBOARDING_STATUS'
 export const setReceivedErrorReportingAlert = createAction<void>('SET_RECEIVED_ERROR_REPORTING_ALERT');
 export const setEnablePlaybackReporting = createAction<boolean>('SET_ENABLE_PLAYBACK_REPORTING');
 export const setColorScheme = createAction<ColorScheme>('SET_COLOR_SCHEME');
+export const setSleepTime = createAction<number>('SET_SLEEP_TIME');
+export const setEnableSleepTimer = createAction<boolean>('SET_ENABLE_SLEEP_TIMER');
+export const setRemainingSleepTime = createAction<number>('SET_REMAINING_SLEEP_TIME');

src/store/settings/index.ts

@@ -1,5 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus, setEnablePlaybackReporting, setColorScheme } from './actions';
+import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus, setEnablePlaybackReporting, setColorScheme, setSleepTime, setEnableSleepTimer, setRemainingSleepTime } from './actions';
 import { ColorScheme } from './types';
 
 interface State {
@@ -14,6 +14,7 @@ interface State {
     hasReceivedErrorReportingAlert: boolean;
     enablePlaybackReporting: boolean;
     colorScheme: ColorScheme;
+    sleepTime: number;
 }
 
 const initialState: State = {
@@ -22,6 +23,7 @@ const initialState: State = {
     hasReceivedErrorReportingAlert: false,
     enablePlaybackReporting: true,
     colorScheme: ColorScheme.System,
+    sleepTime: 60,
 };
 
 const settings = createReducer(initialState, builder => {
@@ -49,6 +51,18 @@ const settings = createReducer(initialState, builder => {
         ...state,
         colorScheme: action.payload,
     }));
+    builder.addCase(setSleepTime, (state, action) => ({
+        ...state,
+        sleepTime: action.payload,
+    }));
+    builder.addCase(setEnableSleepTimer, (state, action) => ({
+        ...state,
+        enableSleepTimer: action.payload,
+    }));
+    builder.addCase(setRemainingSleepTime, (state, action) => ({
+        ...state,
+        remainingSleepTime: action.payload,
+    }));
 });
 
 export default settings;