DankMaterialShell/quickshell/Widgets/DankCircularImage.qml

import QtQuick
import QtQuick.Window
import QtQuick.Effects
import qs.Common
import qs.Widgets

Rectangle {
    id: root

    property string imageSource: ""
    property string fallbackIcon: "notifications"
    property string fallbackText: ""
    property bool cacheImages: true
    property bool hasImage: imageSource !== ""
    readonly property bool shouldProbe: imageSource !== "" && !imageSource.startsWith("image://")
    readonly property bool isAnimated: shouldProbe && probe.status === Image.Ready && probe.frameCount > 1
    readonly property bool probeSettled: probe.status === Image.Ready || probe.status === Image.Error
    readonly property var activeImage: {
        if (isAnimated)
            return probe;
        if (staticImage.status === Image.Ready)
            return staticImage;
        if (probe.status === Image.Ready && probe.source !== "")
            return probe;
        return staticImage;
    }
    property int imageStatus: activeImage.status

    signal imageSaved(string filePath)

    property string _pendingSavePath: ""
    property var _attachedWindow: root.Window.window

    on_AttachedWindowChanged: {
        if (_attachedWindow && _pendingSavePath !== "") {
            Qt.callLater(function () {
                if (root._pendingSavePath !== "") {
                    let path = root._pendingSavePath;
                    root._pendingSavePath = "";
                    root.saveImageToFile(path);
                }
            });
        }
    }

    function saveImageToFile(filePath) {
        if (activeImage.status !== Image.Ready)
            return false;

        if (!activeImage.Window.window) {
            _pendingSavePath = filePath;
            return true;
        }

        activeImage.grabToImage(function (result) {
            if (result && result.saveToFile(filePath)) {
                root.imageSaved(filePath);
            }
        });
        return true;
    }

    radius: width / 2
    color: Theme.primaryHover
    border.color: "transparent"
    border.width: 0

    // Probes as AnimatedImage to read frameCount; retires once staticImage is ready.
    AnimatedImage {
        id: probe
        anchors.fill: parent
        anchors.margins: 2
        asynchronous: true
        fillMode: Image.PreserveAspectCrop
        smooth: true
        mipmap: true
        cache: root.cacheImages
        visible: false
        source: root.shouldProbe && (root.isAnimated || staticImage.status !== Image.Ready) ? root.imageSource : ""
    }

    // Takes over once the probe settles on a non-animated image, then latches.
    Image {
        id: staticImage
        anchors.fill: parent
        anchors.margins: 2
        asynchronous: true
        fillMode: Image.PreserveAspectCrop
        smooth: true
        mipmap: true
        cache: root.cacheImages
        visible: false
        sourceSize.width: Math.max(width * 2, 128)
        sourceSize.height: Math.max(height * 2, 128)
        source: {
            if (!root.shouldProbe)
                return root.imageSource;
            if ((root.probeSettled && !root.isAnimated) || staticImage.status !== Image.Null)
                return root.imageSource;
            return "";
        }
    }

    MultiEffect {
        anchors.fill: parent
        anchors.margins: 2
        source: root.activeImage
        maskEnabled: true
        maskSource: circularMask
        visible: root.activeImage.status === Image.Ready && root.imageSource !== ""
        maskThresholdMin: 0.5
        maskSpreadAtMin: 1
    }

    Item {
        id: circularMask
        anchors.centerIn: parent
        width: parent.width - 4
        height: parent.height - 4
        layer.enabled: true
        layer.smooth: true
        visible: false

        Rectangle {
            anchors.fill: parent
            radius: width / 2
            color: "black"
            antialiasing: true
        }
    }

    AppIconRenderer {
        anchors.centerIn: parent
        width: Math.round(parent.width * 0.75)
        height: width
        visible: (root.activeImage.status !== Image.Ready || root.imageSource === "") && root.fallbackIcon !== ""
        iconValue: root.fallbackIcon
        iconSize: width
        iconColor: Theme.surfaceVariantText
        materialIconSizeAdjustment: 0
        fallbackText: root.fallbackText
        fallbackBackgroundColor: "transparent"
        fallbackTextColor: Theme.surfaceVariantText
    }

    StyledText {
        anchors.centerIn: parent
        visible: root.imageSource === "" && root.fallbackIcon === "" && root.fallbackText !== ""
        text: root.fallbackText
        font.pixelSize: Math.max(12, parent.width * 0.5)
        font.weight: Font.Bold
        color: Theme.surfaceVariantText
    }
}