feat(background): show clock for video wallpapers. (#1719)

.config/quickshell/ii/modules/background/Background.qml

@@ -37,12 +37,12 @@ Scope {
             property int firstWorkspaceId: relevantWindows[0]?.workspace.id || 1
             property int lastWorkspaceId: relevantWindows[relevantWindows.length - 1]?.workspace.id || 10
             // Wallpaper
-            property string wallpaperPath: Config.options.background.wallpaperPath
             property bool wallpaperIsVideo: Config.options.background.wallpaperPath.endsWith(".mp4")
                 || Config.options.background.wallpaperPath.endsWith(".webm")
                 || Config.options.background.wallpaperPath.endsWith(".mkv")
                 || Config.options.background.wallpaperPath.endsWith(".avi")
                 || Config.options.background.wallpaperPath.endsWith(".mov")
+            property string wallpaperPath: wallpaperIsVideo ? Config.options.background.thumbnailPath : Config.options.background.wallpaperPath
             property real preferredWallpaperScale: Config.options.background.parallax.workspaceZoom
             property real effectiveWallpaperScale: 1 // Some reasonable init value, to be updated
             property int wallpaperWidth: modelData.width // Some reasonable init value, to be updated
@@ -148,7 +148,7 @@ Scope {
 
             // Wallpaper
             Image {
-                id: wallpaperImage
+                id: wallpaper
                 visible: !bgRoot.wallpaperIsVideo
                 property real value // 0 to 1, for offset
                 value: {
@@ -176,13 +176,14 @@ Scope {
                     width: bgRoot.screen.width * bgRoot.effectiveWallpaperScale
                     height: bgRoot.screen.height * bgRoot.effectiveWallpaperScale
                 }
+            }
 
             // The clock
             Item {
                 id: clock
                 anchors {
-                        left: parent.left
+                    left: wallpaper.left
-                        top: parent.top
+                    top: wallpaper.top
                     leftMargin: ((root.fixedClockPosition ? root.fixedClockX : bgRoot.clockX * bgRoot.effectiveWallpaperScale) - implicitWidth / 2) - (wallpaperImage.effectiveValue * bgRoot.movableXSpace)
                     topMargin: ((root.fixedClockPosition ? root.fixedClockY : bgRoot.clockY * bgRoot.effectiveWallpaperScale) - implicitHeight / 2)
                     Behavior on leftMargin {
@@ -198,7 +199,7 @@ Scope {
 
                 ColumnLayout {
                     id: clockColumn
-                        anchors.centerIn: parent
+                    anchors.centerIn: wallpaper
                     spacing: 0
 
                     StyledText {
@@ -264,7 +265,6 @@ Scope {
 
                 }
             }
-            }
 
             // Password prompt
             StyledText {

.config/quickshell/ii/modules/common/Config.qml

@@ -115,6 +115,7 @@ Singleton {
                 property real clockX: -500
                 property real clockY: -500
                 property string wallpaperPath: ""
+                property string thumbnailPath: ""
                 property JsonObject parallax: JsonObject {
                     property bool enableWorkspace: true
                     property real workspaceZoom: 1.07 // Relative to your screen, not wallpaper size

.config/quickshell/ii/scripts/colors/switchwall.sh

@@ -110,15 +110,15 @@ check_and_prompt_upscale() {
     fi
 }
 
-THUMBNAIL_DIR="/tmp/mpvpaper_thumbnails"
 CUSTOM_DIR="$XDG_CONFIG_HOME/hypr/custom"
 RESTORE_SCRIPT_DIR="$CUSTOM_DIR/scripts"
 RESTORE_SCRIPT="$RESTORE_SCRIPT_DIR/__restore_video_wallpaper.sh"
+THUMBNAIL_DIR="$RESTORE_SCRIPT_DIR/mpvpaper_thumbnails"
 VIDEO_OPTS="no-audio loop hwdec=auto scale=bilinear interpolation=no video-sync=display-resample panscan=1.0 video-scale-x=1.0 video-scale-y=1.0 video-align-x=0.5 video-align-y=0.5 load-scripts=no"
 
 is_video() {
     local extension="${1##*.}"
-    [[ "$extension" == "mp4" || "$extension" == "mkv" || "$extension" == "webm" ]] && return 0 || return 1
+    [[ "$extension" == "mp4" || "$extension" == "webm" || "$extension" == "mkv" || "$extension" == "avi" || "$extension" == "mov" ]] && return 0 || return 1
 }
 
 kill_existing_mpvpaper() {
@@ -158,6 +158,13 @@ set_wallpaper_path() {
     fi
 }
 
+set_thumbnail_path() {
+    local path="$1"
+    if [ -f "$SHELL_CONFIG_FILE" ]; then
+        jq --arg path "$path" '.background.thumbnailPath = $path' "$SHELL_CONFIG_FILE" > "$SHELL_CONFIG_FILE.tmp" && mv "$SHELL_CONFIG_FILE.tmp" "$SHELL_CONFIG_FILE"
+    fi
+}
+
 switch() {
     imgpath="$1"
     mode_flag="$2"
@@ -226,6 +233,9 @@ switch() {
             thumbnail="$THUMBNAIL_DIR/$(basename "$imgpath").jpg"
             ffmpeg -y -i "$imgpath" -vframes 1 "$thumbnail" 2>/dev/null
 
+            # Set thumbnail path
+            set_thumbnail_path "$thumbnail"
+
             if [ -f "$thumbnail" ]; then
                 matugen_args=(image "$thumbnail")
                 generate_colors_material_args=(--path "$thumbnail")