Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

End of Year: Design tweaks (part ii) #619

Merged
merged 18 commits into from
Dec 1, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
Expand Down Expand Up @@ -204,12 +203,13 @@ private fun StoriesView(
}
CloseButtonView(onCloseClicked)
}
}
requireNotNull(onCaptureBitmap).let {
ShareButton(
onClick = { if (state.showShare) { onShareClicked.invoke(it) } },
modifier = modifier.alpha(if (state.showShare) 1f else 0f)
)
if (state.currentStory.shareable) {
requireNotNull(onCaptureBitmap).let {
ShareButton(
onClick = { onShareClicked.invoke(it) },
)
}
}
}
}
}
Expand Down Expand Up @@ -261,7 +261,7 @@ private fun StorySharableContent(
@Composable
private fun ShareButton(
onClick: () -> Unit,
modifier: Modifier,
modifier: Modifier = Modifier,
) {
RowOutlinedButton(
text = stringResource(id = LR.string.share),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import au.com.shiftyjelly.pocketcasts.endofyear.ShareableTextProvider.ShareTextD
import au.com.shiftyjelly.pocketcasts.endofyear.StoriesViewModel.State.Loaded.SegmentsData
import au.com.shiftyjelly.pocketcasts.repositories.endofyear.EndOfYearManager
import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.Story
import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryEpilogue
import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryIntro
import au.com.shiftyjelly.pocketcasts.utils.FileUtilWrapper
import au.com.shiftyjelly.pocketcasts.utils.SentryHelper
import au.com.shiftyjelly.pocketcasts.utils.log.LogBuffer
Expand Down Expand Up @@ -207,8 +205,6 @@ class StoriesViewModel @Inject constructor(
val segmentsData: SegmentsData,
val preparingShareText: Boolean = false,
) : State() {
val showShare: Boolean
get() = currentStory !is StoryIntro && currentStory !is StoryEpilogue
data class SegmentsData(
val widths: List<Float> = emptyList(),
val xStartOffsets: List<Float> = emptyList(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
Expand All @@ -13,6 +14,8 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Matrix
import androidx.compose.ui.graphics.drawscope.withTransform
Expand All @@ -30,14 +33,15 @@ import au.com.shiftyjelly.pocketcasts.compose.components.TextH30
import au.com.shiftyjelly.pocketcasts.compose.components.TextH40
import au.com.shiftyjelly.pocketcasts.compose.components.TextH70
import au.com.shiftyjelly.pocketcasts.endofyear.R
import au.com.shiftyjelly.pocketcasts.endofyear.utils.FadeDirection
import au.com.shiftyjelly.pocketcasts.endofyear.utils.dynamicBackground
import au.com.shiftyjelly.pocketcasts.utils.extensions.pxToDp

private const val PillarRotationAngle = -30f
private const val PillarTextSkew = 0.5f
private const val PillarTopAspectRatio = .58f
private val PillarColor = Color(0xFFFE7E61)
private val PillarBaseColor = Color(0xFFFE7E61)
private val Black24 = Color(0x3D000000)
private val PillarGradientStartColor = Color(0xFFFE7E61)
private val PillarGradientEndColor = Color(0x003C1F5D)

@Composable
fun CategoryPillar(
Expand Down Expand Up @@ -114,17 +118,22 @@ private fun Pillar(
val pillarTopAspectRatio = PillarTopAspectRatio
val pillarTopHeight = width * pillarTopAspectRatio
Box {
Box(
modifier = modifier
.width(width)
.height(height)
.padding(top = pillarTopHeight / 2)
.dynamicBackground(
baseColor = PillarColor,
colorStops = listOf(Color.Black, Color.Transparent),
direction = FadeDirection.TopToBottom
)
)
Row {
Box(
modifier = modifier
.width(width / 2f)
.height(height)
.padding(top = pillarTopHeight / 2)
.leftPillarBackground()
)
Box(
modifier = modifier
.width(width / 2f)
.height(height)
.padding(top = pillarTopHeight / 2)
.rightPillarBackground()
)
}
Box {
Image(
painter = painterResource(R.drawable.rectangle),
Expand Down Expand Up @@ -164,3 +173,41 @@ private fun Pillar(
}
}
}

fun Modifier.leftPillarBackground() =
graphicsLayer {
alpha = 0.99f
}.drawWithContent {
drawRect(color = PillarBaseColor)
drawRect(
brush = Brush.verticalGradient(
listOf(Black24, Color.Black),
startY = Float.POSITIVE_INFINITY,
endY = 0f,
),
blendMode = BlendMode.DstIn
)
drawRect(
brush = Brush.verticalGradient(
listOf(PillarGradientStartColor, PillarGradientEndColor),
startY = 0f,
endY = Float.POSITIVE_INFINITY,
),
blendMode = BlendMode.DstIn
)
}

fun Modifier.rightPillarBackground() =
graphicsLayer {
alpha = 0.99f
}.drawWithContent {
drawRect(color = PillarBaseColor)
drawRect(
brush = Brush.verticalGradient(
listOf(PillarGradientStartColor, PillarGradientEndColor),
startY = 0f,
endY = Float.POSITIVE_INFINITY,
),
blendMode = BlendMode.DstIn
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import au.com.shiftyjelly.pocketcasts.compose.components.TextH20
import au.com.shiftyjelly.pocketcasts.compose.components.TextP40

private const val MaxFontScale = 1.15f

@Composable
fun StoryPrimaryText(
text: String,
Expand All @@ -22,6 +25,7 @@ fun StoryPrimaryText(
text = text,
textAlign = TextAlign.Center,
color = color,
disableScale = disableScale(),
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 40.dp)
Expand All @@ -39,9 +43,13 @@ fun StorySecondaryText(
textAlign = TextAlign.Center,
color = color,
fontWeight = FontWeight.Bold,
disableScale = disableScale(),
modifier = modifier
.fillMaxWidth()
.alpha(0.8f)
.padding(horizontal = 40.dp)
)
}

@Composable
fun disableScale() = LocalDensity.current.fontScale > MaxFontScale
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
package au.com.shiftyjelly.pocketcasts.endofyear.views.stories

import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
Expand All @@ -17,8 +23,10 @@ import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
Expand Down Expand Up @@ -52,7 +60,7 @@ fun StoryEpilogueView(

Spacer(modifier = modifier.weight(1f))

HeartImage()
PulsatingHeart()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link

@CookieyedCodes CookieyedCodes Nov 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only thing I think it needs matt is the last story if you try to skip the story it just loops back onto the last story, it should close the story 🤔 😉

(other then a story top 15-25 podcasts the current story should say add the time for the each of the top 5😉, theirs allways next year tho),
(last story should also collect all the story's and allows sharing of the 9 as a group as thats better for social engagement )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your feedback is valuable, @CookieyedCodes! Thanks for sharing it. 🙏 I'll add it to the backlog.


Spacer(modifier = modifier.weight(0.34f))

Expand All @@ -70,20 +78,31 @@ fun StoryEpilogueView(

PodcastLogoWhite()

Spacer(modifier = modifier.height(40.dp))
Spacer(modifier = modifier.height(30.dp))
}
}

@Composable
private fun HeartImage(
private fun PulsatingHeart(
modifier: Modifier = Modifier,
) {
Image(
painter = painterResource(id = R.drawable.heart),
contentDescription = null,
modifier = modifier
.size(HeartImageSize)
val infiniteTransition = rememberInfiniteTransition()
val scale by infiniteTransition.animateFloat(
initialValue = 1f,
targetValue = 1.2f,
animationSpec = infiniteRepeatable(
animation = tween(500),
repeatMode = RepeatMode.Reverse
)
)
Box(modifier = Modifier.scale(scale)) {
Image(
painter = painterResource(id = R.drawable.heart),
contentDescription = null,
modifier = modifier
.size(HeartImageSize)
)
}
}

@Composable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Spacer
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.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Surface
Expand All @@ -18,6 +17,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.intl.Locale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
Expand All @@ -42,7 +42,7 @@ fun StoryIntroView(
.fillMaxSize()
.verticalScroll(rememberScrollState()),
) {
Spacer(modifier = modifier.height(40.dp))
Spacer(modifier = modifier.weight(1f))

Image(
painter = painterResource(R.drawable.img_2022_big),
Expand All @@ -59,7 +59,7 @@ fun StoryIntroView(

PodcastLogoWhite()

Spacer(modifier = modifier.padding(bottom = 40.dp))
Spacer(modifier = modifier.height(30.dp))
}
}

Expand All @@ -68,7 +68,13 @@ private fun PrimaryText(
story: StoryIntro,
modifier: Modifier,
) {
val text = stringResource(id = LR.string.end_of_year_story_intro_title)
val language = Locale.current.language
val textResId = if (language == "en") {
LR.string.end_of_year_story_intro_title_english_only
} else {
LR.string.end_of_year_story_intro_title
}
val text = stringResource(id = textResId)
StoryPrimaryText(text = text, color = story.tintColor, modifier = modifier)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.intl.Locale
import androidx.compose.ui.unit.dp
import au.com.shiftyjelly.pocketcasts.endofyear.components.PodcastCover
import au.com.shiftyjelly.pocketcasts.endofyear.components.PodcastCoverType
import au.com.shiftyjelly.pocketcasts.compose.components.CoverSize
import au.com.shiftyjelly.pocketcasts.compose.components.PodcastCover
import au.com.shiftyjelly.pocketcasts.compose.components.transformPodcastCover
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.components.transformPodcastCover
import au.com.shiftyjelly.pocketcasts.endofyear.utils.podcastDynamicBackground
import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryListenedCategories
import au.com.shiftyjelly.pocketcasts.utils.extensions.pxToDp
Expand Down Expand Up @@ -59,7 +59,7 @@ fun StoryListenedCategoriesView(

PodcastLogoWhite()

Spacer(modifier = modifier.height(40.dp))
Spacer(modifier = modifier.height(30.dp))
}
}

Expand All @@ -70,7 +70,7 @@ private fun PodcastCoverStack(
) {
val context = LocalContext.current
val currentLocalView = LocalView.current
val coverWidth = (currentLocalView.width.pxToDp(context).dp) / 2.5f
val coverWidth = (currentLocalView.width.pxToDp(context).dp) / 2.2f

Box {
(0..2).reversed().forEach { index ->
Expand All @@ -83,7 +83,7 @@ private fun PodcastCoverStack(
PodcastCover(
uuid = story.listenedCategories[podcastIndex].mostListenedPodcastId,
coverWidth = coverWidth,
coverType = PodcastCoverType.BIG
coverSize = CoverSize.BIG
)
}
}
Expand Down
Loading