kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

media controls: use multieffect instead of qt5 graphical effects

Browse Source
This commit is contained in:
end-4
2025-05-20 13:48:19 +02:00
parent fcdf2dc7f6
commit d0c180f8fc
1 changed files with 35 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/modules/mediaControls/PlayerControl.qml
+35 -44
View File
@@ -3,8 +3,8 @@ import "root:/modules/common/widgets"
import "root:/services" import "root:/services"
import "root:/modules/common/functions/string_utils.js" as StringUtils import "root:/modules/common/functions/string_utils.js" as StringUtils
import "root:/modules/common/functions/color_utils.js" as ColorUtils import "root:/modules/common/functions/color_utils.js" as ColorUtils
import Qt5Compat.GraphicalEffects
import QtQuick import QtQuick
import QtQuick.Effects
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import Quickshell import Quickshell
@@ -91,7 +91,7 @@ Item { // Player instance
property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, artDominantColor, 0.5) property color colLayer1: ColorUtils.mix(Appearance.colors.colLayer1, artDominantColor, 0.5)
property color colOnLayer0: ColorUtils.mix(Appearance.colors.colOnLayer0, 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 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 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 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) 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 id: background
anchors.fill: parent anchors.fill: parent
anchors.margins: Appearance.sizes.elevationMargin 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 anchors.fill: parent
source: Image { visible: true
id: blurredArt source: playerController.artUrl
anchors.fill: parent sourceSize.width: background.width
visible: false sourceSize.height: background.height
source: playerController.artUrl fillMode: Image.PreserveAspectCrop
sourceSize.width: parent.width cache: false
sourceSize.height: parent.height antialiasing: true
fillMode: Image.PreserveAspectCrop asynchronous: true
cache: false
antialiasing: true
asynchronous: true
}
radius: 100 // Increase for more blur
layer.enabled: true layer.enabled: true
layer.effect: OpacityMask { layer.effect: MultiEffect {
maskSource: Rectangle { source: blurredArt
width: background.width anchors.fill: blurredArt
height: background.height saturation: 0.2
radius: root.popupRounding blurEnabled: true
} blurMax: 100
blur: 1
} }
layer.smooth: true
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25) color: ColorUtils.transparentize(blendedColors.colLayer0, 0.25)
radius: root.popupRounding
} }
} }
@@ -144,7 +154,7 @@ Item { // Player instance
anchors.margins: root.contentPadding anchors.margins: root.contentPadding
spacing: 15 spacing: 15
Rectangle { // Art backgrounmd ClippingRectangle { // Art backgrounmd
Layout.fillHeight: true Layout.fillHeight: true
implicitWidth: height implicitWidth: height
radius: root.artRounding radius: root.artRounding
@@ -165,15 +175,6 @@ Item { // Player instance
height: size height: size
sourceSize.width: size sourceSize.width: size
sourceSize.height: 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
}
} }