lock: move media to bottom right if small screen

modules/lock/Backgrounds.qml

@@ -10,13 +10,15 @@ Item {
 
     required property bool locked
     required property real weatherWidth
+    required property bool isLarge
 
     readonly property real clockBottom: innerMask.anchors.margins + clockPath.height
     readonly property real inputTop: innerMask.anchors.margins + inputPath.height
     readonly property real weatherTop: innerMask.anchors.margins + weatherPath.height
     readonly property real weatherRight: innerMask.anchors.margins + weatherPath.width
-    readonly property real mediaBottom: innerMask.anchors.margins + mediaPath.height
-    readonly property real mediaRight: innerMask.anchors.margins + mediaPath.width
+
+    readonly property real mediaX: innerMask.anchors.margins + mediaPath.width
+    readonly property real mediaY: innerMask.anchors.margins + mediaPath.height
 
     anchors.fill: parent
 
@@ -277,37 +279,38 @@ Item {
             strokeWidth: -1
             fillColor: Config.border.colour
 
-            startY: height + roundingY
+            startX: root.isLarge ? 0 : Math.ceil(innerMask.width)
+            startY: root.isLarge ? height + roundingY : Math.ceil(innerMask.height) - height - roundingY
 
             PathArc {
-                relativeX: mediaPath.roundingX
-                relativeY: -mediaPath.roundingY
+                relativeX: mediaPath.roundingX * (root.isLarge ? 1 : -1)
+                relativeY: mediaPath.roundingY * (root.isLarge ? -1 : 1)
                 radiusX: Math.min(mediaPath.rounding, mediaPath.width)
                 radiusY: Math.min(mediaPath.rounding, mediaPath.height)
             }
             PathLine {
-                relativeX: mediaPath.width - mediaPath.roundingX * 2
+                relativeX: (mediaPath.width - mediaPath.roundingX * 2) * (root.isLarge ? 1 : -1)
                 relativeY: 0
             }
             PathArc {
-                relativeX: mediaPath.roundingX
-                relativeY: -mediaPath.roundingY
+                relativeX: mediaPath.roundingX * (root.isLarge ? 1 : -1)
+                relativeY: mediaPath.roundingY * (root.isLarge ? -1 : 1)
                 radiusX: Math.min(mediaPath.rounding, mediaPath.width)
                 radiusY: Math.min(mediaPath.rounding, mediaPath.height)
                 direction: PathArc.Counterclockwise
             }
             PathLine {
                 relativeX: 0
-                relativeY: -(mediaPath.height - mediaPath.roundingY * 2)
+                relativeY: (mediaPath.height - mediaPath.roundingY * 2) * (root.isLarge ? -1 : 1)
             }
             PathArc {
-                relativeX: mediaPath.roundingX
-                relativeY: -mediaPath.roundingY
+                relativeX: mediaPath.roundingX * (root.isLarge ? 1 : -1)
+                relativeY: mediaPath.roundingY * (root.isLarge ? -1 : 1)
                 radiusX: Math.min(mediaPath.rounding, mediaPath.width)
                 radiusY: Math.min(mediaPath.rounding, mediaPath.height)
             }
             PathLine {
-                relativeX: -mediaPath.width - mediaPath.roundingX
+                relativeX: (-mediaPath.width - mediaPath.roundingX) * (root.isLarge ? 1 : -1)
                 relativeY: 0
             }
 

modules/lock/LockSurface.qml

@@ -71,6 +71,7 @@ WlSessionLockSurface {
 
         locked: root.locked
         weatherWidth: weather.implicitWidth
+        isLarge: root.screen.width > 1920
         visible: false
     }
 
@@ -108,10 +109,41 @@ WlSessionLockSurface {
     }
 
     MediaPlaying {
-        anchors.bottom: parent.top
-        anchors.right: parent.left
-        anchors.bottomMargin: -backgrounds.mediaBottom
-        anchors.rightMargin: -backgrounds.mediaRight
+        id: media
+
+        isLarge: root.screen.width > 1920
+
+        state: isLarge ? "tl" : "br"
+        states: [
+            State {
+                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
+                }
+            }
+        ]
     }
 
     component Anim: NumberAnimation {

modules/lock/MediaPlaying.qml

@@ -9,6 +9,8 @@ import QtQuick.Controls
 RowLayout {
     id: root
 
+    required property bool isLarge
+
     spacing: Appearance.spacing.large * 2
     width: Config.lock.sizes.mediaWidth
 
@@ -34,7 +36,9 @@ RowLayout {
     }
 
     Item {
-        Layout.bottomMargin: Config.lock.sizes.border / 2
+        Layout.topMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
+        Layout.bottomMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
+        Layout.leftMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
 
         implicitWidth: Config.lock.sizes.mediaCoverSize
         implicitHeight: Config.lock.sizes.mediaCoverSize
@@ -114,8 +118,9 @@ RowLayout {
 
     ColumnLayout {
         Layout.alignment: Qt.AlignVCenter
-        Layout.bottomMargin: Config.lock.sizes.border / 2
-        Layout.rightMargin: Config.lock.sizes.border / 2
+        Layout.topMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
+        Layout.bottomMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
+        Layout.rightMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
         Layout.fillWidth: true
 
         spacing: Appearance.spacing.small