javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow for clearing the Redux store from the settings page

Browse Source
This commit is contained in:
Lei Nelissen
2020-08-28 14:17:37 +02:00
parent 3ff971a773
commit 12b53eca4a
4 changed files with 79 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/screens/Settings/components/Cache.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React, { useCallback } from 'react';
import TrackPlayer from 'react-native-track-player';
import { SubHeader } from 'components/Typography';
import { Text, Button } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
import { useDispatch } from 'react-redux';
import music from 'store/music';
export default function CacheSettings() {
const dispatch = useDispatch();
const handleClearCache = useCallback(() => {
// Dispatch an action to reset the music subreducer state
dispatch(music.actions.reset());
// Also clear the TrackPlayer queue
TrackPlayer.reset();
}, [dispatch]);
return (
<>
<SubHeader>Cache</SubHeader>
<Text>If you have updated your Jellyfin library, but the app is holding on to cached assets, you can forcefully clear the cache using this button. This will force the app to fetch the library from scratch.</Text>
<Button title="Reset Cache" onPress={handleClearCache} color={THEME_COLOR} />
</>
);
}

44
src/screens/Settings/components/Library.tsx Normal file
View File

@@ -0,0 +1,44 @@
import styled from 'styled-components/native';
import { useNavigation } from '@react-navigation/native';
import React, { useCallback } from 'react';
import { Text, Button } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
import { SubHeader } from 'components/Typography';
import { colors } from 'components/Colors';
import { NavigationProp } from '../..';
import { useTypedSelector } from 'store';
const InputContainer = styled.View`
margin: 10px 0;
`;
const Input = styled.TextInput`
padding: 15px;
margin-top: 5px;
border-radius: 5px;
`;
export default function LibrarySettings() {
const { jellyfin } = useTypedSelector(state => state.settings);
const navigation = useNavigation<NavigationProp>();
const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
return (
<>
<SubHeader>Jellyfin Library</SubHeader>
<InputContainer>
<Text style={colors.text}>Jellyfin Server URL</Text>
<Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
</InputContainer>
<InputContainer>
<Text style={colors.text}>Jellyfin Access Token</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
</InputContainer>
<InputContainer>
<Text style={colors.text}>Jellyfin User ID</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
</InputContainer>
<Button title="Set Jellyfin server" onPress={handleSetLibrary} color={THEME_COLOR} />
</>
);
}

49
src/screens/Settings/index.tsx
View File

@@ -1,55 +1,18 @@
import React, { useCallback } from 'react';
import { View, Text, SafeAreaView, Button, StyleSheet } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import styled from 'styled-components/native';
import { useSelector } from 'react-redux';
import { AppState } from 'store';
import { useNavigation } from '@react-navigation/native';
import { NavigationProp } from '..';
import { THEME_COLOR } from 'CONSTANTS';
import React from 'react';
import { View, SafeAreaView, ScrollView } from 'react-native';
import { Header } from 'components/Typography';
import { colors } from 'components/Colors';
const InputContainer = styled.View`
margin: 10px 0;
`;
const Input = styled.TextInput`
padding: 15px;
margin-top: 5px;
border-radius: 5px;
`;
import Library from './components/Library';
import Cache from './components/Cache';
export default function Settings() {
const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
const navigation = useNavigation<NavigationProp>();
const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
return (
<ScrollView>
<SafeAreaView>
<View style={{ padding: 20 }}>
<Header style={colors.text}>Settings</Header>
<InputContainer>
<Text style={colors.text}>Jellyfin Server URL</Text>
<Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
</InputContainer>
<InputContainer>
<Text style={colors.text}>Jellyfin Access Token</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
</InputContainer>
<InputContainer>
<Text style={colors.text}>Jellyfin User ID</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
</InputContainer>
<Button title="Set Jellyfin server" onPress={handleClick} color={THEME_COLOR} />
{/* The bitrate setting is hidden for now, since Jellyfin does not appear to support custom bitrates */}
{/* <InputContainer>
<Text style={colors.text}>Bitrate</Text>
<Picker selectedValue={bitrate}>
<Picker.Item label="320kbps" value={140000000} />
</Picker>
</InputContainer> */}
<Library />
<Cache />
</View>
</SafeAreaView>
</ScrollView>

4
src/store/music/index.ts
View File

@@ -31,7 +31,9 @@ const initialState: State = {
const music = createSlice({
name: 'music',
initialState,
reducers: {},
reducers: {
reset: () => initialState,
},
extraReducers: builder => {
/**
* Fetch All albums