z-bar-qt/Modules/Bar/Components/MediaWidget.qml

import QtQuick
import QtQuick.Layouts
import qs.Components
import qs.Daemons
import ZShell.Config
import qs.Helpers
import qs.Services

CustomRect {
	id: root

	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
	required property bool horizontal
	readonly property int textWidth: Math.min(metrics.width, 200)

	color: Colors.tPalette.m3surfaceContainer
	implicitHeight: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : layout.implicitHeight + Tokens.padding.normal * 2
	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : Math.max(Config.bar.height, Tokens.bar.innerSize)
	radius: Tokens.rounding.full

	Behavior on implicitHeight {
		enabled: !root.horizontal

		Anim {
		}
	}
	Behavior on implicitWidth {
		enabled: root.horizontal

		Anim {
		}
	}

	TextMetrics {
		id: metrics

		font: mediatext.font
		text: mediatext.text
	}

	GridLayout {
		id: layout

		anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.normal
		anchors.fill: parent
		anchors.leftMargin: root.horizontal ? Tokens.padding.normal : 0
		anchors.rightMargin: root.horizontal ? Tokens.padding.normal : 0
		anchors.topMargin: root.horizontal ? 0 : Tokens.padding.normal
		columns: root.horizontal ? -1 : 1

		Behavior on implicitWidth {
			Anim {
			}
		}

		MaterialIcon {
			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
			animate: true
			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
			font.pointSize: Tokens.font.size.larger
			text: Players.active?.isPlaying ? "music_note" : "music_off"
		}

		MarqueeText {
			id: mediatext

			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
			animate: true
			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
			font.pointSize: Tokens.font.size.normal
			horizontalAlignment: Text.AlignHCenter
			implicitWidth: root.textWidth
			marqueeEnabled: false
			pauseMs: 4000
			text: root.currentMedia

			transform: [
				Translate {
					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
				},
				Rotation {
					angle: root.horizontal ? 0 : 270
					origin.x: mediatext.implicitHeight / 2
					origin.y: mediatext.implicitHeight / 2
				}
			]

			CustomMouseArea {
				anchors.fill: parent
				hoverEnabled: true

				onContainsMouseChanged: {
					if (!containsMouse) {
						mediatext.marqueeEnabled = false;
					} else {
						mediatext.marqueeEnabled = true;
						mediatext.anim.start();
					}
				}
			}
		}
	}
}