Commit 2d6fc872 authored by Alexander Stippich's avatar Alexander Stippich
Browse files

Add ImageWithFallback component and use it for cover art

parent a03fdc9e
......@@ -374,6 +374,7 @@ if (Qt5Quick_FOUND AND Qt5Widgets_FOUND)
qml/RatingStar.qml
qml/DraggableItem.qml
qml/TrackImportNotification.qml
qml/ImageWithFallback.qml
qml/HeaderBar.qml
qml/NavigationActionBar.qml
......
......@@ -46,12 +46,14 @@ Rectangle {
spacing: elisaTheme.layoutHorizontalMargin / 4
Image {
ImageWithFallback {
Layout.preferredWidth: elisaTheme.playListAlbumArtSize
Layout.preferredHeight: elisaTheme.playListAlbumArtSize
Layout.margins: elisaTheme.layoutHorizontalMargin
source: (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
source: imageUrl
fallback: elisaTheme.defaultAlbumImage
sourceSize.width: elisaTheme.playListAlbumArtSize
sourceSize.height: elisaTheme.playListAlbumArtSize
......
......@@ -26,8 +26,8 @@ import org.kde.kirigami 2.5 as Kirigami
FocusScope {
id: gridEntry
property var imageUrl
property bool shadowForImage
property url imageUrl
property url imageFallbackUrl
property url fileUrl
property var entryType
property alias mainText: mainLabel.text
......@@ -235,7 +235,7 @@ FocusScope {
anchors.fill: parent
sourceComponent: Image {
sourceComponent: ImageWithFallback {
id: coverImage
anchors.fill: parent
......@@ -245,11 +245,12 @@ FocusScope {
fillMode: Image.PreserveAspectFit
smooth: true
source: (gridEntry.imageUrl !== undefined ? gridEntry.imageUrl : "")
source: gridEntry.imageUrl
fallback: gridEntry.imageFallbackUrl
asynchronous: true
layer.enabled: shadowForImage
layer.enabled: !coverImage.usingFallback
layer.effect: DropShadow {
source: coverImage
......
......@@ -141,8 +141,8 @@ FocusScope {
mainText: model.display
fileUrl: model.url
secondaryText: if (gridView.delegateDisplaySecondaryText) {model.secondaryText} else {""}
imageUrl: (model && model.imageUrl && model.imageUrl.toString() !== "" ? model.imageUrl : defaultIcon)
shadowForImage: (model && model.imageUrl && model.imageUrl.toString() !== "" ? true : false)
imageUrl: model.imageUrl ? model.imageUrl : ''
imageFallbackUrl: defaultIcon
databaseId: model.databaseId
delegateDisplaySecondaryText: gridView.delegateDisplaySecondaryText
entryType: model.dataType
......
......@@ -57,11 +57,11 @@ FocusScope {
id: background
anchors.fill: parent
Image {
ImageWithFallback {
id: oldBackground
source: (oldImage ? oldImage : Qt.resolvedUrl(elisaTheme.defaultBackgroundImage))
source: oldImage
fallback: elisaTheme.defaultBackgroundImage
asynchronous: true
anchors.fill: parent
......@@ -91,10 +91,11 @@ FocusScope {
}
}
Image {
ImageWithFallback {
id: newBackground
source: (newImage ? newImage : Qt.resolvedUrl(elisaTheme.defaultBackgroundImage))
source: newImage
fallback: Qt.resolvedUrl(elisaTheme.defaultBackgroundImage)
asynchronous: true
......@@ -167,7 +168,7 @@ FocusScope {
Layout.leftMargin: !LayoutMirroring.enabled ? contentZone.width * 0.15 : 0
Layout.rightMargin: LayoutMirroring.enabled ? contentZone.width * 0.15 : 0
Image {
ImageWithFallback {
id: oldMainIcon
anchors.fill: parent
......@@ -175,7 +176,8 @@ FocusScope {
asynchronous: true
mipmap: true
source: (oldImage ? oldImage : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
source: oldImage
fallback: Qt.resolvedUrl(elisaTheme.defaultAlbumImage)
sourceSize {
width: imageSourceSize
......@@ -185,7 +187,7 @@ FocusScope {
fillMode: Image.PreserveAspectFit
}
Image {
ImageWithFallback {
id: newMainIcon
anchors.fill: parent
......@@ -193,7 +195,8 @@ FocusScope {
asynchronous: true
mipmap: true
source: (newImage ? newImage : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
source: newImage
fallback: Qt.resolvedUrl(elisaTheme.defaultAlbumImage)
visible: false
opacity: 0
......
/*
* Copyright 2020 Alexander Stippich <a.stippich@gmx.net>
*
* This program 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 3 of the License, or (at your option) any later version.
*
* This program 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 program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick 2.7
Item {
id: imageWithFallback
property url source
property url fallback
property bool usingFallback: false
property alias sourceSize: image.sourceSize
property alias fillMode: image.fillMode
property alias asynchronous: image.asynchronous
property alias mipmap: image.mipmap
implicitWidth: image.width
implicitHeight: image.height
onSourceChanged: {
image.source = getImageUrl()
}
function getImageUrl() {
if (source == '' || source === undefined) {
usingFallback = true;
return fallback;
} else {
usingFallback = false;
return source;
}
}
Image {
id: image
anchors.fill: parent
source: imageWithFallback.getImageUrl()
onStatusChanged: {
if (status === Image.Error) {
imageWithFallback.usingFallback = true;
image.source = imageWithFallback.fallback;
}
}
}
}
......@@ -141,7 +141,7 @@ FocusScope {
}
}
Image {
ImageWithFallback {
id: coverImageElement
Layout.preferredHeight: mediaTrack.height - elisaTheme.layoutVerticalMargin
......@@ -158,11 +158,12 @@ FocusScope {
fillMode: Image.PreserveAspectFit
smooth: true
source: (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
source: imageUrl
fallback: elisaTheme.defaultAlbumImage
asynchronous: true
layer.enabled: imageUrl != ''
layer.enabled: !usingFallback
layer.effect: DropShadow {
source: coverImageElement
......@@ -173,12 +174,6 @@ FocusScope {
color: myPalette.shadow
}
onStatusChanged: {
if (coverImageElement.status === Image.Error) {
source = 'image://icon/media-optical-audio'
}
}
}
ColumnLayout {
......@@ -327,16 +322,6 @@ FocusScope {
}
}
Connections {
target: mediaTrack
onImageUrlChanged: {
if (coverImageElement.source !== imageUrl) {
coverImageElement.source = (imageUrl != '' ? imageUrl : Qt.resolvedUrl(elisaTheme.defaultAlbumImage))
}
}
}
states: [
State {
name: 'notSelected'
......
......@@ -75,10 +75,11 @@ Window {
spacing: 0
Image {
ImageWithFallback {
id: metadataImage
source: realModel.coverUrl
fallback: elisaTheme.defaultAlbumImage
sourceSize.width: elisaTheme.coverImageSize
sourceSize.height: elisaTheme.coverImageSize
......@@ -92,12 +93,6 @@ Window {
Layout.minimumWidth: elisaTheme.coverImageSize
Layout.maximumHeight: elisaTheme.coverImageSize
Layout.maximumWidth: elisaTheme.coverImageSize
onStatusChanged: {
if (metadataImage.status === Image.Error) {
source = Qt.resolvedUrl(elisaTheme.defaultAlbumImage)
}
}
}
ListView {
......@@ -250,14 +245,6 @@ Window {
}
}
Connections {
target: realModel
onCoverUrlChanged: {
metadataImage.source = realModel.coverUrl
}
}
Component.onCompleted: {
if (elisa.musicManager) {
if (isCreation) {
......
......@@ -33,6 +33,7 @@
<file>qml/ViewSelector.qml</file>
<file>qml/BasicPlayListAlbumHeader.qml</file>
<file>qml/MetaDataDelegate.qml</file>
<file>qml/ImageWithFallback.qml</file>
<file>qml/EditableMetaDataDelegate.qml</file>
<file>qml/ViewSelectorDelegate.qml</file>
<file>qml/HeaderFooterToolbar.qml</file>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment