path: root/basicsuite/Media Player/ControlBar.qml

import QtQuick 2.0
import QtMultimedia 5.0

Rectangle {
    id: controlBar
    height: 150
    color: "#88333333"

    property MediaPlayer mediaPlayer: null
    property bool isMouseAbove: false

    signal openFile()
    signal openCamera()
    signal openURL()
    signal openFX()
    signal toggleFullScreen()

    state: "VISIBLE"

    onMediaPlayerChanged: {
        if (mediaPlayer === null)
            return;
        volumeControl.volume = mediaPlayer.volume;
    }

//    MouseArea {
//        anchors.fill: controlBar
//        hoverEnabled: true

//        onEntered: controlBar.isMouseAbove = true;
//        onExited: controlBar.isMouseAbove = false;
//    }

    function statusString(stat)
    {
        if (stat === MediaPlayer.NoMedia)
            return "No Media";
        else if (stat === MediaPlayer.Loading)
            return "Loading";
        else if (stat === MediaPlayer.Loaded)
            return "Loaded";
        else if (stat === MediaPlayer.Buffering)
            return "Buffering";
        else if (stat === MediaPlayer.Stalled)
            return "Stalled";
        else if (stat === MediaPlayer.Buffered)
            return "Buffered";
        else if (stat === MediaPlayer.EndOfMedia)
            return "EndOfMedia";
        else if (stat === MediaPlayer.InvalidMedia)
            return "InvalidMedia";
        else if (stat === MediaPlayer.UnknownStatus)
            return "UnknownStatus";
    }

//    Text {
//        id: statusText
//        anchors.left: parent.left
//        anchors.bottom: parent.top
//        anchors.bottomMargin: 12
//        font.pixelSize: 18
//        color: "white"
//        text: "Status: " + statusString(mediaPlayer.status)
//    }

//    Text {
//        anchors.verticalCenter: statusText.verticalCenter
//        anchors.left: statusText.right
//        anchors.leftMargin: 16
//        font.pixelSize: 18
//        color: "white"
//        text: Math.round(mediaPlayer.bufferProgress * 100.0) + "%"
//    }

    VolumeControl {
        id: volumeControl
        anchors.verticalCenter: playbackControl.verticalCenter
        anchors.left: controlBar.left
        anchors.leftMargin: 15
        onVolumeChanged: mediaPlayer.volume = volume

        Component.onCompleted: {
            volumeControl.volume = 0.5;
        }

        Connections {
            target: mediaPlayer
            onVolumeChanged: volumeControl.volume = mediaPlayer.volume
        }
    }

    //Playback Controls
    PlaybackControl {
        id: playbackControl
        anchors.horizontalCenter: controlBar.horizontalCenter
        anchors.bottom: seekControl.top
        anchors.bottomMargin: 20

        onPlayButtonPressed: {
            if (isPlaying) {
                mediaPlayer.pause();
            } else {
                mediaPlayer.play();
            }
        }

        onReverseButtonPressed: {
            if (mediaPlayer.seekable) {
                //Subtract 10 seconds
                mediaPlayer.seek(normalizeSeek(Math.round(-mediaPlayer.duration * 0.1)));
            }
        }

        onForwardButtonPressed: {
            if (mediaPlayer.seekable) {
                //Add 10 seconds
                mediaPlayer.seek(normalizeSeek(Math.round(mediaPlayer.duration * 0.1)));
            }
        }

        onStopButtonPressed: mediaPlayer.stop();
    }

    //Toolbar Controls
    Row {
        id: toolbarMenuButtons
        anchors.right: controlBar.right
        anchors.rightMargin: 15
        anchors.verticalCenter: playbackControl.verticalCenter
        spacing: 22

        ImageButton {
            id: fxButton
            imageSource: "images/FXButton.png"
            checkable: true
            checked: effectSelectionPanel.visible
            onClicked: {
                openFX();
            }
        }
        ImageButton {
            id: fileButton
            imageSource: "images/FileButton.png"
            onClicked: {
                openFile();
            }
        }
        ImageButton {
            id: urlButton
            imageSource: "images/UrlButton.png"
            onClicked: {
                openURL();
            }
        }
    }

//    ImageButton {
//        id: fullscreenButton
//        imageSource: "images/FullscreenButton.png"
//        onClicked: {
//            //Toggle fullscreen
//            toggleFullScreen();
//        }
//        checkable: true
//        checked: applicationWindow.isFullScreen
//        anchors.right: controlBar.right
//        anchors.top: controlBar.top
//        anchors.rightMargin: 15
//        anchors.topMargin: 15
//    }

    //Seek controls
    SeekControl {
        id: seekControl
        anchors.bottom: controlBar.bottom
        anchors.bottomMargin: 10
        anchors.right: controlBar.right
        anchors.left: controlBar.left
        anchors.rightMargin: 15
        anchors.leftMargin: 15
        enabled: playbackControl.isPlaybackEnabled

        duration: mediaPlayer.duration

        onSeekValueChanged: {
            mediaPlayer.seek(newPosition);
            position = mediaPlayer.position;
        }

        Component.onCompleted: {
            seekable = mediaPlayer.seekable;
        }
    }

    Connections {
        target: mediaPlayer
        onPositionChanged: {
            if (!seekControl.pressed) seekControl.position = mediaPlayer.position;
        }
        onStatusChanged: {
            if ((mediaPlayer.status == MediaPlayer.Loaded) || (mediaPlayer.status == MediaPlayer.Buffered) || mediaPlayer.status === MediaPlayer.Buffering || mediaPlayer.status === MediaPlayer.EndOfMedia)
                playbackControl.isPlaybackEnabled = true;
            else
                playbackControl.isPlaybackEnabled = false;
        }
        onPlaybackStateChanged: {
            if (mediaPlayer.playbackState === MediaPlayer.PlayingState) {
                playbackControl.isPlaying = true;
                applicationWindow.resetTimer();
            } else {
                show();
                playbackControl.isPlaying = false;
            }
        }

        onSeekableChanged: {
            // console.log("seekableChanged: " + mediaPlayer.seekable);
            seekControl.seekable = mediaPlayer.seekable;
        }
    }

    function hide() {
        controlBar.state = "HIDDEN";
    }

    function show() {
        controlBar.state = "VISIBLE";
    }

    //Usage: give the value you wish to modify position,
    //returns a value between 0 and duration
    function normalizeSeek(value) {
        var newPosition = mediaPlayer.position + value;
        if (newPosition < 0)
            newPosition = 0;
        else if (newPosition > mediaPlayer.duration)
            newPosition = mediaPlayer.duration;
        return newPosition;
    }

    states: [
        State {
            name: "HIDDEN"
            PropertyChanges {
                target: controlBar
                opacity: 0.0
            }
        },
        State {
            name: "VISIBLE"
            PropertyChanges {
                target: controlBar
                opacity: 0.95
            }
        }
    ]

    transitions: [
        Transition {
            from: "HIDDEN"
            to: "VISIBLE"
            NumberAnimation {
                id: showAnimation
                target: controlBar
                properties: "opacity"
                from: 0.0
                to: 1.0
                duration: 200
            }
        },
        Transition {
            from: "VISIBLE"
            to: "HIDDEN"
            NumberAnimation {
                id: hideAnimation
                target: controlBar
                properties: "opacity"
                from: 0.95
                to: 0.0
                duration: 200
            }
        }
    ]
}