feat(mobile): player cover scale transition

[hyoban]

Description

PR Type

• Feature
• Bugfix
• Hotfix
• Other (please describe):

Screenshots (if UI change)

Demo Video (if new feature)

Linked Issues

Additional context

Changelog

• I have updated the changelog/next.md with my changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
follow	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 26, 2025 4:05pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
follow-external-ssr	⬜️ Ignored (Inspect)	Visit Preview		Feb 26, 2025 4:05pm

[follow-reviewer-bot]

Suggested PR Title:

feat(player): add animated cover art component

Change Summary:
Refactored player screen to include animated cover art component, enhancing visual appeal by scaling the cover art based on playback state.

Code Review:

Code Review for apps/mobile/src/screens/player.tsx

Issues Requiring Change Requests

1. Line 11 (CoverArt Component Return Value)

   • The Image component is improperly imported and used. The code does not declare the Image import, leading to a potential runtime error. Likely, the Image component should be imported from react-native.
   • Suggested Fix: Add the following import at the top of the file:

     import { Image } from "react-native"

2. Line 16 (useEffect Dependency Array)

   • scale is a mutable sharedValue from react-native-reanimated. Adding it directly into the dependency array may cause unnecessary re-renders or unexpected behavior. The React guidelines discourage including objects or functions as dependencies unless they're memoized or static.
   • Suggested Fix: Remove scale from the dependency array or refactor the code to wrap scale updates in a function that does not trigger re-renders. Example:

     useEffect(() => {
       scale.value = playing ? 1 : 0.7
     }, [playing])

3. Line 18 (Playing Destructuring)

   • The useIsPlaying hook is being destructured to access playing, but the implementation and naming of useIsPlaying imply it should return a boolean, not an object. This could lead to confusion regarding the hook’s API or runtime errors if the return type is not correct.
   • Suggested Fix: Clarify and verify the API of useIsPlaying to avoid mistaken assumptions about its return type. If it returns an object, update the naming to reflect that, such as usePlayingState. If it returns a boolean, update the code to avoid destructuring:

     const playing = useIsPlaying()

4. Line 15-25 (Missing Error/Loading Handling for cover)

   • The cover prop for CoverArt is expected to be a valid source object. However, there’s no handling for when cover is undefined or when it fails to load. This could lead to layout or functional issues if cover is invalid.
   • Suggested Fix: Add a fallback or error-handling mechanism. Example:

     function CoverArt({ cover }: { cover?: string }) {
       const placeholderImage = require("../assets/placeholder-image.png")
       return (
         <Reanimated.View className="..." style={[animatedStyle]}>
           <Image source={cover ? { uri: cover } : placeholderImage} className="..." />
         </Reanimated.View>
       )
     }

5. Line 14 (CoverArt Component Animation Configuration)

   • The spring configuration for withSpring is not provided. This could lead to inconsistent animations on slower or different devices, as default configurations may not yield the desired smoothness or responsiveness.
   • Suggested Fix: Pass a configuration object to withSpring for consistency. Example:

     transform: [{ scale: withSpring(scale.value, { damping: 10, stiffness: 100 }) }],

Summary of Issues

1. Missing Image import (Line 11).
2. Improper inclusion of scale in the useEffect dependency array (Line 16).
3. Confusion regarding the return type of useIsPlaying (Line 18).
4. Missing fallback/error handling for cover in CoverArt (Lines 15-25).
5. Lack of animation configuration for withSpring (Line 14).

---

Let me know if you need assistance adjusting these!