Improve player cover transition

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)
                         )
                     }
 

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
+            ContentTransform(
-                    slideOutOfContainer(slideDirection) + fadeOut()).using(
+                targetContentEnter = slideIntoContainer(
-                SizeTransform(clip = false)
+                    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,
+        contentAlignment = Alignment.Center
-        modifier = modifier
-            .aspectRatio(1f)
     ) { currentMediaItemIndex ->
         val mediaItem = remember(currentMediaItemIndex) {
             player.getMediaItemAt(currentMediaItemIndex)
         }
 
         Box(
-            modifier = Modifier
+            modifier = modifier
+                .aspectRatio(1f)
                 .clip(ThumbnailRoundness.shape)
                 .size(thumbnailSizeDp)
         ) {