[vlc-commits] qml/PlaylistMedia: Add drag and drop support

[Benjamin Arnaud]

vlc | branch: master | Benjamin Arnaud <benjamin.arnaud at videolabs.io> | Thu Mar 11 10:16:57 2021 +0100| [2cf1d87ea4f287b5f6a1b2838ab23852f12100de] | committer: Pierre Lamot

qml/PlaylistMedia: Add drag and drop support

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=2cf1d87ea4f287b5f6a1b2838ab23852f12100de
---

 modules/gui/qt/medialibrary/qml/PlaylistMedia.qml | 103 +++++++++++++++++++++-
 1 file changed, 101 insertions(+), 2 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/PlaylistMedia.qml b/modules/gui/qt/medialibrary/qml/PlaylistMedia.qml
index f5139786b4..2193684521 100644
--- a/modules/gui/qt/medialibrary/qml/PlaylistMedia.qml
+++ b/modules/gui/qt/medialibrary/qml/PlaylistMedia.qml
@@ -27,13 +27,20 @@ import "qrc:///main/"    as MainInterface
 import "qrc:///style/"
 
 MainInterface.MainTableView {
-    id: playlistDisplay
+    id: root
 
     //---------------------------------------------------------------------------------------------
     // Properties
     //---------------------------------------------------------------------------------------------
 
-    readonly property int columns: VLCStyle.gridColumnsForWidth(playlistDisplay.availableRowWidth)
+    readonly property int columns: VLCStyle.gridColumnsForWidth(root.availableRowWidth)
+
+    //---------------------------------------------------------------------------------------------
+    // Private
+
+    property variant _item: null
+
+    property bool _before: true
 
     //---------------------------------------------------------------------------------------------
     // Settings
@@ -41,6 +48,8 @@ MainInterface.MainTableView {
 
     rowHeight: VLCStyle.tableCoverRow_height
 
+    delegate: PlaylistMediaDelegate {}
+
     headerColor: VLCStyle.colors.bg
 
     sortModel: [{
@@ -75,6 +84,80 @@ MainInterface.MainTableView {
 
     onActionForSelection: medialib.addAndPlay(model.getIdsForIndexes(selection))
 
+    //---------------------------------------------------------------------------------------------
+    // Connections
+    //---------------------------------------------------------------------------------------------
+
+    Connections {
+        target: root
+
+        // NOTE: We want to hide the drop line when scrolling so its position stays relevant.
+        onContentYChanged: hideLine(_item)
+    }
+
+    //---------------------------------------------------------------------------------------------
+    // Functions
+    //---------------------------------------------------------------------------------------------
+    // Drop interface
+
+    // FIXME: Maybe this could be a global function ?
+    function isValidInstanceOf(object, type) {
+        return (!!object && (object instanceof type));
+    }
+
+    function isDroppable(drop, index) {
+        // NOTE: Internal drop (intra-playlist).
+        return isValidInstanceOf(drop.source, Widgets.DragItem);
+    }
+
+    function applyDrop(drop, index) {
+        var item = drop.source;
+
+        // NOTE: Move implementation.
+        if (dragItem === item) {
+            model.move(modelSelect.selectedIndexes, index);
+
+        // NOTE: Dropping medialibrary content into the playlist.
+        } else if (isValidInstanceOf(item, Widgets.DragItem)) {
+            model.insert(item.getSelectedInputItem(), index);
+        }
+
+        forceActiveFocus();
+
+        root.hideLine(_item);
+    }
+
+    //---------------------------------------------------------------------------------------------
+    // Drop line
+
+    function showLine(item, before)
+    {
+        // NOTE: We want to avoid calling mapFromItem too many times.
+        if (_item === item && _before === before)
+            return;
+
+        _item   = item;
+        _before = before;
+
+        if (before)
+            line.y = view.mapFromItem(item, 0, 0).y;
+        else
+            line.y = view.mapFromItem(item, 0, item.height).y;
+
+        line.visible = true;
+    }
+
+    function hideLine(item)
+    {
+        // NOTE: We want to make sure we're not being called after the 'showLine' function.
+        if (_item !== item)
+            return;
+
+        _item = null;
+
+        line.visible = false;
+    }
+
     //---------------------------------------------------------------------------------------------
     // Childs
     //---------------------------------------------------------------------------------------------
@@ -88,6 +171,9 @@ MainInterface.MainTableView {
 
         showTitleText: false
 
+        //-----------------------------------------------------------------------------------------
+        // TableColumns implementation
+
         function titlecoverLabels(model) {
             return [
                 (model) ? model.resolution_name : "",
@@ -95,4 +181,17 @@ MainInterface.MainTableView {
             ].filter(function(a) { return a !== "" })
         }
     }
+
+    Rectangle {
+        id: line
+
+        anchors.left : parent.left
+        anchors.right: parent.right
+
+        height: VLCStyle.dp(1)
+
+        visible: false
+
+        color: VLCStyle.colors.accent
+    }
 }