feat: add lyrics info
This commit is contained in:
2 * r + 2 * t
parent
bbec29ed7b
commit
543388f229
2 changed files with 223 additions and 6 deletions
|
|
@ -18,6 +18,7 @@ Item {
|
|||
RowLayout {
|
||||
Layout.bottomMargin: -Tokens.spacing.medium
|
||||
spacing: Tokens.spacing.medium
|
||||
z: 1
|
||||
|
||||
MaterialIcon {
|
||||
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
|
||||
|
|
@ -31,12 +32,7 @@ Item {
|
|||
font: Tokens.font.title.medium
|
||||
}
|
||||
|
||||
IconButton {
|
||||
icon: "settings"
|
||||
isToggle: true
|
||||
isRound: true
|
||||
type: IconButton.Tonal
|
||||
}
|
||||
LyricsInfo {}
|
||||
}
|
||||
|
||||
LyricList {
|
||||
|
|
|
|||
221
modules/dashboard/media/LyricsInfo.qml
Normal file
221
modules/dashboard/media/LyricsInfo.qml
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Caelestia.Blobs
|
||||
import Caelestia.Config
|
||||
import Caelestia.Services
|
||||
import qs.components
|
||||
import qs.services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property bool open
|
||||
readonly property real padding: Tokens.padding.large
|
||||
|
||||
implicitWidth: btn.implicitWidth
|
||||
implicitHeight: btn.implicitHeight
|
||||
|
||||
BlobGroup {
|
||||
id: blobGroup
|
||||
|
||||
color: Colours.palette.m3surfaceContainerHighest
|
||||
smoothing: 12
|
||||
|
||||
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.large
|
||||
|
||||
Behavior on anchors.margins {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
BlobRect {
|
||||
id: rect
|
||||
|
||||
x: (btnRect.width - implicitWidth) * 0.7
|
||||
y: (btnRect.height - implicitHeight) * 0.3
|
||||
implicitWidth: btnRect.width * 0.4
|
||||
implicitHeight: btnRect.height * 0.4
|
||||
|
||||
group: blobGroup
|
||||
radius: Tokens.rounding.large
|
||||
deformScale: 0.00001
|
||||
|
||||
states: State {
|
||||
name: "open"
|
||||
when: root.open
|
||||
|
||||
PropertyChanges {
|
||||
rect.x: -(layout.implicitWidth + root.padding + root.Tokens.padding.medium)
|
||||
rect.y: -root.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: "x,implicitWidth"
|
||||
}
|
||||
Anim {
|
||||
properties: "y,implicitHeight"
|
||||
easing: root.Tokens.anim.expressiveFastSpatial
|
||||
}
|
||||
Anim {
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
enabled: root.open
|
||||
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
enabled: root.open
|
||||
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
enabled: root.open
|
||||
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on implicitHeight {
|
||||
enabled: root.open
|
||||
|
||||
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
|
||||
|
||||
StyledText {
|
||||
text: qsTr("Backend: %1").arg(LyricsBackend.toString(Lyrics.backend))
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
animate: true
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.maximumWidth: Tokens.sizes.dashboard.mediaTabWidth / 2
|
||||
text: qsTr("Selected candidate: %1 | %2 | %3").arg(Lyrics.selectedCandidate.title).arg(Lyrics.selectedCandidate.artist).arg(Lyrics.selectedCandidate.album)
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
animate: true
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: qsTr("Offset: %1 ms").arg(Lyrics.offset)
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
animate: true
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: placeholder
|
||||
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: placeholderText.implicitWidth
|
||||
implicitHeight: placeholderText.implicitHeight
|
||||
|
||||
StyledText {
|
||||
id: placeholderText
|
||||
|
||||
text: Lyrics.loading ? qsTr("Loading...") : qsTr("No lyrics found")
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
font: Tokens.font.body.medium
|
||||
animate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: btn
|
||||
|
||||
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"
|
||||
fontStyle: Tokens.font.icon.medium
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue