[vlmc-devel] MediaLiraryView: Move media items with animation when filtered

[Yikai Lu]

vlmc | branch: master | Yikai Lu <luyikei.qmltu at gmail.com> | Sun Jun 25 04:45:06 2017 +0900| [0d1b01ed30cc96634cffb53b5c6a474f8eed0ce4] | committer: Yikai Lu

MediaLiraryView: Move media items with animation when filtered

> https://code.videolan.org/videolan/vlmc/commit/0d1b01ed30cc96634cffb53b5c6a474f8eed0ce4
---

 src/Gui/library/ui/MediaItem.qml        |  9 ++++----
 src/Gui/library/ui/MediaLibraryView.qml | 40 ++++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/Gui/library/ui/MediaItem.qml b/src/Gui/library/ui/MediaItem.qml
index bb4d12d7..e393633a 100644
--- a/src/Gui/library/ui/MediaItem.qml
+++ b/src/Gui/library/ui/MediaItem.qml
@@ -3,10 +3,11 @@ import QtQuick.Controls 1.4
 
 Rectangle {
     id: mediaItem
-    color: GridView.isCurrentItem ? "black" : "#333333"
-    border.color: "#222222"
+    width: visible ? gridView.cellWidth : 0
+    height: visible ? gridView.cellWidth + 50 : 0
+    color: gridView.currentMedia == mediaId ? "black" : "#333333"
     border.width: 1
-    visible: searchText.length > 0 ? containsString( searchText ) : true
+    visible: searchText.length == 0 || containsString( searchText )
     enabled: visible
     property string thumbnailPath
     property string title
@@ -64,7 +65,7 @@ Rectangle {
         id: dragArea
         anchors.fill: parent
         onPressed: {
-            gridView.currentIndex = index;
+            gridView.currentMedia = mediaId;
             view.onMediaSelected( mediaId );
         }
     }
diff --git a/src/Gui/library/ui/MediaLibraryView.qml b/src/Gui/library/ui/MediaLibraryView.qml
index 51ea32f2..1d1d55e8 100644
--- a/src/Gui/library/ui/MediaLibraryView.qml
+++ b/src/Gui/library/ui/MediaLibraryView.qml
@@ -52,19 +52,37 @@ Rectangle {
                     }
                 }
 
-                GridView {
+                Flickable {
                     id: gridView
-                    model: mlModel
                     width: sView.viewport.width
-                    height: ( count + 3 - ( count % 3 ) ) / 3 * cellHeight
-                    cellHeight: cellWidth
-                    delegate: MediaItem {
-                        width: gridView.cellWidth
-                        height: width
-                        duration: model.duration
-                        thumbnailPath: model.thumbnailPath
-                        title: model.title
-                        mediaId: model.id
+                    height: ( mlRepeater.count + 3 - ( mlRepeater.count % 3 ) ) / 3 * cellHeight
+
+                    property int cellWidth: 200
+                    property int cellHeight: cellWidth
+                    property int currentMedia: -1
+
+                    Grid {
+                        columns: 3
+
+                        add: Transition {
+                            NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.OutSine }
+                        }
+
+                        move: Transition {
+                            NumberAnimation { property: "x"; duration: 400; easing.type: Easing.OutSine }
+                            NumberAnimation { property: "y"; duration: 400; easing.type: Easing.OutSine }
+                        }
+
+                        Repeater {
+                            id: mlRepeater
+                            model: mlModel
+                            MediaItem {
+                                duration: model.duration
+                                thumbnailPath: model.thumbnailPath
+                                title: model.title
+                                mediaId: model.id
+                            }
+                        }
                     }
                 }
             }