Port to Redux and add settings

src/screens/Albums/components/Album.tsx

@@ -1,18 +1,15 @@
-import React, { Component, useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { StackScreenProps } from '@react-navigation/stack';
-import { RootStackParamList, AlbumTrack } from '../types';
-import { Text, ScrollView, Dimensions, FlatList, Button, TouchableOpacity } from 'react-native';
-import { retrieveAlbumTracks, getImage, generateTrack } from '../../../utility/JellyfinApi';
+import { StackParams } from '../types';
+import { Text, ScrollView, Dimensions, Button, TouchableOpacity } from 'react-native';
+import { generateTrack, useGetImage } from '../../../utility/JellyfinApi';
 import styled from 'styled-components/native';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import { useDispatch } from 'react-redux';
+import { useTypedSelector } from '../../../store';
+import { fetchTracksByAlbum } from '../../../store/music/actions';
 
-interface Props extends StackScreenProps<RootStackParamList, 'Album'> {
-    //
-}
-
-interface State {
-    tracks: AlbumTrack[];
-}
+type Route = RouteProp<StackParams, 'Album'>;
 
 const Screen = Dimensions.get('screen');
 
@@ -49,48 +46,50 @@ const TouchableTrack: React.FC<TouchableTrackProps>  = ({ id, onPress, children
     );
 };
 
-export default class Album extends Component<Props, State> {
-    state: State = {
-        tracks: [],
-    }
+const Album: React.FC = () => {
+    // Retrieve state
+    const { params: { id } } = useRoute<Route>();
+    const tracks = useTypedSelector((state) => state.music.tracks.entities);
+    const album = useTypedSelector((state) => state.music.albums.entities[id]);
+    const credentials = useTypedSelector((state) => state.settings.jellyfin);
 
-    async componentDidMount() {
-        const tracks = await retrieveAlbumTracks(this.props.route.params.id);
-        this.setState({ tracks });
-    }
+    // Retrieve helpers
+    const dispatch = useDispatch();
+    const getImage = useGetImage();
 
-    selectTrack = async (id: string) => {
-        const track = await generateTrack(id);
-        await TrackPlayer.add([ track ]);
-        await TrackPlayer.skip(id);
+    // Set callbacks
+    const selectTrack = useCallback(async (trackId) => { 
+        const newTrack = generateTrack(tracks[trackId], credentials);
+        console.log(newTrack);
+        await TrackPlayer.add([ newTrack ]);
+        await TrackPlayer.skip(trackId);
         TrackPlayer.play();
-    }
-
-    playAlbum = async () => {
-        const tracks = await Promise.all(this.state.tracks.map(track => generateTrack(track.Id)));
+    }, [tracks, credentials]);
+    const playAlbum = useCallback(async () => { 
+        const newTracks = album.Tracks.map((trackId) => generateTrack(tracks[trackId], credentials));
         await TrackPlayer.removeUpcomingTracks();
-        await TrackPlayer.add(tracks);
-        await TrackPlayer.skip(tracks[0].id);
+        await TrackPlayer.add(newTracks);
+        await TrackPlayer.skip(album.Tracks[0]);
         TrackPlayer.play();
-    }
+    }, [tracks, credentials]);
 
-    render() {
-        const { tracks } = this.state;
-        const { album } = this.props.route.params;
+    // Retrieve album tracks on load
+    useEffect(() => { dispatch(fetchTracksByAlbum(id)); }, []);
 
-        return (
-            <ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}>
-                <AlbumImage source={{ uri: getImage(album.Id) }} />
-                <Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album.Name}</Text>
-                <Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album.AlbumArtist}</Text>
-                <Button title="Play Album" onPress={this.playAlbum} />
-                {tracks.length ? tracks.map((track) =>
-                    <TouchableTrack key={track.Id} id={track.Id} onPress={this.selectTrack}>
-                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{track.IndexNumber}</Text>
-                        <Text>{track.Name}</Text>
-                    </TouchableTrack>
-                ) : undefined}
-            </ScrollView>
-        );
-    }
-}
+    return (
+        <ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}>
+            <AlbumImage source={{ uri: getImage(album.Id) }} />
+            <Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album?.Name}</Text>
+            <Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album?.AlbumArtist}</Text>
+            <Button title="Play Album" onPress={playAlbum} />
+            {album?.Tracks?.length ? album.Tracks.map((trackId) =>
+                <TouchableTrack key={trackId} id={trackId} onPress={selectTrack}>
+                    <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
+                    <Text>{tracks[trackId]?.Name}</Text>
+                </TouchableTrack>
+            ) : undefined}
+        </ScrollView>
+    );
+};
+
+export default Album;

