diff --git a/.config/quickshell/modules/mediaControls/PlayerControl.qml b/.config/quickshell/modules/mediaControls/PlayerControl.qml index 18c551abb..d3d60a44f 100644 --- a/.config/quickshell/modules/mediaControls/PlayerControl.qml +++ b/.config/quickshell/modules/mediaControls/PlayerControl.qml @@ -3,8 +3,8 @@ import "root:/modules/common/widgets" import "root:/services" import "root:/modules/common/functions/string_utils.js" as StringUtils import "root:/modules/common/functions/color_utils.js" as ColorUtils -import Qt5Compat.GraphicalEffects import QtQuick +import QtQuick.Effects import QtQuick.Layouts import QtQuick.Controls import Quickshell @@ -91,7 +91,7 @@ Item { // Player instance property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, artDominantColor, 0.5) property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, artDominantColor, 0.5) property color colOnLayer1: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5) - property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.1) + property color colSubtext: ColorUtils.mix(Appearance.colors.colOnLayer1, artDominantColor, 0.5) property color colPrimary: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.m3colors.m3primary, artDominantColor), artDominantColor, 0.5) property color colPrimaryHover: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryHover, artDominantColor), artDominantColor, 0.3) property color colPrimaryActive: ColorUtils.mix(ColorUtils.adaptToAccent(Appearance.colors.colPrimaryActive, artDominantColor), artDominantColor, 0.3) @@ -103,39 +103,49 @@ Item { // Player instance } - Item { + ClippingRectangle { // Background id: background anchors.fill: parent anchors.margins: Appearance.sizes.elevationMargin + color: blendedColors.colLayer0 + radius: root.popupRounding - FastBlur { + layer.enabled: true + layer.effect: MultiEffect { + source: background + anchors.fill: background + shadowEnabled: true + shadowColor: Appearance.colors.colShadow + shadowVerticalOffset: 1 + shadowBlur: 0.5 + } + + Image { + id: blurredArt anchors.fill: parent - source: Image { - id: blurredArt - anchors.fill: parent - visible: false - source: playerController.artUrl - sourceSize.width: parent.width - sourceSize.height: parent.height - fillMode: Image.PreserveAspectCrop - cache: false - antialiasing: true - asynchronous: true - } - radius: 100 // Increase for more blur + visible: true + source: playerController.artUrl + sourceSize.width: background.width + sourceSize.height: background.height + fillMode: Image.PreserveAspectCrop + cache: false + antialiasing: true + asynchronous: true + layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: background.width - height: background.height - radius: root.popupRounding - } + layer.effect: MultiEffect { + source: blurredArt + anchors.fill: blurredArt + saturation: 0.2 + blurEnabled: true + blurMax: 100 + blur: 1 } - layer.smooth: true Rectangle { anchors.fill: parent color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25) + radius: root.popupRounding } } @@ -144,7 +154,7 @@ Item { // Player instance anchors.margins: root.contentPadding spacing: 15 - Rectangle { // Art backgrounmd + ClippingRectangle { // Art backgrounmd Layout.fillHeight: true implicitWidth: height radius: root.artRounding @@ -165,15 +175,6 @@ Item { // Player instance height: size sourceSize.width: size sourceSize.height: size - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: mediaArt.size - height: mediaArt.size - radius: root.artRounding - } - } } } @@ -278,14 +279,4 @@ Item { // Player instance } } } - - DropShadow { - anchors.fill: background - source: background - horizontalOffset: 0 - verticalOffset: 2 - radius: Appearance.sizes.elevationMargin - samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs - color: Appearance.colors.colShadow - } } \ No newline at end of file