feat: add no media placeholder

This commit is contained in:
2 * r + 2 * t 2026-05-04 05:05:24 +10:00
parent 2ceb2a416f
commit b01b5fcb1f
2 changed files with 117 additions and 6 deletions

View file

@ -1,6 +1,7 @@
import "media" import "media"
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import M3Shapes
import Caelestia.Config import Caelestia.Config
import qs.components import qs.components
import qs.services import qs.services
@ -24,6 +25,114 @@ Item {
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
} }
Item {
Layout.fillWidth: true
Layout.fillHeight: true
state: Players.active ? "" : "noMedia"
states: State {
name: "noMedia"
PropertyChanges {
noMedia.opacity: 1
content.opacity: 0
}
}
transitions: [
Transition {
from: ""
SequentialAnimation {
Anim {
target: content
property: "opacity"
type: Anim.DefaultEffects
}
Anim {
target: noMedia
property: "opacity"
type: Anim.SlowEffects
}
}
},
Transition {
to: ""
SequentialAnimation {
Anim {
target: noMedia
property: "opacity"
type: Anim.DefaultEffects
}
Anim {
target: content
property: "opacity"
type: Anim.SlowEffects
}
}
}
]
Loader {
id: noMedia
anchors.centerIn: parent
anchors.horizontalCenterOffset: -Tokens.padding.extraLarge * 2
asynchronous: true
active: opacity > 0
opacity: 0
sourceComponent: ColumnLayout {
spacing: Tokens.spacing.small
MaterialShape {
Layout.topMargin: (pathBounds().height - implicitSize) / 2
Layout.bottomMargin: (pathBounds().height - implicitSize) / 2 + Tokens.spacing.small
Layout.alignment: Qt.AlignHCenter
color: Colours.palette.m3primaryContainer
implicitSize: icon.implicitHeight + Tokens.padding.extraLarge * 2
shape: MaterialShape.ClamShell
Behavior on color {
CAnim {}
}
MaterialIcon {
id: icon
anchors.centerIn: parent
text: "queue_music"
fontStyle: Tokens.font.icon.builders.large.scale(2).build()
color: Colours.palette.m3onPrimaryContainer
}
}
StyledText {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Nothing playing")
font: Tokens.font.headline.medium
}
StyledText {
text: qsTr("Play something for it to show up here!")
color: Colours.palette.m3onSurfaceVariant
font: Tokens.font.body.large
}
}
}
Loader {
id: content
anchors.fill: parent
asynchronous: true
active: opacity > 0
sourceComponent: RowLayout {
spacing: Tokens.spacing.extraLarge
Details { Details {
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -33,4 +142,7 @@ Item {
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
} }
} }
}
}
}
} }

View file

@ -180,7 +180,6 @@ class DashboardTokens : public ConfigObject {
CONFIG_PROPERTY(int, userWidth, 340) CONFIG_PROPERTY(int, userWidth, 340)
CONFIG_PROPERTY(int, logoSize, 30) CONFIG_PROPERTY(int, logoSize, 30)
CONFIG_PROPERTY(int, uptimeSize, 30) CONFIG_PROPERTY(int, uptimeSize, 30)
CONFIG_PROPERTY(int, bubbleSize, 8)
CONFIG_PROPERTY(int, dateTimeWidth, 110) CONFIG_PROPERTY(int, dateTimeWidth, 110)
CONFIG_PROPERTY(int, mediaWidth, 200) CONFIG_PROPERTY(int, mediaWidth, 200)
CONFIG_PROPERTY(int, mediaProgressSweep, 180) CONFIG_PROPERTY(int, mediaProgressSweep, 180)