From f028e38b7a1c559f3341a7fe5234e59c2ee109f6 Mon Sep 17 00:00:00 2001 From: Henk Kalkwater Date: Sun, 22 Aug 2021 00:29:44 +0200 Subject: [PATCH] Polish UI elements --- sailfish/qml/components/PlayQueue.qml | 4 +- sailfish/qml/components/PlaybackBar.qml | 66 +++++++++++++++---- sailfish/qml/components/RemoteImage.qml | 15 ++++- sailfish/qml/cover/CoverPage.qml | 44 +++++++------ sailfish/qml/harbour-sailfin.qml | 10 +-- sailfish/qml/pages/MainPage.qml | 2 +- .../qml/pages/itemdetails/BaseDetailPage.qml | 2 +- 7 files changed, 101 insertions(+), 42 deletions(-) diff --git a/sailfish/qml/components/PlayQueue.qml b/sailfish/qml/components/PlayQueue.qml index 79263bb..f72222b 100644 --- a/sailfish/qml/components/PlayQueue.qml +++ b/sailfish/qml/components/PlayQueue.qml @@ -11,7 +11,7 @@ SilicaListView { section.property: "section" section.delegate: SectionHeader { text: { - switch(section) { + switch(Number(section)) { case J.NowPlayingSection.Queue: //: Now playing page queue section header return qsTr("Queue") @@ -19,7 +19,7 @@ SilicaListView { //: Now playing page playlist section header return qsTr("Playlist") default: - return qsTr("Unknown section") + return qsTr("Unknown section: %1").arg(ListView.section) } } } diff --git a/sailfish/qml/components/PlaybackBar.qml b/sailfish/qml/components/PlaybackBar.qml index 85c5a01..e4f0a3c 100644 --- a/sailfish/qml/components/PlaybackBar.qml +++ b/sailfish/qml/components/PlaybackBar.qml @@ -59,7 +59,6 @@ PanelBackground { height: parent.height onClicked: playbackBar.state = "large" - RemoteImage { id: albumArt anchors { @@ -85,12 +84,18 @@ PanelBackground { Behavior on opacity { FadeAnimation {} } } } + Rectangle { + id: playQueueShim + color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityLow) + opacity: 0 + } Loader { id: queueLoader source: Qt.resolvedUrl("PlayQueue.qml") anchors.fill: albumArt active: false visible: false + opacity: 0 Binding { when: queueLoader.item !== null target: queueLoader.item @@ -119,7 +124,7 @@ PanelBackground { Label { id: name - text: manager.item == null ? qsTr("No media selected") : manager.item.name + text: manager.item === null ? qsTr("No media selected") : manager.item.name width: Math.min(contentWidth, parent.width) font.pixelSize: Theme.fontSizeMedium maximumLineCount: 1 @@ -132,9 +137,9 @@ PanelBackground { if (manager.item === null) return qsTr("Play some media!") switch(manager.item.mediaType) { case "Audio": - return manager.item.artists //.join(", ") + return manager.item.artists.join(", ") } - return qsTr("Not audio") + return qsTr("No audio") } width: Math.min(contentWidth, parent.width) font.pixelSize: Theme.fontSizeSmall @@ -255,7 +260,7 @@ PanelBackground { } PropertyChanges { target: albumArt - state: "blurhash" + forceBlurhash: true width: parent.width anchors.bottomMargin: Theme.paddingLarge } @@ -324,7 +329,7 @@ PanelBackground { target: nextButton; opacity: 1; enabled: true; } PropertyChanges { - target: playModeButton; opacity: 1; enabled: true; + target: playModeButton; opacity: 1; //enabled: true; } PropertyChanges { target: queueButton; opacity: 1; enabled: true; @@ -367,7 +372,7 @@ PanelBackground { PropertyChanges { target: playbackBarTranslate // + small padding since the ProgressBar otherwise would stick out - y: playbackBar.height + Theme.paddingSmall + y: playbackBar.height + Theme.paddingMedium } PropertyChanges { target: playbackBar @@ -394,12 +399,17 @@ PanelBackground { PropertyChanges { target: queueLoader visible: true + opacity: 1 } PropertyChanges { target: largeAlbumArt opacity: 0 visible: false } + PropertyChanges { + target: playQueueShim + opacity: 1 + } } ] @@ -411,7 +421,7 @@ PanelBackground { allowedOrientations: appWindow.allowedOrientations SilicaFlickable { anchors.fill: parent - PullDownMenu { + /*PullDownMenu { MenuItem { //: Pulley menu item to view detailed media information of a song text: qsTr("Info") @@ -420,7 +430,7 @@ PanelBackground { //: Pulley menu item: add music to a playlist text: qsTr("Add to playlist") } - } + }*/ Loader { Component.onCompleted: setSource(Qt.resolvedUrl("PlaybackBar.qml"), {"isFullPage": true, "manager": manager, "y": 0}) @@ -432,7 +442,7 @@ PanelBackground { transitions: [ Transition { - from: "*" + from: "" to: "large" // We animate this object to a large size and then quickly swap out this component // with a page containing this component. @@ -463,6 +473,8 @@ PanelBackground { script: { pageStack.currentPage.showNavigationIndicator = _pageWasShowingNavigationIndicator pageStack.push(fullPage, {"background": pageStack.currentPage.background}, PageStackAction.Immediate) + /*playbackBarTranslate.y = playbackBar.height + Theme.paddingMedium + appWindow.bottomMargin = 0*/ } } } @@ -473,9 +485,10 @@ PanelBackground { }, Transition { from: "hidden" + to: "" NumberAnimation { targets: [playbackBarTranslate, playbackBar] - properties: "y,visibileSize" + properties: "y,visibleSize" duration: 250 easing.type: Easing.OutQuad } @@ -495,7 +508,7 @@ PanelBackground { ParallelAnimation { NumberAnimation { targets: [playbackBarTranslate, playbackBar] - properties: "y,visibileSize" + properties: "y,visibleSize" duration: 250 easing.type: Easing.OutQuad } @@ -509,6 +522,35 @@ PanelBackground { } } } + }, + Transition { + from: "page" + to: "pageQueue" + reversible: false + + SequentialAnimation { + FadeAnimation { + targets: [playQueueShim, largeAlbumArt, queueLoader] + property: "opacity" + } + PropertyAction { target: largeAlbumArt; property: "visible"; value: false } + } + }, + Transition { + from: "pageQueue" + to: "page" + reversible: false + SequentialAnimation { + PropertyAction { target: largeAlbumArt; property: "visible"; value: true } + PropertyAction { target: largeAlbumArt; property: "opacity"; value: 0 } + + FadeAnimation { + targets: [playQueueShim, largeAlbumArt, queueLoader] + property: "opacity" + } + + PropertyAction { target: queueLoader; property: "visible"; value: false } + } } ] } diff --git a/sailfish/qml/components/RemoteImage.qml b/sailfish/qml/components/RemoteImage.qml index f0ffe81..0f12c68 100644 --- a/sailfish/qml/components/RemoteImage.qml +++ b/sailfish/qml/components/RemoteImage.qml @@ -33,6 +33,7 @@ SilicaItem { property string fallbackImage property bool usingFallbackImage property color fallbackColor: Theme.highlightColor + property bool forceBlurhash: false // Force display the blurhash state even though the image is already loaded property var __parentPage : null property bool _alreadyLoaded: false @@ -117,7 +118,7 @@ SilicaItem { states: [ State { name: "fallback" - when: (blurhash.length === 0) && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading) + when: !forceBlurhash && (blurhash.length === 0) && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading) PropertyChanges { target: fallbackBackground opacity: 1 @@ -125,7 +126,7 @@ SilicaItem { }, State { name: "blurhash" - when: blurhash.length > 0 && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading) + when: !forceBlurhash && blurhash.length > 0 && (realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading) PropertyChanges { target: blurhashImage opacity: 1 @@ -133,11 +134,19 @@ SilicaItem { }, State { name: "loaded" - when: realImage.status === Image.Ready + when: !root.forceBlurhash && realImage.status === Image.Ready PropertyChanges { target: realImage //opacity: 1 } + }, + State { + name: "forcedBlurhash" + when: forceBlurhash + PropertyChanges { + target: blurhashImage + opacity: 1 + } } ] diff --git a/sailfish/qml/cover/CoverPage.qml b/sailfish/qml/cover/CoverPage.qml index fbbdac2..d0ad20e 100644 --- a/sailfish/qml/cover/CoverPage.qml +++ b/sailfish/qml/cover/CoverPage.qml @@ -19,7 +19,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA import QtQuick 2.0 import Sailfish.Silica 1.0 -import nl.netsoj.chris.Jellyfin 1.0 +import nl.netsoj.chris.Jellyfin 1.0 as J import "../components" import "../Utils.js" as Utils @@ -33,26 +33,32 @@ CoverBackground { } property int rowCount: 8 - UserItemModel { + J.ItemModel { id: randomItems1 - apiClient: ApiClient - limit: cover.rowCount - imageTypes: ["Primary"] - sortBy: ["IsFavoriteOrLiked", "Random"] - recursive: true - parentId: appWindow.collectionId - Component.onCompleted: reload() + /*loader: J.UserItemsLoader { + apiClient: appWindow.apiClient + limit: cover.rowCount + imageTypes: ["Primary"] + sortBy: ["IsFavoriteOrLiked", "Random"] + recursive: true + parentId: appWindow.collectionId + autoReload: false + }*/ + //Component.onCompleted: reload() } - UserItemModel { + J.ItemModel { id: randomItems2 - apiClient: ApiClient - limit: cover.rowCount - imageTypes: ["Primary"] - sortBy: ["IsFavoriteOrLiked", "Random"] - recursive: true - parentId: appWindow.collectionId - Component.onCompleted: reload() + /*loader: J.UserItemsLoader { + apiClient: appWindow.apiClient + limit: cover.rowCount + imageTypes: ["Primary"] + sortBy: ["IsFavoriteOrLiked", "Random"] + recursive: true + parentId: appWindow.collectionId + autoReload: false + }*/ + //Component.onCompleted: reload() } Row { @@ -79,7 +85,7 @@ CoverBackground { clip: true height: row1.height width: height - source: model.id ? Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height}) + source: model.id ? Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height}) : "" fillMode: Image.PreserveAspectCrop } @@ -123,7 +129,7 @@ CoverBackground { clip: true height: row2.height width: height - source: Utils.itemModelImageUrl(ApiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height}) + source: Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height}) fillMode: Image.PreserveAspectCrop } } diff --git a/sailfish/qml/harbour-sailfin.qml b/sailfish/qml/harbour-sailfin.qml index 735732c..3bdb0d1 100644 --- a/sailfish/qml/harbour-sailfin.qml +++ b/sailfish/qml/harbour-sailfin.qml @@ -38,7 +38,7 @@ ApplicationWindow { readonly property ApiClient apiClient: _apiClient // Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible. - property QtObject itemData + property var itemData // Id of the collection currently browsing. For use on the cover. property string collectionId @@ -68,8 +68,10 @@ ApplicationWindow { } } } - cover: { - if ([MediaPlayer.NoMedia, MediaPlayer.InvalidMedia, MediaPlayer.UnknownStatus].indexOf(playbackManager.status) >= 0) { + cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}} + /*{ + // Disabled due to buggy Loader behaviour + if ([MediaPlayer.NoMedia, MediaPlayer.InvalidMedia, MediaPlayer.UnknownStatus].indexOf(_playbackManager.mediaStatus) >= 0) { if (itemData) { return Qt.resolvedUrl("cover/PosterCover.qml") } else { @@ -78,7 +80,7 @@ ApplicationWindow { } else if (playbackManager.hasVideo){ return Qt.resolvedUrl("cover/VideoCover.qml") } - } + }*/ Notification { id: errorNotification diff --git a/sailfish/qml/pages/MainPage.qml b/sailfish/qml/pages/MainPage.qml index eae8111..bf9113c 100644 --- a/sailfish/qml/pages/MainPage.qml +++ b/sailfish/qml/pages/MainPage.qml @@ -80,7 +80,7 @@ Page { //- Section header for films and TV shows that an user hasn't completed yet. text: qsTr("Resume watching") clickable: false - busy: userResumeLoader.status === J.ApiModel.Loading + busy: userResumeLoader.status === J.UsersViewsLoader.Loading Loader { width: parent.width sourceComponent: carrouselView diff --git a/sailfish/qml/pages/itemdetails/BaseDetailPage.qml b/sailfish/qml/pages/itemdetails/BaseDetailPage.qml index 0d3c3c5..c696f5a 100644 --- a/sailfish/qml/pages/itemdetails/BaseDetailPage.qml +++ b/sailfish/qml/pages/itemdetails/BaseDetailPage.qml @@ -103,7 +103,7 @@ Page { if (status === PageStatus.Active) { console.log("Page ready, ItemID: ", itemId, ", UserID: ", apiClient.userId) jItemLoader.autoReload = true - //appWindow.itemData = jItemLoader.data + appWindow.itemData = jItemLoader.data } } }