Fix bug 190: Brightness & Volume gestures only work when controls are…

… displayed
oxyroid · Oct 2, 2024 · a8075bb · a8075bb
1 parent d3e854a
commit a8075bb
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 21 deletions.
diff --git a/feature/channel/src/main/java/com/m3u/feature/channel/ChannelMask.kt b/feature/channel/src/main/java/com/m3u/feature/channel/ChannelMask.kt
@@ -86,8 +86,8 @@ import com.m3u.material.components.mask.MaskCircleButton
 import com.m3u.material.components.mask.MaskPanel
 import com.m3u.material.components.mask.MaskState
 import com.m3u.material.effects.currentBackStackEntry
-import com.m3u.material.ktx.tv
 import com.m3u.material.ktx.thenIf
+import com.m3u.material.ktx.tv
 import com.m3u.material.model.LocalSpacing
 import com.m3u.ui.FontFamilies
 import com.m3u.ui.Image
@@ -105,6 +105,7 @@ import kotlin.time.toDuration
 internal fun ChannelMask(
     cover: String,
     title: String,
+    gesture: MaskGesture?,
     playlistTitle: String,
     playerState: PlayerState,
     volume: Float,
@@ -121,7 +122,7 @@ internal fun ChannelMask(
     onEnterPipMode: () -> Unit,
     onVolume: (Float) -> Unit,
     onBrightness: (Float) -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val preferences = hiltPreferences()
     val helper = LocalHelper.current
@@ -134,7 +135,6 @@ internal fun ChannelMask(
         LocalOnBackPressedDispatcherOwner.current
     ).onBackPressedDispatcher
 
-    var gesture: MaskGesture? by remember { mutableStateOf(null) }
 
     // because they will be updated frequently,
     // they must be wrapped with rememberUpdatedState when using them.
@@ -147,7 +147,6 @@ internal fun ChannelMask(
         muted -> stringResource(string.feat_channel_tooltip_unmute)
         else -> stringResource(string.feat_channel_tooltip_mute)
     }
-
     val brightnessOrVolumeText by remember {
         derivedStateOf {
             when (gesture) {
@@ -221,9 +220,12 @@ internal fun ChannelMask(
         }
     }
 
-    Box {
+    Box(
+        modifier = modifier.fillMaxSize()
+    ) {
         MaskPanel(
-            state = maskState
+            state = maskState,
+            modifier = Modifier.align(Alignment.Center)
         )
 
         PlayerMask(
@@ -328,13 +330,13 @@ internal fun ChannelMask(
                             percent = currentBrightness,
                             onDragStart = {
                                 maskState.lock(MaskGesture.BRIGHTNESS)
-                                gesture = MaskGesture.BRIGHTNESS
                             },
                             onDragEnd = {
                                 maskState.unlock(MaskGesture.BRIGHTNESS, 400.milliseconds)
-                                gesture = null
                             },
-                            onDrag = onBrightness,
+                            onDrag = {
+                                onBrightness(it)
+                            },
                             modifier = Modifier
                                 .fillMaxHeight()
                                 .fillMaxWidth(0.18f)
@@ -343,16 +345,14 @@ internal fun ChannelMask(
                             percent = currentVolume,
                             onDragStart = {
                                 maskState.lock(MaskGesture.VOLUME)
-                                gesture = MaskGesture.VOLUME
+
                             },
                             onDragEnd = {
                                 maskState.unlock(MaskGesture.VOLUME, 400.milliseconds)
-                                gesture = null
                             },
                             onDrag = onVolume,
                             modifier = Modifier
                                 .fillMaxHeight()
-                                .fillMaxWidth(0.18f)
                         )
                     }
                     val maskCenterState = MaskCenterState.of(
@@ -562,6 +562,7 @@ internal fun ChannelMask(
             },
             modifier = modifier
         )
+
     }
 }
 

diff --git a/feature/channel/src/main/java/com/m3u/feature/channel/ChannelScreen.kt b/feature/channel/src/main/java/com/m3u/feature/channel/ChannelScreen.kt
@@ -4,15 +4,25 @@ import android.Manifest
 import android.content.Intent
 import android.graphics.Rect
 import android.net.Uri
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.VolumeDown
+import androidx.compose.material.icons.automirrored.rounded.VolumeOff
+import androidx.compose.material.icons.automirrored.rounded.VolumeUp
+import androidx.compose.material.icons.rounded.DarkMode
+import androidx.compose.material.icons.rounded.LightMode
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
@@ -34,7 +44,9 @@ import com.m3u.data.database.model.Playlist
 import com.m3u.feature.channel.components.CoverPlaceholder
 import com.m3u.feature.channel.components.DlnaDevicesBottomSheet
 import com.m3u.feature.channel.components.FormatsBottomSheet
+import com.m3u.feature.channel.components.MaskGestureValuePanel
 import com.m3u.feature.channel.components.PlayerPanel
+import com.m3u.feature.channel.components.VerticalGestureArea
 import com.m3u.i18n.R.string
 import com.m3u.material.components.Background
 import com.m3u.material.components.PullPanelLayout
@@ -159,7 +171,8 @@ fun ChannelRoute(
 
     Background(
         color = Color.Black,
-        contentColor = Color.White
+        contentColor = Color.White,
+        modifier = modifier
     ) {
         PullPanelLayout(
             state = pullPanelLayoutState,
@@ -229,7 +242,6 @@ fun ChannelRoute(
                         maskState.unlockAll()
                         pullPanelLayoutState.collapse()
                     },
-                    modifier = modifier
                 )
             }
         )
@@ -287,18 +299,27 @@ private fun ChannelPlayer(
     onEnterPipMode: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val context = LocalContext.current
     val title = channel?.title ?: "--"
     val cover = channel?.cover.orEmpty()
     val playlistTitle = playlist?.title ?: "--"
     val favourite = channel?.favourite ?: false
-
+    var gesture: MaskGesture? by remember { mutableStateOf(null) }
+    val currentBrightness by rememberUpdatedState(brightness)
+    val currentVolume by rememberUpdatedState(volume)
     val preferences = hiltPreferences()
+    var isBrightnessValueChange by remember {
+        mutableStateOf(false)
+    }
+    var isVolumeValueChange by remember {
+        mutableStateOf(false)
+    }
 
     Background(
         color = Color.Black,
         contentColor = Color.White,
     ) {
-        Box(modifier) {
+        Box(modifier = modifier) {
             val state = rememberPlayerState(
                 player = playerState.player,
                 clipMode = preferences.clipMode
@@ -308,6 +329,40 @@ private fun ChannelPlayer(
                 state = state,
                 modifier = Modifier.fillMaxSize()
             )
+            VerticalGestureArea(
+                percent = currentBrightness,
+                onDragStart = {
+                    gesture = MaskGesture.BRIGHTNESS
+                    isBrightnessValueChange = true
+                },
+                onDragEnd = {
+                    gesture = null
+                    isBrightnessValueChange = false
+                },
+                onDrag = {
+                    onBrightness(it)
+                },
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .fillMaxWidth(0.18f)
+            )
+
+            VerticalGestureArea(
+                percent = currentVolume,
+                onDragStart = {
+                    gesture = MaskGesture.VOLUME
+                    isVolumeValueChange = true
+                },
+                onDragEnd = {
+                    gesture = null
+                    isVolumeValueChange = false
+                },
+                onDrag = onVolume,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .fillMaxHeight()
+                    .fillMaxWidth(0.18f)
+            )
 
             val shouldShowPlaceholder =
                 !preferences.noPictureMode && cover.isNotEmpty() && playerState.videoSize.isEmpty
@@ -337,8 +392,31 @@ private fun ChannelPlayer(
                 onVolume = onVolume,
                 onBrightness = onBrightness,
                 onEnterPipMode = onEnterPipMode,
+                gesture = gesture
             )
 
+            if (gesture != null) {
+                MaskGestureValuePanel(
+                    value = when (gesture) {
+                        MaskGesture.BRIGHTNESS -> "${currentBrightness.times(100).toInt()}%"
+                        else -> "${currentVolume.times(100).toInt()}"
+                    },
+                    icon = when (gesture) {
+                        MaskGesture.BRIGHTNESS -> when {
+                            brightness < 0.5f -> Icons.Rounded.DarkMode
+                            else -> Icons.Rounded.LightMode
+                        }
+
+                        else -> when {
+                            volume == 0f -> Icons.AutoMirrored.Rounded.VolumeOff
+                            volume < 0.5f -> Icons.AutoMirrored.Rounded.VolumeDown
+                            else -> Icons.AutoMirrored.Rounded.VolumeUp
+                        }
+                    },
+                    modifier = Modifier.align(Alignment.Center)
+                )
+            }
+
             LaunchedEffect(playerState.playerError) {
                 if (playerState.playerError != null) {
                     maskState.wake()
@@ -347,3 +425,11 @@ private fun ChannelPlayer(
         }
     }
 }
+
+
+
+
+
+
+
+
diff --git a/feature/channel/src/main/java/com/m3u/feature/channel/components/MaskGestureValuePanel.kt b/feature/channel/src/main/java/com/m3u/feature/channel/components/MaskGestureValuePanel.kt
@@ -0,0 +1,60 @@
+package com.m3u.feature.channel.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Refresh
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Surface
+import com.m3u.ui.MonoText
+
+@Composable
+fun MaskGestureValuePanel(
+    modifier: Modifier = Modifier, icon: ImageVector, value: String,
+) {
+    Row(
+        modifier = modifier.clip(shape = RoundedCornerShape(10.dp)).background(
+            color = MaterialTheme.colorScheme.onSurface
+        ).padding(vertical = 5.dp, horizontal = 10.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Image(
+            imageVector = icon,
+            contentDescription = "icon gesture",
+            modifier = Modifier.size(24.dp),
+            colorFilter = ColorFilter.tint(Color.White)
+        )
+        Spacer(modifier = Modifier.width(4.dp))
+        MonoText(
+            text = value, color = Color.White, fontSize = 20.sp
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewMaskGestureValuePanel() {
+    Surface {
+        MaskGestureValuePanel(
+            icon = Icons.Rounded.Refresh, value = "20"
+        )
+    }
+}
diff --git a/feature/channel/src/main/java/com/m3u/feature/channel/components/MaskValueButton.kt b/feature/channel/src/main/java/com/m3u/feature/channel/components/MaskValueButton.kt
@@ -17,8 +17,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import com.m3u.material.components.IconButton
 import com.m3u.material.components.mask.MaskState
-import com.m3u.material.ktx.tv
 import com.m3u.material.ktx.thenIf
+import com.m3u.material.ktx.tv
 import com.m3u.ui.FontFamilies
 
 @Composable

diff --git a/feature/channel/src/main/java/com/m3u/feature/channel/components/PlayerMask.kt b/feature/channel/src/main/java/com/m3u/feature/channel/components/PlayerMask.kt
@@ -1,5 +1,6 @@
 package com.m3u.feature.channel.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row

diff --git a/material/src/main/java/com/m3u/material/components/mask/MaskPanel.kt b/material/src/main/java/com/m3u/material/components/mask/MaskPanel.kt
@@ -4,7 +4,8 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -15,15 +16,16 @@ import com.m3u.material.components.OuterColumn
 fun MaskPanel(
     state: MaskState,
     modifier: Modifier = Modifier,
-    verticalArrangement: Arrangement.Vertical = Arrangement.Bottom,
-    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Center,
+    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
     content: @Composable ColumnScope.() -> Unit = {}
 ) {
     OuterColumn(
         verticalArrangement = verticalArrangement,
         horizontalAlignment = horizontalAlignment,
         modifier = Modifier
-            .fillMaxSize()
+            .fillMaxWidth(0.7f)
+            .fillMaxHeight()
             .clickable(
                 onClick = state::toggle,
                 interactionSource = remember { MutableInteractionSource() },