pragma ComponentBehavior: Bound
import QtQuick

Item {
    id: root
    anchors.centerIn: parent

    width: 100
    height: width

    opacity: 0

    function trigger() {
        hideTimer.stop();
        root.state = "hidden";
        root.state = "visible";
        hideTimer.start();
    }

    function get_opacity() {
      return root.opacity
    } 

    function hide() {
      root.opacity = 0;
      root.state = "hidden";
    }

    // IconImage {
    //     id: innerIcon
    //     anchors.fill: parent
    //     source: videoPlayer.playbackState === MediaPlayer.PlayingState ? "qrc:/App/ui/icons/play.svg" : "qrc:/App/ui/icons/pause.svg"
    //     color: "white"
    //     fillMode: Image.PreserveAspectFit
    //
    //     layer.enabled: true
    //     layer.effect: MultiEffect {
    //         shadowEnabled: true
    //         shadowColor: "black"
    //         shadowBlur: 0.5
    //     }
    // }

    states: [
        State {
            name: "visible"
            PropertyChanges {
                root.opacity: 1
            }
        },
        State {
            name: "hidden"
            PropertyChanges {
                root.opacity: 0
            }
        }
    ]

    transitions: [
        Transition {
            from: "hidden"
            to: "visible"
            NumberAnimation {
                properties: "opacity"
                duration: 150
                easing.type: Easing.OutCubic
            }
        },
        Transition {
            from: "visible"
            to: "hidden"
            NumberAnimation {
                properties: "opacity"
                duration: 400
                easing.type: Easing.InOutCubic
            }
        }
    ]
    Timer {
        id: hideTimer
        interval: 800
        repeat: false
        onTriggered: {
            root.state = "hidden";
        }
    }
}