QMLVideo Example visual update

Task-number: QTBUG-36287
Change-Id: I797a995c2ccd6f6fec40fbf50f93e297ae15a9b1
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

28 files changed, 290 insertions, 322 deletions

diff --git a/examples/multimedia/video/qmlvideo/images/close.png b/examples/multimedia/video/qmlvideo/images/close.png
deleted file mode 100644
index 6904df0e4..000000000
--- a/examples/multimedia/video/qmlvideo/images/close.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideo/images/folder.png b/examples/multimedia/video/qmlvideo/images/folder.png
index e53e2ad46..62d97004f 100644
--- a/examples/multimedia/video/qmlvideo/images/folder.png
+++ b/examples/multimedia/video/qmlvideo/images/folder.png
diff --git a/examples/multimedia/video/qmlvideo/images/progress_handle.svg b/examples/multimedia/video/qmlvideo/images/progress_handle.svg
deleted file mode 100644
index 7ad9014e3..000000000
--- a/examples/multimedia/video/qmlvideo/images/progress_handle.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="10px"
-   height="46px"
-   version="1.1">
-    <g>
-        <defs>
-            <linearGradient id="MyGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stop-color="lightcyan" />
-                <stop offset="100%" stop-color="dodgerblue" />
-            </linearGradient>
-        </defs>
-        <rect
-            stroke="white"
-            fill="url(#MyGradient1)"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            width="8"
-            height="44"
-            x="1"
-            y="1"
-            rx="4"
-            ry="4"/>
-    </g>
-</svg>
diff --git a/examples/multimedia/video/qmlvideo/images/progress_handle_pressed.svg b/examples/multimedia/video/qmlvideo/images/progress_handle_pressed.svg
deleted file mode 100644
index c9c6c486c..000000000
--- a/examples/multimedia/video/qmlvideo/images/progress_handle_pressed.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="10px"
-   height="46px"
-   version="1.1">
-    <g>
-        <defs>
-            <linearGradient id="MyGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stop-color="skyblue" />
-                <stop offset="100%" stop-color="darkblue" />
-            </linearGradient>
-        </defs>
-        <rect
-            stroke="white"
-            fill="url(#MyGradient1)"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            width="8"
-            height="44"
-            x="1"
-            y="1"
-            rx="4"
-            ry="4"/>
-    </g>
-</svg>
diff --git a/examples/multimedia/video/qmlvideo/images/titlebar.png b/examples/multimedia/video/qmlvideo/images/titlebar.png
deleted file mode 100644
index 51c90082d..000000000
--- a/examples/multimedia/video/qmlvideo/images/titlebar.png
+++ /dev/null
diff --git a/examples/multimedia/video/qmlvideo/images/titlebar.sci b/examples/multimedia/video/qmlvideo/images/titlebar.sci
deleted file mode 100644
index 0418d94cd..000000000
--- a/examples/multimedia/video/qmlvideo/images/titlebar.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 10
-border.top: 12
-border.bottom: 12
-border.right: 10
-source: titlebar.png
diff --git a/examples/multimedia/video/qmlvideo/images/up.png b/examples/multimedia/video/qmlvideo/images/up.png
index b05f8025d..6823de004 100644
--- a/examples/multimedia/video/qmlvideo/images/up.png
+++ b/examples/multimedia/video/qmlvideo/images/up.png
diff --git a/examples/multimedia/video/qmlvideo/main.cpp b/examples/multimedia/video/qmlvideo/main.cpp
index 5d5b8b33d..3edee5ab6 100644
--- a/examples/multimedia/video/qmlvideo/main.cpp
+++ b/examples/multimedia/video/qmlvideo/main.cpp
@@ -123,13 +123,14 @@ int main(int argc, char *argv[])
 
     const QStringList moviesLocation = QStandardPaths::standardLocations(QStandardPaths::MoviesLocation);
     const QUrl videoPath =
-        QUrl::fromLocalFile(moviesLocation.isEmpty() ?
-                            app.applicationDirPath() :
-                            moviesLocation.front());
+            QUrl::fromLocalFile(moviesLocation.isEmpty() ?
+                                    app.applicationDirPath() :
+                                    moviesLocation.front());
     viewer.rootContext()->setContextProperty("videoPath", videoPath);
 
     QMetaObject::invokeMethod(rootObject, "init");
 
+    viewer.setMinimumSize(QSize(640, 360));
     viewer.show();
 
     return app.exec();
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/Button.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/Button.qml
index ea686ea3f..4f5cbada4 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/Button.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/Button.qml
@@ -33,30 +33,31 @@
 
 import QtQuick 2.0
 
