some minor ui fixes and ui for play/pause button for first slide

src/qml/presenter/Slide.qml

@@ -63,17 +63,17 @@ Item {
                 id: playArea
                 anchors.fill: parent
                 enabled: editMode
-                onPressed: mpv.playPause();
+                /* onPressed: mpv.playPause(); */
                 cursorShape: preview ? Qt.ArrowCursor : Qt.BlankCursor
             }
 
-            Controls.ProgressBar {
-                anchors.top: parent.bottom
-                visible: editMode
-                width: parent.width - 400
-                value: mpv.position
-                to: mpv.duration
-            }
+            /* Controls.ProgressBar { */
+            /*     anchors.top: parent.bottom */
+            /*     width: mpv.width */
+            /*     visible: editMode */
+            /*     value: mpv.position */
+            /*     to: mpv.duration */
+            /* } */
         }
 
         Timer {

src/qml/presenter/SlideEditor.qml

@@ -18,34 +18,82 @@ Item {
     property string font
     property real fontSize
 
+    property bool playingVideo: false
+
     property ListModel songs: songModel
 
+    property var firstItem
+
+    Controls.ToolButton {
+        id: playBackgroundButton
+        anchors.top: parent.top
+        anchors.left: parent.left
+        text: playingVideo ? "Pause" : "Play"
+        icon.name: playingVideo ? "media-pause" : "media-play"
+        hoverEnabled: true
+        onClicked: playPauseSlide();
+    }
+
+
+    Controls.ProgressBar {
+        anchors.top: parent.top
+        anchors.left: playBackgroundButton.right
+        anchors.leftMargin: 10
+        width: parent.width - playBackgroundButton.width - 10
+        height: playBackgroundButton.height
+        /* visible: editMode */
+        value: firstItem.mpvPosition
+        to: firstItem.mpvDuration
+    }
+
     ListView {
         id: slideList
-        anchors.fill: parent
+        anchors.top: playBackgroundButton.bottom
+        anchors.topMargin: 20
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        width: parent.width
         model: songModel
         clip: true
         cacheBuffer: 900
         reuseItems: true
         spacing: Kirigami.Units.gridUnit
-        flickDeceleration: 4000
+        /* flickDeceleration: 4000 */
         /* boundsMovement: Flickable.StopAtBounds */
         synchronousDrag: true
         delegate: Presenter.Slide {
             id: representation
             editMode: true
-            imageSource: root.imageBackground
-            videoSource: root.videoBackground
+            imageSource: song.backgroundType = "image" ? song.background : ""
+            videoSource: song.backgroundType = "video" ? song.background : ""
             hTextAlignment: root.hTextAlignment
             vTextAlignment: root.vTextAlignment
-            chosenFont: root.font
-            textSize: root.fontSize
+            chosenFont: song.font
+            textSize: song.fontSize
             preview: true
             text: verse
             implicitWidth: slideList.width
             implicitHeight: width * 9 / 16
         }
 
+        Kirigami.WheelHandler {
+            id: wheelHandler
+            target: slideList
+            filterMouseEvents: true
+        }
+
+        Controls.ScrollBar.vertical: Controls.ScrollBar {
+            parent: slideList.parent
+            anchors.top: slideList.top
+            anchors.left: slideList.right
+            anchors.bottom: slideList.bottom
+            active: hovered || pressed
+        }
+
+
     }
 
     Component.onCompleted: {
@@ -96,4 +144,11 @@ Item {
         }
     }
 
+    function playPauseSlide() {
+        firstItem = slideList.itemAtIndex(0)
+        playingVideo = !playingVideo;
+        slideList.itemAtIndex(0).editMode = false;
+        slideList.itemAtIndex(0).loadVideo();
+    }
+
 }

src/qml/presenter/SongEditor.qml

@@ -224,10 +224,10 @@ Item {
                     Layout.preferredWidth: 500
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    Layout.bottomMargin: 30
-                    Layout.topMargin: 30
-                    Layout.rightMargin: 20
-                    Layout.leftMargin: 20
+                    Layout.bottomMargin: 20
+                    Layout.topMargin: 10
+                    Layout.rightMargin: 0
+                    Layout.leftMargin: 10
                 }
             }
         }
@@ -328,13 +328,19 @@ Item {
     }
 
     function updateBackground(background, backgroundType) {
+        song.background = background;
+        song.backgroundType = backgroundType;
         songsqlmodel.updateBackground(songIndex, background);
         songsqlmodel.updateBackgroundType(songIndex, backgroundType);
         print("changed background");
         if (backgroundType === "image") {
             //todo
+            slideEditor.videoBackground = "";
+            slideEditor.imageBackground = background;
         } else {
             //todo
+            slideEditor.imageBackground = "";
+            slideEditor.videoBackground = background;
         }
     }
 
@@ -352,11 +358,13 @@ Item {
     function updateFont(font) {
         changeSlideFont(font, false);
         songsqlmodel.updateFont(songIndex, font);
+        song.font = font;
     }
 
     function updateFontSize(fontSize) {
         changeSlideFontSize(fontSize, false);
         songsqlmodel.updateFontSize(songIndex, fontSize);
+        song.fontSize = fontSize;
     }
 
     function changeSlideHAlignment(alignment) {