bigscreen-tube/bigscreen_tube/ui/SeekBar.qml

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Templates 2.12 as QQCT
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.20 as Kirigami

import BigScreenTube 1.0


Item {

    onActiveFocusChanged: {
        if(activeFocus){
            slider.forceActiveFocus()
        }
    }
    RowLayout {
        anchors.fill: parent
        anchors.margins: Kirigami.Units.largeSpacing

        Controls.Label {
            Layout.preferredWidth: durationLabel.width
            Layout.fillHeight: true
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            text: formatTime(video.timePos)
            color: Kirigami.Theme.textColor
        }

        QQCT.Slider {
            id: slider

            Layout.fillWidth: true
            Layout.fillHeight: true

            value: 0
            to: video.duration || 100

            property int minimumValue: 0
            property int maximumValue: 50
            property bool navSliderItem: false
            property bool sliderHover: false
            property int tempSliderValue: 0

            handle: Rectangle {
                id: recthandler
                x: slider.position * (parent.width - width)

                anchors.verticalCenter: parent.verticalCenter

                implicitWidth: Kirigami.Units.gridUnit
                implicitHeight: Kirigami.Units.gridUnit
                radius: .5 * Kirigami.Units.gridUnit
                scale: ((slider.navSliderItem || slider.sliderHover) ? 1.5 : 1)

                color: slider.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor

                Behavior on scale {
                    ScaleAnimator {
                        duration: Kirigami.Units.longDuration
                        easing.type: Easing.OutCubic
                    }
                }
            }

            background: Item {
                Rectangle {
                    id: groove
                    anchors {
                        verticalCenter: parent.verticalCenter
                        left: parent.left
                        right: parent.right
                    }
                    height: 0.5 * Kirigami.Units.gridUnit
                    radius: 0.25 * Kirigami.Units.gridUnit
                    color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.3)

                    Rectangle {
                        anchors {
                            left: parent.left
                            top: parent.top
                            bottom: parent.bottom
                        }
                        radius: 6
                        color: slider.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.textColor
                        width: slider.position * (parent.width - slider.handle.width/2) + slider.handle.width/2
                    }

                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    slider.sliderHover = true
                }

                onExited: {
                    slider.sliderHover = false
                }
            }

            Keys.onReturnPressed: {
                if(!navSliderItem){
                    navSliderItem = true
                } else {
                    navSliderItem = false
                    video.seek(value)
                }
            }

            Keys.onLeftPressed: {
                if(navSliderItem) {
                    value -= to * .05
                } else {
                    playButton.forceActiveFocus()
                }
            }

            Keys.onRightPressed: {
                if(navSliderItem) {
                    value += to * .05
                } else  {
                    captionButton.forceActiveFocus()
                }
            }

            Connections {
                target: video
                function onTimePosChanged() {
                    if (!slider.navSliderItem) {
                        slider.value = video.timePos
                    }
                }
            }
        }


        Controls.Label {
            id: durationLabel
            Layout.preferredWidth: contentWidth + Kirigami.Units.gridUnit
            Layout.fillHeight: true
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            text: formatTime(video.duration)
            color: Kirigami.Theme.textColor
        }

    }


    function formatTime(timeSecond) {
        if (!timeSecond || timeSecond <= 0) return "0:00";
        var minutes = Math.floor(timeSecond / 60);
        var seconds = Math.floor(timeSecond % 60);

        if (seconds < 10) seconds = "0" + seconds;
        var hours = Math.floor(minutes / 60);
        minutes = Math.floor(minutes % 60);

        if (hours > 0 ) {
            if (minutes < 10) minutes = "0" + minutes;
            return hours + ":" + minutes + "0";
        } else {
            return minutes + ":" + seconds;
        }
    }

}