initial commit for media widget update + anim tokens restructure

Modules/Dashboard/Dash/Media/BackgroundShapes.qml

@@ -0,0 +1,97 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import M3Shapes
+import qs.Components
+import qs.Services
+import qs.Helpers
+
+Item {
+	id: root
+
+	property int count: 14
+	property list<real> darkOpacities: [0.10, 0.20, 0.10, 0.20]
+	property list<real> lightOpacities: [0.34, 0.34, 0.08, 0.2]
+	property real maxRotSpeed: 12
+	property real maxSize: 124
+	property real maxSpeed: 18
+	property real minRotSpeed: -12
+	property real minSize: 36
+	property real minSpeed: 4
+	readonly property list<int> shapePool: [MaterialShape.Circle, MaterialShape.Cookie4Sided, MaterialShape.Cookie6Sided, MaterialShape.Cookie7Sided, MaterialShape.Cookie9Sided, MaterialShape.Cookie12Sided, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.SoftBurst, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Arch, MaterialShape.Arrow, MaterialShape.Pill, MaterialShape.Triangle, MaterialShape.Fan, MaterialShape.Oval]
+
+	function rand(min: real, max: real): real {
+		return min + Math.random() * (max - min);
+	}
+
+	function signedRand(min: real, max: real): real {
+		return rand(min, max) * (Math.random() < 0.5 ? -1 : 1);
+	}
+
+	Component.onCompleted: shapes.model = count
+
+	Repeater {
+		id: shapes
+
+		DriftingShape {
+		}
+	}
+
+	FrameAnimation {
+		running: root.visible && root.width > 0 && root.height > 0 && (Players.active?.isPlaying ?? false)
+
+		onTriggered: {
+			const dt = frameTime;
+			for (let i = 0; i < shapes.count; i++) {
+				const s = shapes.itemAt(i) as DriftingShape;
+				if (!s)
+					continue;
+
+				s.x += s.vx * dt;
+				s.y += s.vy * dt;
+				s.rotation += s.vr * dt;
+
+				if (s.x + s.width < 0)
+					s.x = root.width;
+				else if (s.x > root.width)
+					s.x = -s.width;
+
+				if (s.y + s.height < 0)
+					s.y = root.height;
+				else if (s.y > root.height)
+					s.y = -s.height;
+			}
+		}
+	}
+
+	component DriftingShape: MaterialShape {
+		id: shapeItem
+
+		readonly property int colorIdx: Math.floor(Math.random() * 4)
+		required property int index
+		property real vr: root.rand(root.minRotSpeed, root.maxRotSpeed)
+		property real vx: root.signedRand(root.minSpeed, root.maxSpeed)
+		property real vy: root.signedRand(root.minSpeed, root.maxSpeed)
+
+		color: [Colors.palette.m3primaryContainer, Colors.palette.m3secondaryContainer, Colors.palette.m3tertiaryContainer, Colors.palette.m3outlineVariant][colorIdx]
+		implicitSize: root.minSize + (index / root.count) * (root.maxSize - root.minSize)
+		opacity: Colors.light ? root.lightOpacities[colorIdx] : root.darkOpacities[colorIdx]
+		rotation: root.rand(0, 360)
+		shape: root.shapePool[Math.floor(Math.random() * root.shapePool.length)]
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+		Behavior on opacity {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+
+		Component.onCompleted: {
+			x = root.rand(0, root.width - implicitSize);
+			y = root.rand(0, root.height - implicitSize);
+		}
+	}
+}

Modules/Dashboard/Dash/Media/CoverArt.qml

@@ -0,0 +1,100 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import M3Shapes
+import qs.Helpers
+import qs.Effects
+import qs.Components
+import qs.Services
+
+Item {
+	id: root
+
+	property color fallbackColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
+	property bool hadPrevious
+	readonly property alias shape: shape
+
+	layer.enabled: true
+
+	Behavior on fallbackColor {
+		CAnim {
+		}
+	}
+	layer.effect: MultiEffect {
+		blurMax: 1
+		shadowColor: Colors.palette.m3outline
+		shadowEnabled: true
+		shadowOpacity: 0.3
+	}
+
+	Item {
+		id: shapeWrapper
+
+		anchors.fill: parent
+		layer.enabled: true
+		opacity: root.fallbackColor.a
+
+		MaterialShape {
+			id: shape
+
+			color: Qt.alpha(root.fallbackColor, 1)
+			implicitSize: root.width
+			shape: MaterialShape.Cookie12Sided
+
+			Anim on rotation {
+				duration: 23500
+				easing.type: Easing.Linear
+				from: 360
+				loops: Animation.Infinite
+				paused: !Players.active?.isPlaying
+				running: true
+				to: 0
+			}
+		}
+	}
+
+	MaterialIcon {
+		anchors.centerIn: parent
+		animate: true
+		color: Colors.palette.m3onSurfaceVariant
+		grade: 200
+		opacity: image.status === Image.Null || image.status === Image.Error ? 1 : 0
+		text: image.status === Image.Error ? "broken_image" : "art_track"
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+	}
+
+	Loader {
+		active: opacity > 0
+		anchors.centerIn: parent
+		asynchronous: true
+		opacity: image.status === Image.Loading ? 1 : 0
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		sourceComponent: LoadingIndicator {
+			color: Colors.palette.m3primaryContainer
+			implicitSize: root.width * 0.3
+		}
+	}
+
+	FadeImage {
+		id: image
+
+		anchors.fill: parent
+		layer.enabled: true
+		source: Players.getArtUrl(Players.active)
+
+		layer.effect: Mask {
+			maskSource: shapeWrapper
+		}
+	}
+}

Modules/Dashboard/Dash/Media/CoverVisualizer.qml

@@ -0,0 +1,18 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import M3Shapes
+import ZShell.Config
+
+Item {
+	id: root
+
+	CoverArt {
+		id: cover
+
+		anchors.centerIn: parent
+		implicitHeight: Config.dashboard.sizes.mediaCoverArtSize
+		implicitWidth: Config.dashboard.sizes.mediaCoverArtSize
+		shape.shape: MaterialShape.Cookie9Sided
+	}
+}