213 lines
4.3 KiB
QML
213 lines
4.3 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import ZShell
|
|
import ZShell.Blobs
|
|
import ZShell.Config
|
|
import ZShell.Services
|
|
import qs.Components
|
|
import qs.Services
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property bool open
|
|
readonly property real padding: Tokens.padding.large
|
|
|
|
implicitWidth: btn.implicitWidth * 0.9
|
|
implicitHeight: btn.implicitHeight * 0.9
|
|
|
|
BlobGroup {
|
|
id: blobGroup
|
|
|
|
color: Colors.palette.m3surfaceContainerHighest
|
|
smoothing: Tokens.rounding.medium
|
|
cornerFill: false
|
|
|
|
Behavior on color {
|
|
CAnim {}
|
|
}
|
|
}
|
|
|
|
BlobRect {
|
|
id: btnRect
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: !btn.pressed && btn.containsMouse ? -Tokens.padding.extraSmall : 0
|
|
group: blobGroup
|
|
radius: Tokens.rounding.medium
|
|
|
|
Behavior on anchors.margins {
|
|
Anim {}
|
|
}
|
|
}
|
|
|
|
BlobRect {
|
|
id: rect
|
|
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
|
|
implicitWidth: parent.width
|
|
implicitHeight: parent.height
|
|
|
|
group: blobGroup
|
|
radius: Tokens.rounding.medium
|
|
deformScale: 0.00001
|
|
|
|
states: State {
|
|
name: "open"
|
|
when: root.open
|
|
|
|
PropertyChanges {
|
|
rect.anchors.rightMargin: root.width - Tokens.spacing.small
|
|
rect.anchors.topMargin: -Tokens.padding.medium
|
|
rect.implicitWidth: Math.max(layout.implicitWidth, placeholder.implicitWidth) + root.padding * 2
|
|
rect.implicitHeight: Math.max(layout.implicitHeight, placeholder.implicitHeight) + root.padding * 2
|
|
content.opacity: 1
|
|
}
|
|
}
|
|
|
|
transitions: Transition {
|
|
Anim {
|
|
properties: "rightMargin,implicitWidth"
|
|
}
|
|
Anim {
|
|
properties: "topMargin,implicitHeight"
|
|
easing: Tokens.anim.expressiveFastSpatial
|
|
}
|
|
Anim {
|
|
property: "opacity"
|
|
type: Anim.DefaultEffects
|
|
}
|
|
}
|
|
|
|
Behavior on implicitWidth {
|
|
Anim {}
|
|
}
|
|
|
|
Behavior on implicitHeight {
|
|
Anim {}
|
|
}
|
|
|
|
Item {
|
|
id: content
|
|
|
|
anchors.fill: parent
|
|
clip: true
|
|
opacity: 0
|
|
state: Lyrics.loading || !Lyrics.hasLyrics ? "" : "hasLyrics"
|
|
|
|
states: State {
|
|
name: "hasLyrics"
|
|
|
|
PropertyChanges {
|
|
layout.opacity: 1
|
|
placeholder.opacity: 0
|
|
}
|
|
}
|
|
|
|
transitions: [
|
|
Transition {
|
|
from: "hasLyrics"
|
|
|
|
SequentialAnimation {
|
|
Anim {
|
|
target: layout
|
|
property: "opacity"
|
|
type: Anim.FastEffects
|
|
}
|
|
Anim {
|
|
target: placeholder
|
|
property: "opacity"
|
|
type: Anim.DefaultEffects
|
|
}
|
|
}
|
|
},
|
|
Transition {
|
|
to: "hasLyrics"
|
|
|
|
SequentialAnimation {
|
|
Anim {
|
|
target: placeholder
|
|
property: "opacity"
|
|
type: Anim.FastEffects
|
|
}
|
|
Anim {
|
|
target: layout
|
|
property: "opacity"
|
|
type: Anim.DefaultEffects
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
ColumnLayout {
|
|
id: layout
|
|
|
|
anchors.centerIn: parent
|
|
spacing: Tokens.spacing.extraSmall
|
|
opacity: 0
|
|
|
|
CustomText {
|
|
// TRANSLATORS: %1 = lyrics backend name, e.g. LRCLIB
|
|
text: qsTr("Backend: %1").arg(ZUtils.enumToString(Lyrics, "backend"))
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
animate: true
|
|
}
|
|
|
|
CustomText {
|
|
Layout.maximumWidth: 1000 / 2
|
|
// TRANSLATORS: %1/%2/%3 = matched track title, artist and album
|
|
text: qsTr("Selected candidate: %1 | %2 | %3").arg(Lyrics.selectedCandidate.title).arg(Lyrics.selectedCandidate.artist).arg(Lyrics.selectedCandidate.album)
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
|
animate: true
|
|
}
|
|
|
|
CustomText {
|
|
// TRANSLATORS: %1 = lyric timing offset; ms is the millisecond unit, leave untranslated
|
|
text: qsTr("Offset: %1 ms").arg(Lyrics.offset)
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
animate: true
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: placeholder
|
|
|
|
anchors.centerIn: parent
|
|
implicitWidth: placeholderText.implicitWidth
|
|
implicitHeight: placeholderText.implicitHeight
|
|
|
|
CustomText {
|
|
id: placeholderText
|
|
|
|
text: Lyrics.loading ? qsTr("Loading...") : qsTr("No lyrics found")
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
font.pointSize: Tokens.font.size.normal
|
|
animate: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: btn
|
|
|
|
anchors.centerIn: parent
|
|
implicitWidth: implicitHeight
|
|
implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall * 2
|
|
cursorShape: Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
onClicked: root.open = !root.open
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
text: "more_vert"
|
|
font.pointSize: Tokens.font.size.large
|
|
}
|
|
}
|
|
}
|