[vlc-devel] [PATCH 40/55] qml: refactor playlist

Fatih Uzunoglu fuzun54 at outlook.com
Thu Jan 7 21:36:53 UTC 2021


---
 .../gui/qt/playlist/qml/PlaylistDelegate.qml  | 22 +++++----
 .../gui/qt/playlist/qml/PlaylistListView.qml  | 47 +++++++++++--------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/modules/gui/qt/playlist/qml/PlaylistDelegate.qml b/modules/gui/qt/playlist/qml/PlaylistDelegate.qml
index 4762465992..7172e7384b 100644
--- a/modules/gui/qt/playlist/qml/PlaylistDelegate.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistDelegate.qml
@@ -19,6 +19,7 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
+
 import QtGraphicalEffects 1.0
 
 import org.videolan.vlc 0.1
@@ -35,7 +36,7 @@ Rectangle {
     readonly property bool isLastItem: (index === listView.modelCount - 1)
     readonly property bool selected : model.selected
 
-    property alias hovered: mouse.containsMouse
+    property alias hovered: mouseArea.containsMouse
 
     color: {
         if (selected)
@@ -86,16 +87,19 @@ Rectangle {
     // top drop indicator bar
     Rectangle {
         id: topDropIndicator
-        z: 1
-        width: parent.width
-        height: 1
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        height: VLCStyle.dp(1)
         anchors.top: parent.top
+
         visible: false
         color: colors.accent
     }
 
     MouseArea {
-        id: mouse
+        id: mouseArea
 
         width: parent.width
         implicitHeight: childrenRect.height
@@ -106,14 +110,14 @@ Rectangle {
 
         onContainsMouseChanged: {
             if (containsMouse) {
-                var bottomItemIndex = listView.listView.indexAt(delegate.width / 2, (listView.listView.contentY + listView.height) - 2)
-                var topItemIndex = listView.listView.indexAt(delegate.width / 2, listView.listView.contentY + 2)
+                var bottomItemIndex = listView.listView.indexAt(delegate.width / 2, (listView.listView.contentY + listView.height) + 1)
+                var topItemIndex = listView.listView.indexAt(delegate.width / 2, listView.listView.contentY - 1)
 
                 if(bottomItemIndex !== -1 && model.index >= bottomItemIndex - 1)
                 {
                     listView.fadeRectBottomHovered = Qt.binding(function() {return delegate.hovered})
                 }
-                if(topItemIndex !== -1 && model.index <= topItemIndex + 1)
+                if(model.index <= topItemIndex + 1)
                 {
                     listView.fadeRectTopHovered = Qt.binding(function() {return delegate.hovered})
                 }
@@ -153,7 +157,7 @@ Rectangle {
         drag.target: dragItem
 
         Connections {
-            target: mouse.drag
+            target: mouseArea.drag
             onActiveChanged: {
                 if (target.active) {
                     if (!root.model.isSelected(index)) {
diff --git a/modules/gui/qt/playlist/qml/PlaylistListView.qml b/modules/gui/qt/playlist/qml/PlaylistListView.qml
index fb6da97738..3c95f6560c 100644
--- a/modules/gui/qt/playlist/qml/PlaylistListView.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistListView.qml
@@ -43,23 +43,30 @@ Widgets.NavigableFocusScope {
         Move // Keyboard item move mode, activated through PlaylistOverlayMenu
     }
 
+    function isValidInstanceOf(object, type) {
+        return (!!object && (object instanceof type))
+    }
+
     function isDropAcceptable(drop, index) {
-        return drop.hasUrls
-                || ((!!drop.source && (drop.source instanceof PlaylistDroppable))
-                     && drop.source.canInsertIntoPlaylist(index))
+        return drop.hasUrls || // external drop (i.e. from filesystem)
+                (isValidInstanceOf(drop.source, Widgets.DragItem) && drop.source.canInsertIntoPlaylist(index)) // internal drop (inter-view or intra-playlist)
     }
 
     function acceptDrop(index, drop) {
-        if (!!drop.source && (drop.source instanceof PlaylistDroppable)) {
+        if (isValidInstanceOf(drop.source, Widgets.DragItem)) {
+            // dropping Medialib view content into playlist or intra-playlist dragging:
             drop.source.insertIntoPlaylist(index)
         } else if (drop.hasUrls) {
-            //force conversion to an actual list
+            // dropping an external item (i.e. filesystem drag) into playlist:
+            // force conversion to an actual list
             var urlList = []
             for ( var url in drop.urls)
                 urlList.push(drop.urls[url])
             mainPlaylistController.insert(index, urlList, false)
+
+            // This is required otherwise backend may handle the drop as well yielding double addition
+            drop.accept(Qt.IgnoreAction)
         }
-        drop.accept(Qt.IgnoreAction)
     }
 
     PlaylistOverlayMenu {
@@ -81,7 +88,6 @@ Widgets.NavigableFocusScope {
                 listView.forceActiveFocus()
         }
 
-        //label for DnD
         Widgets.DNDLabel {
             id: dragItem
 
@@ -124,6 +130,7 @@ Widgets.NavigableFocusScope {
                 }
             }
 
+            // FIXME: Drag animation for listView sometimes messes up dragging (dragged item sticking to the cursor).
             SmoothedAnimation {
                 id: upAnimation
                 target: listView.listView
@@ -131,7 +138,7 @@ Widgets.NavigableFocusScope {
                 to: 0
                 running: dragItem._scrollingDirection === -1 && dragItem.visible
 
-                velocity: VLCStyle.dp(150, VLCStyle.scale)
+                velocity: VLCStyle.dp(225, VLCStyle.scale)
             }
 
             SmoothedAnimation {
@@ -141,7 +148,7 @@ Widgets.NavigableFocusScope {
                 to: listView.listView.contentHeight - listView.height
                 running: dragItem._scrollingDirection === 1 && dragItem.visible
 
-                velocity: VLCStyle.dp(150, VLCStyle.scale)
+                velocity: VLCStyle.dp(225, VLCStyle.scale)
             }
         }
 
@@ -276,30 +283,33 @@ Widgets.NavigableFocusScope {
                 signal setItemDropIndicatorVisible(int index, bool visible)
 
                 Connections {
-                    target: root.model
+                    target: listView.model
+
                     onRowsInserted: {
-                        if (listView.currentIndex == -1)
+                        if (listView.currentIndex === -1)
                             listView.currentIndex = 0
                     }
+
                     onModelReset: {
-                        if (listView.currentIndex == -1 &&  root.model.count > 0)
+                        if (listView.currentIndex === -1 && root.model.count > 0)
                             listView.currentIndex = 0
                     }
+
                     onSelectedCountChanged: {
-                        var selectedIndexes = root.model.getSelection()
+                        var selectedIndexes = listView.model.getSelection()
 
                         if (listView.modelCount === 0 || selectedIndexes.length === 0)
                             return
 
-                        var bottomItemIndex = listView.listView.indexAt(listView.listView.contentX, (listView.listView.contentY + listView.height) - 2)
-                        var topItemIndex    = listView.listView.indexAt(listView.listView.contentX, listView.listView.contentY + 2)
+                        var bottomItemIndex = listView.listView.indexAt(listView.width / 2, (listView.listView.contentY + listView.height) + 1)
+                        var topItemIndex = listView.listView.indexAt(listView.width / 2, listView.listView.contentY - 1)
 
-                        if (topItemIndex !== -1 && (root.model.isSelected(topItemIndex) || (modelCount >= 2 && root.model.isSelected(topItemIndex + 1))))
+                        if (listView.model.isSelected(topItemIndex) || (listView.model.isSelected(topItemIndex + 1)))
                             listView.fadeRectTopHovered = true
                         else
                             listView.fadeRectTopHovered = false
 
-                        if (bottomItemIndex !== -1 && (root.model.isSelected(bottomItemIndex) || (root.model.isSelected(bottomItemIndex - 1))))
+                        if (listView.model.isSelected(bottomItemIndex) || (bottomItemIndex !== -1 && listView.model.isSelected(bottomItemIndex - 1)))
                             listView.fadeRectBottomHovered = true
                         else
                             listView.fadeRectBottomHovered = false
@@ -508,6 +518,7 @@ Widgets.NavigableFocusScope {
                 }
 
                 Column {
+                    id: noContentInfoColumn
                     anchors.centerIn: parent
                     visible: model.count === 0
 
@@ -521,7 +532,6 @@ Widgets.NavigableFocusScope {
                         opacity: 0.3
                     }
 
-                    // ToDo: Use TitleLabel
                     Label {
                         anchors.horizontalCenter: parent.horizontalCenter
                         anchors.topMargin: VLCStyle.margin_xlarge
@@ -533,7 +543,6 @@ Widgets.NavigableFocusScope {
                         opacity: 0.4
                     }
 
-                    // ToDo: Use BodyLabel
                     Label {
                         anchors.topMargin: VLCStyle.margin_normal
                         text: i18n.qtr("Drag & Drop some content here!")
-- 
2.27.0



More information about the vlc-devel mailing list