Add grid scrolling to ProviderBrowse view

layouts/components/BrowserView/ContentView/ProviderBrowse.qml

@@ -27,9 +27,9 @@ Rectangle {
                 width: parent.width
             }
             CoverGrid {
-                id: coverGrid
                 height: parent.height - 80
                 width: parent.width
+                id: coverGrid
                 provider: root.provider
                 shows: root.provider.showsAlphabetic
                 selected: currentView == 0
@@ -62,9 +62,20 @@ Rectangle {
                     coverGrid.xIndex++;
                 }
             } else if (event.key == Qt.Key_Down) {
-                coverGrid.yIndex++;
+                var max = Math.floor(coverGrid.shows.length / coverGrid.numColumns);
+                if (coverGrid.yIndex < max) {
+                    coverGrid.yIndex++;
+                    if (coverGrid.scrollIndex < coverGrid.yIndex - 1.5) {
+                        coverGrid.scrollIndex++;
+                    }
+                }
             } else if (event.key == Qt.Key_Up) {
-                coverGrid.yIndex--;
+                if (coverGrid.yIndex > 0) {
+                    coverGrid.yIndex--;
+                    if (coverGrid.scrollIndex > coverGrid.yIndex + 0.5) {
+                        coverGrid.scrollIndex--;
+                    }
+                }
             }
         } else if (currentView == 1) { // alphabet
             if (event.key == Qt.Key_Left) {

layouts/components/BrowserView/ContentView/ProviderBrowse/CoverGrid.qml

@@ -5,23 +5,33 @@ import QtQuick.Controls 2.15
 
 import Ikinuki.Client 1.0
 
-Grid {
+ScrollView {
     id: root
-    clip: true
     property bool selected
     property int yIndex: 0
     property int xIndex: 0
+    property int scrollIndex: 0
     property int numColumns: 6
     property var provider
-    property var shows: []
-    columns: numColumns
-    topPadding: 20
-    Repeater {
-        id: repeater
-        model: shows
-        BrowseShow {
-            show: provider.getShow(modelData)
-            elemSelected: selected && (index == (yIndex * numColumns + xIndex))
+    property var shows
+    contentHeight: Math.floor(shows.length / numColumns) * 400
+    ScrollBar.vertical.position: scrollIndex / Math.floor(shows.length / numColumns)
+    Behavior on ScrollBar.vertical.position {
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.Linear
+        }
+    }
+    Grid {
+        columns: numColumns
+        topPadding: 20
+        Repeater {
+            id: repeater
+            model: shows
+            BrowseShow {
+                show: provider.getShow(modelData)
+                elemSelected: selected && (index == (yIndex * numColumns + xIndex))
+            }
         }
     }
 }