wactioncenter: media controls

This commit is contained in:
end-4
2025-11-23 21:35:43 +01:00
parent c78c363388
commit 07f8a72d6d
23 changed files with 348 additions and 130 deletions
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 4a1 1 0 1 0-2 0v16a1 1 0 1 0 2 0V4ZM3 4.947c0-1.424 1.612-2.252 2.77-1.422l10.47 7.507a1.75 1.75 0 0 1-.075 2.895l-10.47 6.716C4.53 21.39 3 20.554 3 19.17V4.947Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 293 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 3.75a.75.75 0 0 0-1.5 0v16.5a.75.75 0 0 0 1.5 0V3.75ZM5.77 3.525C4.612 2.695 3 3.523 3 4.947V19.17c0 1.384 1.53 2.22 2.695 1.473l10.47-6.716a1.75 1.75 0 0 0 .074-2.895L5.77 3.525ZM4.5 4.947a.25.25 0 0 1 .396-.203l10.47 7.507a.25.25 0 0 1-.011.413l-10.47 6.717a.25.25 0 0 1-.385-.21V4.946Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 420 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3h-3.5ZM14.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3h-3.5Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 390 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3h-3.5Zm-.25 1.75a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25V4.75ZM14.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3h-3.5Zm-.25 1.75a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25V4.75Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 614 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 262 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.608 4.615a.75.75 0 0 0-1.108.659v13.452a.75.75 0 0 0 1.108.659l12.362-6.726a.75.75 0 0 0 0-1.318L7.608 4.615ZM5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 374 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 20a1 1 0 1 0 2 0V4a1 1 0 1 0-2 0v16ZM20.75 19.053c0 1.424-1.612 2.252-2.77 1.422L7.51 12.968a1.75 1.75 0 0 1 .075-2.895l10.47-6.716c1.165-.748 2.695.089 2.695 1.473v14.223Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 306 B

@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 20.25a.75.75 0 0 0 1.5 0V3.75a.75.75 0 1 0-1.5 0v16.5ZM18.23 20.475c1.158.83 2.77.002 2.77-1.422V4.83c0-1.384-1.53-2.22-2.695-1.473l-10.47 6.716a1.75 1.75 0 0 0-.074 2.895l10.47 7.507Zm1.27-1.422a.25.25 0 0 1-.396.203l-10.47-7.507a.25.25 0 0 1 .011-.413l10.47-6.717a.25.25 0 0 1 .385.21v14.224Z" fill="#212121"/></svg>

After

Width:  |  Height:  |  Size: 425 B

