From 5a55a662a82308580a75817fe1841e8162ed7f1e Mon Sep 17 00:00:00 2001
From: vfsfitvnm <vfsfitvnm@protonmail.com>
Date: Mon, 5 Sep 2022 15:24:48 +0200
Subject: [PATCH] Improve player cover transition

---
 .../vfsfitvnm/vimusic/ui/views/PlayerView.kt  |  6 ++--
 .../vimusic/ui/views/player/Thumbnail.kt      | 36 ++++++++++++++-----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt
index fb0ac39..6461bec 100644
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt
@@ -250,7 +250,6 @@ fun PlayerView(
                         contentAlignment = Alignment.Center,
                         modifier = Modifier
                             .weight(0.66f)
-                            .padding(horizontal = 16.dp)
                             .padding(bottom = 16.dp)
                     ) {
                         Thumbnail(
@@ -259,6 +258,8 @@ fun PlayerView(
                             isShowingStatsForNerds = isShowingStatsForNerds,
                             onShowStatsForNerds = { isShowingStatsForNerds = it },
                             nestedScrollConnectionProvider = layoutState::nestedScrollConnection,
+                            modifier = Modifier
+                                .padding(horizontal = 16.dp)
                         )
                     }
 
@@ -292,7 +293,6 @@ fun PlayerView(
                         contentAlignment = Alignment.Center,
                         modifier = Modifier
                             .weight(1.25f)
-                            .padding(horizontal = 32.dp, vertical = 8.dp)
                     ) {
                         Thumbnail(
                             isShowingLyrics = isShowingLyrics,
@@ -300,6 +300,8 @@ fun PlayerView(
                             isShowingStatsForNerds = isShowingStatsForNerds,
                             onShowStatsForNerds = { isShowingStatsForNerds = it },
                             nestedScrollConnectionProvider = layoutState::nestedScrollConnection,
+                            modifier = Modifier
+                                .padding(horizontal = 32.dp, vertical = 8.dp)
                         )
                     }
 
diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/player/Thumbnail.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/player/Thumbnail.kt
index 83859b2..4577241 100644
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/player/Thumbnail.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/player/Thumbnail.kt
@@ -2,11 +2,14 @@ package it.vfsfitvnm.vimusic.ui.views.player
 
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedContentScope
+import androidx.compose.animation.ContentTransform
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.with
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
@@ -61,24 +64,41 @@ fun Thumbnail(
     AnimatedContent(
         targetState = mediaItemIndex,
         transitionSpec = {
+            val duration = 500
             val slideDirection =
                 if (targetState > initialState) AnimatedContentScope.SlideDirection.Left else AnimatedContentScope.SlideDirection.Right
 
-            (slideIntoContainer(slideDirection) + fadeIn() with
-                    slideOutOfContainer(slideDirection) + fadeOut()).using(
-                SizeTransform(clip = false)
+            ContentTransform(
+                targetContentEnter = slideIntoContainer(
+                    towards = slideDirection,
+                    animationSpec = tween(duration)
+                ) + fadeIn(
+                    animationSpec = tween(duration)
+                ) + scaleIn(
+                    initialScale = 0.85f,
+                    animationSpec = tween(duration)
+                ),
+                initialContentExit = slideOutOfContainer(
+                    towards = slideDirection,
+                    animationSpec = tween(duration)
+                ) + fadeOut(
+                    animationSpec = tween(duration)
+                ) + scaleOut(
+                    targetScale = 0.85f,
+                    animationSpec = tween(duration)
+                ),
+                sizeTransform = SizeTransform(clip = false)
             )
         },
-        contentAlignment = Alignment.Center,
-        modifier = modifier
-            .aspectRatio(1f)
+        contentAlignment = Alignment.Center
     ) { currentMediaItemIndex ->
         val mediaItem = remember(currentMediaItemIndex) {
             player.getMediaItemAt(currentMediaItemIndex)
         }
 
         Box(
-            modifier = Modifier
+            modifier = modifier
+                .aspectRatio(1f)
                 .clip(ThumbnailRoundness.shape)
                 .size(thumbnailSizeDp)
         ) {