AN attempt to get covers to work again

Covers should now work when at least the playbackManager is playing.
Covers based on the currently displayed item on the page does not work
yet.

The CoverPage has been revamped to use 1 model and 1 PathView to animate
the items for cleaner code.
This commit is contained in:
Chris Josten 2021-08-23 01:53:20 +02:00
parent 5ee2869db9
commit 757327ceac
6 changed files with 118 additions and 145 deletions

View File

@ -26,149 +26,115 @@ import "../Utils.js" as Utils
CoverBackground {
id: cover
Label {
id: label
readonly property int rowCount: 8
readonly property real rowOffset: ((rowCount - 1) * 0.5)
readonly property real rowHeight: height / 2
readonly property real bottomOffset: width - rowHeight
readonly property bool onMainScreen: appWindow.itemData === null
readonly property bool itemId: appWindow.itemData.jellyfinId || appWindow.pageStack.currentPage.itemId
readonly property bool hasParent: !appWindow.itemData !== null && appWindow.itemData.jellyfinId.length !== 0
J.ItemModel {
id: randomItems
loader: J.UserItemsLoader {
id: randomItemsLoader
apiClient: appWindow.apiClient
limit: cover.rowCount * 2
imageTypes: [J.ImageType.Primary]
sortBy: "IsFavoriteOrLiked,Random"
recursive: false
parentId: hasParent ? itemId : ""
autoReload: false
onParentIdChanged: {
if (parentId.length > 0) reload()
}
}
}
PathView {
id: pathView
model: randomItems
path: Path {
startX: -rowHeight * rowOffset
startY: rowHeight * 0.5
PathLine {
x: rowHeight * rowOffset
y: rowHeight * 0.5
}
PathPercent {
value: 0.5
}
PathLine {
x: rowHeight * rowOffset + bottomOffset
y: rowHeight * 1.5
}
PathPercent {
value: 0.5
}
PathLine {
x: -rowHeight * rowOffset + bottomOffset
y: rowHeight * 1.5
}
PathPercent {
value: 1
}
PathLine {
x: -rowHeight * rowOffset
y: rowHeight * 0.5
}
}
delegate: RemoteImage {
height: rowHeight
width: height
source: model.jellyfinId
? Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.jellyfinId, model.imageTags["Primary"], "Primary", {"maxHeight": row1.height})
: ""
blurhash: model.jellyfinId
? model.imageBlurHashes["Primary"][model.imageTags["Primary"]]
: ""
fillMode: Image.PreserveAspectCrop
}
}
Rectangle {
anchors.fill: parent
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityHigh)
}
Column {
anchors.centerIn: parent
text: qsTr("Sailfin")
}
property int rowCount: 8
J.ItemModel {
id: randomItems1
/*loader: J.UserItemsLoader {
apiClient: appWindow.apiClient
limit: cover.rowCount
imageTypes: ["Primary"]
sortBy: ["IsFavoriteOrLiked", "Random"]
recursive: true
parentId: appWindow.collectionId
autoReload: false
}*/
//Component.onCompleted: reload()
}
J.ItemModel {
id: randomItems2
/*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 {
id: row1
property bool movingRight: true
property int moveCount: 0
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
transform: [
Translate {
x: -row1.height// + (row1.width - row1.height) / 2;
},
Translate {
id: row1Translate;
Behavior on x { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }}
}
]
height: parent.height / 2
width: parent.width
Repeater {
model: randomItems1
RemoteImage {
clip: true
height: row1.height
width: height
source: model.id ? Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height})
: ""
fillMode: Image.PreserveAspectCrop
}
Image {
anchors.horizontalCenter: parent.horizontalCenter
source: Qt.resolvedUrl("../icon.png")
width: parent.width / 3
height: width
}
function move() {
if (movingRight) {
row1Translate.x -= row1.height
moveCount++;
} else {
row1Translate.x += row1.height
moveCount--;
}
if (moveCount == 0) movingRight = true;
if (moveCount == rowCount - 3) movingRight = false;
}
}
Row {
id: row2
property bool movingRight: false
property int moveCount: rowCount - 3
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
transform: [
Translate {
x: -row2.height * (rowCount - 2) + (row2.width - row2.height);
},
Translate {
id: row2Translate;
Behavior on x { NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }}
}
]
height: parent.height / 2
width: parent.width
Repeater {
model: randomItems2
RemoteImage {
clip: true
height: row2.height
width: height
source: Utils.itemModelImageUrl(appWindow.apiClient.baseUrl, model.id, model.imageTags.primary, "Primary", {"maxHeight": row1.height})
fillMode: Image.PreserveAspectCrop
}
}
function move() {
if (movingRight) {
row2Translate.x -= row1.height
moveCount++;
} else {
row2Translate.x += row1.height
moveCount--;
}
if (moveCount == 0) movingRight = true;
if (moveCount == rowCount - 3) movingRight = false;
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Sailfin")
font.bold: true
}
}
Connections {
target: appWindow
onCollectionIdChanged: {
randomItems1.parentId = collectionId
randomItems2.parentId = collectionId
randomItems1.reload()
randomItems2.reload()
target: appWindow.pageStack
onCurrentPageChanged: {
console.log("Reloading cover collection")
/*randomItems1Loader.parentId = Qt.binding(function() { return onMainScreen ? "" : appWindow.itemData.jellyfinId; })
randomItems2Loader.parentId = Qt.binding(function() { return onMainScreen ? "" : appWindow.itemData.jellyfinId; })*/
//randomItems1.reload()
//randomItems2.reload()
}
}
Timer {
property bool odd: false
running: true
interval: 5000
repeat: true
onTriggered: {
if (odd) {
row1.move()
} else {
row2.move()
}
odd = !odd
pathView.incrementCurrentIndex()
}
}

