update album display, adjust spacing on track component and miniplayer artwork

components/Album/index.tsx

@@ -2,7 +2,7 @@ import { HomeAlbumProps } from '../types'
 import { YStack, XStack, Separator, getToken } from 'tamagui'
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models'
 import { H5, Text } from '../Global/helpers/text'
-import { FlatList } from 'react-native'
+import { FlatList, SectionList } from 'react-native'
 import { RunTimeTicks } from '../Global/helpers/time-codes'
 import Track from '../Global/components/track'
 import { useSafeAreaFrame } from 'react-native-safe-area-context'
@@ -11,9 +11,10 @@ import { useQuery } from '@tanstack/react-query'
 import { QueryKeys } from '../../enums/query-keys'
 import { getImageApi, getItemsApi } from '@jellyfin/sdk/lib/utils/api'
 import Client from '../../api/client'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { ItemCard } from '../Global/components/item-card'
 import { Image } from 'expo-image'
+import { groupBy, isEqual } from 'lodash'
 
 export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.Element {
 	const { album } = route.params
@@ -37,65 +38,79 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
 					parentId: album.Id!,
 					sortBy,
 				})
-				.then((response) => {
-					return response.data.Items ? response.data.Items! : []
+				.then(({ data }) => {
+					return data.Items ? data.Items : []
 				})
 		},
 	})
 
 	return (
-		<FlatList
+		<SectionList
 			contentInsetAdjustmentBehavior='automatic'
-			data={tracks}
-			keyExtractor={(item) => item.Id!}
-			numColumns={1}
+			sections={
+				tracks
+					? Object.keys(groupBy(tracks, (track) => track.ParentIndexNumber ?? 0)).map(
+							(discNumber, index) => {
+								return {
+									title: discNumber,
+									data: tracks.filter((track) =>
+										isEqual(
+											discNumber,
+											(track.ParentIndexNumber ?? 0).toString(),
+										),
+									),
+								}
+							},
+					  )
+					: [{ title: '1', data: [] }]
+			}
+			keyExtractor={(item, index) => item.Id! + index}
 			ItemSeparatorComponent={() => <Separator />}
-			ListHeaderComponent={useMemo(() => {
-				return (
-					<YStack marginTop={'$2'} minHeight={getToken('$20') + getToken('$15')}>
-						<Image
-							source={getImageApi(Client.api!).getItemImageUrlById(album.Id!)}
-							style={{
-								borderRadius: getToken('$5'),
-								width: getToken('$20') + getToken('$15'),
-								height: getToken('$20') + getToken('$15'),
-								alignSelf: 'center',
-							}}
-						/>
+			renderSectionHeader={({ section }) => <Text bold>{`Disc ${section.title}`}</Text>}
+			ListHeaderComponent={
+				<YStack marginTop={'$2'} minHeight={getToken('$20') + getToken('$15')}>
+					<Image
+						source={getImageApi(Client.api!).getItemImageUrlById(album.Id!)}
+						style={{
+							borderRadius: getToken('$5'),
+							width: getToken('$20') + getToken('$15'),
+							height: getToken('$20') + getToken('$15'),
+							alignSelf: 'center',
+						}}
+					/>
 
-						<H5 textAlign='center'>{album.Name ?? 'Untitled Album'}</H5>
+					<H5 textAlign='center'>{album.Name ?? 'Untitled Album'}</H5>
 
-						<XStack justifyContent='space-evenly'>
-							<Text>{album.ProductionYear?.toString() ?? ''}</Text>
-						</XStack>
+					<XStack justifyContent='space-evenly'>
+						<Text>{album.ProductionYear?.toString() ?? ''}</Text>
+					</XStack>
 
-						<FlatList
-							contentContainerStyle={{
-								marginHorizontal: 2,
-							}}
-							horizontal
-							keyExtractor={(item) => item.Id!}
-							data={album.ArtistItems}
-							renderItem={({ index, item: artist }) => (
-								<ItemCard
-									size={'$8'}
-									item={artist}
-									caption={artist.Name ?? 'Unknown Artist'}
-									onPress={() => {
-										navigation.navigate('Artist', {
-											artist,
-										})
-									}}
-								/>
-							)}
-						/>
-					</YStack>
-				)
-			}, [album])}
+					<FlatList
+						style={{
+							alignSelf: 'center',
+						}}
+						horizontal
+						keyExtractor={(item) => item.Id!}
+						data={album.ArtistItems}
+						renderItem={({ index, item: artist }) => (
+							<ItemCard
+								size={'$8'}
+								item={artist}
+								caption={artist.Name ?? 'Unknown Artist'}
+								onPress={() => {
+									navigation.navigate('Artist', {
+										artist,
+									})
+								}}
+							/>
+						)}
+					/>
+				</YStack>
+			}
 			renderItem={({ item: track, index }) => (
 				<Track
 					track={track}
-					tracklist={tracks!}
+					tracklist={tracks}
 					index={index}
 					navigation={navigation}
 					queue={album}
@@ -109,6 +124,9 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
 					<RunTimeTicks>{album.RunTimeTicks}</RunTimeTicks>
 				</XStack>
 			}
+			contentContainerStyle={{
+				marginHorizontal: 4,
+			}}
 		/>
 	)
 }

