From 50f7e312fae5cb68691e69de93f6430eb30bf9e1 Mon Sep 17 00:00:00 2001
From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com>
Date: Fri, 15 Nov 2024 07:12:01 -0800
Subject: [PATCH 1/3] fix: motionlayout perf

---
 src/components/miniplayer/Artwork.tsx | 35 ++++++++++-----------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/components/miniplayer/Artwork.tsx b/src/components/miniplayer/Artwork.tsx
index ba665980..18d3590a 100644
--- a/src/components/miniplayer/Artwork.tsx
+++ b/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';
@@ -47,6 +46,7 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
       left: artworkLeft.value,
       opacity: opacity.value,
       zIndex: opacity.value > 0 ? 1 : -1,
+      position: 'absolute',
     };
   });
 
@@ -64,26 +64,17 @@ 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, animatedStyle]}
+        source={
+          hideCoverInMobile
+            ? 0
+            : {
+                uri: `${overwriteAlbumArt ?? track?.artwork}`,
+              }
+        }
+      />
+    </TouchableWithoutFeedback>
   );
 };

From 530cc31f4b884604a6b6f61a59edea4a70d4596b Mon Sep 17 00:00:00 2001
From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com>
Date: Fri, 15 Nov 2024 08:41:43 -0800
Subject: [PATCH 2/3] fix: motionlayout perf

use transform instead of left/bottom
---
 android/app/src/main/res/xml/shortcuts.xml |  2 +-
 src/components/miniplayer/Artwork.tsx      | 45 ++++++++++++++--------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/android/app/src/main/res/xml/shortcuts.xml b/android/app/src/main/res/xml/shortcuts.xml
index 90078d37..e1538c8b 100644
--- a/android/app/src/main/res/xml/shortcuts.xml
+++ b/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
diff --git a/src/components/miniplayer/Artwork.tsx b/src/components/miniplayer/Artwork.tsx
index 18d3590a..b939913d 100644
--- a/src/components/miniplayer/Artwork.tsx
+++ b/src/components/miniplayer/Artwork.tsx
@@ -27,26 +27,33 @@ 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,
-      position: 'absolute',
     };
   });
 
@@ -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();
     }
   };
@@ -66,7 +73,15 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
   return (
     <TouchableWithoutFeedback onPress={onImagePress}>
       <Animated.Image
-        style={[styles.flex, animatedStyle]}
+        style={[
+          styles.flex,
+          {
+            width,
+            height: width,
+            position: 'absolute',
+          },
+          animatedStyle,
+        ]}
         source={
           hideCoverInMobile
             ? 0

From 2c07f0f4f56e747b4c4523475293c0d3dfb755fd Mon Sep 17 00:00:00 2001
From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com>
Date: Fri, 15 Nov 2024 08:42:38 -0800
Subject: [PATCH 3/3] fix: motionlayout perf

---
 src/components/miniplayer/Artwork.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/miniplayer/Artwork.tsx b/src/components/miniplayer/Artwork.tsx
index b939913d..3f37a079 100644
--- a/src/components/miniplayer/Artwork.tsx
+++ b/src/components/miniplayer/Artwork.tsx
@@ -84,7 +84,7 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
         ]}
         source={
           hideCoverInMobile
-            ? 0
+            ? undefined
             : {
                 uri: `${overwriteAlbumArt ?? track?.artwork}`,
               }