View File

@ -20,16 +20,17 @@ 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
import nl.netsoj.chris.Jellyfin 1.0 as J
import "../components"
import ".."
CoverBackground {
property JellyfinItem mData: appWindow.itemData
// Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible.
property var mData: appWindow.itemData
RemoteImage {
anchors.fill: parent
source: mData == null ? "" : Utils.itemImageUrl(ApiClient.baseUrl, mData, "Primary", {"maxWidth": parent.width})
source: mData === null ? "" : Utils.itemImageUrl(appWindow.apiClient.baseUrl, mData, "Primary", {"maxWidth": parent.width})
fillMode: Image.PreserveAspectCrop
onSourceChanged: console.log(source)
}

View File

@ -26,8 +26,7 @@ import nl.netsoj.chris.Jellyfin 1.0
import "../components"
PosterCover {
readonly property MediaPlayer player: appWindow.mediaPlayer
property var mData: appWindow.itemData
readonly property var player: appWindow.playbackManager
// Wanted to display the currently running move on here, but it's hard :/
/*Rectangle {

View File

@ -38,9 +38,7 @@ ApplicationWindow {
readonly property ApiClient apiClient: _apiClient
// Due QTBUG-10822, declarartions such as `property J.Item foo` are not possible.
property var itemData
// Id of the collection currently browsing. For use on the cover.
property string collectionId
property var itemData: pageStack.currentPage.itemData
// Bad way to implement settings, but it'll do for now.
property bool showDebugInfo: true
@ -68,19 +66,17 @@ ApplicationWindow {
}
}
}
cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}}
/*{
//cover: CoverBackground {CoverPlaceholder { icon.source: "icon.png"; text: "Sailfin"}}
cover: {
// 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 {
return Qt.resolvedUrl("cover/CoverPage.qml")
}
return Qt.resolvedUrl("cover/CoverPage.qml")
} else if (playbackManager.hasVideo){
return Qt.resolvedUrl("cover/VideoCover.qml")
} else {
return Qt.resolvedUrl("cover/CoverPage.qml")
}
}*/
}
Notification {
id: errorNotification
@ -100,6 +96,17 @@ ApplicationWindow {
autoOpen: true
}
Connections {
target: pageStack
onCurrentPageChanged: {
if ("itemData" in pageStack.currentPage) {
appWindow.itemData = pageStack.currentPage.itemData
} else {
appWindow.itemData = null
}
}
}
// Keep the sytem alive while playing media
KeepAlive {
enabled: playbackManager.playbackState === MediaPlayer.PlayingState

View File

@ -138,7 +138,7 @@ Page {
}
}
Connections {
target: mediaLibraryModel
target: mediaLibraryLoader
onReady: userItemModel.reload()
}
}

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