fix: lock media size

This commit is contained in:
2 * r + 2 * t 2026-05-07 17:13:53 +10:00
parent 573cc9def0
commit 619b840893

View file

@ -3,8 +3,10 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import Quickshell import Quickshell
import Caelestia.Components
import Caelestia.Config import Caelestia.Config
import qs.components import qs.components
import qs.components.controls
import qs.components.effects import qs.components.effects
import qs.services import qs.services
@ -72,14 +74,14 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.margins: Tokens.padding.large anchors.margins: Tokens.padding.medium
StyledText { StyledText {
Layout.topMargin: Tokens.padding.large Layout.topMargin: Tokens.padding.medium
Layout.bottomMargin: Tokens.spacing.large Layout.bottomMargin: Tokens.spacing.large
text: qsTr("Now playing") text: qsTr("Now playing")
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font: Tokens.font.mono.builders.small.weight(Font.Medium).build() font: Tokens.font.label.builders.medium.weight(Font.DemiBold).vaxis("slnt", -4).build()
} }
StyledText { StyledText {
@ -88,7 +90,7 @@ Item {
text: Players.active?.trackArtist ?? qsTr("No media") text: Players.active?.trackArtist ?? qsTr("No media")
color: Colours.palette.m3primary color: Colours.palette.m3primary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font: Tokens.font.mono.builders.large.weight(Font.DemiBold).build() font: Tokens.font.body.builders.large.weight(Font.DemiBold).build()
elide: Text.ElideRight elide: Text.ElideRight
} }
@ -97,103 +99,43 @@ Item {
animate: true animate: true
text: Players.active?.trackTitle ?? qsTr("No media") text: Players.active?.trackTitle ?? qsTr("No media")
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font: Tokens.font.mono.large font: Tokens.font.title.medium
elide: Text.ElideRight elide: Text.ElideRight
} }
RowLayout { ButtonRow {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Tokens.spacing.largeIncreased * 1.2 Layout.topMargin: Tokens.spacing.medium
Layout.bottomMargin: Tokens.padding.large Layout.bottomMargin: Tokens.padding.extraLarge
spacing: Tokens.spacing.largeIncreased spacing: Tokens.spacing.extraSmall
PlayerControl { IconButton {
type: IconButton.Tonal
icon: "skip_previous" icon: "skip_previous"
onClicked: { isRound: true
if (Players.active?.canGoPrevious) shapeMorph: true
Players.active.previous(); disabled: !Players.active?.canGoPrevious
} onClicked: Players.active?.previous()
} }
PlayerControl { IconButton {
animate: true icon: Players.active?.isPlaying ? "pause" : "play_arrow"
icon: active ? "pause" : "play_arrow" isRound: true
colour: "Primary" shapeMorph: true
level: active ? 2 : 1 checked: Players.active?.isPlaying ?? false
active: Players.active?.isPlaying ?? false disabled: !Players.active?.canTogglePlaying
onClicked: { onClicked: Players.active?.togglePlaying()
if (Players.active?.canTogglePlaying) implicitWidth: implicitHeight + Tokens.padding.large * 2
Players.active.togglePlaying();
}
} }
PlayerControl { IconButton {
type: IconButton.Tonal
icon: "skip_next" icon: "skip_next"
onClicked: { isRound: true
if (Players.active?.canGoNext) shapeMorph: true
Players.active.next(); disabled: !Players.active?.canGoNext
} onClicked: Players.active?.next()
}
}
}
component PlayerControl: StyledRect {
id: control
property alias animate: controlIcon.animate
property alias icon: controlIcon.text
property bool active
property string colour: "Secondary"
property int level: 1
signal clicked
Layout.preferredWidth: implicitWidth + (controlState.pressed ? Tokens.padding.medium * 2 : active ? Tokens.padding.small : 0)
implicitWidth: controlIcon.implicitWidth + Tokens.padding.extraLargeIncreased
implicitHeight: controlIcon.implicitHeight + Tokens.padding.medium * 2
color: active ? Colours.palette[`m3${colour.toLowerCase()}`] : Colours.palette[`m3${colour.toLowerCase()}Container`]
radius: active || controlState.pressed ? Tokens.rounding.large : Math.min(implicitWidth, implicitHeight) / 2 * Math.min(1, Tokens.rounding.scale)
Elevation {
anchors.fill: parent
radius: parent.radius
z: -1
level: controlState.containsMouse && !controlState.pressed ? control.level + 1 : control.level
}
StateLayer {
id: controlState
color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
onClicked: control.clicked()
}
MaterialIcon {
id: controlIcon
anchors.centerIn: parent
color: control.active ? Colours.palette[`m3on${control.colour}`] : Colours.palette[`m3on${control.colour}Container`]
fontStyle: Tokens.font.icon.large
fill: control.active ? 1 : 0
Behavior on fill {
Anim {
type: Anim.DefaultEffects
}
}
}
Behavior on Layout.preferredWidth {
Anim {
type: Anim.FastSpatial
}
}
Behavior on radius {
Anim {
type: Anim.FastSpatial
} }
} }
} }