player adjustments

src/components/Player/components/header.tsx

@@ -3,6 +3,9 @@ import { Text } from '../../Global/helpers/text'
 import React from 'react'
 import ItemImage from '../../Global/components/image'
 import Animated, {
+	Easing,
+	FadeIn,
+	FadeOut,
 	SnappySpringConfig,
 	useAnimatedStyle,
 	useSharedValue,
@@ -89,7 +92,12 @@ function PlayerArtwork(): React.JSX.Element {
 			onLayout={handleLayout}
 		>
 			{nowPlaying && item && (
-				<Animated.View key={`${nowPlaying.id}-item-image`} style={animatedStyle}>
+				<Animated.View
+					entering={FadeIn.easing(Easing.in(Easing.ease))}
+					exiting={FadeOut.easing(Easing.out(Easing.ease))}
+					key={`${nowPlaying.id}-item-image`}
+					style={animatedStyle}
+				>
 					<ItemImage
 						item={item}
 						testID='player-image-test-id'

src/components/Player/components/song-info.tsx

@@ -10,7 +10,15 @@ import navigationRef from '../../../screens/navigation'
 import Icon from '../../Global/components/icon'
 import { CommonActions } from '@react-navigation/native'
 import { Gesture } from 'react-native-gesture-handler'
-import { useSharedValue, withDelay, withSpring } from 'react-native-reanimated'
+import Animated, {
+	Easing,
+	FadeIn,
+	FadeOut,
+	LinearTransition,
+	useSharedValue,
+	withDelay,
+	withSpring,
+} from 'react-native-reanimated'
 import type { SharedValue } from 'react-native-reanimated'
 import { runOnJS } from 'react-native-worklets'
 import { usePrevious, useSkip } from '../../../hooks/player/callbacks'
@@ -20,6 +28,7 @@ import { isExplicit } from '../../../utils/trackDetails'
 import { triggerHaptic } from '../../../hooks/use-haptic-feedback'
 import { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client'
 import getTrackDto from '../../../utils/mapping/track-extra-payload'
+import { ICON_PRESS_STYLES } from '../../../configs/style.config'
 
 type SongInfoProps = {
 	// Shared animated value coming from Player to drive overlay icons
@@ -117,22 +126,43 @@ export default function SongInfo({ swipeX }: SongInfoProps = {}): React.JSX.Elem
 	return (
 		<XStack>
 			<YStack justifyContent='flex-start' flex={1} gap={'$1'}>
-				<TextTicker {...TextTickerConfig} key={`${currentTrack?.id ?? 'no-track'}-title`}>
-					<Paragraph fontWeight={'bold'} fontSize={'$6'} onPress={handleTrackPress}>
-						{trackTitle}
-					</Paragraph>
-				</TextTicker>
+				<Animated.View
+					entering={FadeIn.easing(Easing.in(Easing.ease))}
+					exiting={FadeOut.easing(Easing.out(Easing.ease))}
+					key={`${currentTrack?.id ?? 'unknown-track'}-song-info`}
+				>
+					<TextTicker
+						{...TextTickerConfig}
+						key={`${currentTrack?.id ?? 'no-track'}-title`}
+					>
+						<Paragraph
+							fontWeight={'bold'}
+							fontSize={'$6'}
+							onPress={handleTrackPress}
+							{...ICON_PRESS_STYLES}
+						>
+							{trackTitle}
+						</Paragraph>
+					</TextTicker>
 
-				<TextTicker {...TextTickerConfig} key={`${currentTrack?.id ?? 'no-track'}-artist`}>
-					<Paragraph fontSize={'$6'} color={'$color'} onPress={handleArtistPress}>
-						{currentTrack?.artist ?? 'Unknown Artist'}
-					</Paragraph>
-					{isExplicit(item) && (
-						<XStack alignSelf='center' paddingTop={5.3} paddingLeft='$1'>
-							<Icon name='alpha-e-box-outline' color={'$color'} xsmall />
-						</XStack>
-					)}
-				</TextTicker>
+					<TextTicker
+						{...TextTickerConfig}
+						key={`${currentTrack?.id ?? 'no-track'}-artist`}
+					>
+						<Paragraph
+							fontSize={'$6'}
+							onPress={handleArtistPress}
+							{...ICON_PRESS_STYLES}
+						>
+							{currentTrack?.artist ?? 'Unknown Artist'}
+						</Paragraph>
+						{isExplicit(item) && (
+							<XStack alignSelf='center' paddingTop={5.3} paddingLeft='$1'>
+								<Icon name='alpha-e-box-outline' color={'$color'} xsmall />
+							</XStack>
+						)}
+					</TextTicker>
+				</Animated.View>
 			</YStack>
 
 			<XStack justifyContent='flex-end' alignItems='center' flexShrink={1} gap={'$3'}>

src/configs/style.config.ts

@@ -5,3 +5,9 @@ export const BUTTON_PRESS_STYLES: Pick<ViewStyle, 'pressStyle' | 'hoverStyle' |
 	pressStyle: { scale: 0.875 },
 	hoverStyle: { scale: 0.925 },
 }
+
+export const ICON_PRESS_STYLES: Pick<ViewStyle, 'pressStyle' | 'hoverStyle' | 'transition'> = {
+	transition: 'quick',
+	pressStyle: { opacity: 0.6 },
+	hoverStyle: { opacity: 0.8 },
+}

src/hooks/player/callbacks.ts

@@ -203,14 +203,20 @@ export const useReorderQueue = () => {
 
 		PlayerQueue.reorderTrackInPlaylist(playlistId, tracks[fromIndex].id, toIndex)
 
-		const queue = usePlayerQueueStore.getState().queue
+		const { queue: prevQueue, currentIndex: prevIndex } = usePlayerQueueStore.getState()
 
-		const itemToMove = queue[fromIndex]
-		const newQueue = [...queue]
+		const newIndex = prevIndex === fromIndex ? toIndex : prevIndex
+
+		const itemToMove = prevQueue[fromIndex]
+		const newQueue = [...prevQueue]
 		newQueue.splice(fromIndex, 1)
 		newQueue.splice(toIndex, 0, itemToMove)
 
-		usePlayerQueueStore.getState().setQueue(newQueue)
+		usePlayerQueueStore.setState((state) => ({
+			...state,
+			queue: newQueue,
+			currentIndex: newIndex,
+		}))
 	}
 }