Update with requirements: set date to trigger
This commit is contained in:
Benard Mathu
committed by
Lei Nelissen
Lei Nelissen
parent
439235e6f8
commit
3d481a8f18
@@ -55,7 +55,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: "Set Sleep Timer" }} />
|
||||
<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')}} />
|
||||
|
||||
@@ -2,114 +2,72 @@ 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 { setEnabledSleeper, 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';
|
||||
import CheckBox from '@react-native-community/checkbox';
|
||||
import TrackPlayer from 'react-native-track-player';
|
||||
import { useTimeStyles } from './styles';
|
||||
import { Switch } from 'react-native-gesture-handler';
|
||||
import { SwitchContainer, SwitchLabel } from '../../components/Switch';
|
||||
import { t } from '@/localisation';
|
||||
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 { sleepTime } = useTypedSelector(state => state.settings);
|
||||
const enabledSleeper = useTypedSelector((state) => state.settings.enabledSleeper);
|
||||
const [show, setShow] = useState<boolean>(false);
|
||||
const { dateTime } = useTypedSelector(state => state.settings);
|
||||
const [date, setDate] = useState<string>(dateTime === undefined ? 'Set Time' : dateTime.toString());
|
||||
|
||||
const [minutes, setMinutes] = useState<number>();
|
||||
const [hours, setHours] = useState<number>();
|
||||
const [enableSleeper, setEnableSleeper] = useState<boolean>(enabledSleeper);
|
||||
const timerStyles = useTimeStyles();
|
||||
const { enableSleepTime } = useTypedSelector(state => state.settings);
|
||||
|
||||
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 = () => {
|
||||
let hours = 0;
|
||||
let minutes = 0;
|
||||
if (!Number.isNaN(sleepTime)) {
|
||||
hours = Math.round(sleepTime / 3600);
|
||||
const timeRemaining = sleepTime % 3600;
|
||||
|
||||
if (timeRemaining >= 60) {
|
||||
minutes = Math.round(timeRemaining / 60);
|
||||
}
|
||||
}
|
||||
|
||||
return `${hours} hrs ${minutes} min`;
|
||||
const handleEnabledSleeper = useCallback((value: boolean) => {
|
||||
dispatch(setEnableSleepTime(value));
|
||||
}, [dispatch]);
|
||||
|
||||
const handleConfirm = (date: Date) => {
|
||||
setShow(false);
|
||||
setDate(date.toString());
|
||||
dispatch(setDateTime(date));
|
||||
};
|
||||
|
||||
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]);
|
||||
const showDateTimePicker = () => {
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
const handleCancelDatePicker = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<InputContainer>
|
||||
<Text>Set Sleep Timer. Time Set Previously: {getTime()}</Text>
|
||||
<Text>{'Set Sleep Time.'}</Text>
|
||||
<SwitchContainer style={timerStyles.checkbox}>
|
||||
<Switch
|
||||
value={enableSleeper}
|
||||
value={enableSleepTime}
|
||||
onValueChange={(value) => handleEnabledSleeper(value)}
|
||||
/>
|
||||
<SwitchLabel>Enable Sleeper</SwitchLabel>
|
||||
<SwitchLabel>{'Enable Timer'}</SwitchLabel>
|
||||
</SwitchContainer>
|
||||
<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 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>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import useDefaultStyles from "@/components/Colors";
|
||||
import { ColorScheme } from "@/store/settings/types";
|
||||
import { StyleSheet } from "react-native";
|
||||
import useDefaultStyles from '@/components/Colors';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
export function generateTimerStyles() {
|
||||
export function useTimeStyles() {
|
||||
const styles = useDefaultStyles();
|
||||
|
||||
return StyleSheet.create({
|
||||
@@ -23,11 +22,17 @@ export function generateTimerStyles() {
|
||||
alignItems: 'center'
|
||||
},
|
||||
timerSetting: {
|
||||
marginStart: 30
|
||||
marginStart: 10
|
||||
},
|
||||
timerSettingsDisabled: {
|
||||
color: '#cbcbcb',
|
||||
marginStart: 30
|
||||
marginStart: 10
|
||||
},
|
||||
showDateTime: {
|
||||
display: 'flex'
|
||||
},
|
||||
hideDateTime: {
|
||||
display: 'none'
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user