Allow to show all favourites / history as a list

src/contents/ui/AlbumPage.qml

@@ -21,6 +21,13 @@ Kirigami.ScrollablePage {
                 applicationWindow().playPlaylist(albumModel.playlistId)
             }
         }
+        right: Kirigami.Action {
+            icon.name: "media-playlist-shuffle"
+            text: i18n("Shuffle")
+            onTriggered: {
+                applicationWindow().playShufflePlaylist(albumModel.playlistId)
+            }
+        }
     }
 
     ListView {

src/contents/ui/LibraryPage.qml

@@ -21,8 +21,27 @@ Kirigami.ScrollablePage {
     }
     
     ColumnLayout {
-        Kirigami.Heading {
-            text: i18n("Favourites")
+        RowLayout {
+            Layout.fillWidth: true
+            Kirigami.Heading {
+                text: i18n("Favourites")
+                Layout.alignment: Qt.AlignLeft
+            }
+
+            // Spacer
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Controls.ToolButton {
+                text: i18n("Show All")
+                Layout.alignment: Qt.AlignRight
+                icon.name: "arrow-right"
+                onClicked: pageStack.layers.push("qrc:/PlaybackHistory.qml", {
+                                                     "dataModel": Library.favourites,
+                                                     "title": i18n("Favourite Songs")
+                                                 })
+            }
         }
         Controls.ScrollView {
             Layout.fillWidth: true
@@ -33,7 +52,7 @@ Kirigami.ScrollablePage {
                     delegate: ColumnLayout {
                         id: delegateItem
                         required property string title
-                        required property string artist
+                        required property string artists
                         required property string videoId
 
                         Layout.fillWidth: false
@@ -73,8 +92,27 @@ Kirigami.ScrollablePage {
                 }
             }
         }
-        Kirigami.Heading {
-            text: i18n("Most played")
+        RowLayout {
+            Layout.fillWidth: true
+            Kirigami.Heading {
+                text: i18n("Most played")
+                Layout.alignment: Qt.AlignLeft
+            }
+
+            // Spacer
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Controls.ToolButton {
+                text: i18n("Show All")
+                Layout.alignment: Qt.AlignRight
+                icon.name: "arrow-right"
+                onClicked: pageStack.layers.push("qrc:/PlaybackHistory.qml", {
+                                                     "dataModel": Library.playbackHistory,
+                                                     "title": i18n("Played Songs")
+                                                 })
+            }
         }
         Controls.ScrollView {
             Layout.fillWidth: true
@@ -85,7 +123,7 @@ Kirigami.ScrollablePage {
                     delegate: ColumnLayout {
                         id: mpdelegateItem
                         required property string title
-                        required property string artist
+                        required property string artists
                         required property string videoId
 
                         Layout.fillWidth: false

src/contents/ui/MaximizedPlayerPage.qml

@@ -155,7 +155,7 @@ Item {
             Item {
                 height: swipeView.width
                 width: swipeView.height
-                
+
                 Image {
                     anchors.centerIn: parent
                     width: swipeView.specWidth

src/contents/ui/PlaybackHistory.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15 as Controls
+
+import org.kde.kirigami 2.15 as Kirigami
+
+import org.kde.ytmusic 1.0
+
+Kirigami.ScrollablePage {
+    id: playbackHistoryPage
+    title: i18n("Unknown list of songs")
+
+    property QtObject dataModel
+
+    ListView {
+        id: listView
+        reuseItems: true
+
+        Kirigami.PlaceholderMessage {
+            visible: listView.count < 1
+            text: i18n("No songs here yet")
+            anchors.centerIn: parent
+        }
+
+        model: playbackHistoryPage.dataModel
+
+        delegate: Kirigami.SwipeListItem {
+            id: delegateItem
+            required property string title
+            required property string videoId
+            required property string artists
+
+            RowLayout {
+                ThumbnailSource {
+                    id: thumbnailSource
+
+                    videoId: delegateItem.videoId
+                }
+
+                Item {
+                    width: Kirigami.Units.gridUnit * 3
+                    height: Kirigami.Units.gridUnit * 3
+
+                    Image {
+                        sourceSize: "200x200"
+                        source: thumbnailSource.cachedPath
+                        fillMode: Image.PreserveAspectCrop
+
+                        width: Kirigami.Units.gridUnit * 3
+                        height: Kirigami.Units.gridUnit * 3
+
+                        Layout.alignment: Qt.AlignLeft
+                    }
+                }
+
+                Controls.Label {
+                    text: delegateItem.title
+                    Layout.fillWidth: true
+                }
+            }
+
+            actions: [
+                Kirigami.Action {
+                    icon.name: "go-next"
+                    text: i18n("Play Next")
+                    onTriggered: UserPlaylistModel.playNext(delegateItem.videoId, delegateItem.title, delegateItem.artists)
+                },
+                Kirigami.Action {
+                    icon.name: "media-playlist-append"
+                    text: i18n("Add to Playlist")
+                    onTriggered: UserPlaylistModel.append(delegateItem.videoId, delegateItem.title, delegateItem.artists)
+                }
+            ]
+        }
+    }
+}

src/contents/ui/main.qml

@@ -31,12 +31,18 @@ Kirigami.ApplicationWindow {
 
         contentItem: RowLayout {
             Controls.ToolButton {
+                id: searchBack
                 Layout.alignment: Qt.AlignLeft
-                visible: !root.wideScreen && root.showSearch && root.searchField.text === ""
+                visible:
+                    (!root.wideScreen && root.showSearch && root.searchField.text === "")
+                    || pageStack.layers.depth > 1
                 text: i18n("Back")
                 icon.name: "go-previous-view"
                 display: Controls.ToolButton.IconOnly
-                onClicked: root.showSearch = false
+                onClicked: if (root.showSearch)
+                               root.showSearch = false
+                           else
+                               pageStack.layers.pop()
             }
 
             Kirigami.Heading {
@@ -47,6 +53,10 @@ Kirigami.ApplicationWindow {
                 visible: !root.wideScreen && !root.showSearch
             }
 
+            // spacer
+            Item {
+                Layout.fillWidth: !root.wideScreen
+            }
 
             Loader {
                 id: searchLoader
@@ -147,6 +157,7 @@ Kirigami.ApplicationWindow {
 
             onAccepted: {
                 pageStack.clear()
+                pageStack.layers.clear()
 
                 if (text) {
                     Library.addSearch(text)

src/library.cpp

@@ -148,7 +148,7 @@ QHash<int, QByteArray> PlaybackHistoryModel::roleNames() const {
     return {
         {Roles::VideoId, "videoId"},
         {Roles::Title, "title"},
-        {Roles::Artist, "artist"},
+        {Roles::Artist, "artists"},
         {Roles::Plays, "plays"}
     };
 }
@@ -186,7 +186,7 @@ QHash<int, QByteArray> FavouritesModel::roleNames() const {
     return {
         {Roles::VideoId, "videoId"},
         {Roles::Title, "title"},
-        {Roles::Artist, "artist"}
+        {Roles::Artist, "artists"}
     };
 }
 

src/resources.qrc

@@ -18,5 +18,6 @@ SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted
         <file alias="MaximizedPlayerPage.qml">contents/ui/MaximizedPlayerPage.qml</file>
         <file>migrations/2022-05-20-194850_init/down.sql</file>
         <file>migrations/2022-05-20-194850_init/up.sql</file>
+        <file alias="PlaybackHistory.qml">contents/ui/PlaybackHistory.qml</file>
     </qresource>
 </RCC>