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

feat: add extra metadata to the album view

Browse Source
This commit is contained in:
Lei Nelissen
2023-04-23 01:04:30 +02:00
parent c3c32ae565
commit dba87247d8
15 changed files with 135 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Typography.tsx
View File

@@ -25,3 +25,9 @@ export const SubHeader = styled(Text)`
font-weight: 400;
opacity: 0.5;
`;
export const Paragraph = styled(Text)`
opacity: 0.5;
font-size: 12px;
line-height: 20px;
`;

3
src/localisation/lang/en/locale.json
View File

@@ -59,5 +59,6 @@
"you-are-offline-message": "You are currently offline. You can only play previously downloaded music.",
"playing-on": "Playing on",
"local-playback": "Local playback",
"streaming": "Streaming"
"streaming": "Streaming",
"total-duration": "Total duration"
}

3
src/localisation/lang/nl/locale.json
View File

@@ -59,5 +59,6 @@
"you-are-offline-message": "Je bent op dit moment offline. Je kunt alleen eerder gedownloade nummers afspelen.",
"playing-on": "Speelt af op",
"local-playback": "Lokaal afspelen",
"streaming": "Streamen"
"streaming": "Streamen",
"total-duration": "Totale duur"
}

3
src/localisation/types.ts
View File

@@ -57,4 +57,5 @@ export type LocaleKeys = 'play-next'
| 'you-are-offline-message'
| 'playing-on'
| 'local-playback'
| 'streaming'
| 'streaming'
| 'total-duration'

70
src/screens/Music/stacks/Album.tsx
View File

