feat: fill background with blur when using Keep Proportions positioning

refs: #207

Author: luisbocanegra

package/contents/config/main.xml

@@ -132,5 +132,12 @@
       <label>Whether or not to resume last playing video on startup</label>
       <default>True</default>
     </entry>
+    <entry name="FillBlur" type="Bool">
+      <label>Blur background filling</label>
+      <default>true</default>
+    </entry>
+    <entry name="FillBlurRadius" type="Int">
+      <default>64</default>
+    </entry>
   </group>
 </kcfg>

package/contents/ui/FadePlayer.qml

@@ -22,6 +22,8 @@ Item {
     property int changeWallpaperTimerHours: 0
     property int changeWallpaperTimerMs: ((changeWallpaperTimerHours * 60 * 60) + (changeWallpaperTimerMinutes * 60) + changeWallpaperTimerSeconds) * 1000
     property bool resumeLastVideo: true
+    property int fillBlurRadius: 32
+    property bool fillBlur: true
 
     // Crossfade must not be longer than the shortest video or the fade becomes glitchy
     // we don't know the length until a video gets played, so the crossfade duration
@@ -43,8 +45,8 @@ Item {
     property bool primaryPlayer: true
     property VideoPlayer player: primaryPlayer ? videoPlayer1 : videoPlayer2
     property VideoPlayer otherPlayer: primaryPlayer ? videoPlayer2 : videoPlayer1
-    property VideoPlayer player1: videoPlayer1
-    property VideoPlayer player2: videoPlayer2
+    readonly property alias player1: videoPlayer1
+    readonly property alias player2: videoPlayer2
 
     function play() {
         player.play();
@@ -105,6 +107,8 @@ Item {
         z: 2
         opacity: 1
         fillMode: root.fillMode
+        fillBlur: root.fillBlur
+        fillBlurRadius: root.fillBlurRadius
         loops: {
             if (!root.multipleVideos || (root.currentSource.loop && !root.crossfadeEnabled))
                 return MediaPlayer.Infinite;
@@ -192,6 +196,8 @@ Item {
         muted: root.muted
         z: 1
         fillMode: root.fillMode
+        fillBlur: root.fillBlur
+        fillBlurRadius: root.fillBlurRadius
         loops: {
             if (!root.multipleVideos || (root.currentSource.loop && !root.crossfadeEnabled))
                 return MediaPlayer.Infinite;

package/contents/ui/VideoPlayer.qml

@@ -1,10 +1,13 @@
 import QtQuick
 import QtMultimedia
+import Qt5Compat.GraphicalEffects
 
 Item {
     id: root
     property real volume: 1.0
     property int actualDuration: player.duration / playbackRate
+    property int fillBlurRadius: 32
+    property bool fillBlur: true
     property alias source: player.source
     property alias muted: audioOutput.muted
     property alias playbackRate: player.playbackRate
@@ -15,6 +18,19 @@ Item {
     readonly property alias playing: player.playing
     readonly property alias seekable: player.seekable
     readonly property alias duration: player.duration
+    readonly property alias videoHeight: videoOutput.contentRect.height
+    readonly property alias videoWidth: videoOutput.contentRect.width
+    readonly property bool showFillBlur: root.fillBlur && root.fitScale !== 1
+    property real fitScale: {
+        if (height > videoHeight) {
+            return height / videoHeight;
+        }
+
+        if (width > videoWidth) {
+            return width / videoWidth;
+        }
+        return 1;
+    }
 
     function play() {
         player.play();
@@ -43,4 +59,25 @@ Item {
         audioOutput: audioOutput
         loops: root.loops
     }
+
+    ShaderEffectSource {
+        id: videoBlur
+        width: parent.width * root.fitScale + (root.fillBlurRadius * 2)
+        height: parent.height * root.fitScale + (root.fillBlurRadius * 2)
+        sourceItem: root.showFillBlur ? videoOutput : null
+        live: true
+        anchors.centerIn: parent
+        clip: true
+        visible: false
+    }
+
+    FastBlur {
+        id: fillBlur
+        source: videoBlur
+        radius: root.fillBlurRadius
+        visible: root.showFillBlur && videoBlur.sourceItem
+        anchors.fill: videoBlur
+        anchors.centerIn: parent
+        z: -1
+    }
 }

package/contents/ui/config.qml

@@ -66,6 +66,8 @@ ColumnLayout {
     property alias cfg_ChangeWallpaperTimerSeconds: changeWallpaperTimerSecondsSpinBox.value
     property alias cfg_ChangeWallpaperTimerMinutes: changeWallpaperTimerMinutesSpinBox.value
     property alias cfg_ChangeWallpaperTimerHours: changeWallpaperTimerHoursSpinBox.value
+    property alias cfg_FillBlur: blurRadioButton.checked
+    property alias cfg_FillBlurRadius: fillBlurRadius.value
     property int currentTab
     property bool showVideosList: false
     property var isLockScreenSettings: null
@@ -298,12 +300,49 @@ ColumnLayout {
                 textRole: "text"
                 valueRole: "value"
             }
+        }
+        RowLayout {
+            visible: root.currentTab === 0
+            Kirigami.FormData.label: i18n("Background:")
+            ButtonGroup {
+                id: backgroundGroup
+            }
+            RadioButton {
+                id: blurRadioButton
+                text: i18n("Blur:")
+                ButtonGroup.group: backgroundGroup
+                visible: currentTab === 0
+            }
             Label {
-                text: i18n("Background:")
+                text: i18n("radius")
+            }
+            SpinBox {
+                id: fillBlurRadius
+                from: 0
+                to: 145
+            }
+            Button {
+                visible: root.cfg_FillBlurRadius > 64
+                icon.name: "dialog-warning"
+                ToolTip.text: i18n("Quality of the blur is reduced if value exceeds 64. Higher values may cause the blur to stop working!")
+                hoverEnabled: true
+                flat: true
+                ToolTip.visible: hovered
+                Kirigami.Theme.inherit: false
+                Kirigami.Theme.textColor: root.Kirigami.Theme.neutralTextColor
+                Kirigami.Theme.highlightColor: root.Kirigami.Theme.neutralTextColor
+                icon.color: Kirigami.Theme.neutralTextColor
+            }
+            RadioButton {
+                id: colorRadioButton
+                text: i18n("Solid color")
+                ButtonGroup.group: backgroundGroup
+                checked: !root.cfg_FillBlur
             }
             KQuickControls.ColorButton {
                 id: colorButton
                 dialogTitle: i18n("Select Background Color")
+                ButtonGroup.group: backgroundGroup
             }
         }
 
@@ -526,7 +565,7 @@ ColumnLayout {
             }
             Button {
                 visible: blurRadiusSpinBox.visible && cfg_BlurRadius > 64
-                icon.name: "dialog-information-symbolic"
+                icon.name: "dialog-warning"
                 ToolTip.text: i18n("Quality of the blur is reduced if value exceeds 64. Higher values may cause the blur to stop working!")
                 hoverEnabled: true
                 flat: true
@@ -563,7 +602,6 @@ ColumnLayout {
             CheckBox {
                 id: batteryDisablesBlurCheckBox
                 text: i18n("Disable blur")
-                visible: blurRadiusSpinBox.visible
             }
         }
 

package/contents/ui/main.qml

@@ -21,6 +21,7 @@
 import QtQuick
 import QtQuick.Layouts
 import org.kde.plasma.core as PlasmaCore
+import org.kde.ksvg as KSvg
 import org.kde.plasma.plasma5support as P5Support
 import org.kde.plasma.plasmoid
 import Qt5Compat.GraphicalEffects
@@ -253,6 +254,7 @@ WallpaperItem {
             anchors.fill: parent
             muted: main.muteAudio
             lastVideoPosition: main.configuration.LastVideoPosition
+            visible: main.videosConfig.length !== 0
             onSetNextSource: {
                 main.nextVideo();
             }
@@ -265,58 +267,72 @@ WallpaperItem {
             changeWallpaperTimerMinutes: main.changeWallpaperTimerMinutes
             changeWallpaperTimerHours: main.changeWallpaperTimerHours
             fillMode: main.configuration.FillMode
+            fillBlur: main.configuration.FillBlur && !main.batteryDisablesBlur
+            fillBlurRadius: main.configuration.FillBlurRadius
             volume: main.volume
             playbackRate: main.playbackRate
             resumeLastVideo: main.configuration.ResumeLastVideo
         }
-
-        FastBlur {
-            source: player
-            radius: main.showBlur ? main.configuration.BlurRadius : 0
-            visible: radius !== 0
-            anchors.fill: parent
-            Behavior on radius {
-                NumberAnimation {
-                    duration: main.blurAnimationDuration
-                }
+    }
+    FastBlur {
+        id: mainBlur
+        source: background
+        radius: main.showBlur ? main.configuration.BlurRadius : 0
+        visible: radius !== 0
+        anchors.fill: background
+        Behavior on radius {
+            NumberAnimation {
+                duration: main.blurAnimationDuration
             }
         }
+    }
 
-        PlasmaExtras.PlaceholderMessage {
-            visible: main.videosConfig.length == 0
-            anchors.centerIn: parent
-            width: parent.width - Kirigami.Units.gridUnit * 2
-            iconName: "video-symbolic"
-            text: i18n("No video source \n" + main.videoUrls)
-        }
+    PlasmaExtras.PlaceholderMessage {
+        visible: main.videosConfig.length == 0
+        anchors.centerIn: parent
+        width: parent.width - Kirigami.Units.gridUnit * 2
+        iconName: "video-symbolic"
+        text: i18n("No video source \n" + main.videoUrls)
+    }
 
+    Item {
+        visible: main.debugEnabled
+        implicitWidth: debugArea.implicitWidth + debugArea.anchors.leftMargin + debugArea.anchors.rightMargin
+        implicitHeight: debugArea.implicitHeight + debugArea.anchors.topMargin + debugArea.anchors.bottomMargin
+        x: 40
+        y: 100
+        KSvg.FrameSvgItem {
+            id: frameSvg
+            imagePath: "widgets/background"
+            anchors.fill: parent
+        }
         ColumnLayout {
-            id: root
-            visible: main.debugEnabled
-            Item {
-                Layout.preferredWidth: 1
-                Layout.preferredHeight: 100
+            id: debugArea
+            anchors {
+                fill: parent
+                leftMargin: frameSvg.fixedMargins.left
+                rightMargin: frameSvg.fixedMargins.right
+                topMargin: frameSvg.fixedMargins.top
+                bottomMargin: frameSvg.fixedMargins.bottom
             }
-            Kirigami.AbstractCard {
+            PlasmaComponents.Label {
                 Layout.margins: Kirigami.Units.largeSpacing
-                contentItem: PlasmaComponents.Label {
-                    text: {
-                        let text = `filename: ${main.currentSource.filename}\n`;
-                        text += `loops: ${main.currentSource.loop ?? false}\n`;
-                        text += `currentVideoIndex ${main.currentVideoIndex}\n`;
-                        text += `changeWallpaperMode ${main.changeWallpaperMode}\n`;
-                        text += `crossfade ${main.crossfadeEnabled}\n`;
-                        text += `crossfadeDuration ${player.crossfadeDuration} ${player.crossfadeMinDurationLast} ${player.crossfadeMinDurationCurrent}\n`;
-                        text += `multipleVideos ${player.multipleVideos}\n`;
-                        text += `player ${player.player.objectName}\n`;
-                        text += `media status ${player.player.mediaStatus}\n`;
-                        text += `player1 playing ${player.player1.playing}\n`;
-                        text += `player2 playing ${player.player2.playing}\n`;
-                        text += `position ${player.player.position}\n`;
-                        text += `duration ${player.player.duration}\n`;
-                        text += `resumeLastVideo ${player.resumeLastVideo}`;
-                        return text;
-                    }
+                text: {
+                    let text = `filename: ${main.currentSource.filename}\n`;
+                    text += `loops: ${main.currentSource.loop ?? false}\n`;
+                    text += `currentVideoIndex ${main.currentVideoIndex}\n`;
+                    text += `changeWallpaperMode ${main.changeWallpaperMode}\n`;
+                    text += `crossfade ${main.crossfadeEnabled}\n`;
+                    text += `crossfadeDuration ${player.crossfadeDuration} ${player.crossfadeMinDurationLast} ${player.crossfadeMinDurationCurrent}\n`;
+                    text += `multipleVideos ${player.multipleVideos}\n`;
+                    text += `player ${player.player.objectName}\n`;
+                    text += `media status ${player.player.mediaStatus}\n`;
+                    text += `player1 playing ${player.player1.playing}\n`;
+                    text += `player2 playing ${player.player2.playing}\n`;
+                    text += `position ${player.player.position}\n`;
+                    text += `duration ${player.player.duration}\n`;
+                    text += `resumeLastVideo ${player.resumeLastVideo}`;
+                    return text;
                 }
             }
         }