Merge lp:~justinmcp/webbrowser-app/mediaplayer into lp:webbrowser-app

[Justin McPherson]

[lp:~justinmcp/webbrowser-app/mediaplayer]

997. By Justin McPherson <justin@phablet-dev> on 2015-06-05

WIP

998. By Justin McPherson <justin@phablet-dev> on 2015-06-12

WIP

999. By Justin McPherson <justin@phablet-dev> on 2015-06-17

WIP

1000. By Justin McPherson <justin@phablet-dev> on 2015-06-17

WIP

1001. By Justin McPherson on 2015-08-03

Merge from trunk.

Unmerged revisions

1001. By Justin McPherson on 2015-08-03

Merge from trunk.

1000. By Justin McPherson <justin@phablet-dev> on 2015-06-17

WIP

999. By Justin McPherson <justin@phablet-dev> on 2015-06-17

WIP

998. By Justin McPherson <justin@phablet-dev> on 2015-06-12

WIP

997. By Justin McPherson <justin@phablet-dev> on 2015-06-05

WIP

996. By Justin McPherson <justin@phablet-dev> on 2015-06-03

WIP

995. By Justin McPherson <justin@phablet-dev> on 2015-06-01

WIP

994. By Justin McPherson <justin@phablet-dev> on 2015-05-22

WIP

993. By Justin McPherson <justin@phablet-dev> on 2015-05-22

WIP

992. By Justin McPherson <justin@phablet-dev> on 2015-05-22

wip

