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

sailfin: Improve layout on landscape and tablet screens

Browse source 
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.
This commit is contained in:
Chris Josten 2024-01-17 15:28:57 +01:00
parent 5328e63e2c
commit edcd3a93af
15 changed files with 999 additions and 635 deletions
Download patch file Download diff file Expand all files Collapse all files

5
sailfish/qml/Constants.qml
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -59,7 +59,8 @@ QtObject {
}
}
readonly property real libraryDelegatePosterHeight: libraryDelegateHeight * 1.5 // 1.6667
readonly property real libraryDelegatePosterRatio: 1.5
readonly property real libraryDelegatePosterHeight: libraryDelegateHeight * libraryDelegatePosterRatio
readonly property real libraryProgressHeight: Theme.paddingMedium

4
sailfish/qml/Utils.js
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -52,7 +52,7 @@ function propsToQuery(options) {
for (var prop in options) {
if (options.hasOwnProperty(prop)) {
var value = options[prop];
if (prop === "maxWidth" || prop === "maxHeight") {
if (prop === "maxWidth" || prop === "maxHeight" || prop === "width" || prop === "height") {
value = Math.floor(options[prop]);
}
query += "&" + prop + "=" + value;

5
sailfish/qml/components/PlayToolbar.qml
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -26,12 +26,13 @@ Column {
property real playProgress: 0.0
property bool favourited: false
property alias imageBlurhash: playImage.blurhash
property real maxHeight: parent.width / imageAspectRatio
signal playPressed(bool resume)
spacing: Theme.paddingLarge
BackgroundItem {
width: parent.width
height: width / imageAspectRatio
height: Math.min(maxHeight, width / imageAspectRatio)
RemoteImage {
id: playImage
anchors.fill: parent

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

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2021 Chris Josten
Copyright (C) 2021-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
@ -18,7 +18,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
import QtQuick 2.6
import QtMultimedia 5.6
import Sailfish.Silica 1.0
import nl.netsoj.chris.Jellyfin 1.0 as J
@ -231,9 +230,9 @@ PanelBackground {
rightMargin: Theme.paddingMedium
verticalCenter: parent.verticalCenter
}
icon.source: manager.playbackState === MediaPlayer.PlayingState
icon.source: manager.playbackState === J.PlayerState.Playing
? "image://theme/icon-m-pause" : "image://theme/icon-m-play"
onClicked: manager.playbackState === MediaPlayer.PlayingState
onClicked: manager.playbackState === J.PlayerState.Playing
? manager.pause()
: manager.play()
}

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

@ -2,6 +2,8 @@ import QtQuick 2.0
import Sailfish.Silica 1.0
Page {
allowedOrientations: Orientation.All
PageBusyIndicator {
running: true
}

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

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -40,6 +40,9 @@ Page {
property string _chosenBackdropImage: ""
readonly property string parentId: itemData.parentId || ""
readonly property int gridColumnCount: Math.floor(pageRoot.width / Theme.itemSizeHuge)
readonly property int gridCellSize: Math.floor(pageRoot.width / gridColumnCount)
function updateBackdrop() {
/*var rand = 0;
if (itemData.backdropImageTags.length > 0) {

6
sailfish/qml/pages/itemdetails/CollectionPage.qml
View file

@ -63,9 +63,9 @@ BaseDetailPage {
id: gridView
anchors.fill: parent
model: collectionModel
cellWidth: Constants.libraryDelegateWidth
cellHeight: Utils.usePortraitCover(itemData.collectionType) ? Constants.libraryDelegatePosterHeight
: Constants.libraryDelegateHeight
cellWidth: gridCellSize
cellHeight: Utils.usePortraitCover(itemData.collectionType) ? gridCellSize * Constants.libraryDelegatePosterRatio
: gridCellSize
visible: itemData.status !== J.LoaderBase.Error
header: PageHeader {

29
sailfish/qml/pages/itemdetails/MusicAlbumPage.qml
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -29,10 +29,8 @@ import "../.."
BaseDetailPage {
id: albumPageRoot
readonly property int _songIndexWidth: 100
width: 800 * Theme.pixelRatio
property bool _collectionModelLoaded: false
readonly property bool _twoColumns: albumPageRoot.width / Theme.pixelRatio >= 800
readonly property bool _twoColumns: gridColumnCount > 4
readonly property string _description: {
if (itemData.type === "MusicAlbum") {
//: Short description of the album: %1 -> album artist, %2 -> amount of songs, %3 -> duration, %4 -> release year
@ -63,17 +61,7 @@ BaseDetailPage {
RowLayout {
anchors.fill: parent
Item {height: 1; width: Theme.horizontalPageMargin; visible: wideAlbumCover.visible; }
Loader {
id: wideAlbumCover
visible: _twoColumns
Layout.minimumWidth: 1000 / Theme.pixelRatio
Layout.fillHeight: true
source: visible
? "../../components/music/WideAlbumCover.qml" : ""
onLoaded: bindAlbum(item)
}
Item {height: 1; width: Theme.horizontalPageMargin; visible: wideAlbumCover.visible; }
SilicaListView {
id: list
Layout.fillHeight: true
@ -101,6 +89,17 @@ BaseDetailPage {
VerticalScrollDecorator {}
}
Item {height: 1; width: Theme.paddingLarge; visible: wideAlbumCover.visible; }
Loader {
id: wideAlbumCover
visible: _twoColumns
Layout.minimumWidth: gridCellSize * 2
Layout.fillHeight: true
source: visible
? "../../components/music/WideAlbumCover.qml" : ""
onLoaded: bindAlbum(item)
}
Item {height: 1; width: Theme.horizontalPageMargin; visible: wideAlbumCover.visible; }
}
function bindAlbum(item) {

35
sailfish/qml/pages/itemdetails/MusicArtistPage.qml
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2022 Chris Josten
Copyright (C) 2022-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
@ -107,7 +107,7 @@ BaseDetailPage {
left: parent.left
right: parent.right
}
height: width / 16 * 9
height: Math.min(albumPage.height / 2, width / 16 * 9)
fillMode: Image.PreserveAspectCrop
source: Utils.itemBackdropUrl(apiClient.baseUrl, itemData, 0, {"maxWidth": parent.width})
blurhash: itemData.imageBlurHashes["Backdrop"][itemData.backdropImageTags[0]]
@ -219,15 +219,14 @@ BaseDetailPage {
"pageTitle": qsTr("Discography of %1").arg(itemData.name)
})
}
GridLayout {
width: parent.width
columns: 3
anchors.left: parent.left
width: Math.min(appearsOnModel.count() * gridCellSize, gridColumnCount * gridCellSize)
columns: gridColumnCount
columnSpacing: 0
rowSpacing: 0
anchors {
left: parent.left
right: parent.right
}
Repeater {
id: albumRepeater
model: albumsModel
@ -237,8 +236,8 @@ BaseDetailPage {
poster: Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.jellyfinId, model.imageTags["Primary"], "Primary", {"height": height})
blurhash: model.imageBlurHashes["Primary"][model.imageTags["Primary"]]
title: model.name
Layout.preferredWidth: Constants.libraryDelegateWidth * _multiplier
Layout.preferredHeight: Constants.libraryDelegateHeight * _multiplier
Layout.preferredWidth: gridCellSize * _multiplier
Layout.preferredHeight: gridCellSize * _multiplier
Layout.rowSpan: _multiplier
Layout.columnSpan: _multiplier
onClicked: appWindow.navigateToItem(model.jellyfinId, model.mediaType, model.type, model.isFolder)
@ -256,14 +255,13 @@ BaseDetailPage {
})
}
GridLayout {
width: parent.width
columns: 3
anchors.left: parent.left
width: Math.min(appearsOnModel.count() * gridCellSize, gridColumnCount * gridCellSize)
columns: gridColumnCount
columnSpacing: 0
rowSpacing: 0
anchors {
left: parent.left
right: parent.right
}
Repeater {
id: appearsOnRepeater
model: appearsOnModel
@ -274,8 +272,9 @@ BaseDetailPage {
blurhash: model.imageBlurHashes["Primary"][model.imageTags["Primary"]]
title: model.name
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.preferredWidth: Constants.libraryDelegateWidth * _multiplier
Layout.preferredHeight: Constants.libraryDelegateHeight * _multiplier
Layout.preferredWidth: gridCellSize * _multiplier
Layout.maximumWidth: gridCellSize * _multiplier
Layout.preferredHeight: gridCellSize * _multiplier
Layout.fillWidth: false
Layout.fillHeight: false
onClicked: appWindow.navigateToItem(model.jellyfinId, model.mediaType, model.type, model.isFolder)

20
sailfish/qml/pages/itemdetails/SeasonPage.qml
View file

@ -1,6 +1,6 @@
/*
Sailfin: a Jellyfin client written using Qt
Copyright (C) 2020 Chris Josten
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
@ -58,7 +58,7 @@ BaseDetailPage {
id: episodeImage
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: parent.bottom
}
width: Constants.libraryDelegateWidth
@ -116,11 +116,11 @@ BaseDetailPage {
Label {
id: episodeTitle
anchors {
left: episodeImage.right
leftMargin: Theme.paddingLarge
right: episodeImage.left
rightMargin: Theme.paddingLarge
top: parent.top
right: parent.right
rightMargin: Theme.horizontalPageMargin
left: parent.left
leftMargin: Theme.horizontalPageMargin
}
text: model.name
truncationMode: TruncationMode.Fade
@ -130,10 +130,10 @@ BaseDetailPage {
Label {
id: episodeOverview
anchors {
left: episodeImage.right
leftMargin: Theme.paddingLarge
right: parent.right
rightMargin: Theme.horizontalPageMargin
right: episodeImage.left
rightMargin: Theme.paddingLarge
left: parent.left
leftMargin: Theme.horizontalPageMargin
top: episodeTitle.bottom
bottom: parent.bottom
}

1
sailfish/qml/pages/itemdetails/VideoPage.qml
View file

@ -63,6 +63,7 @@ BaseDetailPage {
imageSource: detailPage.imageSource
imageAspectRatio: Constants.horizontalVideoAspectRatio
imageBlurhash: detailPage.imageBlurhash
maxHeight: detailPage.height / 2
Binding on favourited {
when: _userdataReady
value: itemData.userData.favorite

1
sailfish/qml/pages/setup/LoginDialog.qml
View file

@ -42,6 +42,7 @@ Dialog {
acceptDestination: Page {
allowedOrientations: Orientation.All
BusyLabel {
text: qsTr("Logging in as %1").arg(username.text)
running: true