Merge "Update Smartspace media recommendation card based on Droidfood's feedbacks." into sc-dev

8 files changed, 183 insertions, 98 deletions

diff --git a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
index 2ffc16b35b9f..645dba4459a4 100644
--- a/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
+++ b/packages/SystemUI/res/layout/media_smartspace_recommendations.xml
@@ -63,65 +63,101 @@
         android:breakStrategy="balanced"
         android:hyphenationFrequency="none"/>
 
-    <ImageView
-        android:id="@+id/media_cover1"
+    <FrameLayout
+        android:id="@+id/media_cover1_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
-
-    <ImageView
-        android:id="@+id/media_cover2"
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover1"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
+
+    <FrameLayout
+        android:id="@+id/media_cover2_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
-
-    <ImageView
-        android:id="@+id/media_cover3"
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover2"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
+
+    <FrameLayout
+        android:id="@+id/media_cover3_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
-
-    <ImageView
-        android:id="@+id/media_cover4"
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover3"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
+
+    <FrameLayout
+        android:id="@+id/media_cover4_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
-
-    <ImageView
-        android:id="@+id/media_cover5"
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover4"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
+
+    <FrameLayout
+        android:id="@+id/media_cover5_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
-
-    <ImageView
-        android:id="@+id/media_cover6"
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover5"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
+
+    <FrameLayout
+        android:id="@+id/media_cover6_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
-        android:adjustViewBounds="true"
-        android:background="@drawable/bg_smartspace_media_item"
-        style="@style/MediaPlayer.Album"
-        android:clipToOutline="true"
-        android:scaleType="centerCrop"/>
+        android:background="@drawable/qs_media_light_source">
+        <ImageView
+            android:id="@+id/media_cover6"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:adjustViewBounds="true"
+            android:background="@drawable/bg_smartspace_media_item"
+            style="@style/MediaPlayer.Album"
+            android:clipToOutline="true"
+            android:scaleType="centerCrop"/>
+    </FrameLayout>
 
     <!-- Long press menu -->
     <TextView
diff --git a/packages/SystemUI/res/xml/media_recommendation_collapsed.xml b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
index 795c9087cec0..5c41ad82bd0b 100644
--- a/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
+++ b/packages/SystemUI/res/xml/media_recommendation_collapsed.xml
@@ -38,7 +38,7 @@
         app:layout_constraintHorizontal_bias="0" />
 
     <Constraint
-        android:id="@+id/media_cover1"
+        android:id="@+id/media_cover1_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_collapsed"
@@ -48,13 +48,13 @@
         android:layout_marginBottom="@dimen/qs_media_padding"
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
-        app:layout_constraintEnd_toStartOf="@id/media_cover2"
+        app:layout_constraintEnd_toStartOf="@id/media_cover2_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover2"
+        android:id="@+id/media_cover2_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_collapsed"
@@ -63,14 +63,14 @@
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover1"
-        app:layout_constraintEnd_toStartOf="@id/media_cover3"
+        app:layout_constraintStart_toEndOf="@id/media_cover1_container"
+        app:layout_constraintEnd_toStartOf="@id/media_cover3_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover3"
+        android:id="@+id/media_cover3_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_collapsed"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_collapsed"
@@ -78,45 +78,45 @@
         android:layout_marginBottom="@dimen/qs_media_padding"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover2"
+        app:layout_constraintStart_toEndOf="@id/media_cover2_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover4"
+        android:id="@+id/media_cover4_container"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
-        app:layout_constraintTop_toBottomOf="@+id/media_cover1"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover1_container"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
-        app:layout_constraintEnd_toStartOf="@id/media_cover5"
+        app:layout_constraintEnd_toStartOf="@id/media_cover5_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover5"
+        android:id="@+id/media_cover5_container"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
-        app:layout_constraintTop_toBottomOf="@+id/media_cover2"
+        app:layout_constraintTop_toBottomOf="@+id/media_cover2_container"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@+id/media_cover4"
-        app:layout_constraintEnd_toStartOf="@+id/media_cover6"
+        app:layout_constraintStart_toEndOf="@+id/media_cover4_container"
+        app:layout_constraintEnd_toStartOf="@+id/media_cover6_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover6"
+        android:id="@+id/media_cover6_container"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        app:layout_constraintTop_toBottomOf="@id/media_cover3"
+        app:layout_constraintTop_toBottomOf="@id/media_cover3_container"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover5"
+        app:layout_constraintStart_toEndOf="@id/media_cover5_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
diff --git a/packages/SystemUI/res/xml/media_recommendation_expanded.xml b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
index 3d03a9a3c52e..d8e132cc1208 100644
--- a/packages/SystemUI/res/xml/media_recommendation_expanded.xml
+++ b/packages/SystemUI/res/xml/media_recommendation_expanded.xml
@@ -38,7 +38,7 @@
         app:layout_constraintHorizontal_bias="0" />
 
     <Constraint
