feat: dashboard show on hover, media and weather tabs added

2026-09-30 14:22:22 +02:00
parent d259c6ffbe
commit 2c90339c77
97 changed files with 4480 additions and 990 deletions
@@ -0,0 +1,194 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Mpris
+import ZShell.Components
+import ZShell.Config
+import qs.Components
+import qs.Services
+import qs.Helpers
+
+ColumnLayout {
+	id: root
+
+	readonly property bool hasUnknownLength: (Players.active?.length ?? 0) > 2147483647
+
+	function lengthStr(length: int): string {
+		if (length < 0)
+			return "-1:-1";
+
+		const hours = Math.floor(length / 3600);
+		const mins = Math.floor((length % 3600) / 60);
+		const secs = Math.floor(length % 60).toString().padStart(2, "0");
+
+		if (hours > 0)
+			return `${hours}:${mins.toString().padStart(2, "0")}:${secs}`;
+		return `${mins}:${secs}`;
+	}
+
+	spacing: Tokens.spacing.extraSmall
+
+	Timer {
+		running: Players.active?.isPlaying ?? false
+		interval: Config.dashboard.mediaUpdateInterval
+		triggeredOnStart: true
+		repeat: true
+		onTriggered: Players.active?.positionChanged()
+	}
+
+	CustomText {
+		Layout.fillWidth: true
+		text: Players.active?.trackTitle ?? ""
+		font.pointSize: Tokens.font.size.large
+		elide: Text.ElideRight
+		animate: true
+	}
+
+	CustomText {
+		Layout.fillWidth: true
+		text: Players.active?.trackArtist || qsTr("Unknown artist")
+		color: Colors.palette.m3onSurfaceVariant
+		font.pointSize: Tokens.font.size.normal
+		elide: Text.ElideRight
+		animate: true
+	}
+
+	CustomText {
+		Layout.fillWidth: true
+		text: Players.active?.trackAlbum || qsTr("Unknown album")
+		color: Colors.palette.m3secondary
+		font.pointSize: Tokens.font.size.normal
+		elide: Text.ElideRight
+		animate: true
+	}
+
+	RowLayout {
+		Layout.topMargin: Tokens.spacing.extraLargeIncreased
+		Layout.fillWidth: true
+		spacing: Tokens.spacing.small
+
+		TextMetrics {
+			id: timeMetrics
+
+			text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
+			font.pointSize: Tokens.font.size.normal
+		}
+
+		CustomText {
+			id: positionLabel
+
+			Layout.preferredWidth: timeMetrics.width
+			text: root.lengthStr(Players.active?.position ?? -1)
+			color: Colors.palette.m3onSurfaceVariant
+			font: timeMetrics.font
+			horizontalAlignment: Text.AlignHCenter
+		}
+
+		CustomSlider {
+			id: positionSlider
+
+			Layout.fillWidth: true
+			value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
+			enabled: (Players.active?.canSeek ?? false) && !root.hasUnknownLength
+			wavy: true
+			animateWave: Players.active?.isPlaying ?? false
+			waveFrequency: 5
+			waveDuration: 2000
+			interactionOnMove: false
+			onInteraction: value => {
+				const active = Players.active;
+				if (active?.canSeek && active?.positionSupported)
+					active.position = value * active.length;
+			}
+
+			Binding {
+				target: positionLabel
+				property: "text"
+				value: root.lengthStr(positionSlider.pos * (Players.active?.length ?? 0))
+				when: positionSlider.dragging
+			}
+		}
+
+		CustomText {
+			Layout.preferredWidth: timeMetrics.width
+			text: root.hasUnknownLength ? "--:--" : root.lengthStr(Players.active?.length ?? -1)
+			color: Colors.palette.m3onSurfaceVariant
+			font: timeMetrics.font
+			horizontalAlignment: Text.AlignHCenter
+		}
+	}
+
+	ButtonRow {
+		Layout.topMargin: Tokens.spacing.largeIncreased
+		Layout.fillWidth: true
+		spacing: Tokens.spacing.extraSmall
+
+		IconButton {
+			type: IconButton.Tonal
+			icon: "shuffle"
+			isRound: true
+			shapeMorph: true
+			checked: Players.active?.shuffle ?? false
+			font.pointSize: Tokens.font.size.large
+			enabled: Players.active?.shuffleSupported
+			onClicked: Players.active.shuffle = !Players.active?.shuffle
+			implicitWidth: Math.round(implicitHeight * 0.9)
+		}
+
+		IconButton {
+			id: previousBtn
+
+			type: IconButton.Tonal
+			icon: "skip_previous"
+			isRound: true
+			shapeMorph: true
+			font.pointSize: Tokens.font.size.extraLarge
+			enabled: Players.active?.canGoPrevious
+			onClicked: Players.active?.previous()
+		}
+
+		IconButton {
+			id: playPauseBtn
+
+			icon: Players.active?.isPlaying ? "pause" : "play_arrow"
+			isRound: true
+			shapeMorph: true
+			fillWidth: true
+			checked: Players.active?.isPlaying ?? false
+			font.pointSize: Tokens.font.size.extraLarge
+			enabled: Players.active?.canTogglePlaying
+			onClicked: Players.active?.togglePlaying()
+		}
+
+		IconButton {
+			id: nextBtn
+
+			type: IconButton.Tonal
+			icon: "skip_next"
+			isRound: true
+			shapeMorph: true
+			font.pointSize: Tokens.font.size.extraLarge
+			enabled: Players.active?.canGoNext
+			onClicked: Players.active?.next()
+		}
+
+		IconButton {
+			type: IconButton.Tonal
+			icon: Players.active?.loopState === MprisLoopState.Track ? "repeat_one" : "repeat"
+			isRound: true
+			shapeMorph: true
+			checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
+			font.pointSize: Tokens.font.size.large
+			enabled: Players.active?.loopSupported
+			onClicked: {
+				const state = Players.active.loopState;
+				if (state === MprisLoopState.None)
+					Players.active.loopState = MprisLoopState.Track;
+				else if (state === MprisLoopState.Track)
+					Players.active.loopState = MprisLoopState.Playlist;
+				else
+					Players.active.loopState = MprisLoopState.None;
+			}
+			implicitWidth: Math.round(implicitHeight * 0.9)
+		}
+	}
+}