MediaLiraryView: Move media items with animation when filtered

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 );
         }
     }

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
+                            }
+                        }
                     }
                 }
             }