components/Global/components/track.tsx

@@ -47,7 +47,6 @@ export default function Track({
 	onRemove,
 }: TrackProps): React.JSX.Element {
 	const theme = useTheme()
-	const { width } = useSafeAreaFrame()
 	const { nowPlaying, playQueue, usePlayNewQueue } = usePlayerContext()
 
 	const isPlaying = nowPlaying?.item.Id === track.Id
@@ -82,7 +81,6 @@ export default function Track({
 						  }
 				}
 				paddingVertical={'$2'}
-				marginHorizontal={'$1'}
 			>
 				{prependElement && (
 					<YStack alignContent='center' justifyContent='center' flex={1}>
@@ -93,8 +91,9 @@ export default function Track({
 				<XStack
 					alignContent='center'
 					justifyContent='center'
-					flex={showArtwork ? 2 : 1}
-					minHeight={showArtwork ? width / 9 : 'unset'}
+					flex={1}
+					marginHorizontal={'$2'}
+					minHeight={showArtwork ? '$4' : 'unset'}
 				>
 					{showArtwork ? (
 						<Image

components/Player/mini-player.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
-import { getToken, getTokens, Square, useTheme, View, XStack, YStack } from 'tamagui'
+import React from 'react'
+import { getToken, getTokens, useTheme, View, XStack, YStack } from 'tamagui'
 import { usePlayerContext } from '../../player/provider'
 import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs'
 import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
@@ -7,13 +7,10 @@ import Icon from '../Global/helpers/icon'
 import { Text } from '../Global/helpers/text'
 import TextTicker from 'react-native-text-ticker'
 import PlayPauseButton from './helpers/buttons'
-import { useSafeAreaFrame } from 'react-native-safe-area-context'
 import { TextTickerConfig } from './component.config'
 import { Image } from 'expo-image'
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api'
 import Client from '../../api/client'
-import { useQuery } from '@tanstack/react-query'
-import { QueryKeys } from '../../enums/query-keys'
 
 export function Miniplayer({
 	navigation,
@@ -66,7 +63,7 @@ export function Miniplayer({
 						/>
 					</YStack>
 
-					<YStack alignContent='flex-start' marginLeft={'$2'} flex={4} maxWidth={'$20'}>
+					<YStack alignContent='flex-start' marginLeft={'$2'} flex={5} maxWidth={'$20'}>
 						<TextTicker {...TextTickerConfig}>
 							<Text bold>{nowPlaying?.title ?? 'Nothing Playing'}</Text>
 						</TextTicker>

components/Playlist/component.tsx

@@ -194,6 +194,9 @@ export default function Playlist({ playlist, navigation }: PlaylistProps): React
 					<RunTimeTicks>{playlist.RunTimeTicks}</RunTimeTicks>
 				</XStack>
 			}
+			style={{
+				marginHorizontal: 2,
+			}}
 		/>
 	)
 }

components/Search/component.tsx

@@ -111,6 +111,9 @@ export default function Search({
 			renderItem={({ item }) => (
 				<Item item={item} queueName={searchString ?? 'Search'} navigation={navigation} />
 			)}
+			style={{
+				marginHorizontal: 2,
+			}}
 		/>
 	)
 }

components/Search/suggestions.tsx

@@ -51,6 +51,9 @@ export default function Suggestions(props: SuggestionsProps): React.JSX.Element
 			renderItem={({ item }) => {
 				return <Item item={item} queueName={'Suggestions'} navigation={props.navigation} />
 			}}
+			style={{
+				marginHorizontal: 2,
+			}}
 		/>
 	)
 }