=== added file 'src/Ubuntu/Web/Controls.qml'
--- src/Ubuntu/Web/Controls.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/Controls.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,285 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Ugo Riboni <[e-mail]>
+ *  Michał Sawicz <[e-mail]>
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.0
+import QtMultimedia 5.0
+import Ubuntu.Components 1.1
+
+Item {
+    id: controls
+
+    readonly property string orientation: controls.width >= units.gu(60) ? "LANDSCAPE" : "PORTRAIT"
+    property variant video: null
+    property int maximumHeight: 0
+    property int heightOffset: 0
+    property variant playerStatus: MediaPlayer.NoMedia
+
+    property alias settingsEnabled: _settingsButton.enabled
+
+    signal closeClicked
+    signal playbackClicked
+    signal settingsClicked
+    signal shareClicked
+    signal seekRequested(int time)
+    signal startSeek
+    signal endSeek
+
+    focus: true
+    height: _toolbar.height
+
+    Rectangle {
+        id: _bgColor
+
+        color: "black"
+        opacity: 0.8
+        anchors.fill: parent
+    }
+
+    HLine {
+        id: _divLine
+        anchors {
+            left: _toolbar.left
+            right: _toolbar.right
+            top: parent.top
+        }
+    }
+
+    Column {
+        id: _toolbar
+
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        height: childrenRect.height
+
+        Item {
+            id: timelinePlaceHolderPortrait
+
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            height: controls.orientation === "PORTRAIT" ? units.gu(5) : 0
+        }
+
+        Row {
+            id: controlsRow
+            anchors {
+                left: parent.left
+                right: parent.right
+                margins: units.gu(2)
+            }
+            height: units.gu(5)
+
+            IconButton {
+                id: _closeButton
+
+                iconSource: "image://theme/close"
+                iconSize: units.gu(3)
+                anchors.verticalCenter: parent.verticalCenter
+                width: units.gu(8)
+                height: units.gu(4)
+                onClicked: controls.closeClicked()
+                leftAlignment: true
+            }
+
+            VLine {
+            }
+
+            IconButton {
+                id: playbackButton
+                objectName: "Controls.PlayBackButton"
+
+                property string icon
+
+                iconSource: icon ? "image://theme/media-playback-%1".arg(icon) : ""
+                iconSize: units.gu(3)
+                anchors.verticalCenter: parent.verticalCenter
+                width: controls.orientation === "LANDSCAPE" ? units.gu(10) :
+                                                              controlsRow.width -
+                                                              _closeButton.width -
+                                                              _timeLabel.width -
+                                                              _shareButton.width -
+                                                              _settingsButton.width
+
+                height: units.gu(4)
+                onClicked: { 
+                    controls.playbackClicked()
+                }
+            }
+
+            VLine {
+            }
+
+            Item {
+                id: timelinePlaceHolderLandscape
+
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+
+                width: controls.orientation === "LANDSCAPE" ? controlsRow.width -
+                       _closeButton.width -
+                       playbackButton.width -
+                       _timeLabel.width -
+                       _shareButton.width -
+                       _settingsButton.width -
+                       units.gu(2) : 0
+
+
+                TimeLine {
+                    id: _timeline
+
+                    property bool seeking: false
+
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: units.gu(2)
+                        verticalCenter: parent.verticalCenter
+                    }
+                    height: units.gu(4)
+                    parent: controls.orientation === "PORTRAIT" ? timelinePlaceHolderPortrait : timelinePlaceHolderLandscape
+                    minimumValue: 0
+                    maximumValue: video ? video.duration / 1000 : 0
+
+                    // pause the video during the seek
+                    onPressedChanged: {
+                       if (!pressed && seeking) {
+                            endSeek()
+                            seeking = false
+                       }
+                    }
+
+                    // Live value is the real slider value. Ex: User dragging the slider
+                    onLiveValueChanged: {
+                        if (video)  {
+                            var changed = Math.abs(liveValue - videoPosition)
+                            if (changed > 1) {
+                                if (!seeking) {
+                                    startSeek()
+                                    seeking = true
+                                }
+                                seekRequested(liveValue * 1000)
+                             }
+                        }
+                    }
+                }
+            }
+
+            VLine {
+                visible: controls.orientation === "LANDSCAPE"
+            }
+
+            TimeLabel {
+                id: _timeLabel
+
+                remainingTime: _timeline.remainingTime
+                currentTime: _timeline.currentTime
+
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                width: controls.orientation === "LANDSCAPE" ? units.gu(10) : units.gu(8)
+            }
+
+            VLine {
+                visible: _shareButton.visible
+            }
+
+            IconButton {
+                id: _shareButton
+
+                /* Disable share button for now until we get some feedback from designers */
+                visible: false
+                iconSource: "artwork/icon_share.png"
+                iconSize: units.gu(3)
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                width: visible ? units.gu(7) : 0
+                onClicked: controls.shareClicked()
+            }
+
+            VLine {
+                visible: _settingsButton.visible
+            }
+
+            IconButton {
+                id: _settingsButton
+
+                visible: false
+                iconSource: "artwork/icon_settings.png"
+                iconSize: units.gu(3)
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                width: visible ? units.gu(7) : 0
+                enabled: false
+                opacity: enabled ? 1.0 : 0.2
+                onClicked: settingsClicked()
+            }
+        }
+    }
+
+    Connections {
+        target: video
+
+        onPositionChanged: {
+          // To get position to be smooth and accurate during seeking, do
+          // not use the reported value for position from media-hub but instead
+          // use the value that the user move the scrubber to. This makes seeking
+          // silky smooth. Report correctly on normal advance, or EOS.
+          if (!_timeline.seeking || controls.playerStatus == MediaPlayer.EndOfMedia)
+            _timeline.videoPosition = video ? video.position / 1000 : 0
+        }
+    }
+
+    Connections {
+        target: controls
+        onPlayerStatusChanged: {
+            console.debug("onPlayerStatusChanged")
+            _timeline.playerStatus = controls.playerStatus
+        }
+    }
+
+    states: [
+        State {
+            name: "stopped"
+            PropertyChanges { target: playbackButton; icon: "start" }
+        },
+
+        State {
+            name: "playing"
+            PropertyChanges { target: playbackButton; icon: "pause" }
+        },
+
+        State {
+            name: "paused"
+            PropertyChanges { target: playbackButton; icon: "start" }
+        }
+    ]
+}

=== added file 'src/Ubuntu/Web/HLine.qml'
--- src/Ubuntu/Web/HLine.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/HLine.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Rectangle {
+    height: units.dp(1)
+    anchors.left: parent.left
+    anchors.right: parent.right
+    color: UbuntuColors.coolGrey
+}

