mirror of
https://github.com/Jellify-Music/App.git
synced 2026-01-07 11:30:30 -06:00
styling changes
hide disc numbers if we only have one disc give labels on artist page more breathing room from the bezel adjust track display, giving artwork more spacing and the ellipses more spacing
This commit is contained in:
Violet Caulfield
@@ -1,6 +1,6 @@
|
||||
import { HomeAlbumProps } from '../types'
|
||||
import { YStack, XStack, Separator, getToken } from 'tamagui'
|
||||
import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models'
|
||||
import { BaseItemDto, ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models'
|
||||
import { H5, Text } from '../Global/helpers/text'
|
||||
import { FlatList, SectionList } from 'react-native'
|
||||
import { RunTimeTicks } from '../Global/helpers/time-codes'
|
||||
@@ -26,47 +26,66 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
|
||||
})
|
||||
const { width } = useSafeAreaFrame()
|
||||
|
||||
const { data: tracks } = useQuery({
|
||||
const { data: discs } = useQuery({
|
||||
queryKey: [QueryKeys.ItemTracks, album.Id!],
|
||||
queryFn: () => {
|
||||
let sortBy: ItemSortBy[] = []
|
||||
|
||||
sortBy = [ItemSortBy.ParentIndexNumber, ItemSortBy.IndexNumber, ItemSortBy.SortName]
|
||||
|
||||
return getItemsApi(Client.api!)
|
||||
.getItems({
|
||||
parentId: album.Id!,
|
||||
sortBy,
|
||||
})
|
||||
.then(({ data }) => {
|
||||
return data.Items ? data.Items : []
|
||||
})
|
||||
return new Promise<{ title: string; data: BaseItemDto[] }[]>((resolve, reject) => {
|
||||
getItemsApi(Client.api!)
|
||||
.getItems({
|
||||
parentId: album.Id!,
|
||||
sortBy,
|
||||
})
|
||||
.then(({ data }) => {
|
||||
const discs = data.Items
|
||||
? Object.keys(
|
||||
groupBy(
|
||||
data.Items,
|
||||
(track) => track.ParentIndexNumber?.toString() ?? '0',
|
||||
),
|
||||
).map((discNumber) => {
|
||||
console.debug(discNumber)
|
||||
return {
|
||||
title: discNumber,
|
||||
data: data.Items!.filter((track: BaseItemDto) =>
|
||||
track.ParentIndexNumber
|
||||
? isEqual(
|
||||
discNumber,
|
||||
(track.ParentIndexNumber ?? 0).toString(),
|
||||
)
|
||||
: track,
|
||||
),
|
||||
}
|
||||
})
|
||||
: [{ title: '1', data: [] }]
|
||||
|
||||
resolve(discs)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<SectionList
|
||||
contentInsetAdjustmentBehavior='automatic'
|
||||
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: [] }]
|
||||
}
|
||||
sections={discs ?? [{ title: '1', data: [] }]}
|
||||
keyExtractor={(item, index) => item.Id! + index}
|
||||
ItemSeparatorComponent={() => <Separator />}
|
||||
renderSectionHeader={({ section }) => <Text bold>{`Disc ${section.title}`}</Text>}
|
||||
renderSectionHeader={({ section }) => {
|
||||
return discs && discs.length >= 2 ? (
|
||||
<Text
|
||||
marginLeft={'$4.5'}
|
||||
backgroundColor={'$background'}
|
||||
bold
|
||||
>{`Disc ${section.title}`}</Text>
|
||||
) : null
|
||||
}}
|
||||
ListHeaderComponent={
|
||||
<YStack marginTop={'$2'} minHeight={getToken('$20') + getToken('$15')}>
|
||||
<Image
|
||||
@@ -110,7 +129,7 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
|
||||
renderItem={({ item: track, index }) => (
|
||||
<Track
|
||||
track={track}
|
||||
tracklist={tracks}
|
||||
tracklist={discs?.flatMap((disc) => disc.data)}
|
||||
index={index}
|
||||
navigation={navigation}
|
||||
queue={album}
|
||||
@@ -124,9 +143,6 @@ export function AlbumScreen({ route, navigation }: HomeAlbumProps): React.JSX.El
|
||||
<RunTimeTicks>{album.RunTimeTicks}</RunTimeTicks>
|
||||
</XStack>
|
||||
}
|
||||
contentContainerStyle={{
|
||||
marginHorizontal: 4,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ export function ArtistScreen({
|
||||
/>
|
||||
</YStack>
|
||||
|
||||
<H3>Albums</H3>
|
||||
<H3 marginLeft={'$2'}>Albums</H3>
|
||||
<FlatList
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
@@ -100,7 +100,9 @@ export function ArtistScreen({
|
||||
)}
|
||||
ListFooterComponent={
|
||||
<YStack>
|
||||
<H3>{`Similar to ${artist.Name ?? 'Unknown Artist'}`} </H3>
|
||||
<H3 marginLeft={'$2'}>
|
||||
{`Similar to ${artist.Name ?? 'Unknown Artist'}`}{' '}
|
||||
</H3>
|
||||
|
||||
<FlatList
|
||||
data={similarArtists}
|
||||
|
||||
@@ -91,7 +91,7 @@ export default function Track({
|
||||
<XStack
|
||||
alignContent='center'
|
||||
justifyContent='center'
|
||||
flex={1}
|
||||
flex={showArtwork ? 2 : 1}
|
||||
marginHorizontal={'$2'}
|
||||
minHeight={showArtwork ? '$4' : 'unset'}
|
||||
>
|
||||
@@ -132,7 +132,7 @@ export default function Track({
|
||||
alignItems='center'
|
||||
justifyContent='space-between'
|
||||
alignContent='center'
|
||||
flex={3}
|
||||
flex={4}
|
||||
>
|
||||
<FavoriteIcon item={track} />
|
||||
|
||||
@@ -140,7 +140,7 @@ export default function Track({
|
||||
<RunTimeTicks>{track.RunTimeTicks}</RunTimeTicks>
|
||||
</YStack>
|
||||
|
||||
<YStack alignContent='center' justifyContent='center'>
|
||||
<YStack alignContent='center' justifyContent='flex-start' marginRight={'$3'}>
|
||||
<Icon
|
||||
name={showRemove ? 'close' : 'dots-horizontal'}
|
||||
onPress={() => {
|
||||
|
||||
236
package.json
236
package.json
@@ -1,119 +1,119 @@
|
||||
{
|
||||
"name": "jellify",
|
||||
"version": "0.10.98",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"init": "npm i",
|
||||
"init:ios": "npm i && npm run pod:install",
|
||||
"reinstall": "rm -rf ./node_modules && npm i",
|
||||
"android": "react-native run-android",
|
||||
"ios": "react-native run-ios",
|
||||
"lint": "eslint .",
|
||||
"start": "react-native start",
|
||||
"test": "jest",
|
||||
"clean:ios": "cd ios && pod deintegrate",
|
||||
"clean:android": "cd android && rm -rf app/ build/",
|
||||
"pod:install": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=0 bundle exec pod install",
|
||||
"pod:install-new-arch": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install",
|
||||
"fastlane:ios:build": "cd ios && bundle exec fastlane build",
|
||||
"fastlane:ios:beta": "cd ios && bundle exec fastlane beta",
|
||||
"fastlane:android:build": "cd android && bundle install && bundle exec fastlane build",
|
||||
"androidBuild": "cd android && ./gradlew clean && ./gradlew assembleRelease && cd .. && echo 'find apk in android/app/build/outputs/apk/release'",
|
||||
"prepare": "husky",
|
||||
"format:check": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"postinstall": "patch-package"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jellyfin/sdk": "^0.11.0",
|
||||
"@react-native-community/blur": "^4.4.1",
|
||||
"@react-native-community/cli": "^15.1.3",
|
||||
"@react-native-masked-view/masked-view": "^0.3.2",
|
||||
"@react-navigation/bottom-tabs": "^7.2.0",
|
||||
"@react-navigation/native": "^7.1.6",
|
||||
"@react-navigation/native-stack": "^7.1.1",
|
||||
"@react-navigation/stack": "^7.1.0",
|
||||
"@tamagui/config": "^1.125.34",
|
||||
"@tamagui/toast": "^1.125.34",
|
||||
"@tanstack/query-sync-storage-persister": "^5.73.3",
|
||||
"@tanstack/react-query": "^5.73.3",
|
||||
"@tanstack/react-query-persist-client": "^5.73.3",
|
||||
"axios": "^1.7.9",
|
||||
"bundle": "^2.1.0",
|
||||
"burnt": "^0.12.2",
|
||||
"expo": "^52.0.0",
|
||||
"expo-image": "^2.0.7",
|
||||
"gem": "^2.4.3",
|
||||
"invert-color": "^2.0.0",
|
||||
"jest-expo": "^52.0.6",
|
||||
"lodash": "^4.17.21",
|
||||
"npm-bundle": "^3.0.3",
|
||||
"patch-package": "^8.0.0",
|
||||
"react": "18.3.1",
|
||||
"react-freeze": "^1.0.4",
|
||||
"react-native": "0.77.0",
|
||||
"react-native-background-actions": "^4.0.1",
|
||||
"react-native-blurhash": "^2.1.1",
|
||||
"react-native-boost": "^0.5.5",
|
||||
"react-native-carplay": "^2.4.1-beta.0",
|
||||
"react-native-device-info": "^14.0.4",
|
||||
"react-native-draggable-flatlist": "^4.0.1",
|
||||
"react-native-file-access": "^3.1.1",
|
||||
"react-native-gesture-handler": "^2.23.0",
|
||||
"react-native-haptic-feedback": "^2.3.3",
|
||||
"react-native-mmkv": "^2.12.2",
|
||||
"react-native-reanimated": "^3.17.2",
|
||||
"react-native-safe-area-context": "^5.2.0",
|
||||
"react-native-screens": "^4.6.0",
|
||||
"react-native-swipeable-item": "^2.0.9",
|
||||
"react-native-text-ticker": "^1.14.0",
|
||||
"react-native-track-player": "^4.1.1",
|
||||
"react-native-url-polyfill": "^2.0.0",
|
||||
"react-native-uuid": "^2.0.3",
|
||||
"react-native-vector-icons": "^10.2.0",
|
||||
"ruby": "^0.6.1",
|
||||
"tamagui": "^1.125.34"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@babel/preset-env": "^7.25.3",
|
||||
"@babel/runtime": "^7.25.0",
|
||||
"@react-native-community/cli-platform-android": "15.1.3",
|
||||
"@react-native-community/cli-platform-ios": "15.1.3",
|
||||
"@react-native/babel-preset": "0.77.0",
|
||||
"@react-native/eslint-config": "0.77.0",
|
||||
"@react-native/metro-config": "0.77.0",
|
||||
"@react-native/typescript-config": "0.77.0",
|
||||
"@types/jest": "^29.5.13",
|
||||
"@types/lodash": "^4.17.10",
|
||||
"@types/react": "^18.2.6",
|
||||
"@types/react-native-vector-icons": "^6.4.18",
|
||||
"@types/react-test-renderer": "^18.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
||||
"@typescript-eslint/parser": "^8.29.1",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-prettier": "^10.1.2",
|
||||
"eslint-plugin-import": "^2.31.0",
|
||||
"eslint-plugin-prettier": "^5.2.6",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-native": "^5.0.0",
|
||||
"husky": "^9.1.7",
|
||||
"jest": "^29.6.3",
|
||||
"jscodeshift": "^0.15.2",
|
||||
"lint-staged": "^15.5.0",
|
||||
"prettier": "^2.8.8",
|
||||
"react-native-cli-bump-version": "^1.5.1",
|
||||
"react-test-renderer": "18.3.1",
|
||||
"typescript": "5.7.3"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
}
|
||||
"name": "jellify",
|
||||
"version": "0.10.98",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"init": "npm i",
|
||||
"init:ios": "npm i && npm run pod:install",
|
||||
"reinstall": "rm -rf ./node_modules && npm i",
|
||||
"android": "react-native run-android",
|
||||
"ios": "react-native run-ios",
|
||||
"lint": "eslint .",
|
||||
"start": "react-native start",
|
||||
"test": "jest",
|
||||
"clean:ios": "cd ios && pod deintegrate",
|
||||
"clean:android": "cd android && rm -rf app/ build/",
|
||||
"pod:install": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=0 bundle exec pod install",
|
||||
"pod:install-new-arch": "cd ios && bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install",
|
||||
"fastlane:ios:build": "cd ios && bundle exec fastlane build",
|
||||
"fastlane:ios:beta": "cd ios && bundle exec fastlane beta",
|
||||
"fastlane:android:build": "cd android && bundle install && bundle exec fastlane build",
|
||||
"androidBuild": "cd android && ./gradlew clean && ./gradlew assembleRelease && cd .. && echo 'find apk in android/app/build/outputs/apk/release'",
|
||||
"prepare": "husky",
|
||||
"format:check": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"postinstall": "patch-package"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jellyfin/sdk": "^0.11.0",
|
||||
"@react-native-community/blur": "^4.4.1",
|
||||
"@react-native-community/cli": "^15.1.3",
|
||||
"@react-native-masked-view/masked-view": "^0.3.2",
|
||||
"@react-navigation/bottom-tabs": "^7.2.0",
|
||||
"@react-navigation/native": "^7.1.6",
|
||||
"@react-navigation/native-stack": "^7.1.1",
|
||||
"@react-navigation/stack": "^7.1.0",
|
||||
"@tamagui/config": "^1.125.34",
|
||||
"@tamagui/toast": "^1.125.34",
|
||||
"@tanstack/query-sync-storage-persister": "^5.73.3",
|
||||
"@tanstack/react-query": "^5.73.3",
|
||||
"@tanstack/react-query-persist-client": "^5.73.3",
|
||||
"axios": "^1.7.9",
|
||||
"bundle": "^2.1.0",
|
||||
"burnt": "^0.12.2",
|
||||
"expo": "^52.0.0",
|
||||
"expo-image": "^2.0.7",
|
||||
"gem": "^2.4.3",
|
||||
"invert-color": "^2.0.0",
|
||||
"jest-expo": "^52.0.6",
|
||||
"lodash": "^4.17.21",
|
||||
"npm-bundle": "^3.0.3",
|
||||
"patch-package": "^8.0.0",
|
||||
"react": "18.3.1",
|
||||
"react-freeze": "^1.0.4",
|
||||
"react-native": "0.77.0",
|
||||
"react-native-background-actions": "^4.0.1",
|
||||
"react-native-blurhash": "^2.1.1",
|
||||
"react-native-boost": "^0.5.5",
|
||||
"react-native-carplay": "^2.4.1-beta.0",
|
||||
"react-native-device-info": "^14.0.4",
|
||||
"react-native-draggable-flatlist": "^4.0.1",
|
||||
"react-native-file-access": "^3.1.1",
|
||||
"react-native-gesture-handler": "^2.23.0",
|
||||
"react-native-haptic-feedback": "^2.3.3",
|
||||
"react-native-mmkv": "^2.12.2",
|
||||
"react-native-reanimated": "^3.17.2",
|
||||
"react-native-safe-area-context": "^5.2.0",
|
||||
"react-native-screens": "^4.6.0",
|
||||
"react-native-swipeable-item": "^2.0.9",
|
||||
"react-native-text-ticker": "^1.14.0",
|
||||
"react-native-track-player": "^4.1.1",
|
||||
"react-native-url-polyfill": "^2.0.0",
|
||||
"react-native-uuid": "^2.0.3",
|
||||
"react-native-vector-icons": "^10.2.0",
|
||||
"ruby": "^0.6.1",
|
||||
"tamagui": "^1.125.34"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@babel/preset-env": "^7.25.3",
|
||||
"@babel/runtime": "^7.25.0",
|
||||
"@react-native-community/cli-platform-android": "15.1.3",
|
||||
"@react-native-community/cli-platform-ios": "15.1.3",
|
||||
"@react-native/babel-preset": "0.77.0",
|
||||
"@react-native/eslint-config": "0.77.0",
|
||||
"@react-native/metro-config": "0.77.0",
|
||||
"@react-native/typescript-config": "0.77.0",
|
||||
"@types/jest": "^29.5.13",
|
||||
"@types/lodash": "^4.17.10",
|
||||
"@types/react": "^18.2.6",
|
||||
"@types/react-native-vector-icons": "^6.4.18",
|
||||
"@types/react-test-renderer": "^18.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
||||
"@typescript-eslint/parser": "^8.29.1",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-prettier": "^10.1.2",
|
||||
"eslint-plugin-import": "^2.31.0",
|
||||
"eslint-plugin-prettier": "^5.2.6",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-native": "^5.0.0",
|
||||
"husky": "^9.1.7",
|
||||
"jest": "^29.6.3",
|
||||
"jscodeshift": "^0.15.2",
|
||||
"lint-staged": "^15.5.0",
|
||||
"prettier": "^2.8.8",
|
||||
"react-native-cli-bump-version": "^1.5.1",
|
||||
"react-test-renderer": "18.3.1",
|
||||
"typescript": "5.7.3"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx}": [
|
||||
"prettier --write",
|
||||
"eslint --fix"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user