For mozilla-mobile#21894: Move Tabs Tray to compose: Individual tab v…

…iewholders: ListViewHolder.

app/build.gradle

@@ -466,6 +466,7 @@ dependencies {
     implementation Deps.androidx_appcompat
     implementation Deps.androidx_constraintlayout
     implementation Deps.androidx_coordinatorlayout
+    implementation Deps.google_accompanist_drawablepainter
 
     implementation Deps.sentry
 

app/src/main/java/org/mozilla/fenix/FeatureFlags.kt

@@ -98,4 +98,8 @@ object FeatureFlags {
      * Enables receiving from the messaging framework.
      */
     const val messagingFeature = true
+    /**
+     * Enables compose on the tabs tray items.
+     */
+    val composeTabsTray = Config.channel.isDebug
 }

app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt

@@ -32,6 +32,7 @@ import mozilla.components.concept.base.images.ImageLoadRequest
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.components
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 
 /**
  * Card which will display a thumbnail. If a thumbnail is not available for [url], the favicon
@@ -40,6 +41,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
  * @param url Url to display thumbnail for.
  * @param key Key used to remember the thumbnail for future compositions.
  * @param modifier [Modifier] used to draw the image content.
+ * @param contentDescription Text used by accessibility services
+ * to describe what this image represents.
  * @param contentScale [ContentScale] used to draw image content.
  * @param alignment [Alignment] used to draw the image content.
  */
@@ -48,43 +51,50 @@ fun ThumbnailCard(
     url: String,
     key: String,
     modifier: Modifier = Modifier,
+    contentDescription: String? = null,
     contentScale: ContentScale = ContentScale.FillWidth,
     alignment: Alignment = Alignment.TopCenter
 ) {
     Card(
         modifier = modifier,
         backgroundColor = colorResource(id = R.color.photonGrey20)
     ) {
-        components.core.icons.Loader(url) {
-            Placeholder {
-                Box(
-                    modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
-                )
-            }
-
-            WithIcon { icon ->
-                Box(
-                    modifier = Modifier.size(36.dp),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Image(
-                        painter = icon.painter,
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(36.dp)
-                            .clip(RoundedCornerShape(8.dp)),
-                        contentScale = ContentScale.Fit
+        if (inComposePreview) {
+            Box(
+                modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
+            )
+        } else {
+            components.core.icons.Loader(url) {
+                Placeholder {
+                    Box(
+                        modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
                     )
                 }
+
+                WithIcon { icon ->
+                    Box(
+                        modifier = Modifier.size(36.dp),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Image(
+                            painter = icon.painter,
+                            contentDescription = contentDescription,
+                            modifier = Modifier
+                                .size(36.dp)
+                                .clip(RoundedCornerShape(8.dp)),
+                            contentScale = ContentScale.Fit
+                        )
+                    }
+                }
             }
-        }
 
-        ThumbnailImage(
-            key = key,
-            modifier = modifier,
-            contentScale = contentScale,
-            alignment = alignment
-        )
+            ThumbnailImage(
+                key = key,
+                modifier = modifier,
+                contentScale = contentScale,
+                alignment = alignment
+            )
+        }
     }
 }
 
@@ -120,11 +130,13 @@ private fun ThumbnailImage(
 @Preview
 @Composable
 private fun ThumbnailCardPreview() {
-    ThumbnailCard(
-        url = "https://mozilla.com",
-        key = "123",
-        modifier = Modifier
-            .size(108.dp, 80.dp)
-            .clip(RoundedCornerShape(8.dp))
-    )
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        ThumbnailCard(
+            url = "https://mozilla.com",
+            key = "123",
+            modifier = Modifier
+                .size(108.dp, 80.dp)
+                .clip(RoundedCornerShape(8.dp))
+        )
+    }
 }

app/src/main/java/org/mozilla/fenix/compose/tabstray/MediaImage.kt

@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.compose.tabstray
+
+import android.content.res.Configuration
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.accompanist.drawablepainter.rememberDrawablePainter
+import mozilla.components.browser.state.state.TabSessionState
+import mozilla.components.browser.state.state.createTab
+import mozilla.components.concept.engine.mediasession.MediaSession.PlaybackState
+import org.mozilla.fenix.R
+import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
+
+/**
+ * Controller buttons for the media (play/pause) state for the given [tab].
+ *
+ * @param tab [TabSessionState] which the image should be shown.
+ * @param onMediaIconClicked handles the click event when tab has media session like play/pause.
+ * @param modifier [Modifier] to be applied to the layout.
+ */
+@Composable
+fun MediaImage(
+    tab: TabSessionState,
+    onMediaIconClicked: ((TabSessionState) -> Unit),
+    modifier: Modifier,
+) {
+    val (icon, contentDescription) = when (tab.mediaSessionState?.playbackState) {
+        PlaybackState.PAUSED -> {
+            R.drawable.media_state_play to R.string.mozac_feature_media_notification_action_play
+        }
+        PlaybackState.PLAYING -> {
+            R.drawable.media_state_pause to R.string.mozac_feature_media_notification_action_pause
+        }
+        else -> return
+    }
+    val drawable = AppCompatResources.getDrawable(LocalContext.current, icon)
+    // Follow up ticket https://github.com/mozilla-mobile/fenix/issues/25774
+    Image(
+        painter = rememberDrawablePainter(drawable = drawable),
+        contentDescription = stringResource(contentDescription),
+        modifier = modifier.clickable { onMediaIconClicked(tab) },
+    )
+}
+
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun ImagePreview() {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        MediaImage(
+            tab = createTab(url = "https://mozilla.com"),
+            onMediaIconClicked = {},
+            modifier = Modifier
+                .height(100.dp)
+                .width(200.dp)
+        )
+    }
+}