fix(media): only show video controls on hover
Controls (play button, seek bar, volume) are hidden by default and appear when the mouse enters the video area. They auto-hide 2s after the mouse leaves. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
+8
-8
@@ -83,16 +83,16 @@ fun VideoControls(
|
|||||||
onViewModeChange: ((ViewMode) -> Unit)? = null,
|
onViewModeChange: ((ViewMode) -> Unit)? = null,
|
||||||
trailingControls: @Composable (() -> Unit)? = null,
|
trailingControls: @Composable (() -> Unit)? = null,
|
||||||
) {
|
) {
|
||||||
var showControls by remember { mutableStateOf(true) }
|
|
||||||
var hovering by remember { mutableStateOf(false) }
|
var hovering by remember { mutableStateOf(false) }
|
||||||
|
var showControls by remember { mutableStateOf(false) }
|
||||||
|
|
||||||
// Auto-hide controls after 2s when playing
|
// Show controls on hover, auto-hide 2s after mouse leaves
|
||||||
LaunchedEffect(isPlaying, hovering) {
|
LaunchedEffect(hovering) {
|
||||||
if (isPlaying && !hovering) {
|
if (hovering) {
|
||||||
|
showControls = true
|
||||||
|
} else {
|
||||||
delay(2000)
|
delay(2000)
|
||||||
showControls = false
|
showControls = false
|
||||||
} else {
|
|
||||||
showControls = true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,14 +119,14 @@ fun VideoControls(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
) {
|
) {
|
||||||
// Center play/buffering indicator
|
// Center play/buffering indicator — only on hover
|
||||||
if (isBuffering) {
|
if (isBuffering) {
|
||||||
CircularProgressIndicator(
|
CircularProgressIndicator(
|
||||||
modifier = Modifier.align(Alignment.Center).size(48.dp),
|
modifier = Modifier.align(Alignment.Center).size(48.dp),
|
||||||
color = Color.White,
|
color = Color.White,
|
||||||
strokeWidth = 3.dp,
|
strokeWidth = 3.dp,
|
||||||
)
|
)
|
||||||
} else if (!isPlaying) {
|
} else if (!isPlaying && showControls) {
|
||||||
IconButton(
|
IconButton(
|
||||||
onClick = onPlayPause,
|
onClick = onPlayPause,
|
||||||
modifier = Modifier.align(Alignment.Center).size(64.dp),
|
modifier = Modifier.align(Alignment.Center).size(64.dp),
|
||||||
|
|||||||
Reference in New Issue
Block a user