Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-04 04:42:05 -04:00
Code Packages Releases Activity

Making the new media playback OSD more beautiful (#1638)

Browse Source 
* feat: decouple track art downloads into new TrackArtService

* feat: beautify media playback osd with track art

* fix: bug when switching from art to no art
This commit is contained in:
ArijanJ
2026-02-10 03:13:23 +01:00
committed by GitHub
parent e3bd31bb52
commit b9bcfd8d2c
3 changed files with 162 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
quickshell/Modules/OSD/MediaPlaybackOSD.qml
View File

@@ -1,4 +1,6 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects
import qs.Common
import qs.Services
import qs.Widgets
@@ -10,7 +12,7 @@ DankOSD {
readonly property bool useVertical: isVerticalLayout
readonly property var player: MprisController.activePlayer
osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(260, Screen.width - Theme.spacingM * 2)
osdWidth: useVertical ? (40 + Theme.spacingS * 2) : Math.min(280, Screen.width - Theme.spacingM * 2)
osdHeight: useVertical ? (Theme.iconSize * 2) : (40 + Theme.spacingS * 2)
autoHideInterval: 3000
enableMouseInteraction: true
@@ -44,12 +46,17 @@ DankOSD {
target: player
function handleUpdate() {
if (!root.player?.trackTitle) return;
if (!root.player?.trackTitle)
return;
if (SettingsData.osdMediaPlaybackEnabled) {
TrackArtService.loadArtwork(player.trackArtUrl);
root.show();
}
}
function onTrackArtUrlChanged() {
TrackArtService.loadArtwork(player.trackArtUrl);
}
function onIsPlayingChanged() {
handleUpdate();
}
@@ -79,6 +86,67 @@ DankOSD {
onClicked: root.hide()
}
Item {
id: bgContainer
anchors.fill: parent
visible: TrackArtService._bgArtSource !== ""
Image {
id: bgImage
anchors.centerIn: parent
width: Math.max(parent.width, parent.height)
height: width
source: TrackArtService._bgArtSource
fillMode: Image.PreserveAspectCrop
asynchronous: true
cache: true
visible: false
}
Item {
id: blurredBg
anchors.fill: parent
visible: false
MultiEffect {
anchors.centerIn: parent
width: bgImage.width
height: bgImage.height
source: bgImage
blurEnabled: true
blurMax: 64
blur: 0.3
saturation: -0.2
brightness: -0.25
}
}
Rectangle {
id: bgMask
anchors.fill: parent
radius: Theme.cornerRadius
visible: false
layer.enabled: true
}
MultiEffect {
anchors.fill: parent
source: blurredBg
maskEnabled: true
maskSource: bgMask
maskThresholdMin: 0.5
maskSpreadAtMin: 1.0
opacity: 0.7
}
Rectangle {
anchors.fill: parent
radius: Theme.cornerRadius
color: Theme.surface
opacity: 0.3
}
}
Rectangle {
width: Theme.iconSize
height: Theme.iconSize
@@ -107,17 +175,33 @@ DankOSD {
}
}
StyledText {
id: textItem
Column {
x: parent.gap * 2 + Theme.iconSize
width: parent.width - Theme.iconSize - parent.gap * 3
anchors.verticalCenter: parent.verticalCenter
text: player ? `${player.trackTitle || I18n.tr("Unknown Title")} • ${player.trackArtist || I18n.tr("Unknown Artist")}` : ""
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
wrapMode: Text.Wrap
maximumLineCount: 3
spacing: 3
StyledText {
id: topText
width: parent.width
text: player ? `${player.trackTitle || I18n.tr("Unknown Title")}` : ""
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
wrapMode: Text.NoWrap
elide: Text.ElideRight
}
StyledText {
id: bottomText
width: parent.width
text: player ? ((player.trackArtist || I18n.tr("Unknown Artist")) + (player.trackAlbum ? ` • ${player.trackAlbum}` : "")) : ""
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Light
color: Theme.surfaceText
wrapMode: Text.NoWrap
elide: Text.ElideRight
}
}
}
}