widgets/mediacontrols/BlurredBackground.qml

0001 // SPDX-FileCopyrightText: 2021-2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Effects
0006 import Qt5Compat.GraphicalEffects
0007
0008 import org.kde.kirigami 2.20 as Kirigami
0009
0010 Item {
0011     id: root
0012
0013     property string imageSource
0014     property bool darken: false
0015
0016     // clip corners so that the image has rounded corners
0017     layer.enabled: true
0018     layer.effect: OpacityMask {
0019         maskSource: Item {
0020             width: img.width
0021             height: img.height
0022
0023             Rectangle {
0024                 anchors.centerIn: parent
0025                 width: img.width
0026                 height: img.height
0027                 radius: Kirigami.Units.smallSpacing
0028             }
0029         }
0030     }
0031
0032     Image {
0033         id: img
0034         source: root.imageSource
0035         asynchronous: true
0036
0037         anchors.fill: parent
0038         fillMode: Image.PreserveAspectCrop
0039
0040         // ensure text is readable
0041         Rectangle {
0042             anchors.fill: parent
0043             color: Qt.rgba(0, 0, 0, root.darken ? 0.8 : 0.6)
0044         }
0045
0046         // apply lighten, saturate and blur effect
0047         layer.enabled: true
0048         layer.effect: MultiEffect {
0049             brightness: 0.2
0050             saturation: 1.5
0051
0052             blurEnabled: true
0053             blurMax: 32
0054             blur: 1.0
0055             blurMultiplier: 2
0056             autoPaddingEnabled: false
0057         }
0058     }
0059 }