Added MusicAlbumPage

- [UI]: Added specialized view for music albums

- Prepared RemoteImageView for fading in image when loaded
This commit is contained in:
Chris Josten 2020-10-26 22:29:07 +01:00
parent a29ab3dff4
commit 040aeb1a40
10 changed files with 330 additions and 22 deletions

3
.gitignore vendored
View File

@ -6,4 +6,5 @@ build/
build-*/
# IDE files
harbour-sailfin.pro.user
*.user
CMakeLists.txt.user.*

View File

@ -140,6 +140,7 @@ public:
Q_PROPERTY(QList<QString> fields MEMBER m_fields NOTIFY fieldsChanged)
Q_PROPERTY(QString seasonId MEMBER m_seasonId NOTIFY seasonIdChanged)
Q_PROPERTY(QList<QString> imageTypes MEMBER m_imageTypes NOTIFY imageTypesChanged)
Q_PROPERTY(QList<QString> includeItemTypes MEMBER m_includeItemTypes NOTIFY includeItemTypesChanged)
Q_PROPERTY(bool recursive MEMBER m_recursive)
Q_PROPERTY(SortOrder sortOrder MEMBER m_sortOrder NOTIFY sortOrderChanged)
@ -182,6 +183,7 @@ signals:
void seasonIdChanged(QString newSeasonId);
void fieldsChanged(QList<QString> newFields);
void imageTypesChanged(QList<QString> newImageTypes);
void includeItemTypesChanged(const QList<QString> &newIncludeItemTypes);
public slots:
/**
@ -225,9 +227,10 @@ protected:
bool m_addUserId = false;
QString m_parentId;
QString m_seasonId;
QList<QString> m_fields;
QList<QString> m_imageTypes;
QList<QString> m_fields = {};
QList<QString> m_imageTypes = {};
QList<QString> m_sortBy = {};
QList<QString> m_includeItemTypes = {};
SortOrder m_sortOrder = Unspecified;
bool m_recursive = false;

View File

@ -169,6 +169,21 @@ private:
QString m_errorString;
};
class NameGuidPair : public JsonSerializable {
Q_OBJECT
public:
Q_INVOKABLE NameGuidPair(QObject *parent = nullptr);
Q_PROPERTY(QString name MEMBER m_name NOTIFY nameChanged)
// Once again the Jellyfin id workaround
Q_PROPERTY(QString jellyfinId MEMBER m_id NOTIFY jellyfinIdChanged)
signals:
void nameChanged(const QString &newName);
void jellyfinIdChanged(const QString &newJellyfinId);
private:
QString m_name;
QString m_id;
};
class User : public RemoteData {
Q_OBJECT
public:
@ -333,10 +348,16 @@ public:
Q_PROPERTY(bool isFolder READ isFolder WRITE setIsFolder NOTIFY isFolderChanged)
Q_PROPERTY(QString type MEMBER m_type NOTIFY typeChanged)
Q_PROPERTY(UserData *userData MEMBER m_userData NOTIFY userDataChanged)
Q_PROPERTY(int recursiveItemCount READ recursiveItemCount WRITE setRecursiveItemCount NOTIFY recursiveItemCountChanged)
Q_PROPERTY(int childCount READ childCount WRITE setChildCount NOTIFY childCountChanged)
Q_PROPERTY(QString albumArtist MEMBER m_albumArtist NOTIFY albumArtistChanged)
Q_PROPERTY(QList<NameGuidPair *> __list__albumArtists MEMBER __list__m_albumArtists NOTIFY albumArtistsChanged)
Q_PROPERTY(QVariantList albumArtists MEMBER m_albumArtists NOTIFY albumArtistsChanged STORED false)
Q_PROPERTY(QString seriesName MEMBER m_seriesName NOTIFY seriesNameChanged)
Q_PROPERTY(QString seasonName MEMBER m_seasonName NOTIFY seasonNameChanged)
Q_PROPERTY(QList<MediaStream *> __list__mediaStreams MEMBER __list__m_mediaStreams NOTIFY mediaStreamsChanged)
Q_PROPERTY(QVariantList mediaStreams MEMBER m_mediaStreams NOTIFY mediaStreamsChanged STORED false)
Q_PROPERTY(QStringList artists MEMBER m_artists NOTIFY artistsChanged)
// Why is this a QJsonObject? Well, because I couldn't be bothered to implement the deserialisations of
// a QHash at the moment.
Q_PROPERTY(QJsonObject imageTags MEMBER m_imageTags NOTIFY imageTagsChanged)
@ -374,6 +395,10 @@ public:
void setIndexNumberEnd(int newIndexNumberEnd) { m_indexNumberEnd = std::optional<int>(newIndexNumberEnd); emit indexNumberEndChanged(newIndexNumberEnd); }
bool isFolder() const { return m_isFolder.value_or(false); }
void setIsFolder(bool newIsFolder) { m_isFolder = newIsFolder; emit isFolderChanged(newIsFolder); }
int recursiveItemCount() const { return m_recursiveItemCount.value_or(-1); }
void setRecursiveItemCount(int newRecursiveItemCount) { m_recursiveItemCount = newRecursiveItemCount; emit recursiveItemCountChanged(newRecursiveItemCount); }
int childCount() const { return m_childCount.value_or(-1); }
void setChildCount(int newChildCount) { m_childCount = newChildCount; emit childCountChanged(newChildCount); }
//QQmlListProperty<MediaStream> mediaStreams() { return toReadOnlyQmlListProperty<MediaStream>(m_mediaStreams); }
//QList<QObject *> mediaStreams() { return *reinterpret_cast<QList<QObject *> *>(&m_mediaStreams); }
@ -415,9 +440,14 @@ signals:
void isFolderChanged(bool newIsFolder);
void typeChanged(const QString &newType);
void userDataChanged(UserData *newUserData);
void recursiveItemCountChanged(int newRecursiveItemCount);
void childCountChanged(int newChildCount);
void albumArtistChanged(const QString &newAlbumArtist);
void albumArtistsChanged(NameGuidPair *newAlbumArtists);
void seriesNameChanged(const QString &newSeriesName);
void seasonNameChanged(const QString &newSeasonName);
void mediaStreamsChanged(/*const QList<MediaStream *> &newMediaStreams*/);
void artistsChanged(const QStringList &newArtists);
void imageTagsChanged();
void imageBlurHashesChanged();
@ -463,10 +493,16 @@ protected:
std::optional<bool> m_isFolder = std::nullopt;
QString m_type;
UserData *m_userData = nullptr;
std::optional<int> m_recursiveItemCount = std::nullopt;
std::optional<int> m_childCount = std::nullopt;
QString m_albumArtist;
QList<NameGuidPair *> __list__m_albumArtists;
QVariantList m_albumArtists;
QString m_seriesName;
QString m_seasonName;
QList<MediaStream *> __list__m_mediaStreams;
QVariantList m_mediaStreams;
QStringList m_artists;
QJsonObject m_imageTags;
QJsonObject m_imageBlurHashes;

