background: add support for video wallpapers

README.md

@@ -328,6 +328,15 @@ default, you must create it manually.
             "autoHide": true,
             "rounding": 1,
             "spacing": 1
+        },
+        "wallpaper": {
+            "audio": {
+                "muteAudio": true,
+                "volume": 1.0
+            },
+            "video": {
+                "autoPause": false
+            }
         }
     },
     "bar": {

config/BackgroundConfig.qml

@@ -5,6 +5,7 @@ JsonObject {
     property bool wallpaperEnabled: true
     property DesktopClock desktopClock: DesktopClock {}
     property Visualiser visualiser: Visualiser {}
+    property Wallpaper wallpaper: Wallpaper {}
 
     component DesktopClock: JsonObject {
         property bool enabled: false
@@ -34,4 +35,18 @@ JsonObject {
         property real rounding: 1
         property real spacing: 1
     }
+
+    component Wallpaper: JsonObject {
+        property WallpaperAudio audio: WallpaperAudio {}
+        property WallpaperVideo video: WallpaperVideo {}
+    }
+
+    component WallpaperAudio: JsonObject {
+        property bool muteAudio: true
+        property real volume: 1.0
+    }
+
+    component WallpaperVideo: JsonObject {
+        property bool autoPause: false
+    }
 }

modules/background/Background.qml

@@ -9,8 +9,12 @@ import Quickshell.Wayland
 import QtQuick
 
 Loader {
+    id: backgroundLoader
+
     active: Config.background.enabled
 
+    property var lock
+
     sourceComponent: Variants {
         model: Screens.screens
 
@@ -42,7 +46,10 @@ Loader {
                     anchors.fill: parent
                     active: Config.background.wallpaperEnabled
 
-                    sourceComponent: Wallpaper {}
+                    sourceComponent: Wallpaper {
+                        screen: win.modelData
+                        sessionLock: backgroundLoader.lock ? backgroundLoader.lock.lock : null
+                    }
                 }
 
                 Visualiser {

modules/background/ImageWallpaper.qml

@@ -0,0 +1,51 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.components.images
+import qs.services
+import QtQuick
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    property bool isCurrent: false
+
+    signal ready
+
+    function update(explicitSource) {
+        explicitSource = explicitSource.toString();
+        const target = explicitSource;
+
+        if (img.path === target && img.status === Image.Ready) {
+            Qt.callLater(() => root.ready());
+            return;
+        }
+
+        img.path = target;
+
+        img.onStatusChanged.connect(function handler() {
+            if (img.status === Image.Ready) {
+                Qt.callLater(() => root.ready());
+                img.onStatusChanged.disconnect(handler);
+            }
+        });
+    }
+
+    CachingImage {
+        id: img
+        anchors.fill: parent
+        asynchronous: true
+        fillMode: Image.PreserveAspectCrop
+        opacity: root.isCurrent ? 1 : 0
+        scale: (root.isCurrent ? 1 : Wallpapers.showPreview ? 1 : 0.8)
+
+        Behavior on opacity {
+            Anim {}
+        }
+
+        Behavior on scale {
+            Anim {}
+        }
+    }
+}

modules/background/VideoWallpaper.qml

@@ -0,0 +1,167 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.services
+import qs.config
+import QtQuick
+import QtMultimedia
+
+Item {
+    id: root
+    anchors.fill: parent
+    signal ready
+    property bool shouldPause: false
+    property bool isCurrent: false
+    property string source: ""
+    property bool gamemodeEnabled: GameMode.enabled
+    property bool pendingUnload: false
+    property string visualMode: !root.isCurrent ? "none" : gamemodeEnabled ? "placeholder" : "video"
+
+    function update(path) {
+        if (gamemodeEnabled) {
+            root.source = path;
+            Qt.callLater(root.ready);
+            return;
+        }
+        path = path.toString();
+        if (!path || path.trim() === "")
+            return;
+
+        player.source = path;
+        root.source = path;
+
+        player.onMediaStatusChanged.connect(function handler() {
+            if (player.mediaStatus === MediaPlayer.BufferedMedia || player.mediaStatus === MediaPlayer.LoadedMedia) {
+                pausePlayVideo(root.shouldPause);
+                Qt.callLater(root.ready);
+                player.onMediaStatusChanged.disconnect(handler);
+            }
+        });
+    }
+
+    function pausePlayVideo(shouldPause) {
+        if (gamemodeEnabled)
+            return;
+        if (isCurrent === false) {
+            if (player.mediaStatus !== MediaPlayer.NoMedia) {
+                player.pause();
+                root.pendingUnload = true;
+            }
+            return;
+        }
+        if (player.mediaStatus === MediaPlayer.NoMedia)
+            return;
+
+        if (shouldPause || root.shouldPause) {
+            if (player && player.mediaStatus !== MediaPlayer.NoMedia) {
+                player.pause();
+            }
+        } else {
+            if (player.source && player.mediaStatus !== MediaPlayer.PlayingState) {
+                player.play();
+            }
+        }
+    }
+
+    onShouldPauseChanged: {
+        pausePlayVideo(root.shouldPause);
+    }
+
+    onGamemodeEnabledChanged: {
+        if (gamemodeEnabled) {
+            player.pause();
+            pendingUnload = true;
+        } else if (root.isCurrent) {
+            update(root.source);
+            pausePlayVideo(root.shouldPause);
+        }
+    }
+
+    MediaPlayer {
+        id: player
+        autoPlay: false
+        loops: MediaPlayer.Infinite
+        videoOutput: video
+        audioOutput: AudioOutput {
+            muted: Config.background.wallpaper.audio.muteAudio
+            volume: Config.background.wallpaper.audio.volume
+        }
+    }
+
+    VideoOutput {
+        id: video
+        anchors.fill: parent
+        opacity: root.visualMode === "video" ? 1 : 0
+        scale: (root.isCurrent ? 1 : Wallpapers.showPreview ? 1 : 0.8)
+        fillMode: VideoOutput.PreserveAspectCrop
+
+        Behavior on opacity {
+            Anim {
+                onRunningChanged: {
+                    if (running)
+                        return;
+                    if (root.pendingUnload && video.opacity === 0) {
+                        player.stop();
+                        Qt.callLater(() => {
+                            if (root.gamemodeEnabled) {
+                                player.source = "";
+                                return;
+                            }
+
+                            if (!root.isCurrent) {
+                                player.source = "";
+                            }
+                        });
+
+                        root.pendingUnload = false;
+                    }
+                }
+            }
+        }
+
+        Behavior on scale {
+            Anim {}
+        }
+    }
+
+    StyledRect {
+        id: gameModePlaceholder
+        opacity: root.visualMode === "placeholder" ? 1 : 0
+        anchors.fill: parent
+        color: Colours.palette.m3surfaceContainer
+
+        Behavior on opacity {
+            Anim {}
+        }
+
+        Row {
+            anchors.centerIn: parent
+            spacing: Appearance.spacing.large
+
+            MaterialIcon {
+                text: "stadia_controller"
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.extraLarge * 5
+            }
+
+            Column {
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Appearance.spacing.small
+
+                StyledText {
+                    text: qsTr("Video wallpapers are disabled in game mode")
+                    color: Colours.palette.m3onSurfaceVariant
+                    font.pointSize: Appearance.font.size.extraLarge
+                    font.bold: true
+                }
+            }
+        }
+    }
+
+    Connections {
+        target: root
+        function onIsCurrentChanged() {
+            root.pausePlayVideo(root.shouldPause);
+        }
+    }
+}