initial commit for media widget update + anim tokens restructure

Modules/Dashboard/Dash/Media.qml

@@ -9,6 +9,7 @@ import QtQuick.Effects
 import ZShell.Components
 import ZShell.Services
 import ZShell.Config
+import qs.Modules.Dashboard.Dash.Media
 import qs.Daemons
 import qs.Components
 import qs.Helpers
@@ -25,7 +26,7 @@ Item {
 
 	anchors.left: parent.left
 	anchors.right: parent.right
-	implicitHeight: layout.implicitHeight
+	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
 	function lengthStr(length: int): string {
 		if (length < 0)
 		return "-1:-1";
@@ -57,14 +58,18 @@ Item {
 		service: Audio.cava
 	}
 
+	BackgroundShapes {
+		anchors.fill: parent
+	}
+
 	Shape {
 		id: visualizer
 
 		readonly property int bars: Config.services.visualizerBars
-		property color color: Colors.palette.m3tertiary
-		property color fillColor: Qt.alpha(color, 0.25)
+		property color color: Qt.alpha(Colors.palette.m3primary, 0.5)
+		property color fillColor: Qt.alpha(color, 0.1)
 
-		anchors.fill: layout
+		anchors.fill: parent
 		anchors.leftMargin: -(shape.strokeWidth / 2)
 		layer.enabled: true
 		asynchronous: true
@@ -87,15 +92,15 @@ Item {
 				if (n < 2)
 				return "";
 
-				const h = layout.height + shape.strokeWidth / 2;
-				const w = layout.width + shape.strokeWidth;
+				const h = root.height + shape.strokeWidth / 2;
+				const w = root.width + shape.strokeWidth;
 
 				function x(i) {
 					return i * w / (n - 1);
 				}
 
 				function y(i) {
-					return h - values[i] * Config.dashboard.sizes.mediaVisualizerSize;
+					return h - (values[i] * Config.dashboard.sizes.mediaVisualizerSize) / 2;
 				}
 
 				let d = `M 0 ${h} `;
@@ -142,48 +147,21 @@ Item {
 	RowLayout {
 		id: layout
 
-		anchors.left: parent.left
-		anchors.right: parent.right
+		anchors.fill: parent
+		anchors.margins: Tokens.padding.large
+		anchors.leftMargin: Tokens.padding.extraLarge
 
-		CustomClippingRect {
-			id: cover
-
-			Layout.alignment: Qt.AlignLeft
-			Layout.bottomMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
-			Layout.leftMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
-			Layout.preferredHeight: Config.dashboard.sizes.mediaCoverArtSize
-			Layout.preferredWidth: Config.dashboard.sizes.mediaCoverArtSize
-			Layout.topMargin: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
-			color: Colors.tPalette.m3surfaceContainerHigh
-			radius: Infinity
-
-			MaterialIcon {
-				anchors.centerIn: parent
-				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: (parent.width * 0.4) || 1
-				grade: 200
-				text: "art_track"
-			}
-
-			Image {
-				id: image
-
-				anchors.fill: parent
-				asynchronous: true
-				fillMode: Image.PreserveAspectCrop
-				source: Players.active?.trackArtUrl ?? ""
-				sourceSize.height: Math.floor(height)
-				sourceSize.width: Math.floor(width)
-			}
+		CoverVisualizer {
+			Layout.fillHeight: true
+			implicitWidth: Config.dashboard.sizes.mediaCoverArtSize
 		}
 
 		ColumnLayout {
 			Layout.fillWidth: true
-			Layout.leftMargin: Tokens.spacing.large
-			Layout.rightMargin: Tokens.spacing.large
-			Layout.preferredHeight: childrenRect.height
+			Layout.leftMargin: Tokens.spacing.largeIncreased
+			Layout.rightMargin: Tokens.spacing.largeIncreased
 
-			spacing: Tokens.spacing.normal
+			spacing: Tokens.spacing.small
 
 			MarqueeText {
 				id: title
@@ -222,7 +200,7 @@ Item {
 
 			RowLayout {
 				id: positionSliderLayout
-				Layout.topMargin: Tokens.spacing.extraLargeIncreased
+				Layout.topMargin: Tokens.spacing.large
 				Layout.fillWidth: true
 				spacing: Tokens.spacing.small
 
@@ -289,7 +267,6 @@ Item {
 					checked: Players.active?.shuffle ?? false
 					enabled: Players.active?.shuffleSupported
 					onClicked: Players.active.shuffle = !Players.active?.shuffle
-					implicitWidth: Math.round(implicitHeight * 0.9)
 				}
 
 				IconButton {
@@ -301,6 +278,7 @@ Item {
 					shapeMorph: true
 					enabled: Players.active?.canGoPrevious
 					onClicked: Players.active?.previous()
+					font.pointSize: Tokens.font.size.large
 				}
 
 				IconButton {
@@ -313,6 +291,7 @@ Item {
 					checked: Players.active?.isPlaying ?? false
 					enabled: Players.active?.canTogglePlaying
 					onClicked: Players.active?.togglePlaying()
+					font.pointSize: Tokens.font.size.large
 				}
 
 				IconButton {
@@ -324,6 +303,7 @@ Item {
 					shapeMorph: true
 					enabled: Players.active?.canGoNext
 					onClicked: Players.active?.next()
+					font.pointSize: Tokens.font.size.large
 				}
 
 				IconButton {
@@ -342,7 +322,6 @@ Item {
 						else
 						Players.active.loopState = MprisLoopState.None;
 					}
-					implicitWidth: Math.round(implicitHeight * 0.9)
 				}
 			}
 		}