chris/harbour-sailfin
chris/harbour-sailfin
1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2024-11-22 09:15:18 +00:00
Code Issues Releases Wiki Activity

Polish UI elements

Browse source
This commit is contained in:
Chris Josten 2021-08-22 00:29:44 +02:00
parent 75474e1793
commit f028e38b7a
7 changed files with 101 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
sailfish/qml/components/PlayQueue.qml
View file

@ -11,7 +11,7 @@ SilicaListView {
section.property: "section" section.property: "section"
section.delegate: SectionHeader { section.delegate: SectionHeader {
text: { text: {
switch(section) { switch(Number(section)) {
case J.NowPlayingSection.Queue: case J.NowPlayingSection.Queue:
//: Now playing page queue section header //: Now playing page queue section header
return qsTr("Queue") return qsTr("Queue")
@ -19,7 +19,7 @@ SilicaListView {
//: Now playing page playlist section header //: Now playing page playlist section header
return qsTr("Playlist") return qsTr("Playlist")
default: default:
return qsTr("Unknown section") return qsTr("Unknown section: %1").arg(ListView.section)
} }
} }
} }

66
sailfish/qml/components/PlaybackBar.qml
View file

@ -59,7 +59,6 @@ PanelBackground {
height: parent.height height: parent.height
onClicked: playbackBar.state = "large" onClicked: playbackBar.state = "large"
RemoteImage { RemoteImage {
id: albumArt id: albumArt
anchors { anchors {
@ -85,12 +84,18 @@ PanelBackground {
Behavior on opacity { FadeAnimation {} } Behavior on opacity { FadeAnimation {} }
} }
} }
Rectangle {
id: playQueueShim
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityLow)
opacity: 0
}
Loader { Loader {
id: queueLoader id: queueLoader
source: Qt.resolvedUrl("PlayQueue.qml") source: Qt.resolvedUrl("PlayQueue.qml")
anchors.fill: albumArt anchors.fill: albumArt
active: false active: false
visible: false visible: false
opacity: 0
Binding { Binding {
when: queueLoader.item !== null when: queueLoader.item !== null
target: queueLoader.item target: queueLoader.item
@ -119,7 +124,7 @@ PanelBackground {
Label { Label {
id: name 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) width: Math.min(contentWidth, parent.width)
font.pixelSize: Theme.fontSizeMedium font.pixelSize: Theme.fontSizeMedium
maximumLineCount: 1 maximumLineCount: 1
@ -132,9 +137,9 @@ PanelBackground {
if (manager.item === null) return qsTr("Play some media!") if (manager.item === null) return qsTr("Play some media!")
switch(manager.item.mediaType) { switch(manager.item.mediaType) {
case "Audio": 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) width: Math.min(contentWidth, parent.width)
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
@ -255,7 +260,7 @@ PanelBackground {
} }
PropertyChanges { PropertyChanges {
target: albumArt target: albumArt
state: "blurhash" forceBlurhash: true
width: parent.width width: parent.width
anchors.bottomMargin: Theme.paddingLarge anchors.bottomMargin: Theme.paddingLarge
} }
@ -324,7 +329,7 @@ PanelBackground {
target: nextButton; opacity: 1; enabled: true; target: nextButton; opacity: 1; enabled: true;
} }
PropertyChanges { PropertyChanges {
target: playModeButton; opacity: 1; enabled: true; target: playModeButton; opacity: 1; //enabled: true;
} }
PropertyChanges { PropertyChanges {
target: queueButton; opacity: 1; enabled: true; target: queueButton; opacity: 1; enabled: true;
@ -367,7 +372,7 @@ PanelBackground {
PropertyChanges { PropertyChanges {
target: playbackBarTranslate target: playbackBarTranslate
// + small padding since the ProgressBar otherwise would stick out // + small padding since the ProgressBar otherwise would stick out
y: playbackBar.height + Theme.paddingSmall y: playbackBar.height + Theme.paddingMedium
} }
PropertyChanges { PropertyChanges {
target: playbackBar target: playbackBar
@ -394,12 +399,17 @@ PanelBackground {
PropertyChanges { PropertyChanges {
target: queueLoader target: queueLoader
visible: true visible: true
opacity: 1
} }
PropertyChanges { PropertyChanges {
target: largeAlbumArt target: largeAlbumArt
opacity: 0 opacity: 0
visible: false visible: false
} }
PropertyChanges {
target: playQueueShim
opacity: 1
}
} }
] ]
@ -411,7 +421,7 @@ PanelBackground {
allowedOrientations: appWindow.allowedOrientations allowedOrientations: appWindow.allowedOrientations
SilicaFlickable { SilicaFlickable {
anchors.fill: parent anchors.fill: parent
PullDownMenu { /*PullDownMenu {
MenuItem { MenuItem {
//: Pulley menu item to view detailed media information of a song //: Pulley menu item to view detailed media information of a song
text: qsTr("Info") text: qsTr("Info")
@ -420,7 +430,7 @@ PanelBackground {
//: Pulley menu item: add music to a playlist //: Pulley menu item: add music to a playlist
text: qsTr("Add to playlist") text: qsTr("Add to playlist")
} }
} }*/
Loader { Loader {
Component.onCompleted: setSource(Qt.resolvedUrl("PlaybackBar.qml"), Component.onCompleted: setSource(Qt.resolvedUrl("PlaybackBar.qml"),
{"isFullPage": true, "manager": manager, "y": 0}) {"isFullPage": true, "manager": manager, "y": 0})
@ -432,7 +442,7 @@ PanelBackground {
transitions: [ transitions: [
Transition { Transition {
from: "*" from: ""
to: "large" to: "large"
// We animate this object to a large size and then quickly swap out this component // We animate this object to a large size and then quickly swap out this component
// with a page containing this component. // with a page containing this component.
@ -463,6 +473,8 @@ PanelBackground {
script: { script: {
pageStack.currentPage.showNavigationIndicator = _pageWasShowingNavigationIndicator pageStack.currentPage.showNavigationIndicator = _pageWasShowingNavigationIndicator
pageStack.push(fullPage, {"background": pageStack.currentPage.background}, PageStackAction.Immediate) pageStack.push(fullPage, {"background": pageStack.currentPage.background}, PageStackAction.Immediate)
/*playbackBarTranslate.y = playbackBar.height + Theme.paddingMedium
appWindow.bottomMargin = 0*/
} }
} }
} }
@ -473,9 +485,10 @@ PanelBackground {
}, },
Transition { Transition {
from: "hidden" from: "hidden"
to: ""
NumberAnimation { NumberAnimation {
targets: [playbackBarTranslate, playbackBar] targets: [playbackBarTranslate, playbackBar]
properties: "y,visibileSize" properties: "y,visibleSize"
duration: 250 duration: 250
easing.type: Easing.OutQuad easing.type: Easing.OutQuad
} }
@ -495,7 +508,7 @@ PanelBackground {
ParallelAnimation { ParallelAnimation {
NumberAnimation { NumberAnimation {
targets: [playbackBarTranslate, playbackBar] targets: [playbackBarTranslate, playbackBar]
properties: "y,visibileSize" properties: "y,visibleSize"
duration: 250 duration: 250
easing.type: Easing.OutQuad 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 }
}
} }
] ]
} }

15
sailfish/qml/components/RemoteImage.qml
View file

@ -33,6 +33,7 @@ SilicaItem {
property string fallbackImage property string fallbackImage
property bool usingFallbackImage property bool usingFallbackImage
property color fallbackColor: Theme.highlightColor 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 var __parentPage : null
property bool _alreadyLoaded: false property bool _alreadyLoaded: false
@ -117,7 +118,7 @@ SilicaItem {
states: [ states: [
State { State {
name: "fallback" 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 { PropertyChanges {
target: fallbackBackground target: fallbackBackground
opacity: 1 opacity: 1
@ -125,7 +126,7 @@ SilicaItem {
}, },
State { State {
name: "blurhash" 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 { PropertyChanges {
target: blurhashImage target: blurhashImage
opacity: 1 opacity: 1
@ -133,11 +134,19 @@ SilicaItem {
}, },
State { State {
name: "loaded" name: "loaded"
when: realImage.status === Image.Ready when: !root.forceBlurhash && realImage.status === Image.Ready
PropertyChanges { PropertyChanges {
target: realImage target: realImage
//opacity: 1 //opacity: 1
} }
},
State {
name: "forcedBlurhash"
when: forceBlurhash
PropertyChanges {
target: blurhashImage
opacity: 1
}
} }
] ]

44
sailfish/qml/cover/CoverPage.qml
View file

@ -19,7 +19,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
import QtQuick 2.0 import QtQuick 2.0
import Sailfish.Silica 1.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 "../components"
import "../Utils.js" as Utils import "../Utils.js" as Utils
@ -33,26 +33,32 @@ CoverBackground {
} }
property int rowCount: 8 property int rowCount: 8
UserItemModel { J.ItemModel {
id: randomItems1 id: randomItems1
apiClient: ApiClient /*loader: J.UserItemsLoader {
limit: cover.rowCount apiClient: appWindow.apiClient
imageTypes: ["Primary"] limit: cover.rowCount
sortBy: ["IsFavoriteOrLiked", "Random"] imageTypes: ["Primary"]
recursive: true sortBy: ["IsFavoriteOrLiked", "Random"]
parentId: appWindow.collectionId recursive: true
Component.onCompleted: reload() parentId: appWindow.collectionId
autoReload: false
}*/
//Component.onCompleted: reload()
} }
UserItemModel { J.ItemModel {
id: randomItems2 id: randomItems2
apiClient: ApiClient /*loader: J.UserItemsLoader {
limit: cover.rowCount apiClient: appWindow.apiClient
imageTypes: ["Primary"] limit: cover.rowCount
sortBy: ["IsFavoriteOrLiked", "Random"] imageTypes: ["Primary"]
recursive: true sortBy: ["IsFavoriteOrLiked", "Random"]
parentId: appWindow.collectionId recursive: true
Component.onCompleted: reload() parentId: appWindow.collectionId
autoReload: false
}*/
//Component.onCompleted: reload()
} }
Row { Row {
@ -79,7 +85,7 @@ CoverBackground {
clip: true clip: true
height: row1.height height: row1.height
width: 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 fillMode: Image.PreserveAspectCrop
} }
@ -123,7 +129,7 @@ CoverBackground {
clip: true clip: true
height: row2.height height: row2.height
width: 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 fillMode: Image.PreserveAspectCrop
} }
} }

10
sailfish/qml/harbour-sailfin.qml
View file

@ -38,7 +38,7 @@ ApplicationWindow {
readonly property ApiClient apiClient: _apiClient readonly property ApiClient apiClient: _apiClient
// Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible. // 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. // Id of the collection currently browsing. For use on the cover.
property string collectionId property string collectionId
@ -68,8 +68,10 @@ ApplicationWindow {
} }
} }
} }
cover: { cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}}
if ([MediaPlayer.NoMedia, MediaPlayer.InvalidMedia, MediaPlayer.UnknownStatus].indexOf(playbackManager.status) >= 0) { /*{
// Disabled due to buggy Loader behaviour
if ([MediaPlayer.NoMedia, MediaPlayer.InvalidMedia, MediaPlayer.UnknownStatus].indexOf(_playbackManager.mediaStatus) >= 0) {
if (itemData) { if (itemData) {
return Qt.resolvedUrl("cover/PosterCover.qml") return Qt.resolvedUrl("cover/PosterCover.qml")
} else { } else {
@ -78,7 +80,7 @@ ApplicationWindow {
} else if (playbackManager.hasVideo){ } else if (playbackManager.hasVideo){
return Qt.resolvedUrl("cover/VideoCover.qml") return Qt.resolvedUrl("cover/VideoCover.qml")
} }
} }*/
Notification { Notification {
id: errorNotification id: errorNotification

2
sailfish/qml/pages/MainPage.qml
View file

@ -80,7 +80,7 @@ Page {
//- Section header for films and TV shows that an user hasn't completed yet. //- Section header for films and TV shows that an user hasn't completed yet.
text: qsTr("Resume watching") text: qsTr("Resume watching")
clickable: false clickable: false
busy: userResumeLoader.status === J.ApiModel.Loading busy: userResumeLoader.status === J.UsersViewsLoader.Loading
Loader { Loader {
width: parent.width width: parent.width
sourceComponent: carrouselView sourceComponent: carrouselView

2
sailfish/qml/pages/itemdetails/BaseDetailPage.qml
View file

@ -103,7 +103,7 @@ Page {
if (status === PageStatus.Active) { if (status === PageStatus.Active) {
console.log("Page ready, ItemID: ", itemId, ", UserID: ", apiClient.userId) console.log("Page ready, ItemID: ", itemId, ", UserID: ", apiClient.userId)
jItemLoader.autoReload = true jItemLoader.autoReload = true
//appWindow.itemData = jItemLoader.data appWindow.itemData = jItemLoader.data
} }
} }
} }