diff --git a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt index 22557f7b7e..00ccc3dce2 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt +++ b/app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt @@ -112,7 +112,7 @@ fun ListItemTabLarge( * @param tabDetails [Composable] Displayed to the the end of the image. Allows for variation in the item text style. */ @Composable -private fun ListItemTabSurface( +fun ListItemTabSurface( imageUrl: String, onClick: (() -> Unit)? = null, tabDetails: @Composable () -> Unit @@ -159,3 +159,18 @@ private fun ListItemTabLargePreview() { ) { } } } + +@Composable +@Preview +private fun ListItemTabSurfacePreview() { + FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) { + ListItemTabSurface( + imageUrl = "" + ) { + PrimaryText( + text = "This can be anything", + fontSize = 22.sp + ) + } + } +} diff --git a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt index f5783cae5d..8565484379 100644 --- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt +++ b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt @@ -39,11 +39,14 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import mozilla.components.service.pocket.PocketStory import mozilla.components.service.pocket.PocketStory.PocketRecommendedStory +import mozilla.components.service.pocket.PocketStory.PocketSponsoredStory +import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim import org.mozilla.fenix.R import org.mozilla.fenix.compose.ClickableSubstringLink import org.mozilla.fenix.compose.EagerFlingBehavior import org.mozilla.fenix.compose.ListItemTabLarge import org.mozilla.fenix.compose.ListItemTabLargePlaceholder +import org.mozilla.fenix.compose.ListItemTabSurface import org.mozilla.fenix.compose.SelectableChip import org.mozilla.fenix.compose.StaggeredHorizontalGrid import org.mozilla.fenix.compose.PrimaryText @@ -114,6 +117,63 @@ fun PocketStory( ) } +/** + * Displays a single [PocketSponsoredStory]. + * + * @param story The [PocketSponsoredStory] to be displayed. + * @param onStoryClick Callback for when the user taps on this story. + */ +@Composable +fun PocketSponsoredStory( + story: PocketSponsoredStory, + onStoryClick: (PocketSponsoredStory) -> Unit +) { + val (imageWidth, imageHeight) = with(LocalDensity.current) { + 116.dp.toPx().roundToInt() to 84.dp.toPx().roundToInt() + } + val imageUrl = story.imageUrl.replace( + "&resize=w[0-9]+-h[0-9]+".toRegex(), + "&resize=w$imageWidth-h$imageHeight" + ) + + ListItemTabSurface(imageUrl, { onStoryClick(story) }) { + PrimaryText( + text = story.title, + fontSize = 14.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 2, + ) + + Spacer(Modifier.height(9.dp)) + + Row(verticalAlignment = Alignment.CenterVertically) { + Icon( + painter = painterResource(id = R.drawable.pocket_star_stroke), + contentDescription = null, + tint = FirefoxTheme.colors.iconSecondary, + ) + + Spacer(Modifier.width(8.dp)) + + SecondaryText( + text = stringResource(R.string.pocket_stories_sponsor_indication), + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) + } + + Spacer(Modifier.height(7.dp)) + + SecondaryText( + text = story.sponsor, + fontSize = 12.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + ) + } +} + /** * Displays a list of [PocketStory]es on 3 by 3 grid. * If there aren't enough stories to fill all columns placeholders containing an external link @@ -160,6 +220,10 @@ fun PocketStories( .build().toString() onStoryClicked(it.copy(url = uri), rowIndex to columnIndex) } + } else if (story is PocketSponsoredStory) { + PocketSponsoredStory(story) { + onStoryClicked(story, rowIndex to columnIndex) + } } } } @@ -291,19 +355,30 @@ private class PocketStoryProvider : PreviewParameterProvider { } internal fun getFakePocketStories(limit: Int = 1): List { - return mutableListOf().apply { + return mutableListOf().apply { for (index in 0 until limit) { - add( - PocketRecommendedStory( - title = "This is a ${"very ".repeat(index)} long title", - publisher = "Publisher", - url = "https://story$index.com", - imageUrl = "", - timeToRead = index, - category = "Category #$index", - timesShown = index.toLong() + when (index % 2 == 0) { + true -> add( + PocketRecommendedStory( + title = "This is a ${"very ".repeat(index)} long title", + publisher = "Publisher", + url = "https://story$index.com", + imageUrl = "", + timeToRead = index, + category = "Category #$index", + timesShown = index.toLong() + ) ) - ) + false -> add( + PocketSponsoredStory( + title = "This is a ${"very ".repeat(index)} long title", + url = "https://sponsored-story$index.com", + imageUrl = "", + sponsor = "Mozilla", + shim = PocketSponsoredStoryShim("", "") + ) + ) + } } } } diff --git a/app/src/main/res/drawable/pocket_star_stroke.xml b/app/src/main/res/drawable/pocket_star_stroke.xml new file mode 100644 index 0000000000..28b8b7dbad --- /dev/null +++ b/app/src/main/res/drawable/pocket_star_stroke.xml @@ -0,0 +1,15 @@ + + + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index ad4224f697..86dd6757fd 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1823,6 +1823,8 @@ Part of the Firefox family. %s Learn more + + Sponsored Enable telemetry to send data.