feat(trailerplayer): adding volume icon

This commit is contained in:
tapframe 2026-06-04 01:10:11 +05:30
parent 150081f832
commit a09d331a48
2 changed files with 49 additions and 2 deletions

View file

@ -897,7 +897,7 @@ fun MetaDetailsScreen(
start = 12.dp,
top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + 8.dp,
).zIndex(2f),
containerColor = MaterialTheme.colorScheme.background.copy(alpha = 0.5f),
containerColor = Color.Transparent,
contentColor = MaterialTheme.colorScheme.onBackground,
)
}
@ -1149,7 +1149,7 @@ fun MetaDetailsScreen(
start = 12.dp,
top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + 8.dp,
),
containerColor = MaterialTheme.colorScheme.background.copy(alpha = 0.5f),
containerColor = Color.Transparent,
contentColor = MaterialTheme.colorScheme.onBackground,
)
}

View file

@ -1,5 +1,11 @@
package com.nuvio.app.features.details.components
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.togetherWith
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
@ -9,11 +15,19 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
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.layout.size
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.VolumeOff
import androidx.compose.material.icons.rounded.VolumeUp
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -61,6 +75,10 @@ fun DetailHero(
animationSpec = tween(durationMillis = 300),
label = "detail_hero_trailer_alpha",
)
val muteIconSize = if (isTablet) 20.dp else 22.dp
val heroChromeTopPadding = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() +
8.dp +
((40.dp - muteIconSize) / 2)
Box(
modifier = Modifier
@ -126,6 +144,35 @@ fun DetailHero(
onClick = onHeroTrailerMuteToggle,
),
)
AnimatedContent(
targetState = heroTrailerMuted,
modifier = Modifier
.align(Alignment.TopEnd)
.padding(
top = heroChromeTopPadding,
end = if (isTablet) 32.dp else 22.dp,
)
.graphicsLayer {
alpha = trailerAlpha * 0.72f
},
transitionSpec = {
(fadeIn(animationSpec = tween(120)) + scaleIn(
initialScale = 0.82f,
animationSpec = tween(160),
)) togetherWith (fadeOut(animationSpec = tween(90)) + scaleOut(
targetScale = 1.12f,
animationSpec = tween(100),
))
},
label = "detail_hero_trailer_mute_icon",
) { muted ->
Icon(
imageVector = if (muted) Icons.Rounded.VolumeOff else Icons.Rounded.VolumeUp,
contentDescription = null,
tint = Color.White,
modifier = Modifier.size(muteIconSize),
)
}
}
Box(