feat: implement glass theme for player controls, buttons, title, slid…

app/src/main/kotlin/xyz/mpv/rex/preferences/AppearancePreferences.kt

@@ -28,6 +28,7 @@ class AppearancePreferences(
   val useSystemFont = preferenceStore.getBoolean("use_system_font", false)
   val unlimitedNameLines = preferenceStore.getBoolean("unlimited_name_lines", false)
   val hidePlayerButtonsBackground = preferenceStore.getBoolean("hide_player_buttons_background", false)
+  val enableGlassPlayerControls = preferenceStore.getBoolean("enable_glass_player_controls", false)
   val enableBounceAnimation = preferenceStore.getBoolean("enable_bounce_animation", false)
   val showCommunityIcon = preferenceStore.getBoolean("show_community_icon", true)
 

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/PlayerControls.kt

@@ -67,7 +67,8 @@ import androidx.compose.material3.LoadingIndicator
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Surface as M3Surface
+import xyz.mpv.rex.ui.player.controls.components.glassSurface
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
@@ -1842,3 +1843,4 @@ fun PlayerControls(
     )
   }
 }
+

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/PlayerControlsLandscape.kt

@@ -16,7 +16,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/PlayerControlsPortrait.kt

@@ -21,7 +21,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/PlayerControlsShared.kt

@@ -59,7 +59,10 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Surface as M3Surface
+import xyz.mpv.rex.ui.player.controls.components.glassSurface
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
@@ -1245,3 +1248,66 @@ fun RenderPlayerButton(
     }
   }
 }
+
+@Composable
+fun Surface(
+    modifier: Modifier = Modifier,
+    shape: androidx.compose.ui.graphics.Shape = androidx.compose.foundation.shape.CircleShape,
+    color: androidx.compose.ui.graphics.Color = androidx.compose.ui.graphics.Color.Unspecified,
+    contentColor: androidx.compose.ui.graphics.Color = androidx.compose.ui.graphics.Color.Unspecified,
+    tonalElevation: androidx.compose.ui.unit.Dp = 0.dp,
+    shadowElevation: androidx.compose.ui.unit.Dp = 0.dp,
+    border: androidx.compose.foundation.BorderStroke? = null,
+    content: @Composable () -> Unit
+) {
+    val appearancePreferences = org.koin.compose.koinInject<xyz.mpv.rex.preferences.AppearancePreferences>()
+    val enableGlass by appearancePreferences.enableGlassPlayerControls.collectAsState()
+    val hideBackground by appearancePreferences.hidePlayerButtonsBackground.collectAsState()
+    val matchTheme by appearancePreferences.matchPlayerControlsToTheme.collectAsState()
+
+    val activeSurfaceColor = when {
+        hideBackground -> androidx.compose.ui.graphics.Color.Transparent
+        matchTheme -> androidx.compose.material3.MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.85f)
+        else -> androidx.compose.material3.MaterialTheme.colorScheme.surfaceContainer.copy(alpha = 0.75f)
+    }
+
+    val isActive = color == activeSurfaceColor
+
+    val glassModifier = if (enableGlass && color != androidx.compose.ui.graphics.Color.Transparent) {
+        Modifier.glassSurface(
+            shape = shape as? RoundedCornerShape ?: androidx.compose.foundation.shape.CircleShape,
+            backgroundColor = if (isActive) androidx.compose.material3.MaterialTheme.colorScheme.primary.copy(alpha = 0.25f) else androidx.compose.ui.graphics.Color.White.copy(alpha = 0.05f),
+            borderColor = if (isActive) androidx.compose.material3.MaterialTheme.colorScheme.primary.copy(alpha = 0.35f) else androidx.compose.ui.graphics.Color.White.copy(alpha = 0.15f),
+            borderWidth = 1.dp,
+            outerShadowColor = androidx.compose.ui.graphics.Color.Black.copy(alpha = 0.00f),
+            outerShadowBlur = 0.dp,
+            outerShadowOffsetX = 0.dp,
+            outerShadowOffsetY = 0.dp,
+            innerHighlightColor = androidx.compose.ui.graphics.Color.White.copy(alpha = 0.35f),
+            innerHighlightBlur = 5.dp,
+            innerHighlightOffsetX = (-2).dp,
+            innerHighlightOffsetY = (-2).dp,
+            innerShadowColor = androidx.compose.ui.graphics.Color.Black.copy(alpha = 0.35f),
+            innerShadowBlur = 5.dp,
+            innerShadowOffsetX = 2.dp,
+            innerShadowOffsetY = 2.dp
+        )
+    } else {
+        Modifier
+    }
+
+    val finalColor = if (enableGlass && color != androidx.compose.ui.graphics.Color.Transparent) androidx.compose.ui.graphics.Color.Transparent else color
+    val finalBorder = if (enableGlass && color != androidx.compose.ui.graphics.Color.Transparent) null else border
+
+    M3Surface(
+        modifier = modifier.then(glassModifier),
+        shape = shape,
+        color = finalColor,
+        contentColor = contentColor,
+        tonalElevation = tonalElevation,
+        shadowElevation = shadowElevation,
+        border = finalBorder,
+        content = content
+    )
+}
+

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/components/ControlsButton.kt