-Rectangle {
+Item {
     id: root
-    color: textColor
-    radius: 0.25 * height
 
     property string text
-    property color bgColor: "white"
-    property color bgColorSelected: "red"
-    property color textColor: "black"
+    property color bgColor: "#757575"
+    property color bgColorSelected: "#bdbdbd"
+    property color textColor: "white"
+    property color textColorSelected: "black"
     property alias enabled: mouseArea.enabled
+    property alias radius: bgr.radius
 
     signal clicked
 
     Rectangle {
-        anchors { fill: parent; margins: 1 }
+        id: bgr
+        anchors.fill: parent
         color: mouseArea.pressed ? bgColorSelected : bgColor
-        radius: 0.25 * height
+        radius: height / 15
 
         Text {
             id: text
             anchors.centerIn: parent
             text: root.text
-            font.pixelSize: 0.5 * parent.height
-            color: mouseArea.pressed ? bgColor : textColor
+            font.pixelSize: 0.4 * parent.height
+            color: mouseArea.pressed ? textColorSelected : textColor
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
         }
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/ErrorDialog.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/ErrorDialog.qml
index c9e7cd109..33a55ebd7 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/ErrorDialog.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/ErrorDialog.qml
@@ -38,6 +38,8 @@ Rectangle {
     color: "transparent"
     opacity: 0.0
     property alias enabled: mouseArea.enabled
+    property int dialogWidth: 300
+    property int dialogHeight: 200
     state: enabled ? "on" : "baseState"
 
     states: [
@@ -70,9 +72,9 @@ Rectangle {
 
     Rectangle {
         anchors.centerIn: parent
-        width: 300
-        height: 200
-        radius: 10
+        width: dialogWidth
+        height: dialogHeight
+        radius: 5
         color: "white"
 
         Text {
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
index 466ea8b97..33109bd34 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
@@ -40,6 +40,9 @@ Rectangle {
 
     property string folder
 
+    property int itemHeight: Math.min(parent.width, parent.height) / 15
+    property int buttonHeight: Math.min(parent.width, parent.height) / 12
+
     signal fileSelected(string file)
 
     function selectFile(file) {
@@ -66,12 +69,12 @@ Rectangle {
 
         Rectangle {
             id: root
-            color: "white"
+            color: "black"
             property bool showFocusHighlight: false
             property variant folders: folders1
             property variant view: view1
             property alias folder: folders1.folder
-            property color textColor: "black"
+            property color textColor: "white"
 
             FolderListModel {
                 id: folders1
@@ -103,34 +106,39 @@ Rectangle {
                             fileBrowser.selectFile(path)
                     }
                     width: root.width
-                    height: 52
+                    height: folderImage.height
                     color: "transparent"
 
                     Rectangle {
-                        id: highlight; visible: false
+                        id: highlight
+                        visible: false
                         anchors.fill: parent
-                        color: palette.highlight
-                        gradient: Gradient {
-                            GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                            GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-                        }
+                        anchors.leftMargin: 5
+                        anchors.rightMargin: 5
+                        color: "#212121"
                     }
 
                     Item {
-                        width: 48; height: 48
+                        id: folderImage
+                        width: itemHeight
+                        height: itemHeight
                         Image {
+                            id: folderPicture
                             source: "qrc:/folder.png"
-                            anchors.centerIn: parent
+                            width: itemHeight * 0.9
+                            height: itemHeight * 0.9
+                            anchors.left: parent.left
+                            anchors.margins: 5
                             visible: folders.isFolder(index)
                         }
                     }
 
                     Text {
                         id: nameText
-                        anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                        anchors.fill: parent;
+                        verticalAlignment: Text.AlignVCenter
                         text: fileName
-                        anchors.leftMargin: 54
-                        font.pixelSize: 32
+                        anchors.leftMargin: itemHeight + 10
                         color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
                         elide: Text.ElideRight
                     }
@@ -142,7 +150,7 @@ Rectangle {
                             root.showFocusHighlight = false;
                             wrapper.ListView.view.currentIndex = index;
                         }
-                        onClicked: { if (folders == wrapper.ListView.view.model) launch() }
+                        onClicked: { if (folders === wrapper.ListView.view.model) launch() }
                     }
 
                     states: [
@@ -160,17 +168,12 @@ Rectangle {
                 id: view1
                 anchors.top: titleBar.bottom
                 anchors.bottom: cancelButton.top
-                x: 0
                 width: parent.width
                 model: folders1
                 delegate: folderDelegate
                 highlight: Rectangle {
-                    color: palette.highlight
+                    color: "#212121"
                     visible: root.showFocusHighlight && view1.count != 0
-                    gradient: Gradient {
-                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-                    }
                     width: view1.currentItem == null ? 0 : view1.currentItem.width
                 }
                 highlightMoveVelocity: 1000
@@ -215,12 +218,8 @@ Rectangle {
                 model: folders2
                 delegate: folderDelegate
                 highlight: Rectangle {
-                    color: palette.highlight
+                    color: "#212121"
                     visible: root.showFocusHighlight && view2.count != 0
-                    gradient: Gradient {
-                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-                    }
                     width: view1.currentItem == null ? 0 : view1.currentItem.width
                 }
                 highlightMoveVelocity: 1000
@@ -254,19 +253,29 @@ Rectangle {
             }
 
             Rectangle {
-                id: cancelButton
-                width: 100
-                height: titleBar.height - 7
+                width: parent.width
+                height: buttonHeight + 10
+                anchors.bottom: parent.bottom
                 color: "black"
-                anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+            }
+
+            Rectangle {
+                id: cancelButton
+                width: parent.width
+                height: buttonHeight
+                color: "#212121"
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: 5
+                radius: buttonHeight / 15
 
                 Text {
-                    anchors { fill: parent; margins: 4 }
+                    anchors.fill: parent
                     text: "Cancel"
                     color: "white"
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: 20
                 }
 
                 MouseArea {
@@ -277,55 +286,66 @@ Rectangle {
 
             Keys.onPressed: {
                 root.keyPressed(event.key);
-                if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+                if (event.key === Qt.Key_Return || event.key === Qt.Key_Select || event.key === Qt.Key_Right) {
                     view.currentItem.launch();
                     event.accepted = true;
-                } else if (event.key == Qt.Key_Left) {
+                } else if (event.key === Qt.Key_Left) {
                     up();
                 }
             }
 
-            BorderImage {
-                source: "qrc:/titlebar.sci";
-                width: parent.width;
-                height: 52
-                y: -7
+
+            Rectangle {
                 id: titleBar
+                width: parent.width
+                height: buttonHeight + 10
+                anchors.top: parent.top
+                color: "black"
 
                 Rectangle {
-                    id: upButton
-                    width: 48
-                    height: titleBar.height - 7
-                    color: "transparent"
-                    Image { anchors.centerIn: parent; source: "qrc:/up.png" }
-                    MouseArea { id: upRegion; anchors.centerIn: parent
-                        width: 56
-                        height: 56
-                        onClicked: up()
-                    }
-                    states: [
-                        State {
-                            name: "pressed"
-                            when: upRegion.pressed
-                            PropertyChanges { target: upButton; color: palette.highlight }
-                        }
-                    ]
-                }
+                    width: parent.width;
+                    height: buttonHeight
+                    color: "#212121"
+                    anchors.margins: 5
+                    anchors.top: parent.top
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    radius: buttonHeight / 15
 
-                Rectangle {
-                    color: "gray"
-                    x: 48
-                    width: 1
-                    height: 44
-                }
+                    Rectangle {
+                        id: upButton
+                        width: buttonHeight
+                        height: buttonHeight
+                        color: "transparent"
+                        Image {
+                            width: itemHeight
+                            height: itemHeight
+                            anchors.centerIn: parent
+                            source: "qrc:/up.png"
+                        }
+                        MouseArea { id: upRegion; anchors.centerIn: parent
+                            width: buttonHeight
+                            height: buttonHeight
+                            onClicked: up()
+                        }
+                        states: [
+                            State {
+                                name: "pressed"
+                                when: upRegion.pressed
+                                PropertyChanges { target: upButton; color: palette.highlight }
+                            }
+                        ]
+                    }
 
-                Text {
-                    anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-                    anchors.leftMargin: 4; anchors.rightMargin: 4
-                    text: folders.folder
-                    color: "white"
-                    elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
-                    font.pixelSize: 32
+                    Text {
+                        anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+                        anchors.leftMargin: 5; anchors.rightMargin: 5
+                        text: folders.folder
+                        color: "white"
+                        elide: Text.ElideLeft;
+                        horizontalAlignment: Text.AlignLeft;
+                        verticalAlignment: Text.AlignVCenter
+                    }
                 }
             }
 
@@ -366,14 +386,14 @@ Rectangle {
 
             function keyPressed(key) {
                 switch (key) {
-                    case Qt.Key_Up:
-                    case Qt.Key_Down:
-                    case Qt.Key_Left:
-                    case Qt.Key_Right:
-                        root.showFocusHighlight = true;
+                case Qt.Key_Up:
+                case Qt.Key_Down:
+                case Qt.Key_Left:
+                case Qt.Key_Right:
+                    root.showFocusHighlight = true;
                     break;
-                    default:
-                        // do nothing
+                default:
+                    // do nothing
                     break;
                 }
             }
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/Scene.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/Scene.qml
index 5443dc846..04c852a96 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/Scene.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/Scene.qml
@@ -39,9 +39,9 @@ Rectangle {
     property alias buttonHeight: closeButton.height
     property string source1
     property string source2
-    property int contentWidth: 250
+    property int contentWidth: parent.width / 2
     property real volume: 0.25
-    property int margins: 10
+    property int margins: 5
     property QtObject content
 
     signal close
@@ -54,9 +54,12 @@ Rectangle {
             right: parent.right
             margins: root.margins
         }
-        width: 50
-        height: 30
+        width: Math.max(parent.width, parent.height) / 12
+        height: Math.min(parent.width, parent.height) / 12
         z: 2.0
+        bgColor: "#212121"
+        bgColorSelected: "#757575"
+        textColorSelected: "white"
         text: "Back"
         onClicked: root.close()
     }
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneBasic.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneBasic.qml
index cb50e3653..dd2dfaf54 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneBasic.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneBasic.qml
@@ -59,8 +59,7 @@ Scene {
         }
         text: content.started ? "Tap the screen to stop content"
                               : "Tap the screen to start content"
-        color: "yellow"
-        font.pixelSize: 20
+        color: "#e0e0e0"
         z: 2.0
     }
 
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreen.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreen.qml
index aa2b42678..63f94de28 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreen.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreen.qml
@@ -86,8 +86,7 @@ Scene {
             margins: 20
         }
         text: "Tap on the content to toggle full-screen mode"
-        color: "yellow"
-        font.pixelSize: 20
+        color: "#e0e0e0"
         z: 2.0
     }
 
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreenInverted.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreenInverted.qml
index 7824589e0..99159591d 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreenInverted.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneFullScreenInverted.qml
@@ -91,8 +91,7 @@ Scene {
             margins: 20
         }
         text: "Tap on the content to toggle full-screen mode"
-        color: "yellow"
-        font.pixelSize: 20
+        color: "#e0e0e0"
         z: 2.0
     }
 
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneMulti.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneMulti.qml
index f31cc9580..042c609d3 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneMulti.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneMulti.qml
@@ -65,8 +65,7 @@ Scene {
                     margins: 20
                 }
                 text: content() ? content().started ? "Tap to stop" : "Tap to start" : ""
-                color: "yellow"
-                font.pixelSize: 20
+                color: "#e0e0e0"
             }
 
             MouseArea {
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneOverlay.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneOverlay.qml
index 1f4559a5f..bdeff4e19 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneOverlay.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneOverlay.qml
@@ -53,7 +53,7 @@ Scene {
         y: 0.5 * parent.height
         width: content.width
         height: content.height
-        color: "yellow"
+        color: "#e0e0e0"
         opacity: 0.5
 
         SequentialAnimation on x {
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneRotate.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneRotate.qml
index cfba508a2..2ad65f606 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneRotate.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneRotate.qml
@@ -56,7 +56,7 @@ Scene {
             bottom: rotateNegativeButton.top
             margins: parent.margins
         }
-        width: 90
+        width: Math.max(parent.width, parent.height) / 10
         height: root.buttonHeight
         text: "Rotate +" + delta
         onClicked: content.rotation = content.rotation + delta
@@ -69,7 +69,7 @@ Scene {
             verticalCenter: parent.verticalCenter
             margins: parent.margins
         }
-        width: 90
+        width: Math.max(parent.width, parent.height) / 10
         height: root.buttonHeight
         text: "Rotate -" + delta
         onClicked: content.rotation = content.rotation - delta
@@ -82,7 +82,7 @@ Scene {
             verticalCenter: parent.verticalCenter
             margins: parent.margins
         }
-        width: 30
+        width: Math.max(parent.width, parent.height) / 25
         height: root.buttonHeight
         enabled: false
         text: content.rotation % 360
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneSelectionPanel.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneSelectionPanel.qml
index 976644b4b..8e6d11a86 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneSelectionPanel.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SceneSelectionPanel.qml
@@ -39,44 +39,64 @@ Rectangle {
     property string sceneSource: ""
 
     ListModel {
-        id: list
-        ListElement { name: "multi"; source: "SceneMulti.qml" }
-        ListElement { name: "video"; source: "VideoBasic.qml" }
-        ListElement { name: "video-drag"; source: "VideoDrag.qml" }
-        ListElement { name: "video-fillmode"; source: "VideoFillMode.qml" }
-        ListElement { name: "video-fullscreen"; source: "VideoFullScreen.qml" }
-        ListElement { name: "video-fullscreen-inverted"; source: "VideoFullScreenInverted.qml" }
-        ListElement { name: "video-metadata"; source: "VideoMetadata.qml" }
-        ListElement { name: "video-move"; source: "VideoMove.qml" }
-        ListElement { name: "video-overlay"; source: "VideoOverlay.qml" }
-        ListElement { name: "video-playbackrate"; source: "VideoPlaybackRate.qml" }
-        ListElement { name: "video-resize"; source: "VideoResize.qml" }
-        ListElement { name: "video-rotate"; source: "VideoRotate.qml" }
-        ListElement { name: "video-spin"; source: "VideoSpin.qml" }
-        ListElement { name: "video-seek"; source: "VideoSeek.qml" }
-        ListElement { name: "camera"; source: "CameraBasic.qml" }
-        ListElement { name: "camera-drag"; source: "CameraDrag.qml" }
-        ListElement { name: "camera-fullscreen"; source: "CameraFullScreen.qml" }
-        ListElement { name: "camera-fullscreen-inverted"; source: "CameraFullScreenInverted.qml" }
-        ListElement { name: "camera-move"; source: "CameraMove.qml" }
-        ListElement { name: "camera-overlay"; source: "CameraOverlay.qml" }
-        ListElement { name: "camera-resize"; source: "CameraResize.qml" }
-        ListElement { name: "camera-rotate"; source: "CameraRotate.qml" }
-        ListElement { name: "camera-spin"; source: "CameraSpin.qml" }
+        id: videolist
+        ListElement { name: "Multi"; source: "SceneMulti.qml" }
+        ListElement { name: "Video"; source: "VideoBasic.qml" }
+        ListElement { name: "Drag"; source: "VideoDrag.qml" }
+        ListElement { name: "Fillmode"; source: "VideoFillMode.qml" }
+        ListElement { name: "Fullscreen"; source: "VideoFullScreen.qml" }
+        ListElement { name: "Fullscreen-inverted"; source: "VideoFullScreenInverted.qml" }
+        ListElement { name: "Metadata"; source: "VideoMetadata.qml" }
+        ListElement { name: "Move"; source: "VideoMove.qml" }
+        ListElement { name: "Overlay"; source: "VideoOverlay.qml" }
+        ListElement { name: "Playback Rate"; source: "VideoPlaybackRate.qml" }
+        ListElement { name: "Resize"; source: "VideoResize.qml" }
+        ListElement { name: "Rotate"; source: "VideoRotate.qml" }
+        ListElement { name: "Spin"; source: "VideoSpin.qml" }
+        ListElement { name: "Seek"; source: "VideoSeek.qml" }
+    }
+
+    ListModel {
+        id: cameralist
+        ListElement { name: "Camera"; source: "CameraBasic.qml" }
+        ListElement { name: "Drag"; source: "CameraDrag.qml" }
+        ListElement { name: "Fullscreen"; source: "CameraFullScreen.qml" }
+        ListElement { name: "Fullscreen-inverted"; source: "CameraFullScreenInverted.qml" }
+        ListElement { name: "Move"; source: "CameraMove.qml" }
+        ListElement { name: "Overlay"; source: "CameraOverlay.qml" }
+        ListElement { name: "Resize"; source: "CameraResize.qml" }
+        ListElement { name: "Rotate"; source: "CameraRotate.qml" }
+        ListElement { name: "Spin"; source: "CameraSpin.qml" }
+    }
+
+    Component {
+        id: leftDelegate
+        Item {
+            width: root.width / 2
+            height: 0.8 * itemHeight
+
+            Button {
+                anchors.fill: parent
+                anchors.margins: 5
+                anchors.rightMargin: 2.5
+                anchors.bottomMargin: 0
+                text: name
+                onClicked: root.sceneSource = source
+            }
+        }
     }
 
     Component {
-        id: delegate
+        id: rightDelegate
         Item {
-            id: delegateItem
-            width: root.width
-            height: itemHeight
+            width: root.width / 2
+            height: 0.8 * itemHeight
 
             Button {
-                id: selectorItem
-                anchors.centerIn: parent
-                width: 0.9 * parent.width
-                height: 0.8 * itemHeight
+                anchors.fill: parent
+                anchors.margins: 5
+                anchors.leftMargin: 2.5
+                anchors.bottomMargin: 0
                 text: name
                 onClicked: root.sceneSource = source
             }
@@ -85,20 +105,29 @@ Rectangle {
 
     Flickable {
         anchors.fill: parent
-        contentHeight: (itemHeight * list.count) + layout.anchors.topMargin + layout.spacing
+        contentHeight: (itemHeight * videolist.count) + 10
         clip: true
 
-        Column {
+        Row {
             id: layout
-
             anchors {
                 fill: parent
-                topMargin: 10
+                topMargin: 5
+                bottomMargin: 5
+            }
+
+            Column {
+                Repeater {
+                    model: videolist
+                    delegate: leftDelegate
+                }
             }
 
-            Repeater {
-                model: list
-                delegate: delegate
+            Column {
+                Repeater {
+                    model: cameralist
+                    delegate: rightDelegate
+                }
             }
         }
     }
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SeekControl.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SeekControl.qml
index 9c3810134..f14fa402c 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/SeekControl.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/SeekControl.qml
@@ -35,7 +35,7 @@ import QtQuick 2.0
 
 Item {
     id: seekControl
-    height: 46
+    height: Math.min(parent.width, parent.height) / 20
     property int duration: 0
     property int playPosition: 0
     property int seekPosition: 0
@@ -45,8 +45,9 @@ Item {
     Rectangle {
         id: background
         anchors.fill: parent
-        color: "black"
+        color: "white"
         opacity: 0.3
+        radius: parent.height / 15
     }
 
     Rectangle {
@@ -60,7 +61,6 @@ Item {
     Text {
         width: 90
         anchors { left: parent.left; top: parent.top; bottom: parent.bottom; leftMargin: 10 }
-        font { family: "Nokia Sans S60"; pixelSize: 24 }
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
         color: "white"
@@ -71,7 +71,6 @@ Item {
     Text {
         width: 90
         anchors { right: parent.right; top: parent.top; bottom: parent.bottom; rightMargin: 10 }
-        font { family: "Nokia Sans S60"; pixelSize: 24 }
         horizontalAlignment: Text.AlignRight
         verticalAlignment: Text.AlignVCenter
         color: "white"
@@ -79,35 +78,36 @@ Item {
         text: formatTime(duration)
     }
 
-    Image {
+    Rectangle {
         id: progressHandle
-        height: 46
-        width: 10
-        source: mouseArea.pressed ? "qrc:/images/progress_handle_pressed.svg" : "qrc:/images/progress_handle.svg"
+        height: parent.height
+        width: parent.height / 2
+        color: "white"
+        opacity: 0.5
         anchors.verticalCenter: progressBar.verticalCenter
-        x: seekControl.duration == 0 ? 0 : seekControl.playPosition / seekControl.duration * 630
+        x: seekControl.duration == 0 ? 0 : seekControl.playPosition / seekControl.duration * background.width
 
         MouseArea {
             id: mouseArea
             anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom }
-            height: 46+16
-            width: height
+            height: parent.height
+            width: parent.height * 2
             enabled: seekControl.enabled
             drag {
                 target: progressHandle
                 axis: Drag.XAxis
                 minimumX: 0
-                maximumX: 631
+                maximumX: background.width
             }
             onPressed: {
                 seekControl.seeking = true;
             }
             onCanceled: {
-                seekControl.seekPosition = progressHandle.x * seekControl.duration / 630
+                seekControl.seekPosition = progressHandle.x * seekControl.duration / background.width
                 seekControl.seeking = false
             }
             onReleased: {
-                seekControl.seekPosition = progressHandle.x * seekControl.duration / 630
+                seekControl.seekPosition = progressHandle.x * seekControl.duration / background.width
                 seekControl.seeking = false
                 mouse.accepted = true
             }
@@ -120,7 +120,7 @@ Item {
         interval: 300
         running: seekControl.seeking
         onTriggered: {
-            seekControl.seekPosition = progressHandle.x*seekControl.duration/630
+            seekControl.seekPosition = progressHandle.x*seekControl.duration / background.width
         }
     }
 
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoFillMode.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoFillMode.qml
index f623aa412..b114d5bb4 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoFillMode.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoFillMode.qml
@@ -54,16 +54,16 @@ Scene {
             verticalCenter: parent.verticalCenter
             margins: parent.margins
         }
-        width: 150
+        width: Math.max(parent.width, parent.height) / 5
         height: root.buttonHeight
         text: "PreserveAspectFit"
         onClicked: {
             if (!content.dummy) {
                 var video = content.contentItem()
-                if (video.fillMode == VideoOutput.Stretch) {
+                if (video.fillMode === VideoOutput.Stretch) {
                     video.fillMode = VideoOutput.PreserveAspectFit
                     text = "PreserveAspectFit"
-                } else if (video.fillMode == VideoOutput.PreserveAspectFit) {
+                } else if (video.fillMode === VideoOutput.PreserveAspectFit) {
                     video.fillMode = VideoOutput.PreserveAspectCrop
                     text = "PreserveAspectCrop"
                 } else {
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoMetadata.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoMetadata.qml
index 00580f782..05c6dd76c 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoMetadata.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoMetadata.qml
@@ -56,55 +56,55 @@ Scene {
         Column {
             anchors.fill: parent
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Title:" + content.contentItem().metaData.title
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Size:" + content.contentItem().metaData.size
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Resolution:" + content.contentItem().metaData.resolution
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Media type:" + content.contentItem().metaData.mediaType
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Video codec:" + content.contentItem().metaData.videoCodec
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Video bit rate:" + content.contentItem().metaData.videoBitRate
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Video frame rate:" +content.contentItem().metaData.videoFrameRate
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Audio codec:" + content.contentItem().metaData.audioCodec
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Audio bit rate:" + content.contentItem().metaData.audioBitRate
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Date:" + content.contentItem().metaData.date
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Description:" + content.contentItem().metaData.description
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Copyright:" + content.contentItem().metaData.copyright
             }
             Text {
-                color: "yellow"
+                color: "#e0e0e0"
                 text: "Seekable:" + content.contentItem().metaData.seekable
             }
         }
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoPlaybackRate.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoPlaybackRate.qml
index 5c1e6ab17..45d599b34 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoPlaybackRate.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoPlaybackRate.qml
@@ -56,12 +56,12 @@ Scene {
             bottom: decreaseButton.top
             margins: parent.margins
         }
-        width: 90
+        width: Math.max(parent.width, parent.height) / 10
         height: root.buttonHeight
         text: "Increase"
         onClicked: {
             var video = content.contentItem()
-            video.playbackRate = video.playbackRate + delta
+            video.playbackRate += delta
         }
     }
 
@@ -72,12 +72,12 @@ Scene {
             verticalCenter: parent.verticalCenter
             margins: parent.margins
         }
-        width: 90
+        width: Math.max(parent.width, parent.height) / 10
         height: root.buttonHeight
         text: "Decrease"
         onClicked: {
             var video = content.contentItem()
-            video.playbackRate = video.playbackRate - delta
+            video.playbackRate -= delta
         }
     }
 
@@ -88,7 +88,7 @@ Scene {
             verticalCenter: parent.verticalCenter
             margins: parent.margins
         }
-        width: 50
+        width: Math.max(parent.width, parent.height) / 25
         height: root.buttonHeight
         enabled: false
         text: Math.round(10 * content.contentItem().playbackRate) / 10
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoSeek.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoSeek.qml
index 2d43bdf6e..05a312e37 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoSeek.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/VideoSeek.qml
@@ -36,6 +36,7 @@ import QtQuick 2.0
 Scene {
     id: root
     property string contentType: "video"
+    contentWidth: parent.width
 
     Content {
         id: content
@@ -51,13 +52,12 @@ Scene {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 100
-            rightMargin: 140
+            margins: 10
             bottom: parent.bottom
         }
         duration: content.contentItem() ? content.contentItem().duration : 0
         playPosition: content.contentItem() ? content.contentItem().position : 0
-        onSeekPositionChanged: { content.contentItem().seek(seekPosition); }
+        onSeekPositionChanged: content.contentItem().seek(seekPosition);
     }
 
     Component.onCompleted: root.content = content
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
index c2c15439f..96acb4bc4 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
@@ -35,22 +35,21 @@ import QtQuick 2.0
 
 Rectangle {
     id: root
-    width: 640
-    height: 360
+    anchors.fill: parent
     color: "black"
 
     property string source1
     property string source2
-    property color bgColor: "#002244"
+    property color bgColor: "black"
     property real volume: 0.25
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false
 
     QtObject {
         id: d
-        property int itemHeight: 40
+        property int itemHeight: root.height > root.width ? root.width / 10 : root.height / 10
         property int buttonHeight: 0.8 * itemHeight
-        property int margins: 10
+        property int margins: 5
     }
 
     Loader {
@@ -92,6 +91,9 @@ Rectangle {
                 right: exitButton.left
                 margins: d.margins
             }
+            bgColor: "#212121"
+            bgColorSelected: "#757575"
+            textColorSelected: "white"
             height: d.buttonHeight
             text: (root.source1 == "") ? "Select file 1" : root.source1
             onClicked: fileBrowser1.show()
@@ -105,6 +107,9 @@ Rectangle {
                 right: exitButton.left
                 margins: d.margins
             }
+            bgColor: "#212121"
+            bgColorSelected: "#757575"
+            textColorSelected: "white"
             height: d.buttonHeight
             text: (root.source2 == "") ? "Select file 2" : root.source2
             onClicked: fileBrowser2.show()
@@ -117,24 +122,57 @@ Rectangle {
                 right: parent.right
                 margins: d.margins
             }
-            width: 50
+            bgColor: "#212121"
+            bgColorSelected: "#757575"
+            textColorSelected: "white"
+            width: parent.width / 10
             height: d.buttonHeight
             text: "Exit"
             onClicked: Qt.quit()
         }
 
+        Row {
+            id: modes
+            anchors.top: openFile2Button.bottom
+            anchors.margins: 0
+            anchors.topMargin: 5
+            Button {
+                width: root.width / 2
+                height: 0.8 * d.itemHeight
+                bgColor: "#212121"
+                radius: 0
+                text: "Video Modes"
+                enabled: false
+            }
+            Button {
+                width: root.width / 2
+                height: 0.8 * d.itemHeight
+                bgColor: "#212121"
+                radius: 0
+                text: "Camera Modes"
+                enabled: false
+            }
+        }
+
+        Rectangle {
+            id: divider
+            height: 1
+            width: parent.width
+            color: "black"
+            anchors.top: modes.bottom
+        }
+
         SceneSelectionPanel {
             id: sceneSelectionPanel
             itemHeight: d.itemHeight
-            color: "#004444"
+            color: "#212121"
             anchors {
-                top: openFile2Button.bottom
+                top: divider.bottom
                 left: parent.left
                 right: parent.right
                 bottom: parent.bottom
-                margins: d.margins
             }
-            radius: 10
+            radius: 0
             onSceneSourceChanged: {
                 sceneLoader.source = sceneSource
                 var scene = null
@@ -205,7 +243,9 @@ Rectangle {
 
     ErrorDialog {
         id: errorDialog
-        anchors.fill: parent
+        anchors.fill: root
+        dialogWidth: d.itemHeight * 5
+        dialogHeight: d.itemHeight * 3
         enabled: false
     }
 
diff --git a/examples/multimedia/video/qmlvideo/qmlvideo.qrc b/examples/multimedia/video/qmlvideo/qmlvideo.qrc
index 9471eb6b7..6418215d0 100644
--- a/examples/multimedia/video/qmlvideo/qmlvideo.qrc
+++ b/examples/multimedia/video/qmlvideo/qmlvideo.qrc
@@ -1,13 +1,8 @@
 <RCC>
     <qresource prefix="/">
         <file alias="leaves.jpg">images/leaves.jpg</file>
-        <file alias="close.png">images/close.png</file>
         <file alias="folder.png">images/folder.png</file>
-        <file alias="titlebar.png">images/titlebar.png</file>
-        <file alias="titlebar.sci">images/titlebar.sci</file>
         <file alias="up.png">images/up.png</file>
-        <file alias="progress_handle.svg">images/progress_handle.svg</file>
-        <file alias="progress_handle_pressed.svg">images/progress_handle_pressed.svg</file>
         <file>qml/qmlvideo/Button.qml</file>
         <file>qml/qmlvideo/CameraBasic.qml</file>
         <file>qml/qmlvideo/CameraDrag.qml</file>
diff --git a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentCamera.qml b/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentCamera.qml
deleted file mode 100644
index fcf43f4b6..000000000
--- a/examples/multimedia/video/qmlvideofx/qml/qmlvideofx/ContentCamera.qml
+++ /dev/null
@@ -1,43 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:LGPL21$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and Digia. For licensing terms and
-** conditions see http://qt.digia.com/licensing. For further information
-** use the contact form at http://qt.digia.com/contact-us.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU Lesser
-** General Public License version 2.1 or version 3 as published by the Free
-** Software Foundation and appearing in the file LICENSE.LGPLv21 and
-** LICENSE.LGPLv3 included in the packaging of this file. Please review the
-** following information to ensure the GNU Lesser General Public License
-** requirements will be met: https://www.gnu.org/licenses/lgpl.html and
-** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
-**
-** In addition, as a special exception, Digia gives you certain additional
-** rights. These rights are described in the Digia Qt LGPL Exception
-** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import QtMultimedia 5.0
-
-VideoOutput {
-    source: camera
-
-    Camera {
-        id: camera
-    }
-}
diff --git a/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc b/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
index f3ad27704..e7978e39f 100644
--- a/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
+++ b/examples/multimedia/video/qmlvideofx/qmlvideofx.qrc
@@ -3,7 +3,6 @@
         <file>images/qt-logo.png</file>
         <file>qml/qmlvideofx/Button.qml</file>
         <file>qml/qmlvideofx/Content.qml</file>
-        <file>qml/qmlvideofx/ContentCamera.qml</file>
         <file>qml/qmlvideofx/ContentImage.qml</file>
         <file>qml/qmlvideofx/ContentVideo.qml</file>
         <file>qml/qmlvideofx/Divider.qml</file>