-        android:id="@+id/media_cover1"
+        android:id="@+id/media_cover1_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -48,7 +48,7 @@
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
-        app:layout_constraintEnd_toStartOf="@id/media_cover2"
+        app:layout_constraintEnd_toStartOf="@id/media_cover2_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         app:layout_constraintVertical_chainStyle="packed"
@@ -56,7 +56,7 @@
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover2"
+        android:id="@+id/media_cover2_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -65,8 +65,8 @@
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
-        app:layout_constraintStart_toEndOf="@id/media_cover1"
-        app:layout_constraintEnd_toStartOf="@id/media_cover3"
+        app:layout_constraintStart_toEndOf="@id/media_cover1_container"
+        app:layout_constraintEnd_toStartOf="@id/media_cover3_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         app:layout_constraintVertical_chainStyle="packed"
@@ -74,7 +74,7 @@
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover3"
+        android:id="@+id/media_cover3_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -82,7 +82,7 @@
         android:layout_marginBottom="@dimen/qs_aa_media_rec_album_margin"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
-        app:layout_constraintStart_toEndOf="@id/media_cover2"
+        app:layout_constraintStart_toEndOf="@id/media_cover2_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
@@ -91,7 +91,7 @@
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover4"
+        android:id="@+id/media_cover4_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -101,7 +101,7 @@
         app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
-        app:layout_constraintEnd_toStartOf="@id/media_cover5"
+        app:layout_constraintEnd_toStartOf="@id/media_cover5_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         app:layout_constraintVertical_chainStyle="packed"
@@ -109,7 +109,7 @@
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover5"
+        android:id="@+id/media_cover5_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -118,8 +118,8 @@
         android:layout_marginEnd="@dimen/qs_aa_media_rec_album_margin"
         app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@+id/media_cover4"
-        app:layout_constraintEnd_toStartOf="@+id/media_cover6"
+        app:layout_constraintStart_toEndOf="@+id/media_cover4_container"
+        app:layout_constraintEnd_toStartOf="@+id/media_cover6_container"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
         app:layout_constraintVertical_chainStyle="packed"
@@ -127,7 +127,7 @@
         android:visibility="gone" />
 
     <Constraint
-        android:id="@+id/media_cover6"
+        android:id="@+id/media_cover6_container"
         android:layout_width="0dp"
         android:layout_height="@dimen/qs_aa_media_rec_album_size_expanded"
         app:layout_constraintWidth_max="@dimen/qs_aa_media_rec_album_size_expanded"
@@ -135,7 +135,7 @@
         android:layout_marginBottom="@dimen/qs_media_padding"
         app:layout_constraintTop_toBottomOf="@id/media_horizontal_center_guideline"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toEndOf="@id/media_cover5"
