From 8bfe77e6e49644daf697449c9cab2f0e71ed04eb Mon Sep 17 00:00:00 2001 From: Cristiano Chelotti Date: Thu, 19 Feb 2026 16:18:20 -0500 Subject: [PATCH] Fixing seek text label overlap and visibility issues. (#923) ## Description - Smoothly bumps up the title and subtitle text above the seek progress label when the seek bar is focused to prevent overlap. - Adds a semi-transparent black backer to the text label that appears above the seek progress indicator. Helps with visibility when the image in the playback matches the color of the text. Note: the backer is black with Alpha of 0.6 for now because I felt that looked good for contrast across all themes. However, if you prefer it respect a particular theme color, I'd be willing to make that change. ### Related issues In the playback screen, when focusing the seek bar on Android TVs (at least the ones I was able to test), the seek text above the seek bar will overlap with the media title. This is a purely cosmetic issue in the UI, but it seemed worth a fix. See before and after images in in the Screenshots section below This problem is briefly mentioned in point number 2 of [#528 ](https://github.com/damontecres/Wholphin/issues/528) ### Testing Tested manually on TCL model 50S434 running Android TV. Tested manually using AVD emulation on Television (1080p) and Television (4K) preset devices. Reproduced the problem on all 3 devices and confirmed that my fix works across all. ## Screenshots Before: before After: after ## AI or LLM usage None --------- Co-authored-by: Ray <154766448+damontecres@users.noreply.github.com> --- .../wholphin/ui/playback/PlaybackOverlay.kt | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/playback/PlaybackOverlay.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/playback/PlaybackOverlay.kt index ac6aaeed..2b311e71 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/playback/PlaybackOverlay.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/playback/PlaybackOverlay.kt @@ -1,6 +1,7 @@ package com.github.damontecres.wholphin.ui.playback import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.slideInVertically @@ -18,10 +19,12 @@ 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.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.itemsIndexed +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -443,6 +446,10 @@ fun PlaybackOverlay( text = (seekProgressMs / 1000L).seconds.toString(), color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelLarge, + modifier = + Modifier + .background(Color.Black.copy(alpha = 0.6f), shape = RoundedCornerShape(4.dp)) + .padding(horizontal = 8.dp, vertical = 4.dp), ) } } @@ -525,13 +532,22 @@ fun Controller( seekBarInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onNextStateFocus: () -> Unit = {}, ) { + val seekBarFocused by seekBarInteractionSource.collectIsFocusedAsState() + val verticalOffset by animateDpAsState( + targetValue = if (seekBarFocused) (-32).dp else 0.dp, + label = "TitleBumpOffset", + ) + Column( verticalArrangement = Arrangement.spacedBy(8.dp), modifier = modifier, ) { Column( verticalArrangement = Arrangement.spacedBy(8.dp), - modifier = Modifier.padding(start = 16.dp), + modifier = + Modifier + .padding(start = 16.dp) + .offset(y = verticalOffset), ) { title?.let { Text(