=== added file 'src/Ubuntu/Web/IconButton.qml'
--- src/Ubuntu/Web/IconButton.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/IconButton.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+AbstractButton {
+    id: root
+
+    property alias iconSource: _image.source
+    property alias iconSize: _image.height
+    property bool leftAlignment: false
+
+    focus: false
+
+    Image {
+        id: _image
+
+        width: height
+        smooth: true
+        anchors {
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: root.leftAlignment ? undefined : parent.horizontalCenter
+            left: root.leftAlignment ? parent.left : undefined
+        }
+    }
+}

=== added file 'src/Ubuntu/Web/MediaPlayer.qml'
--- src/Ubuntu/Web/MediaPlayer.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/MediaPlayer.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,226 @@
+import QtQuick 2.0
+import QtMultimedia 5.0
+import "."
+
+Rectangle {
+    id: mediaPlayer
+    color: "black"
+    state: "stopped"
+
+    property var content
+
+    property alias source: player.source
+    property alias duration: player.duration
+    property alias position: player.position
+    property alias playbackState: player.playbackState
+    property alias metaData: player.metaData
+
+    signal closeClicked
+
+    onContentChanged: {
+        source = content.url
+    }
+
+    function play() {
+        state = "playing"
+    }
+
+    function pause() {
+        state = "paused"
+    }
+
+    function stop() {
+        state = "stopped"
+    }
+
+    function playPause() {
+        if (state == "playing") {
+            state = "paused"
+        } else {
+            state = "playing"
+        }
+    }
+
+    function seek(position) {
+        player.seek(position)
+    }
+
+    MediaPlayer {
+        id: player
+        source: mediaPlayer.source
+
+        onPlaybackStateChanged: {
+            if (playbackState == MediaPlayer.PausedState) {
+                mediaPlayer.pause()
+            } else if (playbackState == MediaPlayer.PlayingState) {
+                mediaPlayer.play()
+            }
+        }
+
+        metaData.onMetaDataChanged: {
+            mediaPlayer.metaDataChanged()
+        }
+    }
+
+    VideoOutput {
+        id: _videoOutput
+        source: player
+        anchors.fill: parent
+        opacity: 0.0
+
+        Behavior on opacity {
+            NumberAnimation { duration: 300 }
+        }
+
+        MouseArea {
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                bottom: _controls.top
+            }
+
+            onClicked: {
+                if (_controls.state == "open") {
+                    _controls.state = "closed"
+                } else {
+                    _controls.state = "open"
+                }
+            }
+        }
+
+        Item {
+            id: _controls
+            height: _controlsContents.height
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+
+            state: "closed"
+            states: [
+                State {
+                    name: "open"
+                    PropertyChanges {
+                        target: _controls
+                        y: parent.height - height
+                    }
+                },
+                State {
+                    name: "closed"
+                    PropertyChanges {
+                        target: _controls
+                        y: parent.height
+                    }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    to: "closed"
+                    PropertyAnimation {
+                        target: _controls
+                        properties: "y"
+                        duration: 175
+                        easing.type: Easing.OutQuad
+                    }
+                },
+                Transition {
+                    to: "open"
+                    PropertyAnimation {
+                        target: _controls
+                        properties: "y"
+                        duration: 175
+                        easing.type: Easing.OutQuad
+                    }
+                }
+            ]
+
+            Controls {
+                id: _controlsContents
+                property bool isPaused: false
+
+                settingsEnabled: false
+
+                objectName: "controls"
+                state: mediaPlayer.state
+                video: player
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+
+                maximumHeight: units.gu(27)
+                playerStatus: player.mediaStatus
+
+                onPlaybackClicked: {
+                    mediaPlayer.playPause()
+                }
+
+                onSeekRequested: {
+                    player.seek(time)
+                }
+
+                onStartSeek: {
+                    isPaused = (state == "paused")
+                    player.pause()
+                }
+
+                onEndSeek: {
+                    // Only automatically resume playing after a seek that is not to the
+                    // end of stream (i.e. position == duration)
+                    if (player.status != MediaPlayer.EndOfMedia && !isPaused) {
+                        player.play()
+                    }
+                }
+
+                onCloseClicked: {
+                    _controls.state = "closed"
+                    mediaPlayer.closeClicked();
+                }
+            }
+        }
+    }
+
+    Timer {
+        id: scrubbingTimer
+        interval: 500
+        repeat: true
+
+        property int step
+
+        onTriggered: {
+            if (player.position + step < 0) {
+                player.seek(0)
+                mediaPlayer.state = "playing"
+            } else {
+                player.seek(mediaPlayer.position + step)
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "stopped"
+            StateChangeScript { script: player.stop() }
+            PropertyChanges { target: scrubbingTimer; running: false }
+            PropertyChanges { target: _videoOutput; opacity: 0.0 }
+        },
+
+        State {
+            name: "playing"
+            PropertyChanges { target: player; playbackRate: 1.0; muted: false }
+            StateChangeScript { script: player.play() }
+            PropertyChanges { target: scrubbingTimer; running: false }
+            PropertyChanges { target: _videoOutput; opacity: 1.0 }
+        },
+
+        State {
+            name: "paused"
+            StateChangeScript { script: player.pause() }
+            PropertyChanges { target: scrubbingTimer; running: false }
+            PropertyChanges { target: _videoOutput; opacity: 1.0 }
+        }
+    ]
+}

