ScreenPlay/ScreenPlayWidget/qml/Widget.qml

import QtQuick
import QtQuick.Controls
import QtWebEngine
import ScreenPlayWidget
import ScreenPlayUtil as Util

Item {
    id: root
    // We must set a default size not not
    // trigger render errors.
    width: 200
    height: 100
    state: "out"
    opacity: 0

    Connections {
        target: Widget
        function onQmlExit() {
            if (Qt.platform.os === "windows")
                Widget.setWindowBlur(0);
            loader.source = "";
            animFadeOut.start();
        }

        function onQmlSceneValueReceived(key, value) {
            var obj2 = 'import QtQuick; Item {Component.onCompleted: loader.item.' + key + ' = ' + value + '; }';
            var newObject = Qt.createQmlObject(obj2.toString(), root, "err");
            newObject.destroy(10000);
        }

        // Replace wallpaper with QML Scene
        function onReloadQML(oldType) {
            loader.sourceComponent = undefined;
            loader.source = "";
            Widget.clearComponentCache();
            loader.source = Qt.resolvedUrl(Widget.projectSourceFileAbsolute);
        }
    }

    OpacityAnimator {
        id: animFadeOut
        from: 1
        to: 0
        target: root
        duration: 800
        easing.type: Easing.InOutQuad
        onFinished: Widget.destroyThis()
    }

    Image {
        id: bgNoise
        source: "qrc:/qml/ScreenPlayWidget/assets/image/noisy-texture-3.png"
        anchors.fill: parent
        fillMode: Image.Tile
        opacity: 0
    }

    Connections {
        ignoreUnknownSignals: true
        target: loader.item
        // Some width do not know their implicit size,
        // see the xkcd example.
        function onImplicitWidthChanged() {
            print();
            root.width = loader.item.implicitWidth;
        }
        function onImplicitHeightChanged() {
            root.height = loader.item.implicitHeight;
        }
    }

    Loader {
        id: loader
        opacity: 0
        anchors.fill: parent
        asynchronous: true
        Component.onCompleted: {
            switch (Widget.type) {
            case ContentTypes.InstalledType.QMLWidget:
                loader.source = Qt.resolvedUrl(Widget.projectSourceFileAbsolute);
                break;
            case ContentTypes.InstalledType.HTMLWidget:
                loader.sourceComponent = webViewComponent;
                break;
            }
        }
        onStatusChanged: {
            if (loader.status == Loader.Ready && loader.source !== "") {
                if (loader.item.implicitWidth === 0 || loader.item.implicitHeight === 0) {
                    print("Implicit size is 0, using root size");
                    loader.item.implicitWidth = root.width;
                    loader.item.implicitHeight = root.height;
                }

                // Resize to loaded widget size
                // Note: We must use implicit* here to not
                // break the set values.
                root.width = loader.item.implicitWidth;
                root.height = loader.item.implicitHeight;
                Widget.show();
                root.state = "in";
            }
        }
    }

    Component {
        id: webViewComponent

        WebEngineView {
            id: webView

            backgroundColor: "transparent"
            anchors.fill: parent
            onJavaScriptConsoleMessage: print(lineNumber, message)
            Component.onCompleted: {
                webView.url = Qt.resolvedUrl(Widget.sourcePath);
            }
        }
    }
    Item {
        id: nav
        height: 20
        anchors {
            top: parent.top
            right: parent.right
            left: parent.left
        }
        Rectangle {
            id: bg
            anchors.fill: parent
            color: "black"
            opacity: 0
        }
        MouseArea {
            id: mouseArea
            height: 20
            property var clickPos

            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true
            onEntered: imgClose.state = "areaHover"
            onExited: {
                if (mouseAreaClose.containsMouse)
                    return;
                imgClose.state = "";
            }

            onPressed: function (mouse) {
                clickPos = {
                    "x": mouse.x,
                    "y": mouse.y
                };
            }
            onPositionChanged: {
                if (mouseArea.pressed)
                    Widget.setPos(Widget.cursorPos().x - clickPos.x, Widget.cursorPos().y - clickPos.y);
            }
        }

        MouseArea {
            id: mouseAreaClose
            width: 16
            height: width
            cursorShape: Qt.PointingHandCursor
            hoverEnabled: true
            onEntered: imgClose.state = "iconHover"
            onExited: imgClose.state = ""
            onClicked: {
                if (Qt.platform.os === "windows")
                    Widget.setWindowBlur(0);
                animFadeOut.start();
            }

            anchors {
                margins: 1
                top: parent.top
                right: parent.right
            }

            ColorImage {
                id: imgClose
                source: "qrc:/qml/ScreenPlayWidget/assets/icons/baseline-close-24px.svg"
                anchors.centerIn: parent
                width: parent.width
                height: parent.height
                sourceSize: Qt.size(width, height)
                opacity: 0
                color: "white"

                states: [
                    State {
                        name: "areaHover"
                        PropertyChanges {
                            target: imgClose
                            opacity: .5
                        }

                        PropertyChanges {
                            target: bg
                            opacity: .3
                        }
                    },
                    State {
                        name: "iconHover"
                        PropertyChanges {
                            target: imgClose
                            opacity: 1
                        }
                    }
                ]
                transitions: [
                    Transition {
                        PropertyAnimation {
                            duration: 250
                            target: imgClose
                            property: "opacity"
                        }
                    }
                ]
            }
        }
    }

    states: [
        State {
            name: "in"
            PropertyChanges {
                target: root
                opacity: 1
            }
            PropertyChanges {
                target: bgNoise
                opacity: 0.05
            }
            PropertyChanges {
                target: loader
                opacity: 1
            }
        }
    ]
    transitions: [
        Transition {
            from: "out"
            to: "in"

            PropertyAnimation {
                targets: [root, bgNoise, loader, bg]
                duration: 250
                property: "opacity"
            }
        }
    ]
}