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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0dbd563
Extract podcast cover to compose components
ashiagr Nov 24, 2022
8f4efe3
Cherry pick rectangle cover changes from main
ashiagr Nov 29, 2022
1c1e37e
Increase elevation
ashiagr Nov 29, 2022
3f91f95
Update translations
ashiagr Nov 29, 2022
8d67670
Use typographic apostrophe
ashiagr Nov 29, 2022
0506750
Use exclamation in intro title
ashiagr Nov 29, 2022
d2ce7c2
Linebreak in intro title (en only)
ashiagr Nov 29, 2022
28d79c2
Move intro story image down
ashiagr Nov 29, 2022
461f16e
Move logo downwards
ashiagr Nov 29, 2022
5f852cc
Increase stacked cover size
ashiagr Nov 29, 2022
10dfd5a
Increase listened numbers cover size
ashiagr Nov 29, 2022
166d3d6
Add pulsating heart animation + red logo on last screen
ashiagr Nov 30, 2022
a3211c4
Add 3D effect to pillar
ashiagr Nov 30, 2022
e4fb26e
Capture unknown format conversion exception
ashiagr Nov 30, 2022
eff6611
Expand stories screens which are not shareable
ashiagr Dec 1, 2022
a5a065c
Increase padding on listened nos. screen between artwork and text
ashiagr Dec 1, 2022
71326bd
Revert red logo on epilogue screen
ashiagr Dec 1, 2022
1e2ed1f
Disable text font scale > 1.15
ashiagr Dec 1, 2022
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
75 changes: 61 additions & 14 deletions ...fyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/components/CategoryPillar.kt
View file
Open in desktop
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
)
}
46 changes: 36 additions & 10 deletions ...src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt
View file
Open in desktop
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,15 +23,16 @@ 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
import androidx.compose.ui.unit.dp
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.repositories.endofyear.stories.StoryEpilogue
Expand All @@ -52,7 +59,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 •
edited
Loading

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 @@ -68,22 +75,33 @@ fun StoryEpilogueView(

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

PodcastLogoWhite()
PodcastLogo()

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 Expand Up @@ -130,3 +148,11 @@ private fun ReplayButton(
)
}
}

@Composable
fun PodcastLogo() {
Image(
painter = painterResource(R.drawable.logo_red),
contentDescription = null,
)
}
14 changes: 10 additions & 4 deletions ...ar/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryIntroView.kt
View file
Open in desktop
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
12 changes: 6 additions & 6 deletions ...ava/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListenedCategoriesView.kt
View file
Open in desktop
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
8 changes: 4 additions & 4 deletions ...n/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListenedNumbersView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ 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.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.localization.R
import au.com.shiftyjelly.pocketcasts.models.db.helper.TopPodcast
Expand Down Expand Up @@ -61,7 +61,7 @@ fun StoryListenedNumbersView(

PodcastLogoWhite()

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

Expand All @@ -73,7 +73,7 @@ private fun PodcastCoverStack(
val context = LocalContext.current
val currentLocalView = LocalView.current
val screenWidth = currentLocalView.width.pxToDp(context).dp
val availableWidth = screenWidth * .74f
val availableWidth = screenWidth * .8f
Box(
modifier = modifier
.size(availableWidth)
Expand Down
10 changes: 5 additions & 5 deletions ...ain/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListeningTimeView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,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.StoryListeningTime
import au.com.shiftyjelly.pocketcasts.settings.stats.StatsHelper
Expand Down Expand Up @@ -63,7 +63,7 @@ fun StoryListeningTimeView(

PodcastLogoWhite()

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

Expand Down Expand Up @@ -120,7 +120,7 @@ private fun PodcastCoverRow(
PodcastCover(
uuid = story.podcasts[podcastIndex].uuid,
coverWidth = coverWidth,
coverType = PodcastCoverType.SMALL
coverSize = CoverSize.SMALL
)
Spacer(modifier = modifier.width(5.dp))
}
Expand Down
Loading