=== added file 'src/Ubuntu/Web/SceneFrame.qml'
--- src/Ubuntu/Web/SceneFrame.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/SceneFrame.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+MouseArea {
+    id: _imageFrame
+
+    property int start
+    property int duration
+    property alias source: _image.source
+    property bool active: false
+    readonly property bool ready: (_image.status === Image.Ready)
+
+    Behavior on width {
+        NumberAnimation { duration: 150; easing.type: Easing.InOutQuart }
+    }
+
+    UbuntuShape {
+        id: _shape
+        radius: "medium"
+
+        anchors {
+            fill: parent
+            topMargin: active ? 0 : units.gu(2)
+            bottomMargin: active ? 0 : units.gu(2)
+            leftMargin: units.gu(1)
+            rightMargin: units.gu(1)
+
+            Behavior on topMargin {
+                NumberAnimation { duration: 150; easing.type: Easing.InOutQuart }
+            }
+
+            Behavior on bottomMargin {
+                NumberAnimation { duration: 150; easing.type: Easing.InOutQuart }
+            }
+        }
+
+        image: Image {
+            id: _image
+
+            fillMode: Image.PreserveAspectCrop
+            smooth: true
+            asynchronous: true
+            sourceSize.width: _shape.width
+            sourceSize.height: _shape.height
+        }
+    }
+
+    ActivityIndicator {
+        id: imgLoading
+
+        anchors {
+            verticalCenter: _shape.verticalCenter
+            horizontalCenter: _shape.horizontalCenter
+            margins: units.gu(0.5)
+        }
+
+        running: _image.status != Image.Ready
+        visible: running
+    }
+}

=== added file 'src/Ubuntu/Web/TimeLabel.qml'
--- src/Ubuntu/Web/TimeLabel.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/TimeLabel.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+//import "../sdk"
+
+Label {
+    id: _TimeLabel
+    objectName: "TimeLine.TimeLabel"
+
+    property string currentTime
+    property string remainingTime
+
+    color: "#e8e1d0"
+    fontSize: "small"
+    state: "PROGRESSIVE"
+    verticalAlignment: Text.AlignVCenter
+    horizontalAlignment: Text.AlignRight
+
+    states: [
+        State {
+            name: "PROGRESSIVE"
+            PropertyChanges { target: _TimeLabel; text: _TimeLabel.currentTime }
+        },
+        State {
+            name: "DEGRESSIVE"
+            PropertyChanges { target: _TimeLabel; text: "- %1".arg(_TimeLabel.remainingTime) }
+        }
+    ]
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (_TimeLabel.state === "PROGRESSIVE") {
+                _TimeLabel.state = "DEGRESSIVE"
+            } else {
+                _TimeLabel.state = "PROGRESSIVE"
+            }
+        }
+    }
+}

