z-bar-qt/Modules/Dashboard/Media/LyricsInfo.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
		}
	}
}