feat: dashboard show on hover, media and weather tabs added
This commit is contained in:
@@ -12,12 +12,12 @@ CustomMouseArea {
|
||||
id: root
|
||||
|
||||
property int activeGrid: 1
|
||||
required property PersistentProperties dashState
|
||||
required property ScreenState screenState
|
||||
property bool initialized: false
|
||||
property int month1
|
||||
property int month2
|
||||
readonly property int realCurrMonth: dashState.currentDate.getMonth()
|
||||
readonly property int realCurrYear: dashState.currentDate.getFullYear()
|
||||
readonly property int realCurrMonth: screenState.dashboardDate.getMonth()
|
||||
readonly property int realCurrYear: screenState.dashboardDate.getFullYear()
|
||||
property int year1
|
||||
property int year2
|
||||
|
||||
@@ -43,9 +43,9 @@ CustomMouseArea {
|
||||
|
||||
function onWheel(event: WheelEvent): void {
|
||||
if (event.angleDelta.y > 0)
|
||||
root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1);
|
||||
root.screenState.dashboardDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1);
|
||||
else if (event.angleDelta.y < 0)
|
||||
root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1);
|
||||
root.screenState.dashboardDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1);
|
||||
}
|
||||
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
@@ -61,7 +61,7 @@ CustomMouseArea {
|
||||
|
||||
initialized = true;
|
||||
}
|
||||
onClicked: root.dashState.currentDate = new Date()
|
||||
onClicked: root.screenState.dashboardDate = new Date()
|
||||
onRealCurrMonthChanged: handleDateChange()
|
||||
onRealCurrYearChanged: handleDateChange()
|
||||
|
||||
@@ -135,7 +135,7 @@ CustomMouseArea {
|
||||
padding: Tokens.padding.extraSmall
|
||||
type: IconButton.Text
|
||||
|
||||
onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1)
|
||||
onClicked: root.screenState.dashboardDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1)
|
||||
}
|
||||
|
||||
Item {
|
||||
@@ -158,7 +158,7 @@ CustomMouseArea {
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: root.dashState.currentDate = new Date()
|
||||
onClicked: root.screenState.dashboardDate = new Date()
|
||||
}
|
||||
|
||||
Item {
|
||||
@@ -206,7 +206,7 @@ CustomMouseArea {
|
||||
padding: Tokens.padding.extraSmall
|
||||
type: IconButton.Text
|
||||
|
||||
onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1)
|
||||
onClicked: root.screenState.dashboardDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,329 +0,0 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
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
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
readonly property bool hasUnknownLength: (Players.active?.length ?? 0) > 2147483647
|
||||
property real playerProgress: {
|
||||
const active = Players.active;
|
||||
return active?.length ? (active.position % active.length) / active.length : 0;
|
||||
}
|
||||
property int rowHeight: Tokens.padding.large + Config.dashboard.sizes.mediaProgressThickness + Tokens.spacing.small
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
|
||||
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}`;
|
||||
}
|
||||
|
||||
Behavior on playerProgress {
|
||||
Anim {
|
||||
duration: Tokens.anim.durations.large
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
running: Players.active?.isPlaying ?? false
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
triggeredOnStart: true
|
||||
repeat: true
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
|
||||
ServiceRef {
|
||||
service: Audio.cava
|
||||
}
|
||||
|
||||
BackgroundShapes {
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
Shape {
|
||||
id: visualizer
|
||||
|
||||
readonly property int bars: Config.services.visualizerBars
|
||||
property color color: Qt.alpha(Colors.palette.m3primary, 0.5)
|
||||
property color fillColor: Qt.alpha(color, 0.1)
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: -(shape.strokeWidth / 2)
|
||||
layer.enabled: true
|
||||
asynchronous: true
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
id: shape
|
||||
strokeColor: visualizer.color
|
||||
fillColor: visualizer.fillColor
|
||||
strokeWidth: 2
|
||||
|
||||
PathSvg {
|
||||
path: shape.curvePath
|
||||
}
|
||||
|
||||
property string curvePath: {
|
||||
const values = Audio.cava.values;
|
||||
const n = values.length;
|
||||
|
||||
if (n < 2)
|
||||
return "";
|
||||
|
||||
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) / 2;
|
||||
}
|
||||
|
||||
let d = `M 0 ${h} `;
|
||||
d += `L ${x(0)} ${y(0)} `;
|
||||
|
||||
for (let i = 0; i < n - 1; ++i) {
|
||||
const x0 = x(i);
|
||||
const y0 = y(i);
|
||||
|
||||
const x1 = x(i + 1);
|
||||
const y1 = y(i + 1);
|
||||
|
||||
const prev = Math.max(0, i - 1);
|
||||
const next = Math.min(n - 1, i + 2);
|
||||
|
||||
const c1x = x0 + (x1 - x(prev)) / 6;
|
||||
const c1y = y0 + (y1 - y(prev)) / 6;
|
||||
|
||||
const c2x = x1 - (x(next) - x0) / 6;
|
||||
const c2y = y1 - (y(next) - y0) / 6;
|
||||
|
||||
d += `C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x1} ${y1} `;
|
||||
}
|
||||
|
||||
d += `L ${w} ${h} `;
|
||||
d += `L 0 ${h} Z`;
|
||||
|
||||
return d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.fill: visualizer
|
||||
|
||||
color: Qt.alpha(Colors.palette.m3shadow, 0.2)
|
||||
layer.enabled: true
|
||||
layer.effect: MultiEffect {
|
||||
maskEnabled: true
|
||||
maskSource: visualizer
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Tokens.padding.large
|
||||
anchors.leftMargin: Tokens.padding.extraLarge
|
||||
|
||||
CoverVisualizer {
|
||||
Layout.fillHeight: true
|
||||
implicitWidth: Config.dashboard.sizes.mediaCoverArtSize
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Tokens.spacing.largeIncreased
|
||||
Layout.rightMargin: Tokens.spacing.largeIncreased
|
||||
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
MarqueeText {
|
||||
id: title
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
color: Colors.palette.m3primary
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
pauseMs: 4000
|
||||
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
|
||||
implicitWidth: parent.width - Tokens.padding.large * 4
|
||||
}
|
||||
|
||||
MarqueeText {
|
||||
id: album
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
color: Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.small
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
pauseMs: 4000
|
||||
text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
|
||||
implicitWidth: parent.width - Tokens.padding.large * 4
|
||||
}
|
||||
|
||||
MarqueeText {
|
||||
id: artist
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
color: Colors.palette.m3secondary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
pauseMs: 4000
|
||||
text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
|
||||
implicitWidth: parent.width - Tokens.padding.large * 4
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: positionSliderLayout
|
||||
Layout.topMargin: Tokens.spacing.large
|
||||
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"
|
||||
}
|
||||
|
||||
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
|
||||
Layout.leftMargin: positionSliderLayout.implicitWidth / 4
|
||||
Layout.rightMargin: positionSliderLayout.implicitWidth / 4
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: "shuffle"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.shuffle ?? false
|
||||
enabled: Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: previousBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_previous"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
enabled: Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: playPauseBtn
|
||||
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
fillWidth: true
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
enabled: Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: nextBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_next"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
enabled: Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
|
||||
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
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
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
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@ import qs.Helpers
|
||||
Row {
|
||||
id: root
|
||||
|
||||
required property PersistentProperties dashState
|
||||
required property ScreenState screenState
|
||||
|
||||
padding: 20
|
||||
spacing: 12
|
||||
|
||||
Reference in New Issue
Block a user