src/screens/Albums/components/Albums.tsx

@@ -1,19 +1,13 @@
-import React, { Component, useCallback } from 'react';
-import { retrieveAlbums, getImage } from '../../../utility/JellyfinApi';
-import { Album, RootStackParamList } from '../types';
+import React, { useCallback, useEffect } from 'react';
+import { useGetImage } from '../../../utility/JellyfinApi';
+import { Album, NavigationProp } from '../types';
 import { Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
 import styled from 'styled-components/native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { StackNavigationProp } from '@react-navigation/stack';
-
-interface Props {
-    navigation: StackNavigationProp<RootStackParamList, 'Albums'>;
-}
-
-interface State {
-    albums: Album[];
-    refreshing: boolean;
-}
+import { useDispatch } from 'react-redux';
+import { useTypedSelector } from '../../../store';
+import { fetchAllAlbums } from '../../../store/music/actions';
+import { useNavigation } from '@react-navigation/native';
 
 const Screen = Dimensions.get('screen');
 
@@ -57,51 +51,44 @@ const TouchableAlbumItem: React.FC<TouchableAlbumItemProps>  = ({ id, onPress, c
     );
 };
 
-class Albums extends Component<Props, State> {
-    state: State = {
-        albums: [],
-        refreshing: false,
-    }
-
-    componentDidMount() {
-        this.retrieveData();
-    }
-
-    retrieveData = async () => {
-        this.setState({ refreshing: true });
-        const albums = await retrieveAlbums() as Album[];
-        this.setState({ albums, refreshing: false });
-    }
+const Albums: React.FC = () => {
+    // Retrieve data from store
+    const { ids, entities: albums } = useTypedSelector((state) => state.music.albums);
+    const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
     
-    selectAlbum = (id: string) => {
-        const album = this.state.albums.find((d) => d.Id === id) as Album;
-        this.props.navigation.navigate('Album', { id, album });
-    }
+    // Initialise helpers
+    const dispatch = useDispatch();
+    const navigation = useNavigation<NavigationProp>();
+    const getImage = useGetImage();
 
-    render() {
-        const { albums, refreshing } = this.state;
+    // Set callbacks
+    const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
+    const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
+    
+    // Retrieve data on mount
+    useEffect(() => { retrieveData(); }, []);
+    
+    return (
+        <SafeAreaView>
+            <Container>
+                <FlatList
+                    data={ids as string[]} 
+                    refreshing={isLoading}
+                    onRefresh={retrieveData}
+                    numColumns={2}
+                    keyExtractor={d => d}
+                    renderItem={({ item }) => (
+                        <TouchableAlbumItem id={item} onPress={selectAlbum}>
+                            <AlbumImage source={{ uri: getImage(item) }} />
+                            <Text>{albums[item]?.Name}</Text>
+                            <Text style={{ opacity: 0.5 }}>{albums[item]?.AlbumArtist}</Text>
+                        </TouchableAlbumItem>
+                    )}
+                />
+            </Container>
+        </SafeAreaView>
+    );
+};
 
-        return (
-            <SafeAreaView>
-                <Container>
-                    <FlatList
-                        data={albums} 
-                        keyExtractor={(item: Album) => item.Id}
-                        refreshing={refreshing}
-                        onRefresh={this.retrieveData}
-                        numColumns={2}
-                        renderItem={({ item }: { item: Album }) => (
-                            <TouchableAlbumItem id={item.Id} onPress={this.selectAlbum}>
-                                <AlbumImage source={{ uri: getImage(item.Id) }} />
-                                <Text>{item.Name}</Text>
-                                <Text style={{ opacity: 0.5 }}>{item.AlbumArtist}</Text>
-                            </TouchableAlbumItem>
-                        )}
-                    />
-                </Container>
-            </SafeAreaView>
-        );
-    }
-}
 
 export default Albums;

src/screens/Albums/types.ts

@@ -1,3 +1,5 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
 export interface UserData {
     PlaybackPositionTicks: number;
     PlayCount: number;
@@ -63,8 +65,9 @@ export interface AlbumTrack {
     MediaType: string;
 }
 
-export type RootStackParamList = {
+export type StackParams = {
     Albums: undefined;
     Album: { id: string, album: Album };
 };
 
+export type NavigationProp = StackNavigationProp<StackParams>; 

src/screens/Settings/index.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
-import { View, Text, SafeAreaView } from 'react-native';
+import React, { useCallback } from 'react';
+import { View, Text, SafeAreaView, Button } from 'react-native';
+import { Picker } from '@react-native-community/picker';
 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 '..';
 
 const InputContainer = styled.View`
     margin: 10px 0;
@@ -15,7 +20,9 @@ const Input = styled.TextInput`
 `;
 
 export default function Settings() {
-    
+    const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
+    const navigation = useNavigation<NavigationProp>();
+    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), []);
 
     return (
         <ScrollView>
@@ -24,15 +31,22 @@ export default function Settings() {
                     <Text style={{ fontSize: 36, marginBottom: 24, fontWeight: 'bold' }}>Settings</Text>
                     <InputContainer>
                         <Text>Jellyfin Server URL</Text>
-                        <Input placeholder="https://jellyfin.yourserver.com/" />
+                        <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} />
                     </InputContainer>
                     <InputContainer>
-                        <Text>Jellyfin API Key</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                        <Text>Jellyfin Access Token</Text>
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} />
                     </InputContainer>
                     <InputContainer>
                         <Text>Jellyfin User ID</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} />
+                    </InputContainer>
+                    <Button title="Set Jellyfin server" onPress={handleClick} />
+                    <InputContainer>
+                        <Text>Bitrate</Text>
+                        <Picker selectedValue={bitrate}>
+                            <Picker.Item label="320kbps" value={140000000} />
+                        </Picker>
                     </InputContainer>
                 </View>
             </SafeAreaView>

src/screens/index.tsx

@@ -1,17 +1,51 @@
 import React from 'react';
-import { createBottomTabNavigator, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import Player from './Player';
 import Albums from './Albums';
 import Settings from './Settings';
+import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
+import SetJellyfinServer from './modals/SetJellyfinServer';
+import { CompositeNavigationProp } from '@react-navigation/native';
 
+const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 
-export default function Routes() {
+type Screens = {
+    NowPlaying: undefined;
+    Albums: undefined;
+    Settings: undefined;
+}
+
+function Screens() {
     return (
         <Tab.Navigator>
-            <Tab.Screen name="Now Playing" component={Player} />
+            <Tab.Screen name="NowPlaying" component={Player} />
             <Tab.Screen name="Albums" component={Albums} />
             <Tab.Screen name="Settings" component={Settings} />
         </Tab.Navigator>
     );
-}
+}
+
+type Routes = {
+    Screens: undefined;
+    SetJellyfinServer: undefined;
+}
+
+
+export default function Routes() {
+    return (
+        <Stack.Navigator mode="modal" headerMode="none" screenOptions={{
+            cardStyle: {
+                backgroundColor: 'transparent'
+            }
+        }}>
+            <Stack.Screen name="Screens" component={Screens} />
+            <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
+        </Stack.Navigator>
+    );
+}
+
+export type NavigationProp = CompositeNavigationProp<
+    StackNavigationProp<Routes>,
+    BottomTabNavigationProp<Screens>
+>;

src/screens/modals/SetJellyfinServer/components/CredentialGenerator.tsx

@@ -0,0 +1,63 @@
+import React, { Component, createRef } from 'react';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { debounce } from 'lodash';
+import { AppState } from '../../../../store';
+
+interface Props {
+    serverUrl: string;
+    onCredentialsRetrieved: (credentials: AppState['settings']['jellyfin']) => void;
+}
+
+class CredentialGenerator extends Component<Props> {
+    ref = createRef<WebView>();
+
+    handleStateChange = () => {
+        // Call a debounced version to check if the credentials are there
+        this.checkIfCredentialsAreThere();
+    }
+
+    checkIfCredentialsAreThere = debounce(() => {
+        // Inject some javascript to check if the credentials can be extracted
+        // from localstore
+        this.ref.current?.injectJavaScript(`
+            try { 
+                let credentials = JSON.parse(window.localStorage.getItem('jellyfin_credentials'));
+                let deviceId = window.localStorage.getItem('_deviceId2');
+                window.ReactNativeWebView.postMessage(JSON.stringify({ credentials, deviceId })) 
+            } catch(e) { }; true;
+        `);
+    }, 500);
+
+    handleMessage = (event: WebViewMessageEvent) => {
+        // GUARD: Something must be returned for this thing to work
+        if (!event.nativeEvent.data) {
+            return;
+        }
+
+        // If a message is received, the credentials should be there
+        const { credentials: { Servers: [ credentials ] }, deviceId } = JSON.parse(event.nativeEvent.data);
+        this.props.onCredentialsRetrieved({
+            uri: credentials.ManualAddress,
+            user_id: credentials.UserId,
+            access_token: credentials.AccessToken,
+            device_id: deviceId,
+        });
+    }
+
+    render() {
+        const { serverUrl } = this.props;
+
+        return (
+            <WebView
+                source={{ uri: serverUrl as string }}
+                style={{ borderRadius: 20 }}
+                onNavigationStateChange={this.handleStateChange}
+                onMessage={this.handleMessage}
+                ref={this.ref}
+                startInLoadingState={true}
+            />
+        );
+    }
+}
+
+export default CredentialGenerator;

src/screens/modals/SetJellyfinServer/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useCallback } from 'react';
+import { Text, Button, View } from 'react-native';
+import Modal from '../../../components/Modal';
+import Input from '../../../components/Input';
+import { setJellyfinCredentials } from '../../../store/settings/actions';
+import { useDispatch } from 'react-redux';
+import { useNavigation, StackActions } from '@react-navigation/native';
+import CredentialGenerator from './components/CredentialGenerator';
+
+export default function SetJellyfinServer() {
+    // State for first screen
+    const [serverUrl, setServerUrl] = useState<string>();
+    const [isLogginIn, setIsLogginIn] = useState<boolean>(false);
+
+    // Handlers needed for dispatching stuff
+    const dispatch = useDispatch();
+    const navigation = useNavigation();
+
+    // Save creedentials to store and close the modal
+    const saveCredentials = useCallback((credentials) => {
+        dispatch(setJellyfinCredentials(credentials));
+        navigation.dispatch(StackActions.popToTop());    
+    }, [navigation, dispatch]);
+
+    return (
+        <Modal>
+            {isLogginIn ? (
+                <CredentialGenerator 
+                    serverUrl={serverUrl as string}
+                    onCredentialsRetrieved={saveCredentials}
+                />
+            ) : (
+                <View style={{ padding: 20}}>
+                    <Text>Please enter your Jellyfin server URL first. Make sure to include the protocol and port</Text>
+                    <Input
+                        placeholder="https://jellyfin.yourserver.io/"
+                        onChangeText={setServerUrl}
+                        value={serverUrl} 
+                        keyboardType="url"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                    />
+                    <Button title="Set server" onPress={() => setIsLogginIn(true)} disabled={!serverUrl?.length} />
+                </View>
+            )}
+        </Modal>
+    );
+}