+        app:layout_constraintStart_toEndOf="@id/media_cover5_container"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="packed"
         app:layout_constraintHorizontal_bias="1"
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
index 18d2c9183bb6..1004e257c750 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselController.kt
@@ -171,7 +171,7 @@ class MediaCarouselController @Inject constructor(
         visualStabilityCallback = VisualStabilityManager.Callback {
             if (needsReordering) {
                 needsReordering = false
-                reorderAllPlayers()
+                reorderAllPlayers(previousVisiblePlayerKey = null)
             }
 
             keysNeedRemoval.forEach { removePlayer(it) }
@@ -285,7 +285,7 @@ class MediaCarouselController @Inject constructor(
         return mediaCarousel
     }
 
-    private fun reorderAllPlayers() {
+    private fun reorderAllPlayers(previousVisiblePlayerKey: MediaPlayerData.MediaSortKey?) {
         mediaContent.removeAllViews()
         for (mediaPlayer in MediaPlayerData.players()) {
             mediaPlayer.playerViewHolder?.let {
@@ -299,9 +299,16 @@ class MediaCarouselController @Inject constructor(
         // Automatically scroll to the active player if needed
         if (shouldScrollToActivePlayer) {
             shouldScrollToActivePlayer = false
-            val activeMediaIndex = MediaPlayerData.activeMediaIndex()
+            val activeMediaIndex = MediaPlayerData.firstActiveMediaIndex()
             if (activeMediaIndex != -1) {
-                mediaCarouselScrollHandler.scrollToActivePlayer(activeMediaIndex)
+                previousVisiblePlayerKey?.let {
+                    val previousVisibleIndex = MediaPlayerData.playerKeys()
+                        .indexOfFirst { key -> it == key }
+                    mediaCarouselScrollHandler
+                        .scrollToPlayer(previousVisibleIndex, activeMediaIndex)
+                } ?: {
+                    mediaCarouselScrollHandler.scrollToPlayer(destIndex = activeMediaIndex)
+                }
             }
         }
     }
@@ -310,6 +317,8 @@ class MediaCarouselController @Inject constructor(
     private fun addOrUpdatePlayer(key: String, oldKey: String?, data: MediaData): Boolean {
         val dataCopy = data.copy(backgroundColor = bgColor)
         val existingPlayer = MediaPlayerData.getMediaPlayer(key, oldKey)
+        val curVisibleMediaKey = MediaPlayerData.playerKeys()
+            .elementAtOrNull(mediaCarouselScrollHandler.visibleMediaIndex)
         if (existingPlayer == null) {
             var newPlayer = mediaControlPanelFactory.get()
             newPlayer.attachPlayer(
@@ -322,12 +331,12 @@ class MediaCarouselController @Inject constructor(
             newPlayer.setListening(currentlyExpanded)
             MediaPlayerData.addMediaPlayer(key, dataCopy, newPlayer)
             updatePlayerToState(newPlayer, noAnimation = true)
-            reorderAllPlayers()
+            reorderAllPlayers(curVisibleMediaKey)
         } else {
             existingPlayer.bindPlayer(dataCopy, key)
             MediaPlayerData.addMediaPlayer(key, dataCopy, existingPlayer)
             if (visualStabilityManager.isReorderingAllowed || shouldScrollToActivePlayer) {
-                reorderAllPlayers()
+                reorderAllPlayers(curVisibleMediaKey)
             } else {
                 needsReordering = true
             }
@@ -367,9 +376,11 @@ class MediaCarouselController @Inject constructor(
             ViewGroup.LayoutParams.WRAP_CONTENT)
         newRecs.recommendationViewHolder?.recommendations?.setLayoutParams(lp)
         newRecs.bindRecommendation(data.copy(backgroundColor = bgColor))
+        val curVisibleMediaKey = MediaPlayerData.playerKeys()
+            .elementAtOrNull(mediaCarouselScrollHandler.visibleMediaIndex)
         MediaPlayerData.addMediaRecommendation(key, data, newRecs, shouldPrioritize)
         updatePlayerToState(newRecs, noAnimation = true)
-        reorderAllPlayers()
+        reorderAllPlayers(curVisibleMediaKey)
         updatePageIndicator()
         mediaCarousel.requiresRemeasuring = true
         // Check postcondition: mediaContent should have the same number of children as there are
@@ -719,9 +730,8 @@ internal object MediaPlayerData {
     )
 
     private val comparator =
-        compareByDescending<MediaSortKey>
-            { if (shouldPrioritizeSs) it.isSsMediaRec else !it.isSsMediaRec }
-            .thenByDescending { it.data.isPlaying }
+        compareByDescending<MediaSortKey> { it.data.isPlaying }
+            .thenByDescending { if (shouldPrioritizeSs) it.isSsMediaRec else !it.isSsMediaRec }
             .thenByDescending { it.data.isLocalSession }
             .thenByDescending { !it.data.resumption }
             .thenByDescending { it.updateTime }
@@ -771,8 +781,10 @@ internal object MediaPlayerData {
 
     fun players() = mediaPlayers.values
 
+    fun playerKeys() = mediaPlayers.keys
+
     /** Returns the index of the first non-timeout media. */
-    fun activeMediaIndex(): Int {
+    fun firstActiveMediaIndex(): Int {
         mediaPlayers.entries.forEachIndexed { index, e ->
             if (!e.key.isSsMediaRec && e.key.data.active) {
                 return index
@@ -791,8 +803,6 @@ internal object MediaPlayerData {
         return null
     }
 
-    fun playerKeys() = mediaPlayers.keys
-
     @VisibleForTesting
     fun clear() {
         mediaData.clear()
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselScrollHandler.kt b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselScrollHandler.kt
index 45ceceba5cba..eb3549789c19 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaCarouselScrollHandler.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaCarouselScrollHandler.kt
@@ -559,8 +559,17 @@ class MediaCarouselScrollHandler(
         scrollView.relativeScrollX = 0
     }
 
-    fun scrollToActivePlayer(activePlayerIndex: Int) {
-        val destIndex = Math.min(mediaContent.getChildCount() - 1, activePlayerIndex)
+    /**
+     * Smooth scroll to the destination player.
+     *
+     * @param sourceIndex optional source index to indicate where the scroll should begin.
+     * @param destIndex destination index to indicate where the scroll should end.
+     */
+    fun scrollToPlayer(sourceIndex: Int = -1, destIndex: Int) {
+        if (sourceIndex >= 0 && sourceIndex < mediaContent.childCount) {
+            scrollView.relativeScrollX = sourceIndex * playerWidthPlusPadding
+        }
+        val destIndex = Math.min(mediaContent.getChildCount() - 1, destIndex)
         val view = mediaContent.getChildAt(destIndex)
         // We need to post this to wait for the active player becomes visible.
         mainExecutor.executeDelayed({
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
index 4201411b168a..c2b580773424 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaControlPanel.java
@@ -36,6 +36,7 @@ import android.media.session.PlaybackState;
 import android.text.Layout;
 import android.util.Log;
 import android.view.View;
+import android.view.ViewGroup;
 import android.widget.ImageButton;
 import android.widget.ImageView;
 import android.widget.TextView;
@@ -45,7 +46,6 @@ import androidx.annotation.Nullable;
 import androidx.annotation.UiThread;
 import androidx.constraintlayout.widget.ConstraintSet;
 
-import com.android.settingslib.Utils;
 import com.android.settingslib.widget.AdaptiveIcon;
 import com.android.systemui.R;
 import com.android.systemui.animation.ActivityLaunchAnimator;
@@ -542,7 +542,10 @@ public class MediaControlPanel {
                 mContext.getString(R.string.controls_media_smartspace_rec_description, appLabel));
 
         List<ImageView> mediaCoverItems = mRecommendationViewHolder.getMediaCoverItems();
+        List<ViewGroup> mediaCoverContainers = mRecommendationViewHolder.getMediaCoverContainers();
         List<Integer> mediaCoverItemsResIds = mRecommendationViewHolder.getMediaCoverItemsResIds();
+        List<Integer> mediaCoverContainersResIds =
+                mRecommendationViewHolder.getMediaCoverContainersResIds();
         ConstraintSet expandedSet = mMediaViewController.getExpandedLayout();
         ConstraintSet collapsedSet = mMediaViewController.getCollapsedLayout();
         int mediaRecommendationNum = Math.min(mediaRecommendationList.size(),
@@ -561,7 +564,8 @@ public class MediaControlPanel {
             mediaCoverImageView.setImageIcon(recommendation.getIcon());
 
             // Set up the media item's click listener if applicable.
-            setSmartspaceRecItemOnClickListener(mediaCoverImageView, recommendation);
+            ViewGroup mediaCoverContainer = mediaCoverContainers.get(uiComponentIndex);
+            setSmartspaceRecItemOnClickListener(mediaCoverContainer, recommendation);
 
             // Set up the accessibility label for the media item.
             String artistName = recommendation.getExtras()
@@ -581,12 +585,18 @@ public class MediaControlPanel {
             if (uiComponentIndex < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
                 setVisibleAndAlpha(collapsedSet,
                         mediaCoverItemsResIds.get(uiComponentIndex), true);
+                setVisibleAndAlpha(collapsedSet,
+                        mediaCoverContainersResIds.get(uiComponentIndex), true);
             } else {
                 setVisibleAndAlpha(collapsedSet,
                         mediaCoverItemsResIds.get(uiComponentIndex), false);
+                setVisibleAndAlpha(collapsedSet,
+                        mediaCoverContainersResIds.get(uiComponentIndex), false);
             }
             setVisibleAndAlpha(expandedSet,
                     mediaCoverItemsResIds.get(uiComponentIndex), true);
+            setVisibleAndAlpha(expandedSet,
+                    mediaCoverContainersResIds.get(uiComponentIndex), true);
 
             uiComponentIndex++;
         }
diff --git a/packages/SystemUI/src/com/android/systemui/media/MediaDataManager.kt b/packages/SystemUI/src/com/android/systemui/media/MediaDataManager.kt
index 13c7f71f53ee..5b1e039ad0f8 100644
--- a/packages/SystemUI/src/com/android/systemui/media/MediaDataManager.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/MediaDataManager.kt
@@ -437,10 +437,10 @@ class MediaDataManager(
      * connection session.
      */
     fun dismissSmartspaceRecommendation(key: String, delay: Long) {
-        Log.d(TAG, "Dismissing Smartspace media target")
         if (smartspaceMediaData.targetId != key) {
             return
         }
+        Log.d(TAG, "Dismissing Smartspace media target")
         if (smartspaceMediaData.isActive) {
             smartspaceMediaData = EMPTY_SMARTSPACE_MEDIA_DATA.copy(
                 targetId = smartspaceMediaData.targetId)
diff --git a/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt b/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
index 78619d652c6c..142628cff448 100644
--- a/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
+++ b/packages/SystemUI/src/com/android/systemui/media/RecommendationViewHolder.kt
@@ -40,6 +40,13 @@ class RecommendationViewHolder private constructor(itemView: View) {
         itemView.requireViewById(R.id.media_cover4),
         itemView.requireViewById(R.id.media_cover5),
         itemView.requireViewById(R.id.media_cover6))
+    val mediaCoverContainers = listOf<ViewGroup>(
+        itemView.requireViewById(R.id.media_cover1_container),
+        itemView.requireViewById(R.id.media_cover2_container),
+        itemView.requireViewById(R.id.media_cover3_container),
+        itemView.requireViewById(R.id.media_cover4_container),
+        itemView.requireViewById(R.id.media_cover5_container),
+        itemView.requireViewById(R.id.media_cover6_container))
     val mediaCoverItemsResIds = listOf<@IntegerRes Int>(
         R.id.media_cover1,
         R.id.media_cover2,
@@ -47,6 +54,13 @@ class RecommendationViewHolder private constructor(itemView: View) {
         R.id.media_cover4,
         R.id.media_cover5,
         R.id.media_cover6)
+    val mediaCoverContainersResIds = listOf<@IntegerRes Int>(
+        R.id.media_cover1_container,
+        R.id.media_cover2_container,
+        R.id.media_cover3_container,
+        R.id.media_cover4_container,
+        R.id.media_cover5_container,
+        R.id.media_cover6_container)
 
     // Settings/Guts screen
     val longPressText = itemView.requireViewById<TextView>(R.id.remove_text)
@@ -58,7 +72,7 @@ class RecommendationViewHolder private constructor(itemView: View) {
 
     init {
         (recommendations.background as IlluminationDrawable).let { background ->
-            mediaCoverItems.forEach { background.registerLightSource(it) }
+            mediaCoverContainers.forEach { background.registerLightSource(it) }
             background.registerLightSource(cancel)
             background.registerLightSource(dismiss)
             background.registerLightSource(dismissLabel)
@@ -100,7 +114,13 @@ class RecommendationViewHolder private constructor(itemView: View) {
             R.id.media_cover3,
             R.id.media_cover4,
             R.id.media_cover5,
-            R.id.media_cover6
+            R.id.media_cover6,
+            R.id.media_cover1_container,
+            R.id.media_cover2_container,
+            R.id.media_cover3_container,
+            R.id.media_cover4_container,
+            R.id.media_cover5_container,
+            R.id.media_cover6_container
         )
 
         // Res Ids for the components on the guts panel.