feat: allow setting custom playback speed per video

By default all videos will follow the global playback speed

closes: #71

Co-authored-by: Arthur Lobo <[email protected]>

Author: luisbocanegra

package/contents/ui/code/utils.js

@@ -1,6 +1,9 @@
 function parseCompat(cfgStr) {
   try {
-    return videosConfig = JSON.parse(cfgStr)
+    return (videosConfig = JSON.parse(cfgStr).map((video) => {
+      video.playbackRate = video.playbackRate ?? 0.0;
+      return video;
+    }));
   } catch (e) {
     console.log("Possibly old config, parsing as multi-line string", e)
     const lines = cfgStr.trim().split("\n");
@@ -22,11 +25,13 @@ function createVideo(filename) {
   this.enabled = true;
   this.duration = 0;
   this.customDuration = 0;
+  this.playbackRate = 0.0;
   return {
     "filename": this.filename,
     "enabled": this.enabled,
     "duration": this.duration,
-    "customDuration": this.customDuration
+    "customDuration": this.customDuration,
+    "playbackRate": this.playbackRate,
   }
 }
 

package/contents/ui/config.qml

@@ -199,6 +199,16 @@ Kirigami.FormLayout {
                             Utils.updateConfig()
                         }
                     }
+                    Button {
+                        icon.name: "preferences-other"
+                        enabled: true
+                        onClicked: {
+                            dialogPlaybackRateSpeed.value = videosConfig[modelData].playbackRate
+                            videoConfig.filename = videosConfig[modelData].filename
+                            videoConfig.index = index
+                            videoConfig.open()
+                        }
+                    }
                 }
                 Button{
                     icon.name: "edit-delete-remove"
@@ -689,6 +699,53 @@ Kirigami.FormLayout {
         }
     }
 