@@ -16,7 +16,7 @@ Scope {
id: root
property bool visible: false
readonly property MprisPlayer activePlayer: MprisController.activePlayer
readonly property var realPlayers: Mpris.players.values.filter(player => isRealPlayer(player))
readonly property var realPlayers: MprisController.players
readonly property var meaningfulPlayers: filterDuplicatePlayers(realPlayers)
readonly property real osdWidth: Appearance.sizes.osdWidth
readonly property real widgetWidth: Appearance.sizes.mediaControlsWidth
@@ -24,27 +24,6 @@ Scope {
property real popupRounding: Appearance.rounding.screenRounding - Appearance.sizes.hyprlandGapsOut + 1
property list<real> visualizerPoints: []
property bool hasPlasmaIntegration: false
Process {
id: plasmaIntegrationAvailabilityCheckProc
running: true
command: ["bash", "-c", "command -v plasma-browser-integration-host"]
onExited: (exitCode, exitStatus) => {
root.hasPlasmaIntegration = (exitCode === 0);
}
}
function isRealPlayer(player) {
if (!Config.options.media.filterDuplicatePlayers) {
return true;
}
return (
// Remove unecessary native buses from browsers if there's plasma integration
!(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.firefox')) && !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.chromium')) &&
// playerctld just copies other buses and we don't need duplicates
!player.dbusName?.startsWith('org.mpris.MediaPlayer2.playerctld') &&
// Non-instance mpd bus
!(player.dbusName?.endsWith('.mpd') && !player.dbusName.endsWith('MediaPlayer2.mpd')));
}
function filterDuplicatePlayers(players) {
let filtered = [];
let used = new Set();
@@ -96,7 +75,7 @@ Scope {
id: mediaControlsLoader
active: GlobalStates.mediaControlsOpen
onActiveChanged: {
if (!mediaControlsLoader.active && Mpris.players.values.filter(player => isRealPlayer(player)).length === 0) {
if (!mediaControlsLoader.active && root.realPlayers.length === 0) {
GlobalStates.mediaControlsOpen = false;
}
}
@@ -1,3 +1,4 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
@@ -12,28 +13,52 @@ import qs.modules.waffle.actionCenter.mainPage
WBarAttachedPanelContent {
id: root
contentItem: WStackView {
id: stackView
anchors.fill: parent
implicitWidth: initItem.implicitWidth
implicitHeight: initItem.implicitHeight
initialItem: PageColumn {
id: initItem
MainPageBody {}
Separator {}
MainPageFooter {}
readonly property bool barAtBottom: Config.options.waffles.bar.bottom
contentItem: Column {
// This somewhat sophisticated anchoring is needed to make opening anim not jump abruptly when stuff appear
anchors {
left: parent.left
right: parent.right
top: root.barAtBottom ? undefined : parent.top
bottom: root.barAtBottom ? parent.bottom : undefined
margins: root.visualMargin
}
spacing: 12
Component.onCompleted: {
ActionCenterContext.stackView = this
WPane {
visible: MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)
anchors {
left: parent.left
right: parent.right
}
contentItem: MediaPaneContent {}
}
WPane {
contentItem: WStackView {
id: stackView
anchors.fill: parent
implicitWidth: initItem.implicitWidth
implicitHeight: initItem.implicitHeight
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.BackButton
onClicked: {
ActionCenterContext.back()
initialItem: PageColumn {
id: initItem
MainPageBody {}
Separator {}
MainPageFooter {}
}
Component.onCompleted: {
ActionCenterContext.stackView = this;
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.BackButton
onClicked: {
ActionCenterContext.back();
}
}
}
}
}
@@ -0,0 +1,156 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell
import qs.services
import qs.modules.common
import qs.modules.common.functions
import qs.modules.common.widgets
import qs.modules.waffle.looks
Rectangle {
id: root
implicitHeight: 176
implicitWidth: 358
color: Looks.colors.bgPanelBody
anchors.fill: parent
readonly property var activePlayer: MprisController.activePlayer
Column {
anchors {
fill: parent
leftMargin: 23
rightMargin: 23
topMargin: 16
bottomMargin: 20
}
spacing: 25
AppInfoRow {
anchors {
left: parent.left
right: parent.right
}
}
TrackInfoRow {
anchors {
left: parent.left
right: parent.right
}
}
ControlButtonsRow {
anchors.horizontalCenter: parent.horizontalCenter
}
}
component AppInfoRow: RowLayout {
id: appInfo
spacing: 8
property var desktopEntry: {
const desktopEntryString = root.activePlayer?.desktopEntry ?? "";
return DesktopEntries.byId(desktopEntryString);
}
FluentIcon {
implicitSize: 20
icon: appInfo.desktopEntry?.icon || "music-note-2"
monochrome: !appInfo.desktopEntry?.icon
}
WText {
Layout.fillWidth: true
text: appInfo.desktopEntry?.name ?? Translation.tr("Media")
horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight
}
}
component TrackInfoRow: RowLayout {
spacing: 16
ColumnLayout {
id: trackInfo
Layout.fillWidth: true
spacing: 0
WText {
Layout.fillWidth: true
font.weight: Looks.font.weight.strong
font.pixelSize: Looks.font.pixelSize.large
elide: Text.ElideRight
text: StringUtils.cleanMusicTitle(root.activePlayer?.trackTitle) || Translation.tr("Unknown Title")
}
WText {
Layout.fillWidth: true
elide: Text.ElideRight
text: root.activePlayer?.trackArtist || Translation.tr("Unknown Artist")
}
}
StyledImage {
id: artImage
Layout.preferredWidth: 58
Layout.preferredHeight: trackInfo.implicitHeight
source: MprisController.activeTrack?.artUrl || ""
fillMode: Image.PreserveAspectFit
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: artImage.width
height: artImage.height
Rectangle {
anchors.centerIn: parent
width: artImage.paintedWidth
height: artImage.paintedHeight
radius: Looks.radius.medium
}
}
}
}
}
component ControlButtonsRow: RowLayout {
spacing: 26
MediaControlButton {
iconName: "previous"
enabled: root.activePlayer?.canGoPrevious ?? false
onClicked: root.activePlayer?.previous()
}
MediaControlButton {
readonly property bool playing: root.activePlayer?.isPlaying ?? false
iconName: playing ? "pause" : "play"
enabled: (playing && root.activePlayer?.canPause) || (!playing && root.activePlayer?.canPlay)
onClicked: root.activePlayer?.togglePlaying()
}
MediaControlButton {
iconName: "next"
enabled: root.activePlayer?.canGoNext ?? false
onClicked: root.activePlayer?.next()
}
}
component MediaControlButton: WBorderlessButton {
id: controlButton
required property string iconName
implicitHeight: 40
implicitWidth: 40
contentItem: Item {
FluentIcon {
anchors.centerIn: parent
icon: controlButton.iconName
monochrome: true
filled: true
implicitSize: 18
}
}
}
}
@@ -35,8 +35,8 @@ Scope {
right: true
}
implicitWidth: content.implicitWidth + content.visualMargin * 2
implicitHeight: content.implicitHeight + content.visualMargin * 2
implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight
HyprlandFocusGrab {
id: focusGrab
@@ -55,7 +55,6 @@ Scope {
ActionCenterContent {
id: content
anchors.fill: parent
anchors.margins: visualMargin
focus: true
Keys.onPressed: event => { // Esc to close
@@ -110,7 +110,7 @@ Item {
Quickshell.execDetached(["bash", "-c", Config.options.apps.bluetooth]);
}
}
WPanelFooterButton {
WBorderlessButton {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 12
@@ -11,7 +11,7 @@ import qs.modules.waffle.actionCenter
FooterRectangle {
// Battery button
WPanelFooterButton {
WBorderlessButton {
visible: Battery.available
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
@@ -36,7 +36,7 @@ FooterRectangle {
}
// Settings button
WPanelFooterButton {
WBorderlessButton {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 12
@@ -100,7 +100,7 @@ Item {
Quickshell.execDetached(["bash", "-c", Config.options.apps.network]);
}
}
WPanelFooterButton {
WBorderlessButton {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 12
@@ -54,7 +54,7 @@ BarButton {
contentItem: Item {
id: contentItem
anchors.centerIn: background
anchors.centerIn: root.background
implicitHeight: iconWidget.implicitHeight
implicitWidth: iconWidget.implicitWidth
@@ -12,8 +12,6 @@ Item {
signal closed()
property alias border: borderRect
property alias borderColor: borderRect.border.color
required property Item contentItem
property real visualMargin: 12
property int closeAnimDuration: 150
@@ -24,32 +22,19 @@ Item {
readonly property bool barAtBottom: Config.options.waffles.bar.bottom
implicitHeight: borderRect.implicitHeight
implicitWidth: borderRect.implicitWidth
WRectangularShadow {
target: borderRect
}
Rectangle {
id: borderRect
z: 1
color: "transparent"
radius: Looks.radius.large
border.color: Looks.colors.bg2Border
border.width: 1
implicitWidth: contentItem.implicitWidth + border.width * 2
implicitHeight: contentItem.implicitHeight + border.width * 2
implicitHeight: contentItem.implicitHeight + visualMargin * 2
implicitWidth: contentItem.implicitWidth + visualMargin * 2
Item {
id: panelContent
anchors {
left: parent.left
right: parent.right
top: root.barAtBottom ? undefined : parent.top
bottom: root.barAtBottom ? parent.bottom : undefined
// Opening anim
bottomMargin: root.barAtBottom ? sourceEdgeMargin : 0
topMargin: root.barAtBottom ? 0 : sourceEdgeMargin
bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
}
Component.onCompleted: {
@@ -59,9 +44,9 @@ Item {
property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
PropertyAnimation {
id: openAnim
target: borderRect
target: panelContent
property: "sourceEdgeMargin"
to: 0
to: root.visualMargin
duration: 200
easing.type: Easing.BezierSpline
easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
@@ -69,7 +54,7 @@ Item {
SequentialAnimation {
id: closeAnim
PropertyAnimation {
target: borderRect
target: panelContent
property: "sourceEdgeMargin"
to: -(implicitHeight + root.visualMargin)
duration: root.closeAnimDuration
@@ -82,23 +67,8 @@ Item {
}
}
}
}
Item {
id: contentArea
z: 0
anchors.fill: borderRect
anchors.margins: borderRect.border.width
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: contentArea.width
height: contentArea.height
radius: borderRect.radius - borderRect.border.width
}
}
implicitWidth: root.contentItem.implicitWidth
implicitHeight: root.contentItem.implicitHeight
children: [root.contentItem]
}
}
}
@@ -0,0 +1,58 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell
import qs
import qs.services
import qs.modules.common
import qs.modules.waffle.looks
Item {
id: root
required property Item contentItem
property real radius: Looks.radius.large
property alias border: borderRect
property alias borderColor: borderRect.border.color
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
WRectangularShadow {
target: borderRect
}
Rectangle {
id: borderRect
z: 1
color: "transparent"
radius: root.radius
border.color: Looks.colors.bg2Border
border.width: 1
implicitWidth: contentItem.implicitWidth + border.width * 2
implicitHeight: contentItem.implicitHeight + border.width * 2
anchors.fill: contentRect
anchors.margins: -border.width
}
Rectangle {
id: contentRect
anchors.centerIn: parent
z: 0
color: Looks.colors.bgPanelFooterBase
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
id: contentAreaMask
width: contentRect.width
height: contentRect.height
radius: root.radius - borderRect.border.width
}
}
children: [root.contentItem]
}
}
@@ -11,11 +11,7 @@ StackView {
property list<real> fadeBezierCurve: Looks.transition.easing.bezierCurve.easeInOut
clip: true
property alias color: background.color
background: Rectangle {
id: background
color: Looks.colors.bgPanelFooterBase
}
background: null
pushEnter: Transition {
XAnimator {
@@ -13,7 +13,6 @@ WBarAttachedPanelContent {
required property string iconName
property real value
property bool showNumber: true
borderColor: Looks.colors.ambientShadow
property Timer timer: Timer {
id: autoCloseTimer
@@ -21,44 +20,48 @@ WBarAttachedPanelContent {
interval: Config.options.osd.timeout
repeat: false
onTriggered: {
root.close()
root.close();
}
}
contentItem: Rectangle {
contentItem: WPane {
anchors.centerIn: parent
color: Looks.colors.bg1Base
radius: Looks.radius.medium
implicitWidth: root.showNumber ? 192 : 170
implicitHeight: 46
RowLayout {
id: contentRow
anchors.fill: parent
anchors.margins: 12
borderColor: Looks.colors.ambientShadow
spacing: 12
contentItem: Item {
// color: Looks.colors.bg1Base
// radius: Looks.radius.medium
implicitWidth: root.showNumber ? 192 : 170
implicitHeight: 46
FluentIcon {
Layout.alignment: Qt.AlignVCenter
icon: root.iconName
implicitSize: 18
}
RowLayout {
id: contentRow
anchors.fill: parent
anchors.margins: 12
WProgressBar {
id: progressBar
value: root.value
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: root.showNumber ? 0 : 3
}
spacing: 12
WTextWithFixedWidth {
visible: root.showNumber
text: Math.round(root.value * 100)
// longestText: "100"
implicitWidth: 16
horizontalAlignment: Text.AlignHCenter
FluentIcon {
Layout.alignment: Qt.AlignVCenter
icon: root.iconName
implicitSize: 18
}
WProgressBar {
id: progressBar
value: root.value
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: root.showNumber ? 0 : 3
}
WTextWithFixedWidth {
visible: root.showNumber
text: Math.round(root.value * 100)
// longestText: "100"
implicitWidth: 16
horizontalAlignment: Text.AlignHCenter
}
}
}
}
@@ -104,13 +104,12 @@ Scope {
item: osdIndicatorLoader
}
implicitWidth: osdIndicatorLoader.implicitWidth + osdIndicatorLoader.item.visualMargin * 2
implicitHeight: osdIndicatorLoader.implicitHeight + osdIndicatorLoader.item.visualMargin * 2
implicitWidth: osdIndicatorLoader.implicitWidth
implicitHeight: osdIndicatorLoader.implicitHeight
Loader {
id: osdIndicatorLoader
anchors.fill: parent
anchors.margins: item.visualMargin
source: root.indicators.find(i => i.id === root.currentIndicator)?.sourceUrl
Connections {
@@ -9,12 +9,14 @@ import QtQuick
import Quickshell
import Quickshell.Io
import Quickshell.Services.Mpris
import qs.modules.common
/**
* A service that provides easy access to the active Mpris player.
*/
Singleton {
id: root;
property list<MprisPlayer> players: Mpris.players.values.filter(player => isRealPlayer(player));
property MprisPlayer trackedPlayer: null;
property MprisPlayer activePlayer: trackedPlayer ?? Mpris.players.values[0] ?? null;
signal trackChanged(reverse: bool);
@@ -23,6 +25,29 @@ Singleton {
property var activeTrack;
property bool hasPlasmaIntegration: false
Process {
id: plasmaIntegrationAvailabilityCheckProc
running: true
command: ["bash", "-c", "command -v plasma-browser-integration-host"]
onExited: (exitCode, exitStatus) => {
root.hasPlasmaIntegration = (exitCode === 0);
}
}
function isRealPlayer(player) {
if (!Config.options.media.filterDuplicatePlayers) {
return true;
}
return (
// Remove unecessary native buses from browsers if there's plasma integration
!(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.firefox')) && !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.chromium')) &&
// playerctld just copies other buses and we don't need duplicates
!player.dbusName?.startsWith('org.mpris.MediaPlayer2.playerctld') &&
// Non-instance mpd bus
!(player.dbusName?.endsWith('.mpd') && !player.dbusName.endsWith('MediaPlayer2.mpd')));
}
// Original stuff from fox below
Instantiator {
model: Mpris.players;