Basic KDE video playback without loops lagging

ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/main.qml

@@ -1,41 +1,75 @@
-import QtQuick 2.11
-import QtQuick.Controls 2.0
-import QtGraphicalEffects 1.0
-import QtQuick.Window 2.15
-import Qt.WebSockets 1.15
+import QtQuick 2.0
+import QtQuick.Controls 2.12
+import QtWebSockets 1.1
 import QtWebEngine 1.8
+import QtMultimedia 5.12
+
 
 Rectangle {
     id: root
     color: "orange"
+    anchors.fill: parent
 
     property string fullContentPath
     property real volume: 1
     property string fillMode: "Cover"
     property string type
+    property string projectSourceFileAbsolute
+    property bool loops: true
+
+    MediaPlayer {
+		id: player1
+		volume: root.volume
+		source: root.projectSourceFileAbsolute
+		onStopped: {
+            //if(wallpaper.configuration.DualPlayback){
+                videoOutput1.visible = false
+                videoOutput2.visible = true
+                if(player2.source != root.projectSourceFileAbsolute){
+                    player2.source = root.projectSourceFileAbsolute
+                }
+                player1.play()
+                player1.pause()
+                player2.play()
+            /*}else{
+                if(player2.source == root.projectSourceFileAbsolute){
+                    player2.stop()
+                    player2.source = ''
+                }
+                player1.play()
+            }*/
+		}
+	}
+
+	MediaPlayer {
+		id: player2
+		volume: root.volume
+		onStopped: {
+            videoOutput2.visible = false
+            videoOutput1.visible = true
+            player2.play()
+            player2.pause()
+			player1.play()
+		}
+	}
+
+
+    VideoOutput {
+		id: videoOutput1
+		fillMode: VideoOutput.PreserveAspectCrop
+		anchors.fill: parent
+		source: player1
+	}
+
+	VideoOutput {
+		id: videoOutput2
+		fillMode: VideoOutput.PreserveAspectCrop
+		anchors.fill: parent
+		source: player2
+	}
 
-    function getSetVideoCommand() {
-        // TODO 30:
-        // Currently wont work. Commit anyways til QtCreator and Qt work with js template literals
-        var src = ""
-        src += "var videoPlayer = document.getElementById('videoPlayer');"
-        src += "var videoSource = document.getElementById('videoSource');"
-        src += "videoSource.src = '" + root.fullContentPath + "';"
-        src += "videoPlayer.load();"
-        src += "videoPlayer.volume = " + root.volume + ";"
-        src += "videoPlayer.setAttribute('style', 'object-fit :" + root.fillMode + ";');"
-        src += "videoPlayer.play();"
-        return src
-    }
     Component.onCompleted: {
-        WebEngine.settings.localContentCanAccessFileUrls = true
-        WebEngine.settings.localContentCanAccessRemoteUrls = true
-        WebEngine.settings.allowRunningInsecureContent = true
-        WebEngine.settings.accelerated2dCanvasEnabled = true
-        WebEngine.settings.javascriptCanOpenWindows = false
-        WebEngine.settings.showScrollBars = false
-        WebEngine.settings.playbackRequiresUserGesture = false
-        WebEngine.settings.focusOnNavigationEnabled = true
+        
     }
 
     WebSocket {
@@ -48,33 +82,36 @@ Rectangle {
                 socket.sendTextMessage("Hello World from QML wallpaper")
         }
 
-        onTextMessageReceived: {
+        onTextMessageReceived: (message)=> {
             socket.sendTextMessage(message)
             print(message)
 
             var obj = JSON.parse(message)
 
             if (obj.command === "replace") {
-                 socket.sendTextMessage("replace")
+                socket.sendTextMessage("replace")
                 root.type = obj.type
-                //root.fillMode = obj.fillMode
+                root.fillMode = obj.fillMode
                 root.volume = obj.volume
-                root.fullContentPath = obj.absolutePath + "/" + obj.file
-                const msg = "JSON: " +root.type + root.fillMode + root.volume + root.fullContentPath;
-                socket.sendTextMessage(root.getSetVideoCommand())
-                webView.setVideo()
-            }
-        }
-    }
+                root.projectSourceFileAbsolute = "file://" + obj.absolutePath + "/" + obj.file
+                print("got: " + root.projectSourceFileAbsolute)
+                //mediaplayer.source = root.projectSourceFileAbsolute
+                //mediaplayer.play()
+                //videplayer.source = root.projectSourceFileAbsolute
+                //playlist.addItem(root.projectSourceFileAbsolute)
+                //playlist.addItem(root.projectSourceFileAbsolute)
+                //videplayer.play()
 
-    WebEngineView {
-        id: webView
-
-        function setVideo() {
-            webView.runJavaScript(root.getSetVideoCommand());
+                videoOutput2.visible = false
+                videoOutput1.visible = true
+                
+                //if(wallpaper.configuration.DualPlayback){
+                player2.source = root.projectSourceFileAbsolute
+                player2.play()
+                player2.pause()
+                //}
+                player1.play()
+           }
         }
-        url:"index.html"
-        anchors.fill: parent
-        opacity: loadProgress === 100 ? 1 : 0
     }
 }