diff --git a/src/components/Album/index.tsx b/src/components/Album/index.tsx index ac068eff..a044a3c9 100644 --- a/src/components/Album/index.tsx +++ b/src/components/Album/index.tsx @@ -186,7 +186,7 @@ function AlbumTrackListHeader(): React.JSX.Element { {album.ProductionYear ? ( - + {album.ProductionYear?.toString() ?? 'Unknown Year'} ) : null} diff --git a/src/components/Global/components/image.tsx b/src/components/Global/components/image.tsx index 467db55b..729c1de1 100644 --- a/src/components/Global/components/image.tsx +++ b/src/components/Global/components/image.tsx @@ -137,7 +137,6 @@ function Image({ return ( - {!isLoaded && } + {!isLoaded && } ) } diff --git a/src/components/Global/helpers/time-codes.tsx b/src/components/Global/helpers/time-codes.tsx index 563b8a29..4a05b2b0 100644 --- a/src/components/Global/helpers/time-codes.tsx +++ b/src/components/Global/helpers/time-codes.tsx @@ -13,13 +13,7 @@ export function RunTimeSeconds({ alignment?: 'center' | 'left' | 'right' }): React.JSX.Element { return ( - + {calculateRunTimeFromSeconds(children)} ) @@ -37,7 +31,7 @@ export function RunTimeTicks({ const time = calculateRunTimeFromTicks(children) return ( - + {time} ) diff --git a/src/components/Player/components/header.tsx b/src/components/Player/components/header.tsx index d5b09e61..418fc727 100644 --- a/src/components/Player/components/header.tsx +++ b/src/components/Player/components/header.tsx @@ -1,14 +1,14 @@ import { XStack, YStack, Spacer, useTheme } from 'tamagui' import { Text } from '../../Global/helpers/text' -import React, { useCallback, useMemo, useRef } from 'react' +import React, { useCallback, useMemo } from 'react' import ItemImage from '../../Global/components/image' import Animated, { - FadeIn, - FadeOut, useAnimatedStyle, useSharedValue, + withSpring, + withTiming, } from 'react-native-reanimated' -import { LayoutChangeEvent, Platform, View } from 'react-native' +import { LayoutChangeEvent, Platform } from 'react-native' import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons' import navigationRef from '../../../../navigation' import { useCurrentTrack, useQueueRef } from '../../../stores/player/queue' @@ -62,37 +62,37 @@ export default function PlayerHeader(): React.JSX.Element { function PlayerArtwork(): React.JSX.Element { const nowPlaying = useCurrentTrack() - const artworkMaxHeight = '65%' - - const artworkMaxWidth = useSharedValue(300) - - const artworkContainerRef = useRef(null) + const artworkMaxHeight = useSharedValue(200) + const artworkMaxWidth = useSharedValue(200) const animatedStyle = useAnimatedStyle(() => ({ - width: artworkMaxWidth.get(), + width: withSpring(artworkMaxWidth.get()), + height: withSpring(artworkMaxWidth.get()), + opacity: withTiming(nowPlaying ? 1 : 0), })) const handleLayout = useCallback((event: LayoutChangeEvent) => { + artworkMaxHeight.set(event.nativeEvent.layout.height) artworkMaxWidth.set(event.nativeEvent.layout.height) }, []) return ( {nowPlaying && ( diff --git a/src/components/Player/components/quality-badge.tsx b/src/components/Player/components/quality-badge.tsx index eba53eca..e2d1ebb2 100644 --- a/src/components/Player/components/quality-badge.tsx +++ b/src/components/Player/components/quality-badge.tsx @@ -1,4 +1,4 @@ -import { Square } from 'tamagui' +import { Spacer, Square } from 'tamagui' import { Text } from '../../Global/helpers/text' import navigationRef from '../../../../navigation' import { parseBitrateFromTranscodingUrl } from '../../../utils/url-parsers' @@ -25,11 +25,13 @@ export default function QualityBadge({ return bitrate && container ? ( { diff --git a/src/components/Player/components/scrubber.tsx b/src/components/Player/components/scrubber.tsx index 4230a6af..22859ceb 100644 --- a/src/components/Player/components/scrubber.tsx +++ b/src/components/Player/components/scrubber.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react' import { HorizontalSlider } from '../../../components/Global/helpers/slider' import { Gesture, GestureDetector } from 'react-native-gesture-handler' -import { XStack, YStack } from 'tamagui' +import { Spacer, XStack, YStack } from 'tamagui' import { useSafeAreaFrame } from 'react-native-safe-area-context' import { useSeekTo } from '../../../providers/Player/hooks/mutations' import { RunTimeSeconds } from '../../../components/Global/helpers/time-codes' @@ -157,21 +157,33 @@ export default function Scrubber(): React.JSX.Element { /> - + {currentSeconds} - - {nowPlaying?.mediaSourceInfo && displayAudioQualityBadge && ( + + {nowPlaying?.mediaSourceInfo && displayAudioQualityBadge ? ( + ) : ( + )} - + {totalSeconds} diff --git a/src/components/Player/mini-player.tsx b/src/components/Player/mini-player.tsx index 7299b013..32509e9c 100644 --- a/src/components/Player/mini-player.tsx +++ b/src/components/Player/mini-player.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react' -import { getToken, Progress, View, XStack, YStack } from 'tamagui' +import { getToken, Progress, XStack, YStack } from 'tamagui' import { useNavigation } from '@react-navigation/native' import { Text } from '../Global/helpers/text' import TextTicker from 'react-native-text-ticker' @@ -11,7 +11,14 @@ import { Progress as TrackPlayerProgress } from 'react-native-track-player' import { useProgress } from '../../providers/Player/hooks/queries' import { Gesture, GestureDetector } from 'react-native-gesture-handler' -import Animated, { FadeIn, FadeOut, useSharedValue, withSpring } from 'react-native-reanimated' +import Animated, { + FadeIn, + FadeInDown, + FadeOut, + FadeOutDown, + useSharedValue, + withSpring, +} from 'react-native-reanimated' import { runOnJS } from 'react-native-worklets' import { RootStackParamList } from '../../screens/types' import { NativeStackNavigationProp } from '@react-navigation/native-stack' @@ -79,10 +86,22 @@ export const Miniplayer = React.memo(function Miniplayer(): React.JSX.Element { return ( - + - + ), }, diff --git a/src/components/Settings/components/usage-tab.tsx b/src/components/Settings/components/usage-tab.tsx index 8af798da..e69be4c3 100644 --- a/src/components/Settings/components/usage-tab.tsx +++ b/src/components/Settings/components/usage-tab.tsx @@ -32,14 +32,14 @@ export default function StorageTab(): React.JSX.Element { onPress: () => navigation.navigate('StorageManagement'), }, { - title: 'Automatically Cache Tracks', + title: 'Auto-Download Tracks', subTitle: 'Download tracks as they are played', iconName: autoDownload ? 'cloud-download' : 'cloud-off-outline', iconColor: autoDownload ? '$success' : '$borderColor', children: ( setAutoDownload(!autoDownload)} /> diff --git a/src/stores/settings/usage.ts b/src/stores/settings/usage.ts index 80c2fddf..a53e153f 100644 --- a/src/stores/settings/usage.ts +++ b/src/stores/settings/usage.ts @@ -1,6 +1,5 @@ import { create } from 'zustand' import { createJSONStorage, devtools, persist } from 'zustand/middleware' -import { Platform } from 'react-native' import { mmkvStateStorage } from '../../constants/storage' import StreamingQuality from '../../enums/audio-quality' @@ -21,7 +20,7 @@ export const useUsageSettingsStore = create()( downloadQuality: StreamingQuality.Original, setDownloadQuality: (downloadQuality: DownloadQuality) => set({ downloadQuality }), - autoDownload: Platform.OS === 'android' || Platform.OS === 'ios', + autoDownload: false, setAutoDownload: (autoDownload) => set({ autoDownload }), }), {