lock: add media controls

modules/lock/Media.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.components.effects
 import qs.services
 import qs.config
 import Quickshell
@@ -66,30 +67,141 @@ Item {
 
         StyledText {
             Layout.topMargin: Appearance.padding.large
+            Layout.bottomMargin: Appearance.spacing.larger
             text: qsTr("Now playing")
-            color: Colours.palette.m3outline
+            color: Colours.palette.m3onSurfaceVariant
+            font.family: Appearance.font.family.mono
+            font.weight: 500
         }
 
         StyledText {
             Layout.fillWidth: true
+            animate: true
             text: Players.active?.trackArtist ?? qsTr("No media")
             color: Colours.palette.m3primary
             horizontalAlignment: Text.AlignHCenter
             font.pointSize: Appearance.font.size.large
-            font.weight: 500
+            font.weight: 600
             elide: Text.ElideRight
         }
 
         StyledText {
             Layout.fillWidth: true
+            animate: true
             text: Players.active?.trackTitle ?? qsTr("No media")
             horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.larger
+            font.family: Appearance.font.family.mono
             elide: Text.ElideRight
         }
 
         RowLayout {
-            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: Appearance.spacing.large * 1.5
             Layout.bottomMargin: Appearance.padding.large
+
+            spacing: Appearance.spacing.large
+
+            PlayerControl {
+                icon: "skip_previous"
+
+                function onClicked(): void {
+                    if (Players.active?.canGoPrevious)
+                        Players.active.previous();
+                }
+            }
+
+            PlayerControl {
+                animate: true
+                icon: active ? "pause" : "play_arrow"
+                colour: "Primary"
+                level: active ? 2 : 1
+                active: Players.active?.isPlaying ?? false
+
+                function onClicked(): void {
+                    if (Players.active?.canTogglePlaying)
+                        Players.active.togglePlaying();
+                }
+            }
+
+            PlayerControl {
+                icon: "skip_next"
+
+                function onClicked(): void {
+                    if (Players.active?.canGoNext)
+                        Players.active.next();
                 }
             }
         }
+    }
+
+    component PlayerControl: StyledRect {
+        id: control
+
+        property alias animate: controlIcon.animate
+        property alias icon: controlIcon.text
+        property bool active
+        property string colour: "Secondary"
+        property int level: 1
+
+        function onClicked(): void {
+        }
+
+        Layout.preferredWidth: implicitWidth + (controlState.pressed ? Appearance.padding.normal * 2 : active ? Appearance.padding.small * 2 : 0)
+        implicitWidth: controlIcon.implicitWidth + Appearance.padding.large * 2
+        implicitHeight: controlIcon.implicitHeight + Appearance.padding.normal * 2
+
+        color: active ? Colours.palette[`m3${colour.toLowerCase()}`] : Colours.palette[`m3${colour.toLowerCase()}Container`]
+        radius: active || controlState.pressed ? Appearance.rounding.normal : Math.min(implicitWidth, implicitHeight) / 2
+
+        Elevation {
+            anchors.fill: parent
+            radius: parent.radius
+            z: -1
+            level: controlState.containsMouse && !controlState.pressed ? control.level + 1 : control.level
+        }
+
+        StateLayer {
+            id: controlState
+
+            color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
+
+            function onClicked(): void {
+                control.onClicked();
+            }
+        }
+
+        MaterialIcon {
+            id: controlIcon
+
+            anchors.centerIn: parent
+            color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
+            font.pointSize: Appearance.font.size.large
+            fill: control.active ? 1 : 0
+
+            Behavior on fill {
+                Anim {}
+            }
+        }
+
+        Behavior on Layout.preferredWidth {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+        }
+
+        Behavior on radius {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}