lock: add media + some fixes

assets/shaders/opacitymask.frag

@@ -0,0 +1,19 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    // qt_Matrix and qt_Opacity must always be both present
+    // if the built-in vertex shader is used.
+    mat4 qt_Matrix;
+    float qt_Opacity;
+};
+
+layout(binding = 1) uniform sampler2D source;
+layout(binding = 2) uniform sampler2D maskSource;
+
+void main()
+{
+    fragColor = texture(source, qt_TexCoord0.st) * (texture(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
+}

modules/lock/Center.qml

@@ -48,7 +48,7 @@ ColumnLayout {
         }
 
         Loader {
-            Layout.leftMargin: Appearance.spacing.normal
+            Layout.leftMargin: Appearance.spacing.small
             Layout.alignment: Qt.AlignVCenter
 
             asynchronous: true
@@ -118,6 +118,9 @@ ColumnLayout {
         }
 
         Keys.onPressed: event => {
+            if (!root.lock.locked)
+                return;
+
             if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
                 inputField.placeholder.animate = false;
 

modules/lock/Content.qml

@@ -36,9 +36,21 @@ RowLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            radius: Appearance.rounding.small
+            color: Colours.tPalette.m3surfaceContainer
+        }
+
+        StyledClippingRect {
+            Layout.fillWidth: true
+            implicitHeight: media.implicitHeight
+
             bottomLeftRadius: Appearance.rounding.large
             radius: Appearance.rounding.small
             color: Colours.tPalette.m3surfaceContainer
+
+            Media {
+                id: media
+            }
         }
     }
 

modules/lock/LockSurface.qml

@@ -62,6 +62,7 @@ WlSessionLockSurface {
                 target: lockIcon
                 property: "opacity"
                 to: 1
+                duration: Appearance.anim.durations.large
             }
             Anim {
                 target: background

modules/lock/Media.qml

@@ -0,0 +1,95 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    implicitHeight: layout.implicitHeight
+
+    Image {
+        anchors.fill: parent
+        source: Players.active?.trackArtUrl ?? null
+
+        asynchronous: true
+        fillMode: Image.PreserveAspectCrop
+        sourceSize.width: width
+        sourceSize.height: height
+
+        layer.enabled: true
+        layer.effect: ShaderEffect {
+            required property Item source
+            readonly property Item maskSource: mask
+
+            fragmentShader: `file://${Quickshell.shellDir}/assets/shaders/opacitymask.frag.qsb`
+        }
+    }
+
+    Rectangle {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+
+            GradientStop {
+                position: 0
+                color: Qt.rgba(0, 0, 0, 0.5)
+            }
+            GradientStop {
+                position: 0.4
+                color: Qt.rgba(0, 0, 0, 0.2)
+            }
+            GradientStop {
+                position: 0.8
+                color: Qt.rgba(0, 0, 0, 0)
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: layout
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: Appearance.padding.large
+
+        StyledText {
+            Layout.topMargin: Appearance.padding.large
+            text: qsTr("Now playing")
+            color: Colours.palette.m3outline
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            text: Players.active?.trackArtist ?? qsTr("No media")
+            color: Colours.palette.m3primary
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.large
+            font.weight: 500
+            elide: Text.ElideRight
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            text: Players.active?.trackTitle ?? qsTr("No media")
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.bottomMargin: Appearance.padding.large
+        }
+    }
+}