@@ -46,6 +46,7 @@ fun ControlsButton(
   val interactionSource = remember { MutableInteractionSource() }
   val appearancePreferences = koinInject<AppearancePreferences>()
   val hideBackground by appearancePreferences.hidePlayerButtonsBackground.collectAsState()
+  val enableGlass by appearancePreferences.enableGlassPlayerControls.collectAsState()
 
   val clickEvent = LocalPlayerButtonsClickEvent.current
   val matchTheme by appearancePreferences.matchPlayerControlsToTheme.collectAsState()
@@ -57,6 +58,7 @@ fun ControlsButton(
   }
 
   val surfaceColor = when {
+    enableGlass && !hideBackground -> Color.Transparent
     hideBackground -> Color.Transparent
     matchTheme -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.65f)
     else -> MaterialTheme.colorScheme.surfaceContainer.copy(alpha = 0.55f)
@@ -71,9 +73,33 @@ fun ControlsButton(
     else -> if (hideBackground) controlColor else MaterialTheme.colorScheme.onSurface
   }
 
+  val glassModifier = if (enableGlass && !hideBackground) {
+    Modifier.glassSurface(
+      shape = CircleShape,
+      backgroundColor = Color.White.copy(alpha = 0.05f),
+      borderColor = Color.White.copy(alpha = 0.15f),
+      borderWidth = 1.dp,
+      outerShadowColor = Color.Black.copy(alpha = 0.00f),
+      outerShadowBlur = 0.dp,
+      outerShadowOffsetX = 0.dp,
+      outerShadowOffsetY = 0.dp,
+      innerHighlightColor = Color.White.copy(alpha = 0.35f),
+      innerHighlightBlur = 5.dp,
+      innerHighlightOffsetX = (-2).dp,
+      innerHighlightOffsetY = (-2).dp,
+      innerShadowColor = Color.Black.copy(alpha = 0.35f),
+      innerShadowBlur = 5.dp,
+      innerShadowOffsetX = 2.dp,
+      innerShadowOffsetY = 2.dp
+    )
+  } else {
+    Modifier
+  }
+
   Surface(
     modifier =
       modifier
+        .then(glassModifier)
         .clip(CircleShape)
         .combinedClickable(
           onClick = {
@@ -90,7 +116,7 @@ fun ControlsButton(
     tonalElevation = 0.dp,
     shadowElevation = 0.dp,
     border =
-      if (hideBackground) {
+      if (enableGlass || hideBackground) {
         null
       } else {
         BorderStroke(

app/src/main/kotlin/xyz/mpv/rex/ui/player/controls/components/CurrentChapter.kt

@@ -49,26 +49,47 @@ fun CurrentChapter(
   onClick: () -> Unit = {},
 ) {
   val appearancePreferences = koinInject<AppearancePreferences>()
+  val enableGlass by appearancePreferences.enableGlassPlayerControls.collectAsState()
+
+  val glassModifier = if (enableGlass) {
+    Modifier.glassSurface(
+      shape = RoundedCornerShape(50),
+      backgroundColor = Color.White.copy(alpha = 0.05f),
+      borderColor = Color.White.copy(alpha = 0.15f),
+      borderWidth = 1.dp,
+      outerShadowColor = Color.Black.copy(alpha = 0.00f),
+      outerShadowBlur = 0.dp,
+      outerShadowOffsetX = 0.dp,
+      outerShadowOffsetY = 0.dp,
+      innerHighlightColor = Color.White.copy(alpha = 0.35f),
+      innerHighlightBlur = 5.dp,
+      innerHighlightOffsetX = (-2).dp,
+      innerHighlightOffsetY = (-2).dp,
+      innerShadowColor = Color.Black.copy(alpha = 0.35f),
+      innerShadowBlur = 5.dp,
+      innerShadowOffsetX = 2.dp,
+      innerShadowOffsetY = 2.dp
+    )
+  } else {
+    Modifier
+  }
 
   Surface(
     modifier =
       modifier
+        .then(glassModifier)
         .height(40.dp)
         .widthIn(max = 220.dp)
         .clip(RoundedCornerShape(50))
         .clickable(onClick = onClick),
     shape = RoundedCornerShape(50),
-    color =
-        MaterialTheme.colorScheme.surfaceContainer.copy(
-          alpha = 0.55f,
-        ),
+    color = if (enableGlass) Color.Transparent else MaterialTheme.colorScheme.surfaceContainer.copy(alpha = 0.55f),
     contentColor = MaterialTheme.colorScheme.onSurface,
     tonalElevation = 0.dp,
-    border =
-        BorderStroke(
-          1.dp,
-          MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.4f),
-        ),
+    border = if (enableGlass) null else BorderStroke(
+      1.dp,
+      MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.4f),
+    ),
   ) {
     AnimatedContent(
       targetState = chapter,