Add most recent albums

src/screens/Music/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { StackParams } from './types';
+import Albums from './stacks/Albums';
+import Album from './stacks/Album';
+import RecentAlbums from './stacks/RecentAlbums';
+
+const Stack = createStackNavigator<StackParams>();
+
+function MusicStack() {
+    return (
+        <Stack.Navigator initialRouteName="RecentAlbums">
+            <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: 'Recent Albums' }} />
+            <Stack.Screen name="Albums" component={Albums} />
+            <Stack.Screen name="Album" component={Album} />
+        </Stack.Navigator>
+    );
+}
+
+export default MusicStack;

src/screens/Music/stacks/Album.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect } from 'react';
+import { StackParams } from '../types';
+import { Text, ScrollView, Dimensions, Button, RefreshControl } from 'react-native';
+import { useGetImage } from 'utility/JellyfinApi';
+import styled from 'styled-components/native';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import FastImage from 'react-native-fast-image';
+import { useDispatch } from 'react-redux';
+import { differenceInDays } from 'date-fns';
+import { useTypedSelector } from 'store';
+import { fetchTracksByAlbum } from 'store/music/actions';
+import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
+import usePlayAlbum from 'utility/usePlayAlbum';
+import usePlayTrack from 'utility/usePlayTrack';
+import TouchableHandler from 'components/TouchableHandler';
+
+type Route = RouteProp<StackParams, 'Album'>;
+
+const Screen = Dimensions.get('screen');
+
+const AlbumImage = styled(FastImage)`
+    border-radius: 10px;
+    width: ${Screen.width * 0.6}px;
+    height: ${Screen.width * 0.6}px;
+    margin: 10px auto;
+`;
+
+const TrackContainer = styled.View`
+    padding: 15px;
+    border-bottom-width: 1px;
+    border-bottom-color: #eee;
+    flex-direction: row;
+`;
+
+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 isLoading = useTypedSelector((state) => state.music.tracks.isLoading);
+
+    // Retrieve helpers
+    const dispatch = useDispatch();
+    const getImage = useGetImage();
+    const playAlbum = usePlayAlbum();
+
+    // Setup callbacks
+    const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum]);
+    const selectTrack = usePlayTrack();
+    const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id]);
+
+    // Retrieve album tracks on load
+    useEffect(() => {
+        if (!album?.lastRefreshed || differenceInDays(album?.lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
+            refresh();
+        }
+    }, []);
+
+    // GUARD: If there is no album, we cannot render a thing
+    if (!album) {
+        return null;
+    }
+
+    return (
+        <ScrollView
+            style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}
+            refreshControl={
+                <RefreshControl refreshing={isLoading} onRefresh={refresh} />
+            }
+        >
+            <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={selectAlbum} />
+            {album?.Tracks?.length ? album.Tracks.map((trackId) =>
+                <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
+                    <TrackContainer>
+                        <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
+                        <Text>{tracks[trackId]?.Name}</Text>
+                    </TrackContainer>
+                </TouchableHandler>
+            ) : undefined}
+        </ScrollView>
+    );
+};
+
+export default Album;

src/screens/Music/stacks/Albums.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useEffect } from 'react';
+import { useGetImage } from 'utility/JellyfinApi';
+import { Album, NavigationProp } from '../types';
+import { Text, SafeAreaView, FlatList } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { differenceInDays } from 'date-fns';
+import { useTypedSelector } from 'store';
+import { fetchAllAlbums } from 'store/music/actions';
+import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
+import TouchableHandler from 'components/TouchableHandler';
+import ListContainer from './components/ListContainer';
+import AlbumImage, { AlbumItem } from './components/AlbumImage';
+import { useAlbumsByArtist } from 'store/music/selectors';
+
+const Albums: React.FC = () => {
+    // Retrieve data from store
+    const { entities: albums } = useTypedSelector((state) => state.music.albums);
+    const ids = useAlbumsByArtist();
+    const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
+    const lastRefreshed = useTypedSelector((state) => state.music.lastRefreshed);
+    
+    // Initialise helpers
+    const dispatch = useDispatch();
+    const navigation = useNavigation<NavigationProp>();
+    const getImage = useGetImage();
+
+    // 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(() => { 
+        // GUARD: Only refresh this API call every set amounts of days
+        if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
+            retrieveData(); 
+        }
+    }, []);
+    
+    return (
+        <SafeAreaView>
+            <ListContainer>
+                <FlatList
+                    data={ids as string[]} 
+                    refreshing={isLoading}
+                    onRefresh={retrieveData}
+                    numColumns={2}
+                    keyExtractor={d => d}
+                    renderItem={({ item }) => (
+                        <TouchableHandler id={item} onPress={selectAlbum}>
+                            <AlbumItem>
+                                <AlbumImage source={{ uri: getImage(item) }} />
+                                <Text>{albums[item]?.Name}</Text>
+                                <Text style={{ opacity: 0.5 }}>{albums[item]?.AlbumArtist}</Text>
+                            </AlbumItem>
+                        </TouchableHandler>
+                    )}
+                />
+            </ListContainer>
+        </SafeAreaView>
+    );
+};
+
+
+export default Albums;

