108 lines
2.8 KiB
QML
108 lines
2.8 KiB
QML
import QtQuick
|
|
import qs.Commons
|
|
import qs.Ui
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property string title: ""
|
|
property string artist: ""
|
|
property string status: "Stopped"
|
|
property string artUrl: ""
|
|
readonly property bool playing: root.status === "Playing"
|
|
readonly property bool hasArt: root.artUrl.length > 0 && thumbnailImage.status !== Image.Error
|
|
signal controlRequested(string action)
|
|
|
|
visible: root.title.length > 0 && root.title !== "No Media"
|
|
implicitHeight: visible ? Math.max(thumbnail.height, info.implicitHeight, controls.implicitHeight) : 0
|
|
|
|
Rectangle {
|
|
id: thumbnail
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: Style.spaceReal(48)
|
|
height: width
|
|
radius: Style.cardRadius
|
|
color: Util.alpha(Colors.background, Style.cardFillAlpha)
|
|
border.width: Style.cardBorderWidth
|
|
border.color: Util.alpha(Colors.blue, Style.cardBorderAlpha)
|
|
clip: true
|
|
|
|
Image {
|
|
id: thumbnailImage
|
|
anchors.fill: parent
|
|
anchors.margins: Style.cardBorderWidth
|
|
source: root.artUrl
|
|
visible: root.hasArt
|
|
fillMode: Image.PreserveAspectCrop
|
|
asynchronous: true
|
|
cache: true
|
|
sourceSize.width: Math.round(parent.width * 2)
|
|
sourceSize.height: Math.round(parent.height * 2)
|
|
}
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
visible: !root.hasArt || thumbnailImage.status !== Image.Ready
|
|
text: ""
|
|
color: Util.alpha(Colors.foreground, 0.6)
|
|
font.family: Style.font.family
|
|
font.pixelSize: Style.font.title
|
|
}
|
|
}
|
|
|
|
Column {
|
|
id: info
|
|
anchors.left: thumbnail.right
|
|
anchors.leftMargin: Style.spaceReal(12)
|
|
anchors.right: controls.left
|
|
anchors.rightMargin: Style.spaceReal(12)
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Style.spaceReal(2)
|
|
|
|
Text {
|
|
width: parent.width
|
|
text: root.title
|
|
textFormat: Text.PlainText
|
|
elide: Text.ElideRight
|
|
color: Colors.foreground
|
|
font.family: Style.font.family
|
|
font.pixelSize: Style.font.bodySmall
|
|
font.bold: true
|
|
}
|
|
|
|
Text {
|
|
width: parent.width
|
|
text: root.artist
|
|
textFormat: Text.PlainText
|
|
elide: Text.ElideRight
|
|
visible: root.artist.length > 0
|
|
color: Util.alpha(Colors.foreground, 0.75)
|
|
font.family: Style.font.family
|
|
font.pixelSize: Style.font.bodySmall
|
|
}
|
|
}
|
|
|
|
Row {
|
|
id: controls
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Style.spaceReal(8)
|
|
|
|
CardIconButton {
|
|
icon: "\uf048"
|
|
onActivated: root.controlRequested("previous")
|
|
}
|
|
|
|
CardIconButton {
|
|
icon: root.playing ? "\uf04c" : "\uf04b"
|
|
onActivated: root.controlRequested("play-pause")
|
|
}
|
|
|
|
CardIconButton {
|
|
icon: "\uf051"
|
|
onActivated: root.controlRequested("next")
|
|
}
|
|
}
|
|
}
|