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

import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Components
import qs.Modules.Bar.Components.Common
import qs.Helpers
import qs.Services

WidgetBase {
	id: root

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

	implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.small * 2
	implicitWidth: horizontal ? (layout.implicitWidth % 2 === 0 ? layout.implicitWidth : layout.implicitWidth + 1) + Tokens.padding.small * 2 : baseSize
	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.small
		anchors.fill: parent
		anchors.leftMargin: root.horizontal ? Tokens.padding.small : 0
		anchors.rightMargin: root.horizontal ? Tokens.padding.small : 0
		anchors.topMargin: root.horizontal ? 0 : Tokens.padding.small
		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
			fontStyle: Tokens.font.icon.small
			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
			horizontalAlignment: Text.AlignHCenter
			implicitHeight: root.horizontal ? root.implicitHeight : root.textWidth
			implicitWidth: root.horizontal ? root.textWidth : root.implicitWidth
			marqueeEnabled: false
			pauseMs: 4000
			text: root.currentMedia
			vertical: !root.horizontal
		}
	}

	CustomMouseArea {
		anchors.fill: parent
		hoverEnabled: true

		onClicked: console.log(root.mapToGlobal(0, 0), layout.implicitWidth)

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