Skip to content

Commit

Permalink
feat: separate discs in album view when multiple are available
Browse files Browse the repository at this point in the history 
fixes #179
  • Loading branch information
@leinelissen
leinelissen committed Jul 21, 2024
1 parent 7cdd01e commit ec4a2b6
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 78 deletions.
3 changes: 2 additions & 1 deletion src/localisation/lang/en/locale.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,5 +74,6 @@
"privacy-policy": "Privacy Policy",
"sleep-timer": "Sleep timer",
"delete": "Delete",
"cancel": "Cancel"
"cancel": "Cancel",
"disc": "Disc"
}
3 changes: 2 additions & 1 deletion src/localisation/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,5 @@ export type LocaleKeys = 'play-next'
| 'privacy-policy'
| 'sleep-timer'
| 'delete'
| 'cancel'
| 'cancel'
| 'disc'
180 changes: 105 additions & 75 deletions src/screens/Music/stacks/components/TrackListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import CoverImage from '@/components/CoverImage';
import ticksToDuration from '@/utility/ticksToDuration';
import { t } from '@/localisation';
import { SafeScrollView, useNavigationOffsets } from '@/components/SafeNavigatorView';
import { groupBy } from 'lodash';
import Divider from '@/components/Divider';

const styles = StyleSheet.create({
index: {
Expand All @@ -34,6 +36,12 @@ const styles = StyleSheet.create({
activeText: {
fontWeight: '500',
},
discContainer: {
flexDirection: 'row',
gap: 24,
alignItems: 'center',
marginBottom: 12,
}
});

const AlbumImageContainer = styled.View`
Expand All @@ -54,7 +62,7 @@ const TrackContainer = styled.View<{ isPlaying: boolean, small?: boolean }>`
`}
${props => props.small && css`
padding: ${Platform.select({ ios: '8px 4px', android: '4px'})};
padding: ${Platform.select({ ios: '8px 4px', android: '4px' })};
`}
`;

Expand Down Expand Up @@ -99,6 +107,18 @@ const TrackListView: React.FC<TrackListViewProps> = ({
), 0)
), [trackIds, tracks]);

// Split all tracks into trackgroups depending on their parent id (i.e. disc
// number).
const trackGroups: [string, string[]][] = useMemo(() => {
// GUARD: Only apply this rendering style for albums
if (listNumberingStyle !== 'album') {
return [['0', trackIds]];
}

const groups = groupBy(trackIds, (id) => tracks[id].ParentIndexNumber);
return Object.entries(groups);
}, [trackIds, tracks, listNumberingStyle]);

// Retrieve helpers
const getImage = useGetImage();
const playTracks = usePlayTracks();
Expand All @@ -111,14 +131,14 @@ const TrackListView: React.FC<TrackListViewProps> = ({
// Retrieve the largest index in the current set of tracks
const largestIndex = trackIds.reduce((max, trackId, i) => {
// Retrieve the index for this trackid, depending on settings
const index = listNumberingStyle === 'index'
const index = listNumberingStyle === 'index'
? i + 1
: tracks[trackId]?.IndexNumber;

// Check that the current index is larger than the current max.
return index > max ? index: max;
return index > max ? index : max;
}, 0);

// Retrieve the number of digits in the largest index
const noDigits = largestIndex.toFixed(0).toString().length;

Expand All @@ -134,8 +154,8 @@ const TrackListView: React.FC<TrackListViewProps> = ({
await TrackPlayer.skip(index);
await TrackPlayer.play();
}, [playTracks, trackIds]);
const longPressTrack = useCallback((index: number) => {
navigation.navigate('TrackPopupMenu', { trackId: trackIds[index].toString() });
const longPressTrack = useCallback((index: number) => {
navigation.navigate('TrackPopupMenu', { trackId: trackIds[index].toString() });
}, [navigation, trackIds]);
const downloadAllTracks = useCallback(() => {
trackIds.forEach((trackId) => dispatch(queueTrackForDownload(trackId)));
Expand All @@ -162,86 +182,96 @@ const TrackListView: React.FC<TrackListViewProps> = ({
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
</WrappableButtonRow>
<View style={{ marginTop: 8 }}>
{trackIds.map((trackId, i) =>
<TouchableHandler
key={trackId}
id={i}
onPress={selectTrack}
onLongPress={longPressTrack}
testID={`play-track-${trackId}`}
>
<TrackContainer
isPlaying={currentTrack?.backendId === trackId || false}
style={[
defaultStyles.border,
currentTrack?.backendId === trackId ? defaultStyles.activeBackground : null
]}
>
<Text
style={[
styles.index,
defaultStyles.textQuarterOpacity,
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
indexWidth,
]}
numberOfLines={1}
{trackGroups.map(([discNo, groupTrackIds]) => (
<View key={`disc_${discNo}`} style={{ marginBottom: 24 }}>
{trackGroups.length > 1 && (
<View style={styles.discContainer}>
<SubHeader>{t('disc')} {discNo}</SubHeader>
<Divider />
</View>
)}
{groupTrackIds.map((trackId, i) =>
<TouchableHandler
key={trackId}
id={i}
onPress={selectTrack}
onLongPress={longPressTrack}
testID={`play-track-${trackId}`}
>
{listNumberingStyle === 'index'
? i + 1
: tracks[trackId]?.IndexNumber}
</Text>
<View style={{ flexShrink: 1 }}>
<Text
<TrackContainer
isPlaying={currentTrack?.backendId === trackId || false}
style={[
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColor,
{
flexShrink: 1,
marginRight: 4,
}
defaultStyles.border,
currentTrack?.backendId === trackId ? defaultStyles.activeBackground : null
]}
numberOfLines={1}
>
{tracks[trackId]?.Name}
</Text>
{itemDisplayStyle === 'playlist' && (
<Text
style={[
styles.index,
defaultStyles.textQuarterOpacity,
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColor,
{
flexShrink: 1,
marginRight: 4,
opacity: currentTrack?.backendId === trackId ? 0.5 : 0.25,
}
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
indexWidth,
]}
numberOfLines={1}
>
{tracks[trackId]?.Artists.join(', ')}
{listNumberingStyle === 'index'
? i + 1
: tracks[trackId]?.IndexNumber}
</Text>
)}
</View>
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
<Text
style={[
{ marginRight: 12 },
defaultStyles.textQuarterOpacity,
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
]}
numberOfLines={1}
>
{ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
</Text>
<DownloadIcon
trackId={trackId}
fill={currentTrack?.backendId === trackId ? defaultStyles.themeColorQuarterOpacity.color : undefined}
/>
</View>
</TrackContainer>
</TouchableHandler>
)}
<View style={{ flexShrink: 1 }}>
<Text
style={[
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColor,
{
flexShrink: 1,
marginRight: 4,
}
]}
numberOfLines={1}
>
{tracks[trackId]?.Name}
</Text>
{itemDisplayStyle === 'playlist' && (
<Text
style={[
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColor,
{
flexShrink: 1,
marginRight: 4,
opacity: currentTrack?.backendId === trackId ? 0.5 : 0.25,
}
]}
numberOfLines={1}
>
{tracks[trackId]?.Artists.join(', ')}
</Text>
)}
</View>
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
<Text
style={[
{ marginRight: 12 },
defaultStyles.textQuarterOpacity,
currentTrack?.backendId === trackId && styles.activeText,
currentTrack?.backendId === trackId && defaultStyles.themeColorQuarterOpacity,
]}
numberOfLines={1}
>
{ticksToDuration(tracks[trackId]?.RunTimeTicks || 0)}
</Text>
<DownloadIcon
trackId={trackId}
fill={currentTrack?.backendId === trackId ? defaultStyles.themeColorQuarterOpacity.color : undefined}
/>
</View>
</TrackContainer>
</TouchableHandler>
)}
</View>
))}
<Text style={{ paddingTop: 24, paddingBottom: 12, textAlign: 'center', opacity: 0.5 }}>
{t('total-duration')}{': '}{ticksToDuration(totalDuration)}
</Text>
Expand Down
1 change: 1 addition & 0 deletions src/store/music/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export interface AlbumTrack {
RunTimeTicks: number;
ProductionYear: number;
IndexNumber: number;
ParentIndexNumber: number;
IsFolder: boolean;
Type: 'Audio';
UserData: UserData;
Expand Down
2 changes: 1 addition & 1 deletion src/utility/JellyfinApi/album.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export async function retrieveRecentAlbums(numberOfAlbums = 24) {
export async function retrieveAlbumTracks(ItemId: string) {
const singleAlbumOptions = {
ParentId: ItemId,
SortBy: 'IndexNumber,SortName',
SortBy: 'ParentIndexNumber,IndexNumber,SortName',
};
const singleAlbumParams = new URLSearchParams(singleAlbumOptions).toString();

Expand Down

0 comments on commit ec4a2b6

Please sign in to comment.