+    Kirigami.Dialog {
+        id: videoConfig
+        standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
+        title: i18n("Video Settings")
+        padding: Kirigami.Units.largeSpacing
+
+        property int index
+        property real speed
+        property string filename: ""
+
+        Kirigami.FormLayout {
+            RowLayout {
+                Kirigami.FormData.label: i18n("Playback speed:")
+                Slider {
+                    id: dialogPlaybackRateSpeed
+                    from: 0
+                    to: 2
+                    value: videoConfig.speed
+                    onValueChanged: {
+                        videoConfig.speed = value
+                    }
+                }
+                Label {
+                    text: parseFloat(dialogPlaybackRateSpeed.value).toFixed(2)
+                    font.features: { "tnum": 1 }
+                }
+                Button {
+                    icon.name: "edit-undo-symbolic"
+                    flat: true
+                    onClicked: {
+                        dialogPlaybackRateSpeed.value = 0.0
+                    }
+                    ToolTip.text: i18n("Reset to default")
+                    ToolTip.visible: hovered
+                }
+                Kirigami.ContextualHelpButton {
+                    toolTipText: i18n("A value other than 0.0 overrides the global Playback speed for this video.")
+                }
+            }
+        }
+
+        onAccepted: {
+            videosConfig[index].playbackRate = speed
+            Utils.updateConfig()
+        }
+    }
+
     Component.onCompleted: {
         let candidate = root.parent;
         while (candidate) {

package/contents/ui/main.qml

@@ -36,7 +36,7 @@ WallpaperItem {
     property string videoUrls: main.configuration.VideoUrls
     property var videosConfig: Utils.parseCompat(videoUrls)
     property int currentVideoIndex: main.configuration.LastVideoIndex < videosConfig.length ? main.configuration.LastVideoIndex : 0
-    property string currentSource: videosConfig[currentVideoIndex].filename
+    property var currentSource: videosConfig.length > 0 ? videosConfig[currentVideoIndex] : Utils.createVideo("")
     property int pauseBatteryLevel: main.configuration.PauseBatteryLevel
     property bool shouldPlay: {
         if (lockScreenMode) {
@@ -116,7 +116,7 @@ WallpaperItem {
     // 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
     // will decrease below the configured duration if needed as videos get played
-    property int crossfadeMinDuration: parseInt(Math.max(Math.min(player1.duration, player2.duration) / 3, 1) )
+    property int crossfadeMinDuration: parseInt(Math.max(Math.min(player1.actualDuration, player2.actualDuration) / 3, 1) )
     property int crossfadeDuration: Math.min(main.configuration.CrossfadeDuration, crossfadeMinDuration)
     property bool crossfadeEnabled: main.configuration.CrossfadeEnabled
     property bool tick: true
@@ -171,12 +171,13 @@ WallpaperItem {
         // console.error(videoUrls);
         if (videosConfig.length == 0) {
             main.stop()
+            main.currentSource.filename = ""
         } else {
             nextVideo()
             tick = true
             player2.pause()
             videoOutput.opacity = 1
-            player1.source = currentSource
+            player1.playerSource = currentSource
             player1.play()
         }
     }
@@ -224,15 +225,15 @@ WallpaperItem {
     }
 
     function nextVideo() {
-        printLog("- Video ended " + currentVideoIndex + ": " + currentSource)
+        printLog("- Video ended " + currentVideoIndex + ": " + currentSource.filename)
         currentVideoIndex = (currentVideoIndex + 1) % videosConfig.length
         if (randomMode && currentVideoIndex === 0) {
             const shuffledVideos = Utils.shuffleArray(videosConfig)
-            currentSource = shuffledVideos[currentVideoIndex].filename || ''
+            currentSource = shuffledVideos[currentVideoIndex]
         } else {
-            currentSource = videosConfig[currentVideoIndex].filename || ''
+            currentSource = videosConfig[currentVideoIndex]
         }
-        printLog("- Next " + currentVideoIndex + ": " + currentSource)
+        printLog("- Next " + currentVideoIndex + ": " + currentSource.filename)
     }
 
     Rectangle {
@@ -280,24 +281,26 @@ WallpaperItem {
 
         MediaPlayer {
             id: player1
-            source: currentSource
+            property var playerSource: main.currentSource
+            property int actualDuration: duration / playbackRate
+            source: playerSource.filename ?? ""
             videoOutput: videoOutput
             audioOutput: audioOutput
-            playbackRate: main.playbackRate
+            playbackRate: playerSource.playbackRate || main.playbackRate
             loops: (videosConfig.length > 1) ?
                 1 : crossfadeEnabled ?
                     1 : MediaPlayer.Infinite
             onPositionChanged: (position) => {
                 main.lastVideoPosition = position
                 if (!tick) return
                 // BUG This doesn't seem to work the first time???
-                if (position > duration - crossfadeDuration) {
+                if ((position / playbackRate) > actualDuration - crossfadeDuration) {
                     if (crossfadeEnabled) {
                         nextVideo()
                         printLog("player1 fading out");
                         videoOutput.opacity = 0
                         tick = false
-                        player2.source = currentSource
+                        player2.playerSource = currentSource
                         volumeOutput2 = 1
                         player2.play()
                     }
@@ -307,7 +310,7 @@ WallpaperItem {
                 if (status == MediaPlayer.EndOfMedia) {
                     if (crossfadeEnabled) return
                     nextVideo()
-                    source = currentSource
+                    playerSource = currentSource
                     play()
                 }
                 if (status == MediaPlayer.LoadedMedia && player1.seekable) {
@@ -331,20 +334,23 @@ WallpaperItem {
 
         MediaPlayer {
             id: player2
+            property var playerSource: main.currentSource
+            property int actualDuration: duration / playbackRate
+            source: playerSource.filename ?? ""
             videoOutput: videoOutput2
             audioOutput: audioOutput2
-            playbackRate: main.playbackRate
+            playbackRate: playerSource.playbackRate || main.playbackRate
             loops: 1
             onPositionChanged: (position) => {
                 main.lastVideoPosition = position
                 if (tick) return
-                if (position > duration - crossfadeDuration) {
+                if ((position / playbackRate) > actualDuration - crossfadeDuration) {
                     printLog("player1 fading in");
                     videoOutput.opacity = 1
                     nextVideo()
                     tick = true
                     volumeOutput2 = 0
-                    player1.source = currentSource
+                    player1.playerSource = currentSource
                     player1.play()
                 }
             }
@@ -402,8 +408,6 @@ WallpaperItem {
     function stop() {
         player1.stop()
         player2.stop()
-        player1.source = ""
-        player2.source = ""
     }
 
     function updateState() {
@@ -510,7 +514,7 @@ WallpaperItem {
                 tick = true
                 player2.pause()
                 videoOutput.opacity = 1
-                player1.source = currentSource
+                player1.playerSource = currentSource
                 player1.play()
             }
         },