=== added file 'src/Ubuntu/Web/TimeLine.qml'
--- src/Ubuntu/Web/TimeLine.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/TimeLine.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import QtMultimedia 5.0
+import Ubuntu.Components 1.1
+//import "../sdk"
+
+Slider {
+    id: _slider
+    objectName: "TimeLine.Slider"
+
+    readonly property alias liveValue: _slider.value
+    property real videoPosition: -1
+    property variant playerStatus: MediaPlayer.NoMedia
+    property string currentTime
+    property string remainingTime
+
+    signal clicked(bool insideThumb)
+
+    function formatProgress(time) {
+        var hour = 0
+        var min = 0
+        var secs = 0
+        time = Math.floor(time)
+
+        secs = time % 60
+        time = Math.floor(time / 60)
+        min = time % 60
+        hour = Math.floor(time / 60)
+
+        if (secs < 10) secs = "0%1".arg(secs)
+        if (min < 10) min = "0%1".arg(min)
+        if (hour < 10) hour = "0%1".arg(hour)
+
+        // TRANSLATORS: this refers to a duration/remaining time of the video, of which you can change the order.
+        // %1 refers to hours, %2 refers to minutes and %3 refers to seconds.
+        return  i18n.tr("%1:%2:%3").arg(hour).arg(min).arg(secs)
+    }
+
+    style: VideoSlider {property Item item: _slider}
+    minimumValue: 0
+    maximumValue: 1000
+    live: true
+    onVideoPositionChanged: {
+        if (_slider.playerStatus == MediaPlayer.EndOfMedia)
+        {
+            // On EndOfMedia status, make sure the slider returns to the beginning
+            _slider.value = 0
+        } else {
+            // Else, pass all new positions through to the slider UI
+            _slider.value = _slider.videoPosition
+        }
+    }
+
+    onValueChanged: {
+        if (value > 0) {
+            _slider.currentTime = formatProgress(value)
+            if (_slider.maximumValue > 0) {
+                _slider.remainingTime = formatProgress(_slider.maximumValue - value)
+            } else {
+                // TRANSLATORS: this refers to an unknown duration.
+                _slider.remainingTime = i18n.tr("unknown")
+            }
+        } else {
+            _slider.currentTime = i18n.tr("0:00:00")
+        }
+    }
+
+    onTouched: {
+        _slider.clicked(onThumb)
+    }
+}

=== modified file 'src/Ubuntu/Web/UbuntuWebView02.qml'
--- src/Ubuntu/Web/UbuntuWebView02.qml	2015-06-11 14:35:28 +0000
+++ src/Ubuntu/Web/UbuntuWebView02.qml	2015-08-03 07:20:39 +0000
@@ -285,4 +285,40 @@
             console.error(msg)
         }
     }
