adding a basic details view skeleton

src/qml/presenter/LibraryItem.qml

@@ -237,7 +237,7 @@ ColumnLayout {
                     implicitWidth: libraryList.width
                     height: selectedLibrary == libraryType ? 50 : 0
                     clip: true
-                    label: index + " " + title
+                    label: title
                     subtitle: {
                         if (libraryType == "song")
                             author

src/qml/presenter/Presentation.qml

@@ -62,7 +62,7 @@ FocusScope {
                     text: "Details"
                     icon.name: "view-list-details"
                     hoverEnabled: true
-                    onClicked: serviceThing.activate();
+                    onClicked: stack.replace(detailsView);
                 }
                 Controls.ToolSeparator {}
                 Item { Layout.fillWidth: true }
@@ -94,11 +94,10 @@ FocusScope {
 
         Item {
             id: presenterView
-            anchors.fill: parent
             Item {
                 id: slideArea
-                implicitWidth: parent.width
+                implicitWidth: stack.width
-                implicitHeight: parent.height - previewSlidesList.height
+                implicitHeight: stack.height - previewSlideList.height
                 /* anchors.bottomMargin: previewSlidesList.height */
 
                 Kirigami.Icon {
@@ -191,56 +190,9 @@ FocusScope {
 
             }
 
-            ListView {
+            Presenter.SlidesListView {
-                // The active items X value from root
+                id: previewSlideList
-                property int activeX
-                id: previewSlidesList
-                anchors.bottom: parent.bottom
-                width: parent.width
-                height: Kirigami.Units.gridUnit * 9
-                orientation: ListView.Horizontal
-                spacing: Kirigami.Units.smallSpacing * 2
-                cacheBuffer: 900
-                reuseItems: true
-                model: SlideModel
-                delegate: Presenter.PreviewSlideListDelegate {}
                 highlight: highlightBar
-                highlightFollowsCurrentItem: false
-
-                Kirigami.WheelHandler {
-                    id: wheelHandler
-                    target: previewSlidesList
-                    filterMouseEvents: true
-                }
-
-                Controls.ScrollBar.horizontal: Controls.ScrollBar {
-                    active: hovered || pressed
-                }
-
-                add: Transition {
-                    NumberAnimation {properties: "width, height"; duration: 3000}
-                    NumberAnimation { properties: "opacity"; duration: 3000 }
-                }
-
-                remove: Transition {
-                    NumberAnimation { properties: "width, height"; duration: 3000 }
-                    NumberAnimation { properties: "opacity"; duration: 3000 }
-                }
-
-                displaced: Transition {
-                    NumberAnimation {properties: "x, y"; duration: 100}
-                }
-
-
-                Connections {
-                    target: SlideModel
-                    function onActiveChanged(index) {
-                        console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$");
-                        console.log(index);
-                        previewSlidesList.currentIndex = index;
-                        previewSlidesList.positionViewAtIndex(index, ListView.Center);
-                    }
-                }
             }
 
             Component {
@@ -264,7 +216,7 @@ FocusScope {
             }
         }
 
-        Item {
+        Component {
             id: gridView
             /* Layout.fillHeight: true */
             /* Layout.fillWidth: true */
@@ -275,7 +227,7 @@ FocusScope {
                 // The active items X value from root
                 property int activeX
                 id: previewSlidesGrid
-                anchors.fill: parent
+                anchors.fill: stack
                 cellWidth: Kirigami.Units.gridUnit * 11
                 cellHeight: Kirigami.Units.gridUnit * 8
                 /* spacing: Kirigami.Units.smallSpacing * 2 */
@@ -299,6 +251,120 @@ FocusScope {
 
 
         }
+
+        Component {
+            id: detailsView
+            Item {
+                id: detailsWrapper
+                implicitWidth: stack.width
+                implicitHeight: stack.height
+
+                Item {
+                    id: detailsSlide
+                    implicitWidth: parent.width / 2
+                    implicitHeight: parent.height - detailsSlideList.height
+                    anchors.left: parent.horizontalCenter
+                    /* anchors.bottomMargin: previewSlidesList.height */
+
+                    Kirigami.Icon {
+                        source: "arrow-left"
+                        implicitWidth: Kirigami.Units.gridUnit * 7
+                        implicitHeight: Kirigami.Units.gridUnit * 10
+                        anchors.right: detailsPreviewSlide.left
+                        anchors.verticalCenter: detailsPreviewSlide.verticalCenter
+                        color: "white"
+                        MouseArea {
+                            anchors.fill: parent
+                            onPressed: previousSlideAction()
+                            cursorShape: Qt.PointingHandCursor
+                        }
+                    }
+
+                    Presenter.Slide {
+                        id: detailsPreviewSlide
+                        implicitWidth: parent.width - 400 > 200 ? parent.width - 400 : 200
+                        implicitHeight: width / 16 * 9
+                        anchors.top: parent.top
+                        anchors.topMargin: 10
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        itemType: SlideObject.ty
+                        imageSource: SlideObject.imageBackground.endsWith(".html") ? "" : SlideObject.imageBackground
+                        webSource: SlideObject.imageBackground.endsWith(".html") ? SlideObject.imageBackground : ""
+                        htmlVisible: SlideObject.imageBackground.endsWith(".html")
+                        videoSource: SlideObject.videoBackground
+                        audioSource: SlideObject.audio
+                        chosenFont: SlideObject.font
+                        textSize: SlideObject.fontSize
+                        text: SlideObject.text
+                        pdfIndex: SlideObject.slideIndex
+                        vidLoop: SlideObject.looping
+                        vidStartTime: SlideObject.videoStartTime
+                        vidEndTime: SlideObject.videoEndTime
+                        preview: true 
+                    }
+
+                    Kirigami.Icon {
+                        source: "arrow-right"
+                        implicitWidth: Kirigami.Units.gridUnit * 7
+                        implicitHeight: Kirigami.Units.gridUnit * 10
+                        anchors.left: detailsPreviewSlide.right
+                        anchors.verticalCenter: detailsPreviewSlide.verticalCenter
+                        color: Kirigami.Theme.textColor
+                        MouseArea {
+                            anchors.fill: parent
+                            onPressed: nextSlideAction()
+                            cursorShape: Qt.PointingHandCursor
+                        }
+                    }
+
+                    RowLayout {
+                        spacing: 2
+                        width: detailsPreviewSlide.width
+                        /* Layout.alignment: Qt.AlignHCenter, Qt.AlignTop */
+                        anchors.top: detailsPreviewSlide.bottom
+                        anchors.topMargin: 10
+                        anchors.horizontalCenter: detailsPreviewSlide.horizontalCenter
+                        /* Layout.columnSpan: 3 */
+                        visible: itemType === "video";
+                        Controls.ToolButton {
+                            Layout.preferredWidth: 25
+                            Layout.preferredHeight: 25
+                            icon.name: detailsPreviewSlide.mpvIsPlaying ? "media-pause" : "media-play"
+                            hoverEnabled: true
+                            onClicked: SlideObject.playPause();
+                        }
+                        Controls.Slider {
+                            id: detailsVideoSlider
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: 25
+                            from: 0
+                            to: detailsPreviewSlide.mpvDuration
+                            value: detailsPreviewSlide.mpvPosition
+                            live: true
+                            onMoved: changeVidPos(value);
+                        }
+
+                        Controls.Switch {
+                            id: detailsLoopSwitch
+                            text: "Loop"
+                            checked: SlideObject.looping
+                            onToggled: SlideObject.setLooping(!SlideObject.looping)
+                            Keys.onLeftPressed: previousSlideAction()
+                            Keys.onRightPressed: nextSlideAction()
+                            Keys.onUpPressed: previousSlideAction()
+                            Keys.onDownPressed: nextSlideAction()
+                        }
+                    }
+
+                }
+
+                Presenter.SlidesListView {
+                    id: detailsSlideList
+                }
+                
+            }
+
+        }
     }
 
     Item {

src/qml/presenter/ServiceList.qml

@@ -143,7 +143,7 @@ Item {
                                 anchors.left: dragHandle.right
                                 anchors.verticalCenter: parent.verticalCenter
                                 anchors.leftMargin: 5
-                                text: index + " " + name
+                                text: name
                                 elide: Text.ElideRight
                                 width: parent.width - trailing.width - dragHandle.width - 25
                                 color: {

src/qml/presenter/SlidesListView.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import org.kde.kirigami 2.13 as Kirigami
+import "./" as Presenter
+import org.presenter 1.0
+import mpv 1.0
+
+ListView {
+    // The active items X value from root
+    property int activeX
+    id: previewSlidesList
+    anchors.bottom: parent.bottom
+    width: parent.width
+    height: Kirigami.Units.gridUnit * 9
+    orientation: ListView.Horizontal
+    spacing: Kirigami.Units.smallSpacing * 2
+    cacheBuffer: 900
+    reuseItems: true
+    model: SlideModel
+    delegate: Presenter.PreviewSlideListDelegate {}
+    highlightFollowsCurrentItem: false
+
+    Kirigami.WheelHandler {
+        id: wheelHandler
+        target: previewSlidesList
+        filterMouseEvents: true
+    }
+
+    Controls.ScrollBar.horizontal: Controls.ScrollBar {
+        active: hovered || pressed
+    }
+
+    add: Transition {
+        NumberAnimation {properties: "width, height"; duration: 3000}
+        NumberAnimation { properties: "opacity"; duration: 3000 }
+    }
+
+    remove: Transition {
+        NumberAnimation { properties: "width, height"; duration: 3000 }
+        NumberAnimation { properties: "opacity"; duration: 3000 }
+    }
+
+    displaced: Transition {
+        NumberAnimation {properties: "x, y"; duration: 100}
+    }
+
+
+    Connections {
+        target: SlideModel
+        function onActiveChanged(index) {
+            console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$");
+            console.log(index);
+            previewSlidesList.currentIndex = index;
+            previewSlidesList.positionViewAtIndex(index, ListView.Center);
+        }
+    }
+}

src/resources.qrc

@@ -15,6 +15,7 @@
         <file>qml/presenter/ImageEditor.qml</file>
         <file>qml/presenter/PresentationEditor.qml</file>
         <file>qml/presenter/Slide.qml</file>
+        <file>qml/presenter/SlidesListView.qml</file>
         <file>qml/presenter/SongEditorSlideList.qml</file>
         <file>qml/presenter/DragHandle.qml</file>
         <file>qml/presenter/Presentation.qml</file>