diff --git a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesPage.kt b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesPage.kt index 1dc67820de9..76b29b65bc8 100644 --- a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesPage.kt +++ b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesPage.kt @@ -94,6 +94,7 @@ private val ShareButtonStrokeWidth = 2.dp private val StoryViewCornerSize = 10.dp private val StoriesViewMaxSize = 700.dp private const val MaxHeightPercentFactor = 0.9f +private const val LongPressThresholdTimeInMs = 150 const val StoriesViewAspectRatioForTablet = 2f @OptIn(ExperimentalComposeUiApi::class) @@ -303,7 +304,7 @@ private fun StoriesErrorView( StoriesEmptyView( content = { TextP50( - text = "Failed to load stories.", // TODO: replace hardcoded text + text = stringResource(id = LR.string.end_of_year_stories_failed), color = Color.White, ) }, @@ -343,7 +344,6 @@ private fun StorySwitcher( content: (@Composable () -> Unit)?, ) { var screenWidth by remember { mutableStateOf(1) } - var isPaused by remember { mutableStateOf(false) } Box( modifier = modifier .fillMaxSize() @@ -352,24 +352,24 @@ private fun StorySwitcher( } .pointerInput(Unit) { detectTapGestures( - onTap = { - if (!isPaused) { - if (it.x > screenWidth / 2) { - onSkipNext() + onPress = { + val pressStartTime = System.currentTimeMillis() + onPause() + val isReleased = tryAwaitRelease() + if (isReleased) { + val pressEndTime = System.currentTimeMillis() + val diffPressTime = pressEndTime - pressStartTime + if (diffPressTime < LongPressThresholdTimeInMs) { + if (it.x > screenWidth / 2) { + onSkipNext() + } else { + onSkipPrevious() + } } else { - onSkipPrevious() + onStart() } - } - }, - onLongPress = { - isPaused = true - onPause() - }, - onPress = { - awaitRelease() - if (isPaused) { + } else { onStart() - isPaused = false } } ) diff --git a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesViewModel.kt b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesViewModel.kt index 7267f46977d..80d71401e00 100644 --- a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesViewModel.kt +++ b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesViewModel.kt @@ -79,6 +79,8 @@ class StoriesViewModel @Inject constructor( } fun start() { + if (timer != null) clear() + val currentState = state.value as State.Loaded val progressFraction = (PROGRESS_UPDATE_INTERVAL_MS / totalLengthInMs.toFloat()) diff --git a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/utils/StoryModifierExtensions.kt b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/utils/StoryModifierExtensions.kt index bab30da6ab9..04d6e01ef02 100644 --- a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/utils/StoryModifierExtensions.kt +++ b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/utils/StoryModifierExtensions.kt @@ -9,6 +9,9 @@ import androidx.compose.ui.graphics.graphicsLayer import au.com.shiftyjelly.pocketcasts.models.entity.Podcast fun Modifier.podcastDynamicBackground(podcast: Podcast) = + dynamicBackground(Color(podcast.getTintColor(false))) + +fun Modifier.dynamicBackground(color: Color) = graphicsLayer { /* https://rb.gy/iju6fn @@ -20,7 +23,7 @@ fun Modifier.podcastDynamicBackground(podcast: Podcast) = Color.Black, Color(0x80000000), // 50% Black ) - drawRect(color = Color(podcast.getTintColor(false))) + drawRect(color = color) drawRect( brush = Brush.verticalGradient( colors, diff --git a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt index 60ea54ed80f..fe6c2ea6499 100644 --- a/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt +++ b/modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt @@ -1,30 +1,37 @@ package au.com.shiftyjelly.pocketcasts.endofyear.views.stories +import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material.Button import androidx.compose.material.ButtonDefaults import androidx.compose.material.Icon -import androidx.compose.material.Surface -import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Refresh import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import au.com.shiftyjelly.pocketcasts.compose.AppTheme -import au.com.shiftyjelly.pocketcasts.compose.components.TextH30 -import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider -import au.com.shiftyjelly.pocketcasts.localization.R +import au.com.shiftyjelly.pocketcasts.compose.components.TextP40 +import au.com.shiftyjelly.pocketcasts.endofyear.R +import au.com.shiftyjelly.pocketcasts.endofyear.components.PodcastLogoWhite +import au.com.shiftyjelly.pocketcasts.endofyear.components.StoryPrimaryText +import au.com.shiftyjelly.pocketcasts.endofyear.components.StorySecondaryText +import au.com.shiftyjelly.pocketcasts.endofyear.utils.dynamicBackground import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryEpilogue -import au.com.shiftyjelly.pocketcasts.ui.theme.Theme +import au.com.shiftyjelly.pocketcasts.localization.R as LR + +private val HeartImageSize = 72.dp +private const val BackgroundColor = 0xFFFDDC68 @Composable fun StoryEpilogueView( @@ -32,25 +39,70 @@ fun StoryEpilogueView( onReplayClicked: () -> Unit, modifier: Modifier = Modifier, ) { + Column( horizontalAlignment = Alignment.CenterHorizontally, + modifier = modifier + .fillMaxSize() + .dynamicBackground(Color(BackgroundColor)) + .verticalScroll(rememberScrollState()) ) { - TextH30( - text = "Thank you for letting Pocket Casts be a part of your listening experience in 2022", - color = story.tintColor, - textAlign = TextAlign.Center, - modifier = modifier.padding(16.dp) - ) - TextH30( - text = "Don't forget to share with your friends and give a shout out to your favorite podcasts creators", - color = story.tintColor, - textAlign = TextAlign.Center, - modifier = modifier.padding(16.dp) - ) + Spacer(modifier = modifier.height(40.dp)) + + Spacer(modifier = modifier.weight(1f)) + + HeartImage() + + Spacer(modifier = modifier.weight(0.34f)) + + PrimaryText(story) + + Spacer(modifier = modifier.weight(0.16f)) + + SecondaryText(story) + + Spacer(modifier = modifier.weight(0.32f)) + ReplayButton(onClick = onReplayClicked) + + Spacer(modifier = modifier.weight(1f)) + + PodcastLogoWhite() + + Spacer(modifier = modifier.height(40.dp)) } } +@Composable +private fun HeartImage( + modifier: Modifier = Modifier, +) { + Image( + painter = painterResource(id = R.drawable.heart), + contentDescription = null, + modifier = modifier + .size(HeartImageSize) + ) +} + +@Composable +private fun PrimaryText( + story: StoryEpilogue, + modifier: Modifier = Modifier, +) { + val text = stringResource(id = LR.string.end_of_year_story_epilogue_title) + StoryPrimaryText(text = text, color = story.tintColor, modifier = modifier) +} + +@Composable +private fun SecondaryText( + story: StoryEpilogue, + modifier: Modifier = Modifier, +) { + val text = stringResource(id = LR.string.end_of_year_story_epilogue_subtitle) + StorySecondaryText(text = text, color = story.tintColor, modifier = modifier) +} + @Composable private fun ReplayButton( onClick: () -> Unit, @@ -58,32 +110,27 @@ private fun ReplayButton( ) { Button( onClick = { onClick() }, + elevation = ButtonDefaults.elevation( + defaultElevation = 0.dp, + pressedElevation = 0.dp, + hoveredElevation = 0.dp, + focusedElevation = 0.dp, + ), colors = ButtonDefaults - .outlinedButtonColors( + .buttonColors( backgroundColor = Color.Transparent, - contentColor = Color.White, + contentColor = Color.Transparent ), ) { - Icon(imageVector = Icons.Default.Refresh, contentDescription = "") - Text( - text = stringResource(id = R.string.end_of_year_replay), - fontSize = 18.sp, + Icon( + imageVector = Icons.Default.Refresh, + contentDescription = null, + tint = Color.White + ) + TextP40( + text = stringResource(id = LR.string.end_of_year_replay), + color = Color.White, modifier = modifier.padding(2.dp) ) } } - -@Preview(showBackground = true) -@Composable -private fun StoryEpiloguePreview( - @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType, -) { - AppTheme(themeType) { - Surface(color = Color.Black) { - StoryEpilogueView( - StoryEpilogue(), - onReplayClicked = {} - ) - } - } -} diff --git a/modules/features/endofyear/src/main/res/drawable/heart.xml b/modules/features/endofyear/src/main/res/drawable/heart.xml new file mode 100644 index 00000000000..36f5482c9f0 --- /dev/null +++ b/modules/features/endofyear/src/main/res/drawable/heart.xml @@ -0,0 +1,14 @@ + + + +