src/screens/Music/stacks/RecentAlbums.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect } from 'react';
+import { useGetImage } from 'utility/JellyfinApi';
+import { Album, NavigationProp } from '../types';
+import { Text, SafeAreaView, FlatList, View } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { useTypedSelector } from 'store';
+import { fetchRecentAlbums } from 'store/music/actions';
+import TouchableHandler from 'components/TouchableHandler';
+import ListContainer from './components/ListContainer';
+import AlbumImage, { AlbumItem } from './components/AlbumImage';
+import { useRecentAlbums } from 'store/music/selectors';
+import { Header } from 'components/Typography';
+import ListButton from 'components/ListButton';
+
+const NavigationHeader: React.FC = () => {
+    const navigation = useNavigation();
+    const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
+    
+    return (
+        <ListContainer>
+            <ListButton onPress={handleAllAlbumsClick}>All Albums</ListButton>
+            <Header>Recent Albums</Header>
+        </ListContainer>
+    );
+};
+
+const RecentAlbums: React.FC = () => {
+    // Retrieve data from store
+    const { entities: albums } = useTypedSelector((state) => state.music.albums);
+    const recentAlbums = useRecentAlbums(24);
+    const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
+    
+    // Initialise helpers
+    const dispatch = useDispatch();
+    const navigation = useNavigation<NavigationProp>();
+    const getImage = useGetImage();
+
+    // Set callbacks
+    const retrieveData = useCallback(() => dispatch(fetchRecentAlbums()), [dispatch]);
+    const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
+    
+    console.log(recentAlbums.map((d) => albums[d]?.DateCreated));
+    
+    // Retrieve data on mount
+    useEffect(() => { retrieveData(); }, []);
+    
+    return (
+        <SafeAreaView>
+            <ListContainer>
+                <FlatList
+                    data={recentAlbums as string[]} 
+                    refreshing={isLoading}
+                    onRefresh={retrieveData}
+                    numColumns={2}
+                    keyExtractor={d => d}
+                    ListHeaderComponent={NavigationHeader}
+                    renderItem={({ item }) => (
+                        <TouchableHandler id={item} onPress={selectAlbum}>
+                            <AlbumItem>
+                                <AlbumImage source={{ uri: getImage(item) }} />
+                                <Text>{albums[item]?.Name}</Text>
+                                <Text style={{ opacity: 0.5 }}>{albums[item]?.AlbumArtist}</Text>
+                            </AlbumItem>
+                        </TouchableHandler>
+                    )}
+                />
+            </ListContainer>
+        </SafeAreaView>
+    );
+};
+
+export default RecentAlbums;

src/screens/Music/stacks/components/AlbumImage.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+import FastImage from 'react-native-fast-image';
+import { Dimensions } from 'react-native';
+
+const Screen = Dimensions.get('screen');
+
+export const AlbumItem = styled.View`
+    width: ${Screen.width / 2 - 10}px;
+    padding: 10px;
+`;
+
+const AlbumImage = styled(FastImage)`
+    border-radius: 10px;
+    width: ${Screen.width / 2 - 40}px;
+    height: ${Screen.width / 2 - 40}px;
+    background-color: #fefefe;
+    margin-bottom: 5px;
+`;
+
+export default AlbumImage;

src/screens/Music/stacks/components/ListContainer.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+
+const ListContainer = styled.View`
+    padding: 10px;
+    background-color: #f6f6f6;
+`;
+
+export default ListContainer;

src/screens/Music/types.ts

@@ -0,0 +1,75 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
+export interface UserData {
+    PlaybackPositionTicks: number;
+    PlayCount: number;
+    IsFavorite: boolean;
+    Played: boolean;
+    Key: string;
+}
+
+export interface ArtistItem {
+    Name: string;
+    Id: string;
+}
+
+export interface AlbumArtist {
+    Name: string;
+    Id: string;
+}
+
+export interface ImageTags {
+    Primary: string;
+}
+
+export interface Album {
+    Name: string;
+    ServerId: string;
+    Id: string;
+    SortName: string;
+    RunTimeTicks: number;
+    ProductionYear: number;
+    IsFolder: boolean;
+    Type: string;
+    UserData: UserData;
+    PrimaryImageAspectRatio: number;
+    Artists: string[];
+    ArtistItems: ArtistItem[];
+    AlbumArtist: string;
+    AlbumArtists: AlbumArtist[];
+    ImageTags: ImageTags;
+    BackdropImageTags: any[];
+    LocationType: string;
+    DateCreated: string;
+}
+
+export interface AlbumTrack {
+    Name: string;
+    ServerId: string;
+    Id: string;
+    RunTimeTicks: number;
+    ProductionYear: number;
+    IndexNumber: number;
+    IsFolder: boolean;
+    Type: string;
+    UserData: UserData;
+    Artists: string[];
+    ArtistItems: ArtistItem[];
+    Album: string;
+    AlbumId: string;
+    AlbumPrimaryImageTag: string;
+    AlbumArtist: string;
+    AlbumArtists: AlbumArtist[];
+    ImageTags: ImageTags;
+    BackdropImageTags: any[];
+    LocationType: string;
+    MediaType: string;
+}
+
+export type StackParams = {
+    Albums: undefined;
+    Album: { id: string, album: Album };
+    RecentAlbums: undefined;
+};
+
+export type NavigationProp = StackNavigationProp<StackParams>;