diff --git a/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/index.html b/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/index.html
new file mode 100644
index 00000000..717a664d
--- /dev/null
+++ b/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
diff --git a/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/main.qml b/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/main.qml
index 2240e57e..d9ebd91f 100644
--- a/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/main.qml
+++ b/ScreenPlayWallpaper/kde/ScreenPlay/contents/ui/main.qml
@@ -1,12 +1,91 @@
import QtQuick 2.11
-import org.kde.plasma.core 2.0 as PlasmaCore
import QtGraphicalEffects 1.0
import QtQuick.Window 2.0
+import Qt.WebSockets 1.15
+import QtWebEngine 1.8
Rectangle {
id: root
- color: "orange"
- width: Screen.width
- height: Screen.height
+ color: "#333333"
+ property string fullContentPath
+ property real volume: 1.0
+ property string fillMode: "Cover"
+ property string type
+ WebSocket {
+ id: socket
+ url: "ws://127.0.0.1:16395"
+ active: true
+ onTextMessageReceived: {
+ var obj = JSON.parse(message)
+ if (obj.command === "replace") {
+ root.type = obj.type
+ root.fillMode = obj.fillMode
+ root.volume = obj.volume
+ root.fullContentPath = obj.absolutePath + "/" + obj.file
+ webView.setVideo()
+ }
+ }
+ onStatusChanged: if (socket.status === WebSocket.Error) {
+ messageBox.text = "Error: " + socket.errorString
+ } else if (socket.status === WebSocket.Open) {
+ socket.sendTextMessage("Hello World")
+ } else if (socket.status === WebSocket.Closed) {
+ messageBox.text += "Socket closed"
+ }
+ }
+ 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
+ }
+
+ 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();"
+ print(src)
+
+ return src
+ }
+
+ WebEngineView {
+ id: webView
+ anchors.fill: parent
+ opacity: loadProgress === 100 ? 1 : 0
+ onLoadProgressChanged: {
+ if (loadProgress === 100)
+ setVideo()
+ }
+
+ function setVideo() {
+ webView.runJavaScript(root.getSetVideoCommand())
+ }
+ }
+
+ Rectangle {
+ id: infoWrapper
+ width: 300
+ height: 200
+ opacity: 0
+ anchors.centerIn: parent
+
+ Text {
+ id: messageBox
+ text: qsTr("text")
+ anchors.centerIn: parent
+ }
+ }
}