import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.11
import QtQuick.Window 2.11
import Qt.labs.settings 1.0
import player 1.0
import QtGraphicalEffects 1.0

import "codes.js" as LanguageCodes

ApplicationWindow {
    id: mainWindow
    title: titleLabel.text
    visible: true
    width: 720
    height: 480
    FontLoader {
        id: notoFont
        source: "fonts/NotoSans.ttf"
    }

    property int lastScreenVisibility

    function toggleFullscreen() {
        if (mainWindow.visibility != Window.FullScreen) {
            lastScreenVisibility = mainWindow.visibility
            mainWindow.visibility = Window.FullScreen
        } else {
            mainWindow.visibility = lastScreenVisibility
        }
    }

    function tracksMenuUpdate() {
        var tracks = player.getProperty("track-list/count")
        var track = 0
        subModel.clear()
        audioModel.clear()
        vidModel.clear()

        var aid = player.getProperty("aid")
        var sid = player.getProperty("sid")
        var vid = player.getProperty("vid")

        for (track = 0; track <= tracks; track++) {
            var trackID = player.getProperty("track-list/" + track + "/id")
            var trackType = player.getProperty("track-list/" + track + "/type")
            var trackLang = LanguageCodes.localeCodeToEnglish(
                        String(player.getProperty(
                                   "track-list/" + track + "/lang")))
            var trackTitle = player.getProperty(
                        "track-list/" + track + "/title")
            if (trackType == "sub") {
                subModel.append({
                                    key: trackLang,
                                    value: trackID
                                })
                if (player.getProperty("track-list/" + track + "/selected")) {
                    subList.currentIndex = subList.count - 1
                }
            } else if (trackType == "audio") {
                audioModel.append({
                                      key: (trackTitle === undefined ? "" : trackTitle + " ")
                                           + trackLang,
                                      value: trackID
                                  })
                if (player.getProperty("track-list/" + track + "/selected")) {
                    audioList.currentIndex = audioList.count - 1
                }
            } else if (trackType == "video") {
                vidModel.append({
                                    key: "Video " + trackID,
                                    value: trackID
                                })
                if (player.getProperty("track-list/" + track + "/selected")) {
                    vidList.currentIndex = vidList.count - 1
                }
            }
        }
    }

    MpvObject {
        id: player
        anchors.fill: parent
        width: parent.width
        height: parent.height

        Timer {
            id: initTimer
            interval: 1000
            running: false
            repeat: false
            onTriggered: {
                player.startPlayer()
            }
        }
        Component.onCompleted: {
            initTimer.start()
        }

        function startPlayer() {
            var args = Qt.application.arguments
            var len = Qt.application.arguments.length
            var argNo = 0
            player.setOption("ytdl-format", "bestvideo[width<=" + Screen.width
                             + "][height<=" + Screen.height + "]+bestaudio")
            if (len > 1) {
                for (argNo = 1; argNo < len; argNo++) {
                    var argument = args[argNo]
                    if (argument.indexOf("KittehPlayer") !== -1) {
                        continue
                    }
                    if (argument.startsWith("--")) {
                        argument = argument.substr(2)
                        if (argument.length > 0) {
                            var splitArg = argument.split(/=(.+)/)
                            if (splitArg[0] == "fullscreen") {
                                toggleFullscreen()
                            } else {
                                if (splitArg[1].length == 0) {
                                    splitArg[1] = "true"
                                }
                                player.setOption(splitArg[0], splitArg[1])
                            }
                        }
                    } else {
                        player.command(["loadfile", argument])
                    }
                }
            }
        }

        function createTimestamp(d) {
            d = Number(d)
            var h = Math.floor(d / 3600)
            var m = Math.floor(d % 3600 / 60)
            var s = Math.floor(d % 3600 % 60)

            var hour = h > 0 ? h + ":" : ""
            var minute = m + ":"
            var second = s < 10 ? "0" + s : s
            return hour + minute + second
        }

        function setProgressBarEnd(val) {
            progressBar.to = val
        }

        function setProgressBarValue(val) {
            timeLabel.text = createTimestamp(val) + " / " + createTimestamp(
                        progressBar.to) + " (" + parseFloat(
                        player.getProperty("speed").toFixed(2)) + "x)"
            progressBar.value = val
        }

        function skipToNinth(val) {
            var skipto = 0
            if (val != 0) {
                skipto = Math.floor(progressBar.to / 9 * val)
            }
            player.command(["seek", skipto, "absolute"])
        }

        function updatePrev(val) {
            if (val != 0) {
                playlistPrevButton.visible = true
                playlistPrevButton.width = playPauseButton.width
            } else {
                playlistPrevButton.visible = false
                playlistPrevButton.width = 0
            }
        }

        function updateVolume(volume) {
            var muted = player.getProperty("mute")

            if (muted || volume === 0) {
                volumeButton.icon.source = "qrc:/player/icons/volume-mute.svg"
            } else {
                if (volume < 25) {
                    volumeButton.icon.source = "qrc:/player/icons/volume-down.svg"
                } else {
                    volumeButton.icon.source = "qrc:/player/icons/volume-up.svg"
                }
            }
        }

        function updateMuted(muted) {
            if (muted) {
                volumeButton.icon.source = "qrc:/player/icons/volume-mute.svg"
            }
        }
        function updatePlayPause() {
            var paused = player.getProperty("pause")
            if (paused) {
                playPauseButton.icon.source = "qrc:/player/icons/play.svg"
            } else {
                playPauseButton.icon.source = "qrc:/player/icons/pause.svg"
            }
        }

        function setTitle(title) {
            titleLabel.text = title
        }

        function setSubtitles(subs) {
            nativeSubs.text = subs
        }

        function isAnyMenuOpen() {
            return subtitlesMenu.visible || settingsMenu.visible
                    || fileMenuBarItem.opened || playbackMenuBarItem.opened
                    || viewMenuBarItem.opened || audioMenuBarItem.opened
                    || screenshotSaveDialog.visible || videoMenuBarItem.opened
                    || subsMenuBarItem.opened
        }

        function hideControls(force) {
            if (!isAnyMenuOpen() || force) {
                //player.setOption("sub-margin-y", "22")
                controlsBar.visible = false
                controlsBackground.visible = false
                titleBar.visible = false
                titleBackground.visible = false
                menuBar.visible = false
            }
        }

        function showControls() {
            if (!controlsBar.visible) {
                //player.setOption("sub-margin-y", String(controlsBar.height + progressBar.height))
                controlsBar.visible = true
                controlsBackground.visible = true
                if (appearance.titleOnlyOnFullscreen) {
                    if (mainWindow.visibility == Window.FullScreen) {
                        titleBar.visible = true
                    }
                } else {
                    titleBar.visible = true
                }
                titleBackground.visible = true
                menuBar.visible = true
            }
        }

        Settings {
            id: appearance
            category: "Appearance"
            property bool titleOnlyOnFullscreen: true
            property bool clickToPause: true
        }

        Settings {
            id: fun
            category: "Fun"
            property bool nyanCat: false
        }

        Dialog {
            id: screenshotSaveDialog
            title: "Save Screenshot To"
            standardButtons: StandardButton.Cancel | StandardButton.Open
            onAccepted: {
                player.grabToImage(function (result) {
                    result.saveToFile(screenshotFile.text)
                    nativeSubs.visible = true
                })
            }
            TextField {
                id: screenshotFile
                placeholderText: "~/screenshot.jpg"
            }
        }

        FileDialog {
            id: fileDialog
            title: "Please choose a file"
            folder: shortcuts.home
            onAccepted: {
                player.command(["loadfile", String(fileDialog.fileUrl)])
                fileDialog.close()
            }
            onRejected: {
                fileDialog.close()
            }
        }

        Dialog {
            id: loadDialog
            title: "URL / File Path"
            standardButtons: StandardButton.Cancel | StandardButton.Open
            onAccepted: {
                player.command(["loadfile", pathText.text])
                pathText.text = ""
            }
            TextField {
                id: pathText
                placeholderText: qsTr("URL / File Path")
            }
        }

        MouseArea {
            id: mouseAreaBar
            x: 0
            y: parent.height
            width: parent.width
            height: (controlsBar.height * 2) + progressBar.height
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            hoverEnabled: true
            onEntered: {
                mouseAreaPlayerTimer.stop()
            }
        }

        MouseArea {
            id: mouseAreaPlayer
            width: parent.width
            anchors.bottom: mouseAreaBar.top
            anchors.bottomMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: titleBar.bottom
            anchors.topMargin: 0
            hoverEnabled: true
            cursorShape: controlsBar.visible ? Qt.ArrowCursor : Qt.BlankCursor
            onClicked: {
                if (clickToPause) { player.command(["cycle", "pause"]) }
            }
            Timer {
                id: mouseAreaPlayerTimer
                interval: 1000
                running: false
                repeat: false
                onTriggered: {
                    player.hideControls()
                }
            }
            onPositionChanged: {
                player.showControls()
                mouseAreaPlayerTimer.restart()
            }
        }

        Settings {
            id: keybinds
            category: "Keybinds"
            property string playPause: "K"
            property string forward10: "L"
            property string rewind10: "J"
            property string forward5: "Right"
            property string rewind5: "Left"
            property string openFile: "Ctrl+O"
            property string openURI: "Ctrl+Shift+O"
            property string quit: "Ctrl+Q"
            property string fullscreen: "F"
            property string tracks: "Ctrl+T"
            property string statsForNerds: "I"
            property string forwardFrame: "."
            property string backwardFrame: ","
            property string cycleSub: "Alt+S"
            property string cycleSubBackwards: "Alt+Shift+S"
            property string cycleAudio: "A"
            property string cycleVideo: "V"
            property string cycleVideoAspect: "Shift+A"
            property string screenshot: "S"
            property string screenshotWithoutSubtitles: "Shift+S"
            property string fullScreenshot: "Ctrl+S"
            property string nyanCat: "Ctrl+N"
            property string decreaseSpeedBy10Percent: "["
            property string increaseSpeedBy10Percent: "]"
            property string halveSpeed: "{"
            property string doubleSpeed: "}"
            property string increaseVolume: "*"
            property string decreaseVolume: "/"
            property string mute: "m"
        }

        MenuBar {
            id: menuBar
            //width: parent.width
            height: Screen.height / 24
            delegate: MenuBarItem {
                id: menuBarItem

                contentItem: Text {
                    text: menuBarItem.text
                    font.family: notoFont.name
                    font.pixelSize: 14
                    renderType: Text.NativeRendering
                    opacity: 1
                    color: menuBarItem.highlighted ? "#5a50da" : "white"
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitWidth: 10
                    implicitHeight: 10
                    opacity: 1
                    color: menuBarItem.highlighted ? "#c0c0f0" : "transparent"
                }
            }

            background: Rectangle {
                width: parent.width
                implicitHeight: 10
                color: "black"
                opacity: 0.6
            }

            Menu {
                id: fileMenuBarItem
                title: "File"
                width: 150
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                }

                Action {
                    text: "Open File"
                    onTriggered: fileDialog.open()
                    shortcut: keybinds.openFile
                }
                Action {
                    text: "Open URI/URL"
                    onTriggered: loadDialog.open()
                    shortcut: keybinds.openURI
                }
                Action {
                    text: "Screenshot"
                    onTriggered: {
                        player.hideControls(true)
                        screenshotSaveDialog.open()
                    }
                    shortcut: keybinds.screenshot
                }
                Action {
                    text: "Screenshot w/o subtitles"
                    onTriggered: {
                        player.hideControls(true)
                        nativeSubs.visible = false
                        screenshotSaveDialog.open()
                    }
                    shortcut: keybinds.screenshotWithoutSubtitles
                }
                Action {
                    text: "Full Screenshot"
                    onTriggered: {
                        screenshotSaveDialog.open()
                    }
                    shortcut: keybinds.fullScreenshot
                }
                Action {
                    text: "Exit"
                    onTriggered: Qt.quit()
                    shortcut: keybinds.quit
                }
            }

            Menu {
                id: playbackMenuBarItem
                title: "Playback"
                width: 150
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                    width: parent.width
                }

                Action {
                    text: "Play/Pause"
                    onTriggered: {
                        player.command(["cycle", "pause"])
                    }
                    shortcut: String(keybinds.playPause)
                }
                Action {
                    text: "Rewind 10s"
                    onTriggered: {
                        player.command(["seek", "-10"])
                    }
                    shortcut: keybinds.rewind10
                }
                Action {
                    text: "Forward 10s"
                    onTriggered: {
                        player.command(["seek", "10"])
                    }
                    shortcut: keybinds.forward10
                }
                Action {
                    text: "Rewind 5s"
                    onTriggered: {
                        player.command(["seek", "-5"])
                    }
                    shortcut: keybinds.rewind5
                }
                Action {
                    text: "Forward 5s"
                    onTriggered: {
                        player.command(["seek", "5"])
                    }
                    shortcut: keybinds.forward5
                }
                Action {
                    text: "Speed -10%"
                    onTriggered: {
                        player.command(["multiply", "speed", "1/1.1"])
                    }
                    shortcut: keybinds.decreaseSpeedBy10Percent
                }
                Action {
                    text: "Speed +10%"
                    onTriggered: {
                        player.command(["multiply", "speed", "1.1"])
                    }
                    shortcut: keybinds.increaseSpeedBy10Percent
                }
                Action {
                    text: "Halve Speed"
                    onTriggered: {
                        player.command(["multiply", "speed", "0.5"])
                    }
                    shortcut: keybinds.halveSpeed
                }
                Action {
                    text: "Double Speed"
                    onTriggered: {
                        player.command(["multiply", "speed", "2.0"])
                    }
                    shortcut: keybinds.doubleSpeed
                }
                Action {
                    text: "Forward Frame"
                    onTriggered: {
                        player.command(["frame-step"])
                    }
                    shortcut: keybinds.forwardFrame
                }
                Action {
                    text: "Back Frame"
                    onTriggered: {
                        player.command(["frame-back-step"])
                    }
                    shortcut: keybinds.backwardFrame
                }
            }

            Menu {
                id: audioMenuBarItem
                title: "Audio"
                width: 140
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                    width: parent.width
                }
                Action {
                    text: "Cycle Audio"
                    onTriggered: {
                        player.command(["cycle", "audio"])
                    }
                    shortcut: keybinds.cycleAudio
                }
                Action {
                    text: "Increase Volume"
                    onTriggered: {
                        player.command(["add", "volume", "2"])
                    }
                    shortcut: keybinds.increaseVolume
                }
                Action {
                    text: "Decrease Volume"
                    onTriggered: {
                        player.command(["add", "volume", "-2"])
                    }
                    shortcut: keybinds.decreaseVolume
                }
                Action {
                    text: "Mute"
                    onTriggered: {
                        player.command(["cycle", "mute"])
                    }
                    shortcut: keybinds.mute
                }
            }

            Menu {
                id: videoMenuBarItem
                title: "Video"
                width: 140
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                    width: parent.width
                }
                Action {
                    text: "Cycle Video"
                    onTriggered: {
                        player.command(["cycle", "video"])
                    }
                    shortcut: keybinds.cycleVideo
                }
            }
            Menu {
                id: subsMenuBarItem
                title: "Subtitles"
                width: 140
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                    width: parent.width
                }
                Action {
                    text: "Cycle Subs"
                    onTriggered: {
                        player.command(["cycle", "sub"])
                    }
                    shortcut: keybinds.cycleSub
                }
                Action {
                    text: "Cycle Subs Backwards"
                    onTriggered: {
                        player.command(["cycle", "sub", "down"])
                    }
                    shortcut: keybinds.cycleSubBackwards
                }
            }

            Menu {
                id: viewMenuBarItem
                title: "View"
                width: 120
                background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: 10
                    color: "black"
                    opacity: 0.6
                }
                delegate: CustomMenuItem {
                    width: parent.width
                }

                Action {
                    text: "Fullscreen"
                    onTriggered: {
                        toggleFullscreen()
                    }
                    shortcut: keybinds.fullscreen
                }
                Action {
                    text: "Track Menu"
                    onTriggered: {
                        tracksMenuUpdate()
                        subtitlesMenu.visible = !subtitlesMenu.visible
                        subtitlesMenuBackground.visible = !subtitlesMenuBackground.visible
                    }
                    shortcut: keybinds.tracks
                }

                Action {
                    text: "Stats For Nerds"
                    onTriggered: {
                        player.command(
                                    ["script-binding", "stats/display-stats-toggle"])
                    }
                    shortcut: keybinds.statsForNerds
                }

                Action {
                    text: "Toggle Nyan Cat"
                    onTriggered: {
                        fun.nyanCat = !fun.nyanCat
                    }
                    shortcut: keybinds.nyanCat
                }
            }

            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "1"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "2"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "3"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "4"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "5"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "6"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "7"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "8"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "9"
            }
            Action {
                onTriggered: player.skipToNinth(parseInt(shortcut))
                shortcut: "0"
            }
        }

        Rectangle {
            id: subtitlesMenuBackground
            anchors.fill: subtitlesMenu
            Layout.fillWidth: true
            Layout.fillHeight: true
            visible: false
            color: "black"
            opacity: 0.6
        }

        Rectangle {
            id: subtitlesMenu
            color: "transparent"
            width: childrenRect.width
            height: childrenRect.height
            visible: false
            anchors.centerIn: player
            border.color: "black"
            border.width: 2

            Text {
                id: audioLabel
                anchors.left: parent.left
                anchors.right: parent.right
                text: "Audio"
                color: "white"
                font.family: notoFont.name
                font.pixelSize: 14
                renderType: Text.NativeRendering
                horizontalAlignment: Text.AlignHCenter
                opacity: 1
            }
            ComboBox {
                id: audioList
                textRole: "key"
                anchors.top: audioLabel.bottom
                model: ListModel {
                    id: audioModel
                }
                onActivated: {
                    player.command(["set", "aid", String(audioModel.get(
                                                             index).value)])
                }
                opacity: 1
            }
            Text {
                id: subLabel
                anchors.left: parent.left
                anchors.right: parent.right
                text: "Subtitles"
                color: "white"
                font.family: notoFont.name
                font.pixelSize: 14
                anchors.top: audioList.bottom
                renderType: Text.NativeRendering
                horizontalAlignment: Text.AlignHCenter
                opacity: 1
            }
            ComboBox {
                id: subList
                textRole: "key"
                anchors.top: subLabel.bottom
                model: ListModel {
                    id: subModel
                }
                onActivated: {
                    player.command(["set", "sid", String(subModel.get(
                                                             index).value)])
                }
                opacity: 1
            }
            Text {
                id: vidLabel
                anchors.left: parent.left
                anchors.right: parent.right
                text: "Video"
                color: "white"
                font.family: notoFont.name
                font.pixelSize: 14
                anchors.top: subList.bottom
                renderType: Text.NativeRendering
                horizontalAlignment: Text.AlignHCenter
                opacity: 1
            }
            ComboBox {
                id: vidList
                textRole: "key"
                anchors.top: vidLabel.bottom
                model: ListModel {
                    id: vidModel
                }
                onActivated: {
                    player.command(["set", "vid", String(vidModel.get(
                                                             index).value)])
                }
                opacity: 1
            }
        }

        Rectangle {
            id: titleBackground
            height: titleBar.height
            anchors.top: titleBar.top
            anchors.left: titleBar.left
            anchors.right: titleBar.right
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "black"
            opacity: 0.6
        }

        Rectangle {
            id: titleBar
            height: menuBar.height
            anchors.right: parent.right
            anchors.left: menuBar.right
            anchors.top: parent.top

            visible: !appearance.titleOnlyOnFullscreen
            color: "transparent"

            Text {
                id: titleLabel
                text: "Title"
                color: "white"
                width: parent.width
                height: parent.height
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 4
                anchors.topMargin: 4
                anchors.top: parent.top
                font.family: notoFont.name
                fontSizeMode: Text.Fit
                minimumPixelSize: 10
                font.pixelSize: 72
                verticalAlignment: Text.AlignVCenter
                renderType: Text.NativeRendering
                opacity: 1
            }
        }

        Rectangle {
            id: controlsBackground
            height: controlsBar.visible ? controlsBar.height + progressBackground.height
                                          + (progressBar.topPadding * 2)
                                          - (progressBackground.height * 2) : 0
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "black"
            opacity: 0.6
        }

        Rectangle {
            id: nativeSubtitles
            height: nativeSubs.font.pixelSize + 4
            visible: nativeSubs.text == "" ? false : true
            anchors.left: controlsBar.left
            anchors.right: controlsBar.right
            anchors.bottom: controlsBackground.top
            anchors.bottomMargin: 0

            radius: 5
            color: "transparent"
            TextMetrics {
                id: t_metrics
                font.family: notoFont.name
                font.pixelSize: nativeSubs.fontInfo.pixelSize
                text: nativeSubs.text
            }

            Label {
                id: nativeSubs
                width: parent.width
                text: ""
                color: "white"
                font.family: notoFont.name
                font.pixelSize: Screen.height / 24
                renderType: Text.NativeRendering
                horizontalAlignment: Text.AlignHCenter
                anchors.bottom: parent.top
                opacity: 1
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere

                background: Rectangle {
                    id: subsBackground
                    color: Qt.rgba(0, 0, 0, 0.6)
                    width: t_metrics.tightBoundingRect.width + 8
                    anchors.left: parent.left
                    anchors.leftMargin: (nativeSubtitles.width
                                         - t_metrics.tightBoundingRect.width) / 2
                    anchors.right: parent.right
                    anchors.rightMargin: anchors.leftMargin
                }
            }
        }

        function setCachedDuration(val) {
            cachedLength.width = ((progressBar.width / progressBar.to) * val) - progressLength.width
        }

        Rectangle {
            id: controlsBar
            height: controlsBar.visible ? Screen.height / 24 : 0
            anchors.right: parent.right
            anchors.rightMargin: parent.width / 128
            anchors.left: parent.left
            anchors.leftMargin: parent.width / 128
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 1
            visible: true
            color: "transparent"
            Rectangle {
                id: settingsMenuBackground
                anchors.fill: settingsMenu
                Layout.fillWidth: true
                Layout.fillHeight: true
                visible: false
                color: "black"
                opacity: 0.6
                radius: 5
            }

            Rectangle {
                id: settingsMenu
                color: "transparent"
                width: childrenRect.width
                height: childrenRect.height
                visible: false
                anchors.right: settingsButton.right
                anchors.bottom: progressBar.top
                radius: 5

                ColumnLayout {
                    Button {
                        text: "Open File"
                        onClicked: fileDialog.open()
                    }
                    Button {
                        text: "Enter Path"
                        onClicked: loadDialog.open()
                    }
                }
            }

            Slider {
                id: progressBar
                to: 1
                value: 0.0
                anchors.bottom: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottomMargin: 0
                anchors.topMargin: progressBackground.height
                bottomPadding: 0

                onMoved: {
                    player.command(["seek", progressBar.value, "absolute"])
                }

                background: Rectangle {
                    id: progressBackground
                    x: progressBar.leftPadding
                    y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
                    implicitHeight: (Screen.height / 256) < (fun.nyanCat ? 12 : 2) ? (fun.nyanCat ? 12 : 2) : Screen.height / 256
                    width: progressBar.availableWidth
                    height: implicitHeight
                    color: Qt.rgba(255, 255, 255, 0.6)

                    Rectangle {
                        id: progressLength
                        width: progressBar.visualPosition * parent.width
                        height: parent.height
                        color: "red"
                        opacity: 1
                        Image {
                            visible: fun.nyanCat
                            id: rainbow
                            anchors.fill: parent
                            height: parent.height
                            width: parent.width
                            source: "qrc:/player/icons/rainbow.png"
                            fillMode: Image.TileHorizontally
                        }
                    }
                    Rectangle {
                        id: cachedLength
                        z: 10
                        anchors.left: progressLength.right
                        anchors.leftMargin: progressBar.handle.width - 2
                        //anchors.left: progressBar.handle.horizontalCenter
                        anchors.bottom: progressBar.background.bottom
                        anchors.top: progressBar.background.top
                        height: progressBar.background.height
                        color: "white"
                        opacity: 0.8
                    }
                }

                handle: Rectangle {
                    id: handleRect
                    x: progressBar.leftPadding + progressBar.visualPosition
                       * (progressBar.availableWidth - width)
                    y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
                    implicitHeight: 12
                    implicitWidth: 12
                    radius: 12
                    color: fun.nyanCat ? "transparent" : "red"
                    //border.color: "red"
                    AnimatedImage {
                        visible: fun.nyanCat
                        paused: progressBar.pressed
                        height: 30
                        id: nyanimation
                        anchors.centerIn: parent
                        source: "qrc:/player/icons/nyancat.gif"
                        fillMode: Image.PreserveAspectFit
                    }
                }
            }

            Button {
                id: playlistPrevButton
                //icon.name: "prev"
                icon.source: "icons/prev.svg"
                icon.color: "white"
                display: AbstractButton.IconOnly
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                visible: false
                width: 0
                onClicked: {
                    player.command(["playlist-prev"])
                }
                background: Rectangle {
                    color: "transparent"
                }
            }

            Button {
                id: playPauseButton
                //icon.name: "pause"
                icon.source: "icons/pause.svg"
                icon.color: "white"
                display: AbstractButton.IconOnly
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: playlistPrevButton.right
                onClicked: {
                    player.command(["cycle", "pause"])
                }
                background: Rectangle {
                    color: "transparent"
                }
            }

            Button {
                id: playlistNextButton
                //icon.name: "next"
                icon.source: "icons/next.svg"
                icon.color: "white"
                display: AbstractButton.IconOnly
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: playPauseButton.right
                onClicked: {
                    player.command(["playlist-next", "force"])
                }
                background: Rectangle {
                    color: "transparent"
                }
            }

            Button {
                id: volumeButton
                //icon.name: "volume-up"
                icon.source: "icons/volume-up.svg"
                icon.color: "white"
                display: AbstractButton.IconOnly
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: playlistNextButton.right
                onClicked: {
                    player.command(["cycle", "mute"])
                }
                background: Rectangle {
                    color: "transparent"
                }
            }
            Slider {
                id: volumeBar
                to: 100
                value: 100
                palette.dark: "#f00"

                implicitWidth: Math.max(
                                   background ? background.implicitWidth : 0,
                                                (handle ? handle.implicitWidth : 0)
                                                + leftPadding + rightPadding)
                implicitHeight: Math.max(
                                    background ? background.implicitHeight : 0,
                                                 (handle ? handle.implicitHeight : 0)
                                                 + topPadding + bottomPadding)

                anchors.left: volumeButton.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                onMoved: {
                    player.command(["set", "volume", Math.round(
                                        volumeBar.value).toString()])
                }

                handle: Rectangle {
                    x: volumeBar.leftPadding + volumeBar.visualPosition
                       * (volumeBar.availableWidth - width)
                    y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2
                    implicitWidth: 12
                    implicitHeight: 12
                    radius: 12
                    color: "#f6f6f6"
                    border.color: "#f6f6f6"
                }

                background: Rectangle {
                    x: volumeBar.leftPadding
                    y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2
                    implicitWidth: 60
                    implicitHeight: 3
                    width: volumeBar.availableWidth
                    height: implicitHeight
                    color: "#33333311"
                    Rectangle {
                        width: volumeBar.visualPosition * parent.width
                        height: parent.height
                        color: "white"
                    }
                }
            }

            Text {
                id: timeLabel
                text: "0:00 / 0:00"
                color: "white"
                anchors.left: volumeBar.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                padding: 2
                font.family: notoFont.name
                font.pixelSize: 14
                verticalAlignment: Text.AlignVCenter
                renderType: Text.NativeRendering
            }

            Button {
                id: subtitlesButton
                //icon.name: "subtitles"
                icon.source: "icons/subtitles.svg"
                icon.color: "white"
                anchors.right: settingsButton.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                display: AbstractButton.IconOnly
                onClicked: {
                    tracksMenuUpdate()
                    subtitlesMenu.visible = !subtitlesMenu.visible
                    subtitlesMenuBackground.visible = !subtitlesMenuBackground.visible
                }
                background: Rectangle {
                    color: "transparent"
                }
            }

            Button {
                id: settingsButton
                //icon.name: "settings"
                icon.source: "icons/settings.svg"
                icon.color: "white"
                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                anchors.right: fullscreenButton.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                display: AbstractButton.IconOnly
                onClicked: {
                    settingsMenu.visible = !settingsMenu.visible
                    settingsMenuBackground.visible = !settingsMenuBackground.visible
                }
                background: Rectangle {
                    color: "transparent"
                }
            }

            Button {
                id: fullscreenButton
                //icon.name: "fullscreen"
                icon.source: "icons/fullscreen.svg"
                icon.color: "white"
                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                display: AbstractButton.IconOnly
                onClicked: {
                    toggleFullscreen()
                }

                background: Rectangle {
                    color: "transparent"
                }
            }
        }
    }
}