View File

@ -66,6 +66,9 @@ void ApiModel::load(LoadType type) {
if (!m_imageTypes.empty()) {
query.addQueryItem("ImageTypes", m_imageTypes.join(","));
}
if (!m_includeItemTypes.empty()) {
query.addQueryItem("IncludeItemTypes", m_includeItemTypes.join(","));
}
if (!m_fields.empty()) {
query.addQueryItem("Fields", m_fields.join(","));
}
@ -191,6 +194,7 @@ bool ApiModel::canFetchMore(const QModelIndex &parent) const {
switch(m_status) {
case Uninitialised:
case Loading:
case LoadingMore:
return false;
default:
break;

View File

@ -254,6 +254,8 @@ void RemoteData::reload() {
});
}
NameGuidPair::NameGuidPair(QObject *parent) : JsonSerializable (parent) {}
// User
User::User(QObject *parent) : RemoteData (parent) {}
@ -351,6 +353,7 @@ void Item::onUserDataChanged(const QString &itemId, QSharedPointer<UserData> use
void registerSerializableJsonTypes(const char* URI) {
qmlRegisterType<MediaStream>(URI, 1, 0, "MediaStream");
qmlRegisterType<NameGuidPair>(URI, 1, 0, "NameGuidPair");
qmlRegisterType<User>(URI, 1, 0, "User");
qmlRegisterType<UserData>(URI, 1, 0, "UserData");
qmlRegisterType<Item>(URI, 1, 0, "JellyfinItem");

View File

@ -20,8 +20,7 @@ set(sailfin_QML_SOURCES
qml/components/Shim.qml
qml/components/UserGridDelegate.qml
qml/components/VideoPlayer.qml
qml/components/VideoTrackSelector.qml
qml/components/itemdetails/SeasonDetails.qml
qml/components/VideoTrackSelector.qml
qml/components/videoplayer/VideoError.qml
qml/components/videoplayer/VideoHud.qml
qml/cover/CoverPage.qml
@ -46,14 +45,12 @@ set(sailfin_QML_SOURCES
qml/pages/setup/LoginDialog.qml
qml/qmldir)
add_executable(harbour-sailfin ${harbour-sailfin_SOURCES})
add_executable(harbour-sailfin ${harbour-sailfin_SOURCES} ${sailfin_QML_SOURCES})
target_link_libraries(harbour-sailfin PRIVATE Qt5::Gui Qt5::Qml Qt5::Quick SailfishApp::SailfishApp
# Note: this may break when the compiler changes. -rdynamic and -pie seem to be needed for the
# invoker/booster to work
jellyfin-qt "-Wl,-rpath,${CMAKE_INSTALL_LIBDIR} -rdynamic -pie")
add_custom_target(harbour-sailfin-qml ${sailfin_QML_SOURCES})
install(TARGETS harbour-sailfin
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR})
@ -79,3 +76,19 @@ install(FILES icons/128x128/harbour-sailfin.png
install(FILES icons/172x172/harbour-sailfin.png
DESTINATION share/icons/hicolor/172x172/apps
)
# Tell Qt Creator where the application executable(s) would be located on the
# device.
#
# It is not necessary to list other deployables than executables (runtime
# targets) here. The deployment process of Sailfish OS projects is opaque to
# Qt Creator and the information contained in QtCreatorDeployment.txt is only
# used to locate the executable associated with the active run configuration
# on the device in order to run it.
#
# Search the Qt Creator Manual to learn about the QtCreatorDeployment.txt file
# format.
file(WRITE "${CMAKE_BINARY_DIR}/QtCreatorDeployment.txt"
"${CMAKE_INSTALL_PREFIX}
sailfish/harbour-sailfin:bin
")

View File

@ -22,15 +22,17 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
/**
* Converts miliseconds to a h:mm:ss format
*/
function timeToText(time) {
function timeToText(time, showHours) {
var mShowHours = showHours === undefined ? true : showHours
if (time < 0) return "??:??:??"
var hours = Math.floor(time / (60 * 60 * 1000))
var left = time % (60 * 60 * 1000)
var minutes = Math.floor(left / (60 * 1000))
left = time % (60 * 1000)
var seconds = Math.floor(left / 1000)
return hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "")+ seconds
return (hours > 0 ? hours + ":" : "")
+ (minutes < 10 ? "0" : "")
+ minutes + ":" + (seconds < 10 ? "0" : "")+ seconds
}
function msToTicks(ms) {
@ -41,8 +43,8 @@ function ticksToMs(ticks) {
return ticks / 10000;
}
function ticksToText(ticks) {
return timeToText(ticks / 10000);
function ticksToText(ticks, showHours) {
return timeToText(ticks / 10000, showHours);
}
function itemImageUrl(baseUrl, item, type, options) {
@ -80,6 +82,8 @@ function getPageUrl(mediaType, itemType) {
return Qt.resolvedUrl("pages/itemdetails/SeasonPage.qml")
case "episode":
return Qt.resolvedUrl("pages/itemdetails/EpisodePage.qml")
case "musicalbum":
return Qt.resolvedUrl("pages/itemdetails/MusicAlbumPage.qml")
default:
switch (mediaType ? mediaType.toLowerCase() : "folder") {
case "folder":

View File

@ -45,6 +45,7 @@ BackgroundItem {
}
fillMode: Image.PreserveAspectCrop
fallbackColor: Utils.colorFromString(title)
highlighted: root.highlighted
}
/*Rectangle {

View File

@ -23,11 +23,22 @@ import Sailfish.Silica 1.0
/**
* An image for "remote" images (loaded over e.g. http), with a spinner and a fallback image
*/
HighlightImage {
property string fallbackImage
property bool usingFallbackImage
SilicaItem {
property string fallbackImage
property bool usingFallbackImage
property color fallbackColor: Theme.highlightColor
asynchronous: true
property alias source: realImage.source
property alias sourceSize: realImage.sourceSize
property alias fillMode: realImage.fillMode
implicitHeight: realImage.implicitHeight
implicitWidth: realImage.implicitWidth
Image {
id: realImage
anchors.fill: parent
asynchronous: true
}
Rectangle {
id: fallbackBackground
@ -36,18 +47,25 @@ HighlightImage {
GradientStop { position: 0.0; color: fallbackColor; }
GradientStop { position: 1.0; color: Theme.highlightDimmerFromColor(fallbackColor, Theme.colorScheme); }
}
visible: parent.status == Image.Error || parent.status == Image.Null || parent.status == Image.Loading
visible: realImage.status === Image.Error || realImage.status === Image.Null || realImage.status === Image.Loading
}
Rectangle {
id: highlightOverlay
anchors.fill: parent
color: Theme.rgba(Theme.highlightColor, Theme.opacityOverlay)
visible: parent.highlighted
}
BusyIndicator {
anchors.centerIn: parent
running: parent.status == Image.Loading
running: realImage.status === Image.Loading
}
HighlightImage {
id: fallbackImageItem
anchors.centerIn: parent
visible: parent.status == Image.Error || parent.status == Image.Null
visible: realImage.status === Image.Error || realImage.status === Image.Null
source: fallbackImage ? fallbackImage : "image://theme/icon-m-question"
}
}

View File

@ -1,5 +1,230 @@
import QtQuick 2.0
import QtQuick 2.6
import Sailfish.Silica 1.0
Item {
import nl.netsoj.chris.Jellyfin 1.0
import "../../components"
import "../.."
BaseDetailPage {
readonly property int _songIndexWidth: 100
property string _albumArtistText: itemData.albumArtist
UserItemModel {
id: collectionModel
apiClient: ApiClient
sortBy: ["SortName"]
fields: ["ItemCounts","PrimaryImageAspectRatio","BasicSyncInfo","CanDelete","MediaSourceCount"]
parentId: itemData.jellyfinId
onParentIdChanged: reload()
}
SilicaListView {
id: list
anchors.fill: parent
model: collectionModel
header: Item {
property string stateIfArt: "largeArt"
property alias albumArt: albumArt
id: listHeader
width: parent.width
//spacing: Theme.paddingLarge
state: albumArt.source != "" ? stateIfArt : "noArt"
MouseArea {
anchors.fill: parent
onClicked: {
if (listHeader.stateIfArt == "largeArt") {
listHeader.stateIfArt = "details"
} else {
listHeader.stateIfArt = "largeArt"
}
}
}
RemoteImage {
id: albumArt
anchors {
top: parent.top
right: parent.right
}
source: Utils.itemImageUrl(ApiClient.baseUrl, itemData, "Primary", {"maxWidth": parent.width})
sourceSize.width: listHeader.width
sourceSize.height: listHeader.width
fillMode: Image.PreserveAspectFit
opacity: 1
clip: true
}
PageHeader {
id: albumHeader
width: parent.width - Theme.horizontalPageMargin - height
title: itemData.name
description: qsTr("%1\n%2 songs | %3 | %4")
.arg(_albumArtistText)
.arg(itemData.childCount)
.arg(Utils.ticksToText(itemData.runTimeTicks))
.arg(itemData.productionYear > 0 ? itemData.productionYear : qsTr("Unknown year"))
}
states: [
State {
name: "largeArt"
PropertyChanges {
target: albumArt
width: parent.width
height: width
}
PropertyChanges {
target: listHeader
height: width
}
PropertyChanges {
target: albumHeader
opacity: 0
}
PropertyChanges {
target: list
contentY: -list.width
}
AnchorChanges {
target: albumHeader
anchors.left: undefined
anchors.right: albumArt.left
}
},
State {
name: "details"
PropertyChanges {
target: albumArt
width: height
height: albumHeader.height
}
PropertyChanges {
target: listHeader
height: albumHeader.height
}
PropertyChanges {
target: albumHeader
opacity: 1
}
PropertyChanges {
target: list
contentY: -albumHeader.height
}
AnchorChanges {
target: albumHeader
anchors.left: undefined
anchors.right: albumArt.left
}
},
State {
name: "noArt"
extend: "details"
PropertyChanges {
target: albumArt
opacity: 0
}
PropertyChanges {
target: albumHeader
width: parent.width - Theme.horizontalPageMargin * 2
}
AnchorChanges {
target: albumHeader
anchors.left: parent.left
anchors.right: parent.right
}
}
]
transitions: Transition {
OpacityAnimator { target: albumHeader}
OpacityAnimator { target: albumArt}
NumberAnimation {
properties: "width,height,contentY"
//velocity: 1600
duration: 300
easing.type: Easing.OutQuad
}
AnchorAnimation {}
}
}
section {
property: "parentIndexNumber"
delegate: SectionHeader {
text: qsTr("Disc %1").arg(section)
}
}
delegate: ListItem {
contentHeight: songName.height + songArtists.height + 2 * Theme.paddingMedium
width: parent.width
Label {
id: songIndex
anchors {
top: parent.top
topMargin: Theme.paddingMedium
left: parent.left
leftMargin: Theme.horizontalPageMargin
}
text: model.indexNumber
horizontalAlignment: Text.AlignRight
font.pixelSize: Theme.fontSizeExtraLarge
width: _songIndexWidth
}
Label {
id: songName
anchors {
left: songIndex.right
leftMargin: Theme.paddingLarge
top: parent.top
topMargin: Theme.paddingMedium
right: duration.left
rightMargin: Theme.paddingLarge
}
text: model.name
font.pixelSize: Theme.fontSizeMedium
truncationMode: TruncationMode.Fade
}
Label {
id: songArtists
anchors {
top: songName.bottom
left: songIndex.right
leftMargin: Theme.paddingLarge
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
text: model.artists.join(", ")
font.pixelSize: Theme.fontSizeSmall
truncationMode: TruncationMode.Fade
color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
Label {
id: duration
anchors {
right: parent.right
rightMargin: Theme.horizontalPageMargin
baseline: songName.baseline
}
width: contentWidth
text: Utils.ticksToText(model.runTimeTicks)
font.pixelSize: Theme.fontSizeSmall
color: highlighted ? Theme.secondaryHighlightColor : Theme.secondaryColor
}
}
VerticalScrollDecorator {}
}
Connections {
target: itemData
onAlbumArtistsChanged: {
console.log(itemData.albumArtists)
_albumArtistText = ""
for (var i = 0; i < itemData.albumArtists.length; i++) {
_albumArtistText += itemData.albumArtists[i]["name"]
}
}
}
}