From ab1e57dda5efd327b8c1b19bb112f84eeeadaed1 Mon Sep 17 00:00:00 2001 From: purian23 Date: Thu, 3 Sep 2026 01:28:05 -0400 Subject: [PATCH] refactor(media): re-add wallpaper blur to island media & misc tweaks - New Wallpaper on/off toggle in the Media Player tab for Dashboard and Island Media --- quickshell/Common/SettingsData.qml | 1 + quickshell/Common/settings/SettingsSpec.js | 1 + .../DankDash/MediaPlayerDashChrome.qml | 10 +- .../DankDash/MediaPlayerIslandChrome.qml | 103 +++++++++++------- .../Modules/DankDash/MediaPlayerTab.qml | 1 + .../Modules/DankIsland/IslandContentHost.qml | 1 + .../Modules/Settings/MediaPlayerTab.qml | 9 ++ quickshell/Widgets/MediaArtBackdrop.qml | 10 +- .../translations/settings_search_index.json | 27 +++++ 9 files changed, 117 insertions(+), 46 deletions(-) diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index b50dd4a91..e5f80c8ae 100644 --- a/quickshell/Common/SettingsData.qml +++ b/quickshell/Common/SettingsData.qml @@ -509,6 +509,7 @@ Singleton { property bool mediaAdaptiveWidthEnabled: true property bool audioVisualizerEnabled: true property bool mediaUseAlbumArtAccent: false + property bool mediaWallpaperEnabled: true property bool appleMusicAnimatedArtEnabled: false property string audioScrollMode: "volume" property int audioWheelScrollAmount: 5 diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index 5bf54cce1..57afcd2ee 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/quickshell/Common/settings/SettingsSpec.js @@ -228,6 +228,7 @@ var SPEC = { mediaAdaptiveWidthEnabled: { def: true }, audioVisualizerEnabled: { def: true }, mediaUseAlbumArtAccent: { def: false }, + mediaWallpaperEnabled: { def: true }, appleMusicAnimatedArtEnabled: { def: false }, audioScrollMode: { def: "volume" }, audioWheelScrollAmount: { def: 5 }, diff --git a/quickshell/Modules/DankDash/MediaPlayerDashChrome.qml b/quickshell/Modules/DankDash/MediaPlayerDashChrome.qml index 60f72be9a..31a07206b 100644 --- a/quickshell/Modules/DankDash/MediaPlayerDashChrome.qml +++ b/quickshell/Modules/DankDash/MediaPlayerDashChrome.qml @@ -17,10 +17,14 @@ Item { implicitHeight: playerContent.height + playerContent.anchors.topMargin * 2 - MediaArtBackdrop { + Loader { anchors.fill: parent - activePlayer: root.player.activePlayer - onArtReady: root.player.maybeFinishSwitch() + active: root.player.wallpaperEnabled + + sourceComponent: MediaArtBackdrop { + activePlayer: root.player.activePlayer + onArtReady: root.player.maybeFinishSwitch() + } } MediaPlayerEmptyState { diff --git a/quickshell/Modules/DankDash/MediaPlayerIslandChrome.qml b/quickshell/Modules/DankDash/MediaPlayerIslandChrome.qml index 1b3e9af07..170daece2 100644 --- a/quickshell/Modules/DankDash/MediaPlayerIslandChrome.qml +++ b/quickshell/Modules/DankDash/MediaPlayerIslandChrome.qml @@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound import QtQuick import Quickshell.Services.Mpris import Quickshell.Services.Pipewire +import Quickshell.Widgets import qs.Common import qs.Services import qs.Widgets @@ -35,6 +36,11 @@ Item { readonly property real cardMargin: 18 readonly property real artSize: 150 readonly property real seekBlockHeight: 42 + readonly property real seekbarHeight: 22 + readonly property real seekWidthRatio: 0.9 + readonly property real seekGapTop: 32 + readonly property real seekGapBottom: 16 + readonly property real seekTopMargin: root.seekGapTop - root.seekbarHeight / 2 readonly property real transportHeight: 56 readonly property real groupButtonSize: 44 readonly property real groupOuterRadius: root.groupButtonSize / 2 @@ -53,7 +59,7 @@ Item { } return 0; } - readonly property real baseHeight: root.cardMargin * 2 + root.artSize + root.seekBlockHeight + root.transportHeight + Theme.spacingM * 2 + readonly property real baseHeight: root.cardMargin * 2 + root.artSize + root.seekTopMargin + root.seekBlockHeight + root.seekGapBottom + root.transportHeight implicitHeight: root.baseHeight + (root.panel !== "" ? Theme.spacingM + root.panelHeight : 0) @@ -73,6 +79,18 @@ Item { root.panel = ""; } + Loader { + anchors.fill: parent + active: root.player.wallpaperEnabled + + sourceComponent: MediaArtBackdrop { + radius: 30 + stableHeight: root.baseHeight + activePlayer: root.activePlayer + onArtReady: root.player.maybeFinishSwitch() + } + } + MediaPlayerEmptyState { anchors.centerIn: parent visible: root.player.showNoPlayerNow @@ -111,58 +129,63 @@ Item { artUrl: root.artUrl } - Row { + ClippingRectangle { id: buttonGroup anchors { right: parent.right top: parent.top } - spacing: Theme.spacingXXS + width: buttonRow.width + height: root.groupButtonSize + color: "transparent" + radius: root.groupOuterRadius - GroupButton { - id: volumeButton + Row { + id: buttonRow - panelId: "volume" - topLeftRadius: root.groupOuterRadius - bottomLeftRadius: root.groupOuterRadius - iconName: root.player.getVolumeIcon() - enabled: root.player.volumeAvailable + spacing: Theme.spacingXXS - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - onWheel: wheelEvent => { - wheelEvent.accepted = true; - root.player.adjustVolume((wheelEvent.angleDelta.y > 0 ? 1 : -1) * AudioService.wheelVolumeStep); + GroupButton { + id: volumeButton + + panelId: "volume" + iconName: root.player.getVolumeIcon() + enabled: root.player.volumeAvailable + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.NoButton + onWheel: wheelEvent => { + wheelEvent.accepted = true; + root.player.adjustVolume((wheelEvent.angleDelta.y > 0 ? 1 : -1) * AudioService.wheelVolumeStep); + } } } - } - GroupButton { - id: outputButton + GroupButton { + id: outputButton - panelId: "devices" - iconName: root.player.getAudioDeviceIcon(AudioService.sink) + panelId: "devices" + iconName: root.player.getAudioDeviceIcon(AudioService.sink) - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - onWheel: wheelEvent => { - wheelEvent.accepted = true; - AudioService.cycleAudioOutputDirection(wheelEvent.angleDelta.y < 0); + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.NoButton + onWheel: wheelEvent => { + wheelEvent.accepted = true; + AudioService.cycleAudioOutputDirection(wheelEvent.angleDelta.y < 0); + } } } - } - GroupButton { - id: sourceButton + GroupButton { + id: sourceButton - panelId: "players" - topRightRadius: root.groupOuterRadius - bottomRightRadius: root.groupOuterRadius - visible: (root.player.allPlayers?.length || 0) > 0 - iconName: "assistant_device" + panelId: "players" + visible: (root.player.allPlayers?.length || 0) > 0 + iconName: "assistant_device" + } } } @@ -215,17 +238,17 @@ Item { id: seekBlock anchors { - left: parent.left - right: parent.right + horizontalCenter: parent.horizontalCenter top: header.bottom - topMargin: Theme.spacingM + topMargin: root.seekTopMargin } + width: Math.round(parent.width * root.seekWidthRatio) height: root.seekBlockHeight DankSeekbar { anchors.top: parent.top width: parent.width - height: 22 + height: root.seekbarHeight activePlayer: root.activePlayer stableLength: root.player.stableLength accentColor: root.accent @@ -268,7 +291,7 @@ Item { anchors { horizontalCenter: parent.horizontalCenter top: seekBlock.bottom - topMargin: Theme.spacingM + topMargin: root.seekGapBottom } height: root.transportHeight spacing: Theme.spacingS diff --git a/quickshell/Modules/DankDash/MediaPlayerTab.qml b/quickshell/Modules/DankDash/MediaPlayerTab.qml index 63f72b2ba..98283b795 100644 --- a/quickshell/Modules/DankDash/MediaPlayerTab.qml +++ b/quickshell/Modules/DankDash/MediaPlayerTab.qml @@ -23,6 +23,7 @@ Item { property bool live: Window.window?.visible ?? false property bool menusEnabled: true property string chrome: "dash" + property bool wallpaperEnabled: SettingsData.mediaWallpaperEnabled readonly property bool islandChrome: chrome === "island" readonly property color accent: MediaAccentService.accent diff --git a/quickshell/Modules/DankIsland/IslandContentHost.qml b/quickshell/Modules/DankIsland/IslandContentHost.qml index fdd4fb153..77905df5e 100644 --- a/quickshell/Modules/DankIsland/IslandContentHost.qml +++ b/quickshell/Modules/DankIsland/IslandContentHost.qml @@ -188,6 +188,7 @@ Item { id: mediaExpandedLoader activity: "media" + height: Math.max(target.height, root.height) active: root.mediaSurfaceActive && (root.expanded || root.expandedFade > 0) asynchronous: false sourceComponent: root.mediaExpandedComponent diff --git a/quickshell/Modules/Settings/MediaPlayerTab.qml b/quickshell/Modules/Settings/MediaPlayerTab.qml index 066b7d698..697fc0046 100644 --- a/quickshell/Modules/Settings/MediaPlayerTab.qml +++ b/quickshell/Modules/Settings/MediaPlayerTab.qml @@ -73,6 +73,15 @@ Item { onToggled: checked => SettingsData.set("mediaAdaptiveWidthEnabled", checked) } + SettingsToggleRow { + settingKey: "mediaWallpaper" + tags: ["wallpaper", "art", "album", "backdrop", "background", "blur"] + text: I18n.tr("Wallpaper") + description: I18n.tr("Blur the album art behind the media player") + checked: SettingsData.mediaWallpaperEnabled + onToggled: checked => SettingsData.set("mediaWallpaperEnabled", checked) + } + SettingsToggleRow { settingKey: "mediaAlbumArtAccent" tags: ["album", "art", "accent", "colors"] diff --git a/quickshell/Widgets/MediaArtBackdrop.qml b/quickshell/Widgets/MediaArtBackdrop.qml index c14622f87..465ecf22d 100644 --- a/quickshell/Widgets/MediaArtBackdrop.qml +++ b/quickshell/Widgets/MediaArtBackdrop.qml @@ -12,6 +12,10 @@ Item { property real radius: Theme.cornerRadius property real artOpacity: 0.7 property real surfaceTint: 0.3 + property real stableHeight: 0 + + readonly property bool pinned: root.stableHeight > 0 + readonly property real anchorHeight: root.pinned ? root.stableHeight : root.height signal artReady @@ -101,8 +105,7 @@ Item { Image { id: layerImg - anchors.centerIn: parent - width: Math.max(parent.width, parent.height) * 1.1 + width: Math.max(parent.width, root.anchorHeight) * 1.1 height: width fillMode: Image.PreserveAspectCrop asynchronous: true @@ -115,7 +118,8 @@ Item { } MultiEffect { - anchors.centerIn: parent + x: (parent.width - width) / 2 + y: root.pinned ? 0 : (parent.height - height) / 2 width: layerImg.width height: layerImg.height source: layerImg diff --git a/quickshell/translations/settings_search_index.json b/quickshell/translations/settings_search_index.json index 9f7abed54..e421ae2c8 100644 --- a/quickshell/translations/settings_search_index.json +++ b/quickshell/translations/settings_search_index.json @@ -6988,6 +6988,33 @@ ], "description": "Use colors extracted from album art instead of system theme colors" }, + { + "section": "mediaWallpaper", + "label": "Wallpaper", + "tabIndex": 16, + "category": "Media Player", + "keywords": [ + "album", + "art", + "audio", + "backdrop", + "background", + "behind", + "bg", + "blur", + "desktop", + "image", + "media", + "mpris", + "music", + "picture", + "playback", + "player", + "spotify", + "wallpaper" + ], + "description": "Blur the album art behind the media player" + }, { "section": "mediaWaveProgress", "label": "Wave Progress Bars",