lock: completely hide media if screen too small

config/LockConfig.qml

@@ -18,5 +18,6 @@ JsonObject {
         property int mediaCoverSizeSmall: 120
         property int mediaCoverBorder: 3
         property int largeScreenWidth: 2560
+        property int smallScreenWidth: 1080
     }
 }

modules/lock/Backgrounds.qml

@@ -10,6 +10,7 @@ Item {
 
     required property bool locked
     required property real weatherWidth
+    required property bool isNormal
     required property bool isLarge
 
     readonly property real clockBottom: innerMask.anchors.margins + clockPath.height
@@ -277,7 +278,7 @@ Item {
             readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: Config.border.colour
+            fillColor: root.isNormal ? Config.border.colour : "transparent"
 
             startX: root.isLarge ? 0 : Math.ceil(innerMask.width)
             startY: root.isLarge ? height + roundingY : Math.ceil(innerMask.height) - height - roundingY

modules/lock/LockSurface.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
@@ -71,6 +73,7 @@ WlSessionLockSurface {
 
         locked: root.locked
         weatherWidth: weather.implicitWidth
+        isNormal: root.screen.width > Config.lock.sizes.smallScreenWidth
         isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth
         visible: false
     }
@@ -108,42 +111,47 @@ WlSessionLockSurface {
         anchors.rightMargin: -backgrounds.weatherRight
     }
 
-    MediaPlaying {
+    Loader {
-        id: media
+        active: root.screen.width > Config.lock.sizes.smallScreenWidth
+        asynchronous: true
 
-        isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth
+        sourceComponent: MediaPlaying {
+            id: media
 
-        state: isLarge ? "tl" : "br"
+            isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth
-        states: [
-            State {
-                name: "tl"
 
-                AnchorChanges {
+            state: isLarge ? "tl" : "br"
-                    target: media
+            states: [
-                    anchors.bottom: media.parent.top
+                State {
-                    anchors.right: media.parent.left
+                    name: "tl"
+
+                    AnchorChanges {
+                        target: media
+                        anchors.bottom: media.parent.top
+                        anchors.right: media.parent.left
+                    }
+
+                    PropertyChanges {
+                        media.anchors.bottomMargin: -backgrounds.mediaY
+                        media.anchors.rightMargin: -backgrounds.mediaX
+                    }
+                },
+                State {
+                    name: "br"
+
+                    AnchorChanges {
+                        target: media
+                        anchors.top: media.parent.bottom
+                        anchors.left: media.parent.right
+                    }
+
+                    PropertyChanges {
+                        media.anchors.topMargin: -backgrounds.mediaY
+                        media.anchors.leftMargin: -backgrounds.mediaX
+                    }
                 }
-
+            ]
-                PropertyChanges {
+        }
-                    media.anchors.bottomMargin: -backgrounds.mediaY
-                    media.anchors.rightMargin: -backgrounds.mediaX
-                }
-            },
-            State {
-                name: "br"
-
-                AnchorChanges {
-                    target: media
-                    anchors.top: media.parent.bottom
-                    anchors.left: media.parent.right
-                }
-
-                PropertyChanges {
-                    media.anchors.topMargin: -backgrounds.mediaY
-                    media.anchors.leftMargin: -backgrounds.mediaX
-                }
-            }
-        ]
     }
 
     component Anim: NumberAnimation {