diff --git a/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt b/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt index fc6e0fedbd..07e9f6bf0e 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt @@ -17,6 +17,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.graphics.painter.BitmapPainter @@ -24,6 +25,7 @@ import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.colorResource import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import mozilla.components.browser.icons.compose.Loader import mozilla.components.browser.icons.compose.Placeholder @@ -40,6 +42,8 @@ import org.mozilla.fenix.theme.Theme * * @param url Url to display thumbnail for. * @param key Key used to remember the thumbnail for future compositions. + * @param size [Dp] size of the thumbnail. + * @param backgroundColor [Color] used for the background of the favicon. * @param modifier [Modifier] used to draw the image content. * @param contentDescription Text used by accessibility services * to describe what this image represents. @@ -50,6 +54,8 @@ import org.mozilla.fenix.theme.Theme fun ThumbnailCard( url: String, key: String, + size: Dp = 108.dp, + backgroundColor: Color = colorResource(id = R.color.photonGrey20), modifier: Modifier = Modifier, contentDescription: String? = null, contentScale: ContentScale = ContentScale.FillWidth, @@ -57,7 +63,7 @@ fun ThumbnailCard( ) { Card( modifier = modifier, - backgroundColor = colorResource(id = R.color.photonGrey20) + backgroundColor = backgroundColor ) { if (inComposePreview) { Box( @@ -90,6 +96,7 @@ fun ThumbnailCard( ThumbnailImage( key = key, + size = size, modifier = modifier, contentScale = contentScale, alignment = alignment @@ -101,13 +108,14 @@ fun ThumbnailCard( @Composable private fun ThumbnailImage( key: String, + size: Dp, modifier: Modifier, contentScale: ContentScale, alignment: Alignment ) { val rememberBitmap = remember(key) { mutableStateOf(null) } - val size = LocalDensity.current.run { 108.dp.toPx().toInt() } - val request = ImageLoadRequest(key, size) + val thumbnailSize = LocalDensity.current.run { size.toPx().toInt() } + val request = ImageLoadRequest(key, thumbnailSize) val storage = components.core.thumbnailStorage val bitmap = rememberBitmap.value diff --git a/app/src/main/java/org/mozilla/fenix/compose/tabstray/GridTabThumbnail.kt b/app/src/main/java/org/mozilla/fenix/compose/tabstray/GridTabThumbnail.kt deleted file mode 100644 index 4af75fdc98..0000000000 --- a/app/src/main/java/org/mozilla/fenix/compose/tabstray/GridTabThumbnail.kt +++ /dev/null @@ -1,123 +0,0 @@ -/* 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 androidx.compose.foundation.Image -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding -import androidx.compose.material.Card -import androidx.compose.material.Icon -import androidx.compose.material.Surface -import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.ImageBitmap -import androidx.compose.ui.graphics.asImageBitmap -import androidx.compose.ui.graphics.painter.BitmapPainter -import androidx.compose.ui.layout.ContentScale -import androidx.compose.ui.platform.LocalConfiguration -import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.platform.LocalDensity -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.dp -import mozilla.components.concept.base.images.ImageLoadRequest -import org.mozilla.fenix.R -import org.mozilla.fenix.compose.inComposePreview -import org.mozilla.fenix.ext.components -import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme - -/** - * Card which will display the thumbnail for a tab. If a thumbnail is not available for the [tabId], - * the favicon [R.drawable.mozac_ic_globe] icon will be displayed. - * - * @param tabId 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. - */ -@Composable -@Suppress("LongParameterList") -fun GridTabThumbnail( - tabId: String, - size: Dp, - modifier: Modifier = Modifier, - contentDescription: String? = null, - contentScale: ContentScale = ContentScale.FillWidth, - alignment: Alignment = Alignment.TopCenter -) { - Card( - modifier = modifier, - backgroundColor = FirefoxTheme.colors.layer2 - ) { - if (inComposePreview) { - GlobeIcon() - } else { - val rememberBitmap = remember(tabId) { mutableStateOf(null) } - val imageSize = LocalDensity.current.run { size.toPx().toInt() } - val request = ImageLoadRequest(tabId, imageSize) - val storage = LocalContext.current.components.core.thumbnailStorage - val bitmap = rememberBitmap.value - - LaunchedEffect(tabId) { - rememberBitmap.value = storage.loadThumbnail(request).await()?.asImageBitmap() - } - - if (bitmap != null) { - val painter = BitmapPainter(bitmap) - Image( - painter = painter, - contentDescription = contentDescription, - modifier = modifier, - contentScale = contentScale, - alignment = alignment - ) - } else { - GlobeIcon() - } - } - } -} - -/** - * Globe icon to be displayed when no thumbnail is available. - */ -@Composable -private fun GlobeIcon() { - Icon( - painter = painterResource(id = R.drawable.mozac_ic_globe), - contentDescription = null, - modifier = Modifier - .padding(22.dp) - .fillMaxSize(), - tint = FirefoxTheme.colors.iconSecondary - ) -} - -@Preview -@Composable -private fun ThumbnailCardPreview() { - FirefoxTheme(theme = Theme.getTheme()) { - Surface( - modifier = Modifier - .fillMaxWidth() - .height(300.dp) - ) { - GridTabThumbnail( - tabId = "1", - size = LocalConfiguration.current.screenWidthDp.dp - ) - } - } -} diff --git a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt index ebfc12cb86..dcee652bd7 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt @@ -48,6 +48,7 @@ import mozilla.components.browser.state.state.createTab import org.mozilla.fenix.R import org.mozilla.fenix.compose.Favicon import org.mozilla.fenix.compose.HorizontalFadingEdgeBox +import org.mozilla.fenix.compose.ThumbnailCard import org.mozilla.fenix.theme.FirefoxTheme /** @@ -197,9 +198,12 @@ private fun Thumbnail( .fillMaxSize() .background(FirefoxTheme.colors.layer2) ) { - GridTabThumbnail( - tabId = tab.id, - size = LocalConfiguration.current.screenWidthDp.dp + ThumbnailCard( + url = tab.content.url, + key = tab.id, + size = LocalConfiguration.current.screenWidthDp.dp, + backgroundColor = FirefoxTheme.colors.layer2, + modifier = Modifier.fillMaxSize() ) if (multiSelectionSelected) {