1
0
Fork 0
mirror of https://github.com/HenkKalkwater/harbour-sailfin.git synced 2024-11-23 01:35:18 +00:00
harbour-sailfin/sailfish/qml/pages/itemdetails/SeasonPage.qml
Chris Josten 60b91335f9 sailfin: Improve layout on landscape and tablet screens
I've dropped the whole `<constant> * Theme.pixelRatio`-approach[^1]
for determining when the UI should split into two columns, because
the values seemed quite arbitrary and I was entering random numbers.
I'm now doing it on multiples of `Theme.itemSizeHuge`, which is easier
to reason about.

This also fixes occasions where items in a grid would leave a bit of
space to the right in the CollectionPage.

Backdrop images in VideoPage and MusicAlbumPage now have a maximum
height of half of the screen, to avoid filling the entire screen in
landscape mode. Perhaps it doesn't always look good, but it makes the
layout more usable.

Images on the SeasonPage and MusicAlbumPage (in landscape) are now
aligned to the right, to avoid blocking the Page back indicator.
2024-05-09 21:48:07 +02:00

168 lines
5.9 KiB
QML

/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020-2024 Chris Josten
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
import QtQuick 2.6
import Sailfish.Silica 1.0
import nl.netsoj.chris.Jellyfin 1.0 as J
import "../.."
import "../../components"
import ".."
BaseDetailPage {
J.ItemModel {
id: episodeModel
loader: J.ShowEpisodesLoader {
apiClient: appWindow.apiClient
seriesId: itemData.seriesId
seasonId: itemData.jellyfinId
fields: [J.ItemFields.Overview]
autoReload: itemData.jellyfinId.length > 0
}
}
Connections {
target: itemData
onReady: episodeModel.reload()
}
SilicaListView {
anchors.fill: parent
contentHeight: content.height
//visible: itemData.status !== JellyfinItem.Error
header: PageHeader {
title: itemData.name
description: itemData.seriesName
}
model: episodeModel
delegate: BackgroundItem {
height: Constants.libraryDelegateHeight
RemoteImage {
id: episodeImage
anchors {
top: parent.top
right: parent.right
bottom: parent.bottom
}
width: Constants.libraryDelegateWidth
height: Constants.libraryDelegateHeight
source: Utils.itemModelImageUrl(apiClient.baseUrl, model.jellyfinId, model.imageTags.Primary, "Primary", {"maxHeight": height})
blurhash: model.imageBlurHashes.Primary[model.imageTags.Primary]
fillMode: Image.PreserveAspectCrop
clip: true
// Makes the progress bar stand out more
Shim {
anchors {
left: parent.left
bottom: parent.bottom
right: parent.right
}
height: parent.height / 3
shimColor: Theme.overlayBackgroundColor
shimOpacity: Theme.opacityOverlay
//width: model.userData.PlayedPercentage * parent.width / 100
visible: episodeProgress.width > 0 || model.userDataPlayed || model.userDataFavorite // It doesn't look nice when it's visible on every image
}
Rectangle {
id: episodeProgress
anchors {
left: parent.left
bottom: parent.bottom
}
height: Theme.paddingMedium
width: model.userDataPlayedPercentage * parent.width / 100
color: Theme.highlightColor
}
Row {
spacing: Theme.paddingSmall
anchors {
bottom: episodeProgress.width > 0 ? episodeProgress.top : parent.bottom
bottomMargin: Theme.paddingMedium
right: parent.right
rightMargin: Theme.paddingMedium
}
Icon {
source: "image://theme/icon-s-checkmark"
visible: model.userDataPlayed
}
Icon {
source: "image://theme/icon-s-favorite"
visible: model.userDataFavorite
}
}
}
Label {
id: episodeTitle
anchors {
right: episodeImage.left
rightMargin: Theme.paddingLarge
top: parent.top
left: parent.left
leftMargin: Theme.horizontalPageMargin
}
text: model.name
truncationMode: TruncationMode.Fade
horizontalAlignment: Text.AlignLeft
}
Label {
id: episodeOverview
anchors {
right: episodeImage.left
rightMargin: Theme.paddingLarge
left: parent.left
leftMargin: Theme.horizontalPageMargin
top: episodeTitle.bottom
bottom: parent.bottom
}
color: highlighted ? Theme.secondaryHighlightColor: Theme.secondaryColor
font.pixelSize: Theme.fontSizeExtraSmall
//: No overview/summary text of an episode available
text: model.overview || qsTr("No overview available")
wrapMode: Text.WordWrap
elide: Text.ElideRight
}
onClicked: appWindow.navigateToItem(model.jellyfinId, model.mediaType, model.type, model.isFolder);
}
VerticalScrollDecorator {}
}
Connections {
target: itemData
onStatusChanged: {
if (itemData.status == JellyfinItem.Ready) {
episodeModel.reload()
}
}
}
onStatusChanged: {
if (status == PageStatus.Active) {
//console.log(JSON.stringify(itemData))
//episodeModel.show = itemData.seriesId
//episodeModel.seasonId = itemData.jellyfinId
}
}
}