[vlmc-devel] fixup! Use a Qml view to display the media library

[Hugo Beauzée-Luyssen]

vlmc | branch: medialibrary | Hugo Beauzée-Luyssen <hugo at beauzee.fr> | Tue Jul 12 15:59:41 2016 +0200| [a262cf7cca4a317c953f9250a2bac38bf54941dd] | committer: Hugo Beauzée-Luyssen

fixup! Use a Qml view to display the media library

> https://code.videolan.org/videolan/vlmc/commit/a262cf7cca4a317c953f9250a2bac38bf54941dd
---

 src/Gui/library/ui/MediaLibraryView.qml | 110 ++++++++++++++++++--------------
 1 file changed, 63 insertions(+), 47 deletions(-)

diff --git a/src/Gui/library/ui/MediaLibraryView.qml b/src/Gui/library/ui/MediaLibraryView.qml
index 4aafa11..6626f55 100644
--- a/src/Gui/library/ui/MediaLibraryView.qml
+++ b/src/Gui/library/ui/MediaLibraryView.qml
@@ -1,60 +1,76 @@
 import QtQuick 2.0
-import QtQml 2.0
 import QtQuick.Controls 1.4
-import QtQuick.Layouts 1.3
 
-RowLayout {
-    anchors.fill: parent
-    ScrollView {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        Component {
-            id: mediaDelegate
-            Rectangle {
-                property point origin
-                id: mediaItem
-                GridLayout {
-                    rows: 2
-                    columns: 2
-                    anchors.fill: parent
-                    height: 100
-
-                    Image {
-                        height: 100
-                        source: "file://" + thumbnailPath
-                        fillMode: Image.PreserveAspectFit
-                        Layout.rowSpan: 2
-                    }
-                    Text { text: title }
+ScrollView {
+    Component {
+        id: itemDelegate
+        Item {
+            id: mediaItem
+            width: gridView.cellWidth - gridView.spacing
+            height: gridView.cellHeight - gridView.spacing
+            Column {
+                Image {
+                    id: thumbnail
+                    source: thumbnailPath.length > 0 ? "file://" + thumbnailPath : "qrc:///images/vlmc"
+                    fillMode: Image.PreserveAspectFit
+                    width: mediaItem.width
+                    height: mediaItem.height - 20
+                }
+                Row {
+                    width: mediaItem.width
                     Text {
-                        text: "Duration: " + duration
-                        //text: "Duration: " + Qt.formatDateTime( new Date( duration ) )
+                        id: mediaTitle
+                        text: title
+                        fontSizeMode: Text.HorizontalFit
+                        minimumPixelSize: 4
+                        width: mediaItem.width - durationLabel.width
+                        elide: Text.ElideRight
                     }
-                }
+                    Text {
+                        function toDuration( seconds ) {
+                            if ( seconds <= 0 )
+                                return "00:00:00";
+                            var hours   = Math.floor(seconds / 3600);
+                            seconds = seconds % 3600;
+                            var minutes = Math.floor( seconds / 60 );
+                            seconds = Math.floor( seconds % 60 );
+
+                            if (hours   < 10) {hours   = "0" + hours;}
+                            if (minutes < 10) {minutes = "0" + minutes;}
+                            if (seconds < 10) {seconds = "0" + seconds;}
+                            return hours + ':' + minutes + ':' + seconds;
+                        }
 
-                Drag.active: dragArea.drag.active
-                Drag.hotSpot.x: 32
-                Drag.hotSpot.y: 32
-                MouseArea {
-                    id: dragArea
-                    onPressed: mediaItem.origin = Qt.point(mediaItem.x, mediaItem.y)
-                    onReleased: {
-                        mediaItem.x = mediaItem.origin.x
-                        mediaItem.y = mediaItem.origin.y
+                        id: durationLabel
+                        text: toDuration( duration / 1000 )
                     }
-                    drag.target: mediaItem
-                    anchors.fill: parent
-                    anchors.centerIn: parent
                 }
             }
+            Drag.active: dragArea.drag.active
+            Drag.dragType: Drag.Automatic
+            Drag.mimeData: {
+                "vlmc/uuid":"test",
+            }
+            MouseArea {
+                id: dragArea
+                drag.target: mediaItem
+                anchors.fill: parent
+                anchors.centerIn: parent
+                onClicked: gridView.currentIndex = index
+            }
         }
-
-        ListView {
-            id: listView
-            model: mlModel
-            delegate: mediaDelegate
-            focus: true
+    }
+    GridView {
+        id: gridView
+        model: mlModel
+        anchors.fill: parent
+        property int spacing: 10
+        cellWidth: 200 + spacing
+        cellHeight: 180 + spacing
+        delegate: itemDelegate
+        highlight: Rectangle {
+            color: "lightsteelblue"
+            radius: 5
         }
     }
-
 }