+
+    Component {
+        id: playerComponent
+
+        MediaPlayer {
+            id: player
+            anchors.fill: parent
+            visible: false
+
+            function showInterface() {
+                visible = true
+                _webview.fullscreen = true
+            }
+
+            function hideInterface() {
+                visible = false
+                _webview.fullscreen = false
+            }
+
+            // These MUST stay, apparent signal propagation bug
+            onPlaybackStateChanged: { }
+            onPositionChanged: { }
+            onDurationChanged: { }
+
+            onCloseClicked: {
+                stop();
+                source = ""
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if (this.hasOwnProperty("mediaPlayer")) {
+            mediaPlayer = playerComponent.createObject(parent)
+        }
+    }
 }

=== added file 'src/Ubuntu/Web/VLine.qml'
--- src/Ubuntu/Web/VLine.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/VLine.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Row {
+    id: root
+
+    anchors {
+        top: parent.top
+        topMargin: units.gu(0.5)
+        bottom: parent.bottom
+        bottomMargin: units.gu(0.5)
+    }
+    width: visible ? units.dp(2) : 0
+
+    Rectangle {
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        color: "white"
+        opacity: 0.08
+        width: root.visible ? units.dp(1) : 0
+    }
+    Rectangle {
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        color: "black"
+        opacity: 0.03
+        width: root.visible ? units.dp(1) : 0
+    }
+}

=== added file 'src/Ubuntu/Web/VideoSlider.qml'
--- src/Ubuntu/Web/VideoSlider.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Web/VideoSlider.qml	2015-08-03 07:20:39 +0000
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * Authors:
+ *  Renato Araujo Oliveira Filho <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Item {
+    id: main
+    anchors.fill: parent
+
+    // properties to be published:
+    property Item bar: backgroundShape
+    property Item thumb: thumbShape
+
+    // private properties
+    property real thumbSpacing: units.gu(1)
+    property real liveValue: SliderUtils.liveValue(item)
+    property real normalizedValue: SliderUtils.normalizedValue(item)
+
+    property real thumbSpace: backgroundShape.width - (2.0 * thumbSpacing + thumbWidth)
+    property real thumbWidth: item.height - thumbSpacing
+
+    BorderImage {
+        id: backgroundFilledShape
+
+        border {
+            left: 7
+            top: 7
+            right: 7
+            bottom: 7
+        }
+        horizontalTileMode: BorderImage.Repeat
+        verticalTileMode: BorderImage.Repeat
+        source: "artwork/slider_shape.png"
+        anchors {
+            verticalCenter:  parent.verticalCenter
+            left: parent.left
+            leftMargin: units.gu(0.2)
+        }
+        height: units.gu(1)
+        width: normalizedValue * thumbSpace + thumbSpacing + (thumbShape.width  / 2)
+    }
+
+    BorderImage {
+        id: backgroundShape
+
+        border {
+            left: 7
+            top: 7
+            right: 7
+            bottom: 7
+        }
+        horizontalTileMode: BorderImage.Repeat
+        verticalTileMode: BorderImage.Repeat
+        source: "artwork/slider_bg.png"
+        anchors {
+            verticalCenter:  parent.verticalCenter
+            left: parent.left
+            right: parent.right
+        }
+        height: units.gu(1.5)
+    }
+
+    Image {
+        id: thumbShape
+
+        x: backgroundShape.x + thumbSpacing + normalizedValue * thumbSpace
+        anchors.verticalCenter: backgroundShape.verticalCenter
+        width: thumbWidth
+        height: thumbWidth
+        source: "artwork/slider_handle.png"
+    }
+}

=== added directory 'src/Ubuntu/Web/artwork'
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/[e-mail]'
Binary files src/Ubuntu/Web/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/[e-mail]	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/slider_bg.png'
Binary files src/Ubuntu/Web/artwork/slider_bg.png	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/slider_bg.png	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/slider_handle.png'
Binary files src/Ubuntu/Web/artwork/slider_handle.png	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/slider_handle.png	2015-08-03 07:20:39 +0000 differ
=== added file 'src/Ubuntu/Web/artwork/slider_shape.png'
Binary files src/Ubuntu/Web/artwork/slider_shape.png	1970-01-01 00:00:00 +0000 and src/Ubuntu/Web/artwork/slider_shape.png	2015-08-03 07:20:39 +0000 differ
=== modified file 'src/app/webcontainer/webapp-container.cpp'
--- src/app/webcontainer/webapp-container.cpp	2015-06-24 13:37:05 +0000
+++ src/app/webcontainer/webapp-container.cpp	2015-08-03 07:20:39 +0000
@@ -286,6 +286,7 @@
     out << "  --accountProvider=PROVIDER_NAME     Online account provider for the application if the application is to reuse a local account." << endl;
     out << "  --accountSwitcher                   enable switching between different Online Accounts identities" << endl;
     out << "  --store-session-cookies             store session cookies on disk" << endl;
+    out << "  --enable-external-media             enable use of an external media player" << endl;
     out << "  --enable-media-hub-audio            enable media-hub for audio playback" << endl;
     out << "  --user-agent-string=USER_AGENT      overrides the default User Agent with the provided one." << endl;
     out << "Chrome options (if none specified, no chrome is shown by default):" << endl;
@@ -296,7 +297,9 @@
 void WebappContainer::earlyEnvironment()
 {
     Q_FOREACH(const QString& argument, m_arguments) {
-        if (argument.startsWith("--enable-media-hub-audio")) {
+        if (argument.startsWith("--enable-external-media")) {
+            qputenv("OXIDE_ENABLE_EXTERNAL_MEDIA", QString("1").toLocal8Bit().constData());
+        } else if (argument.startsWith("--enable-media-hub-audio")) {
             qputenv("OXIDE_ENABLE_MEDIA_HUB_AUDIO", QString("1").toLocal8Bit().constData());
         }
     }