@@ -1,15 +1,56 @@
import React, { useCallback, useEffect } from 'react';
import { useRoute, RouteProp } from '@react-navigation/native';
import React, { useCallback, useEffect, useState } from 'react';
import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
import { useAppDispatch, useTypedSelector } from 'store';
import TrackListView from './components/TrackListView';
import { fetchTracksByAlbum } from 'store/music/actions';
import { fetchAlbum, fetchTracksByAlbum } from 'store/music/actions';
import { differenceInDays } from 'date-fns';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
import { t } from '@localisation';
import { StackParams } from 'screens/types';
import { NavigationProp, StackParams } from 'screens/types';
import { SubHeader, Text } from 'components/Typography';
import { ScrollView } from 'react-native-gesture-handler';
import { useGetImage } from 'utility/JellyfinApi';
import styled from 'styled-components';
import FastImage from 'react-native-fast-image';
import { Dimensions, Pressable, useColorScheme } from 'react-native';
import { Container } from '@shopify/react-native-skia/lib/typescript/src/renderer/Container';
import AlbumImage from './components/AlbumImage';
type Route = RouteProp<StackParams, 'Album'>;
const Screen = Dimensions.get('screen');
const Cover = styled(AlbumImage)`
height: ${Screen.width / 2.8};
width: ${Screen.width / 2.8};
border-radius: 12px;
`;
function SimilarAlbum({ id }: { id: string }) {
const navigation = useNavigation<NavigationProp>();
const getImage = useGetImage();
const album = useTypedSelector((state) => state.music.albums.entities[id]);
const handlePress = useCallback(() => {
album && navigation.push('Album', { id, album });
}, [id, album, navigation]);
return (
<Pressable
style={({ pressed }) => ({
opacity: pressed ? 0.5 : 1.0,
width: Screen.width / 2.8,
marginRight: 12
})}
onPress={handlePress}
>
<Cover key={id} source={{ uri: getImage(id) }} />
<Text numberOfLines={1} style={{ fontSize: 13 }}>{album?.Name}</Text>
<Text numberOfLines={1} style={{ opacity: 0.5, fontSize: 13 }}>{album?.Artists.join(', ')}</Text>
</Pressable>
);
}
const Album: React.FC = () => {
const { params: { id } } = useRoute<Route>();
const dispatch = useAppDispatch();
@@ -19,7 +60,10 @@ const Album: React.FC = () => {
const albumTracks = useTypedSelector((state) => state.music.tracks.byAlbum[id]);
// Define a function for refreshing this entity
const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]);
const refresh = useCallback(() => {
dispatch(fetchTracksByAlbum(id));
dispatch(fetchAlbum(id));
}, [id, dispatch]);
// Auto-fetch the track data periodically
useEffect(() => {
@@ -39,7 +83,21 @@ const Album: React.FC = () => {
shuffleButtonText={t('shuffle-album')}
downloadButtonText={t('download-album')}
deleteButtonText={t('delete-album')}
/>
>
{album?.Overview && (
<Text style={{ opacity: 0.5, lineHeight: 20, fontSize: 12, paddingBottom: 24 }}>{album?.Overview}</Text>
)}
{album?.Similar && (
<>
<SubHeader>Similar albums</SubHeader>
<ScrollView horizontal style={{ marginLeft: -24, marginTop: 8, marginBottom: 36 }} contentContainerStyle={{ paddingLeft: 24 }} showsHorizontalScrollIndicator={false}>
{album.Similar.map((id) => (
<SimilarAlbum id={id} key={id} />
))}
</ScrollView>
</>
)}
</TrackListView>
);
};

2
src/screens/Music/stacks/components/AlbumImage.tsx
View File

@@ -27,7 +27,7 @@ function AlbumImage(props: FastImageProps) {
if (!props.source || hasError) {
return (
<Container source={colorScheme === 'light' ? require('assets/images/empty-album-light.png') : require('assets/images/empty-album-dark.png')} />
<Container {...props} source={colorScheme === 'light' ? require('assets/images/empty-album-light.png') : require('assets/images/empty-album-dark.png')} />
);
}

15
src/screens/Music/stacks/components/TrackListView.tsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { PropsWithChildren, useCallback, useMemo } from 'react';
import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
import { useGetImage } from 'utility/JellyfinApi';
import styled, { css } from 'styled-components/native';
@@ -26,6 +26,7 @@ import { Text } from 'components/Typography';
import CoverImage from 'components/CoverImage';
import ticksToDuration from 'utility/ticksToDuration';
import { useNavigatorPadding } from 'utility/SafeNavigatorView';
import { t } from '@localisation';
const styles = StyleSheet.create({
index: {
@@ -55,7 +56,7 @@ const TrackContainer = styled.View<{ isPlaying: boolean }>`
`}
`;
interface TrackListViewProps {
export interface TrackListViewProps extends PropsWithChildren<{}> {
title?: string;
artist?: string;
trackIds: EntityId[];
@@ -81,6 +82,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
deleteButtonText,
listNumberingStyle = 'album',
itemDisplayStyle = 'album',
children
}) => {
const defaultStyles = useDefaultStyles();
const navigatorPadding = useNavigatorPadding();
@@ -89,6 +91,11 @@ const TrackListView: React.FC<TrackListViewProps> = ({
const tracks = useTypedSelector((state) => state.music.tracks.entities);
const isLoading = useTypedSelector((state) => state.music.tracks.isLoading);
const downloadedTracks = useTypedSelector(selectDownloadedTracks(trackIds));
const totalDuration = useMemo(() => (
trackIds.reduce<number>((sum, trackId) => (
sum + (tracks[trackId]?.RunTimeTicks || 0)
), 0)
), [trackIds, tracks]);
// Retrieve helpers
const getImage = useGetImage();
@@ -157,7 +164,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
? i + 1
: tracks[trackId]?.IndexNumber}
</Text>
<View>
<View style={{ flexShrink: 1 }}>
<Text
style={{
...currentTrack?.backendId === trackId && styles.activeText,
@@ -197,6 +204,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
</TrackContainer>
</TouchableHandler>
)}
<Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>{t('total-duration')}: {ticksToDuration(totalDuration)}</Text>
<WrappableButtonRow style={{ marginTop: 24 }}>
<WrappableButton
icon={CloudDownArrow}
@@ -214,6 +222,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
/>
</WrappableButtonRow>
</View>
{children}
</ScrollView>
);
};

4
src/screens/Settings/components/Cache.tsx
View File

@@ -4,7 +4,7 @@ import music from 'store/music';
import { t } from '@localisation';
import Button from 'components/Button';
import styled from 'styled-components/native';
import { Text } from 'components/Typography';
import { Paragraph } from 'components/Typography';
import { useAppDispatch } from 'store';
import { useHeaderHeight } from '@react-navigation/elements';
@@ -30,7 +30,7 @@ export default function CacheSettings() {
return (
<Container contentInset={{ top: headerHeight }}>
<Text>{t('setting-cache-description')}</Text>
<Paragraph>{t('setting-cache-description')}</Paragraph>
<ClearCache title={t('reset-cache')} onPress={handleClearCache} />
</Container>
);

8
src/screens/Settings/components/Library.tsx
View File

@@ -6,7 +6,7 @@ import { NavigationProp } from '../..';
import { useTypedSelector } from 'store';
import { t } from '@localisation';
import Button from 'components/Button';
import { Text } from 'components/Typography';
import { Paragraph } from 'components/Typography';
import { useHeaderHeight } from '@react-navigation/elements';
@@ -34,15 +34,15 @@ export default function LibrarySettings() {
return (
<Container contentInset={{ top: headerHeight }}>
<InputContainer>
<Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
<Paragraph style={defaultStyles.text}>{t('jellyfin-server-url')}</Paragraph>
<Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
</InputContainer>
<InputContainer>
<Text style={defaultStyles.text}>{t('jellyfin-access-token')}</Text>
<Paragraph style={defaultStyles.text}>{t('jellyfin-access-token')}</Paragraph>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={defaultStyles.input} />
</InputContainer>
<InputContainer>
<Text style={defaultStyles.text}>{t('jellyfin-user-id')}</Text>
<Paragraph style={defaultStyles.text}>{t('jellyfin-user-id')}</Paragraph>
<Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
</InputContainer>
<Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />

10
src/screens/Settings/components/Sentry.tsx
View File

@@ -1,4 +1,4 @@
import { Text } from 'components/Typography';
import { Paragraph, Text } from 'components/Typography';
import React, { useEffect, useState } from 'react';
import { Switch } from 'react-native-gesture-handler';
@@ -92,7 +92,7 @@ function renderHeader(question: Question, index: number, isActive: boolean) {
function renderContent(question: Question) {
return (
<ContentContainer>
<Text>{question.content}</Text>
<Paragraph>{question.content}</Paragraph>
</ContentContainer>
);
}
@@ -112,9 +112,9 @@ export default function Sentry() {
return (
<ScrollView contentInset={{ top: headerHeight }}>
<Container>
<Text>{t('error-reporting-description')}</Text>
<Text />
<Text>{t('error-reporting-rationale')}</Text>
<Paragraph>{t('error-reporting-description')}</Paragraph>
<Paragraph />
<Paragraph>{t('error-reporting-rationale')}</Paragraph>
<SwitchContainer>
<Label>{t('error-reporting')}</Label>

8
src/store/music/actions.ts
View File

@@ -46,6 +46,14 @@ export const fetchTracksByAlbum = createAsyncThunk<AlbumTrack[], string, AsyncTh
}
);
export const fetchAlbum = createAsyncThunk<Album, string, AsyncThunkAPI>(
'/albums/single',
async (ItemId, thunkAPI) => {
const credentials = thunkAPI.getState().settings.jellyfin;
return retrieveAlbum(credentials, ItemId) as Promise<Album>;
}
);
type SearchAndFetchResults = {
albums: Album[];
results: (Album | AlbumTrack)[];

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

@@ -7,7 +7,8 @@ import {
searchAndFetchAlbums,
playlistAdapter,
fetchAllPlaylists,
fetchTracksByPlaylist
fetchTracksByPlaylist,
fetchAlbum
} from './actions';
import { createSlice, Dictionary, EntityId } from '@reduxjs/toolkit';
import { Album, AlbumTrack, Playlist } from './types';
@@ -69,6 +70,15 @@ const music = createSlice({
});
builder.addCase(fetchAllAlbums.pending, (state) => { state.albums.isLoading = true; });
builder.addCase(fetchAllAlbums.rejected, (state) => { state.albums.isLoading = false; });
/**
* Fetch single album
*/
builder.addCase(fetchAlbum.fulfilled, (state, { payload }) => {
albumAdapter.upsertOne(state.albums, payload);
});
builder.addCase(fetchAlbum.pending, (state) => { state.albums.isLoading = true; });
builder.addCase(fetchAlbum.rejected, (state) => { state.albums.isLoading = false; });
/**
* Fetch most recent albums

6
src/store/music/types.ts
View File

@@ -43,6 +43,8 @@ export interface Album {
Tracks?: string[];
lastRefreshed?: number;
DateCreated: string;
Overview?: string;
Similar?: string[];
}
export interface AlbumTrack {
@@ -94,4 +96,8 @@ export interface Playlist {
MediaType: string;
Tracks?: string[];
lastRefreshed?: number;
}
export interface SimilarAlbum {
Id: string;
}

11
src/utility/JellyfinApi.ts
View File

@@ -1,6 +1,6 @@
import { Track } from 'react-native-track-player';
import { AppState, useTypedSelector } from 'store';
import { Album, AlbumTrack } from 'store/music/types';
import { Album, AlbumTrack, SimilarAlbum } from 'store/music/types';
type Credentials = AppState['settings']['jellyfin'];
@@ -86,8 +86,14 @@ export async function retrieveAllAlbums(credentials: Credentials) {
*/
export async function retrieveAlbum(credentials: Credentials, id: string): Promise<Album> {
const config = generateConfig(credentials);
const Similar = await fetch(`${credentials?.uri}/Items/${id}/Similar?userId=${credentials?.user_id}&limit=12`, config)
.then(response => response.json() as Promise<{ Items: SimilarAlbum[] }>)
.then((albums) => albums.Items.map((a) => a.Id));
return fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items/${id}`, config)
.then(response => response.json());
.then(response => response.json() as Promise<Album>)
.then(album => ({ ...album, Similar }));
}
const latestAlbumsOptions = {
@@ -96,7 +102,6 @@ const latestAlbumsOptions = {
SortOrder: 'Ascending',
};
/**
* Retrieve the most recently added albums on the Jellyfin server
*/

4
src/utility/ticksToDuration.ts
View File

@@ -1,7 +1,7 @@
function ticksToDuration(ticks: number) {
const seconds = Math.round(ticks / 10000000);
const minutes = Math.round(seconds / 60);
const hours = Math.round(minutes / 60);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
return `${hours > 0 ? hours + ':' : ''}${minutes}:${(seconds % 60).toString().padStart(2, '0')}`;
}