fix: motionlayout perf

android/app/src/main/res/xml/shortcuts.xml

@@ -14,7 +14,7 @@
   <shortcut
     android:shortcutId="play_all"
     android:enabled="true"
-    android:icon="@drawable/media3_icon_shuffle_on"
+    android:icon="@drawable/media3_icon_circular_play"
     android:shortcutShortLabel="@string/play_all"
     android:shortcutLongLabel="@string/play_all">
     <intent

src/components/miniplayer/Artwork.tsx

@@ -4,7 +4,6 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import { Image } from 'expo-image';
 import { useEffect, useState } from 'react';
 
 import { styles } from '../style';
@@ -28,23 +27,31 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
   const artworkWidth = useDerivedValue(() => {
     return Math.min(miniplayerHeight.value - 25, width);
   });
-  const artworkBottom = useDerivedValue(() => {
-    const val = miniplayerHeight.value - MinPlayerHeight - 5;
-    const overflowBottom = Math.max(0, miniplayerHeight.value - 100 - width);
-    return Math.min(val - overflowBottom);
+  const artworkScale = useDerivedValue(() => {
+    return artworkWidth.value / width;
   });
-  const artworkLeft = useDerivedValue(() => {
-    const val = 5 + MinPlayerHeight - miniplayerHeight.value;
-    if (val < 0) return 0;
-    return val;
+  const expandDiff = useDerivedValue(
+    () => miniplayerHeight.value - MinPlayerHeight,
+  );
+
+  const artworkTranslateY = useDerivedValue(() => {
+    return Math.min(100, 165 + MinPlayerHeight - width + expandDiff.value / 2);
+  });
+  const artworkTranslateX = useDerivedValue(() => {
+    if (expandDiff.value < 6) {
+      return 5 - expandDiff.value + (artworkWidth.value - width) / 2;
+    }
+    return (artworkWidth.value - width) / 2;
   });
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      width: artworkWidth.value,
-      height: artworkWidth.value,
-      bottom: -artworkBottom.value,
-      left: artworkLeft.value,
+      transform: [
+        { translateX: artworkTranslateX.value },
+        { translateY: artworkTranslateY.value },
+        { scaleX: artworkScale.value },
+        { scaleY: artworkScale.value },
+      ],
       opacity: opacity.value,
       zIndex: opacity.value > 0 ? 1 : -1,
     };
@@ -54,7 +61,7 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
     if (miniplayerHeight.value === MinPlayerHeight) {
       return expand();
     }
-    if (artworkWidth.value === width) {
+    if (artworkScale.value === 1) {
       return onPress();
     }
   };
@@ -64,26 +71,25 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
   }, [track]);
 
   return (
-    <Animated.View
-      style={[
-        {
-          position: 'absolute',
-        },
-        animatedStyle,
-      ]}
-    >
-      <TouchableWithoutFeedback onPress={onImagePress}>
-        <Image
-          style={styles.flex}
-          source={
-            hideCoverInMobile
-              ? 0
-              : {
-                  uri: `${overwriteAlbumArt ?? track?.artwork}`,
-                }
-          }
-        />
-      </TouchableWithoutFeedback>
-    </Animated.View>
+    <TouchableWithoutFeedback onPress={onImagePress}>
+      <Animated.Image
+        style={[
+          styles.flex,
+          {
+            width,
+            height: width,
+            position: 'absolute',
+          },
+          animatedStyle,
+        ]}
+        source={
+          hideCoverInMobile
+            ? undefined
+            : {
+                uri: `${overwriteAlbumArt ?? track?.artwork}`,
+              }
+        }
+      />
+    </TouchableWithoutFeedback>
   );
 };