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

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

@ -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 }
}
}
]
}

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

@ -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
}
}
]

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

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

@ -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

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.
text: qsTr("Resume watching")
clickable: false
busy: userResumeLoader.status === J.ApiModel.Loading
busy: userResumeLoader.status === J.UsersViewsLoader.Loading
Loader {
width: parent.width
sourceComponent: carrouselView

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

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