Merge remote-tracking branch 'origin/5.11' into dev

* origin/5.11:

1ff81b4 Merge remote-tracking branch 'origin/5.9' into 5.11
3594ea2 Fix scaling, video path & focusing issues on mediaplayer demo
e81384c Remove confusing highlighting on media player file browser
4aa85d7 Use QSettings for color definitions
a60eb67 Disable graphical effect from imx7 boards
83bffe9 Move color definitions to QSettings
57bc95f Fix qtquickcontrols2 demo image paths & controls theme
a5ba671 Doc: Bump version to 5.11.2
1510d96 Doc: bump version to 5.9.7
cc9de37 Fix mediaplayer slider color definitions
c20966f Move info button to mediaplayer-demo footer
0b0d77e Fix mediaplayer color definitions
a607978 Update Boot2Qt Launcher demo icons & doc images
773a661 Disable webbrowser demo from all imx7 boards
9f18bb7 Doc: Bump version to 5.11.1
4fa8854 Doc: remove outdate doc folder under qtquickcontrols2 example
054a2ea doc: add missing doc images for e-bike & quickcontrols2 demo
173d934 Update Boot2Qt demos appearing in QtCreator
a70868f Enable ebike demo
6ed3d30 Temporarily disable e-bike from the basicsuite demo set
28e9fdf Fix Media Player demo color definitions
6b5a6d0 Fix paths for demos.xml
783ca94 Doc: bump version to 5.9.6
d083365 Add new Ebike demo to basicsuite
da60352 Move common definitions to shared settings
e513aed Update QtWebBrowser demo to new UI theme
f5c4c3a Remove qtwebbrowser submodule
3fa5796 Replace existing controls demos with controls 2 gallery example
04e4798 Update Mediaplayer demo to new UI theme
2e8942f Update GraphicalEffects demo to new UI theme
e365074 Add new fonts
7c41444 Update Charts demo to new UI theme
2a50d49 Comment out 7 demos from demos.xml file
9e941af Doc: Bump version to 5.9.5
0909f9b Doc: Bump version to 5.11.0
55fee3b Doc: Bump version to 5.9.4
89033ce Doc: Bump version to 5.9.3

Change-Id: I17ac5f2e2ef94535458b07cf8db38688e25ca21c

38 files changed, 367 insertions, 355 deletions

diff --git a/basicsuite/mediaplayer/Content.qml b/basicsuite/mediaplayer/Content.qml
index 00ad381..00ad381 100755..100644
--- a/basicsuite/mediaplayer/Content.qml
+++ b/basicsuite/mediaplayer/Content.qml
diff --git a/basicsuite/mediaplayer/ContentVideo.qml b/basicsuite/mediaplayer/ContentVideo.qml
index 90cf21c..90cf21c 100755..100644
--- a/basicsuite/mediaplayer/ContentVideo.qml
+++ b/basicsuite/mediaplayer/ContentVideo.qml
diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml
index 05d253e..cdf27f2 100755..100644
--- a/basicsuite/mediaplayer/ControlBar.qml
+++ b/basicsuite/mediaplayer/ControlBar.qml
@@ -53,8 +53,8 @@ import QtMultimedia 5.0
 
 Rectangle {
     id: controlBar
-    height: 150
-    color: "#88333333"
+    height: parent.height * 0.225
+    color: _backgroundColor
 
     property MediaPlayer mediaPlayer: null
     property bool isMouseAbove: false
@@ -73,13 +73,13 @@ Rectangle {
         volumeControl.volume = mediaPlayer.volume;
     }
 
-//    MouseArea {
-//        anchors.fill: controlBar
-//        hoverEnabled: true
+    MouseArea {
+        anchors.fill: controlBar
+        hoverEnabled: true
 
-//        onEntered: controlBar.isMouseAbove = true;
-//        onExited: controlBar.isMouseAbove = false;
-//    }
+        onEntered: controlBar.isMouseAbove = true;
+        onExited: controlBar.isMouseAbove = false;
+    }
 
     function statusString(stat)
     {
@@ -103,48 +103,12 @@ Rectangle {
             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
+        anchors.left: controlBar.left
+        anchors.top: controlBar.top
+        anchors.bottom: controlBar.bottom
 
         onPlayButtonPressed: {
             if (isPlaying) {
@@ -171,14 +135,37 @@ Rectangle {
         onStopButtonPressed: mediaPlayer.stop();
     }
 
+    //Seek controls
+    SeekControl {
+        id: seekControl
+        anchors.bottom: controlBar.bottom
+        anchors.bottomMargin: controlBar.height * 0.1
+        anchors.right: volumeControl.left
+        anchors.left: playbackControl.right
+        anchors.rightMargin: 15
+        anchors.leftMargin: 15
+        enabled: playbackControl.isPlaybackEnabled
+
+        duration: mediaPlayer.duration
+
+        onSeekValueChanged: {
+            mediaPlayer.seek(newPosition);
+            position = mediaPlayer.position;
+        }
+
+        Component.onCompleted: {
+            seekable = mediaPlayer.seekable;
+        }
+    }
+
     //Toolbar Controls
     Row {
         id: toolbarMenuButtons
-        anchors.right: controlBar.right
+        anchors.right: volumeControl.left
         anchors.rightMargin: 15
-        anchors.verticalCenter: playbackControl.verticalCenter
-        spacing: 22
-
+        anchors.bottom: seekControl.top
+        spacing: itemMargin
+        height: parent.height * 0.275
         ImageButton {
             id: fxButton
             imageSource: "images/FXButton.png"
@@ -191,6 +178,7 @@ Rectangle {
         ImageButton {
             id: fileButton
             imageSource: "images/FileButton.png"
+
             onClicked: {
                 openFile();
             }
@@ -198,47 +186,29 @@ Rectangle {
         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
-//    }
+        ImageButton{
+            id: infoButton
 
-    //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;
+            imageSource: "images/info_icon.svg"
+            onClicked: metadataView.opacity = 1
+            visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && content.videoPlayer.mediaPlayer.status !== MediaPlayer.InvalidMedia
         }
+    }
 
-        Component.onCompleted: {
-            seekable = mediaPlayer.seekable;
+    VolumeControl {
+        id: volumeControl
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        onVolumeChanged: mediaPlayer.volume = volume
+
+        Connections {
+            target: mediaPlayer
+            onVolumeChanged: volumeControl.volume = mediaPlayer.volume
         }
     }
 
@@ -264,7 +234,6 @@ Rectangle {
         }
 
         onSeekableChanged: {
-            // console.log("seekableChanged: " + mediaPlayer.seekable);
             seekControl.seekable = mediaPlayer.seekable;
         }
     }
diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml
index 4f29f50..9aee910 100755..100644
--- a/basicsuite/mediaplayer/EffectSelectionPanel.qml
+++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml
@@ -51,8 +51,7 @@ import QtQuick 2.0
 
 Rectangle {
     id: root
-    color: "#BB333333"
-    height: 78
+    color: _backgroundColor
     property int itemHeight: 25
     property string effectSource: ""
     property bool isMouseAbove: mouseAboveMonitor.containsMouse
@@ -76,14 +75,14 @@ Rectangle {
         ListElement { name: "Glow"; source: "Effects/EffectGlow.qml" }
         ListElement { name: "Isolate"; source: "Effects/EffectIsolate.qml" }
         //ListElement { name: "Magnify"; source: "Effects/EffectMagnify.qml" }
-//        ListElement { name: "Page curl"; source: "Effects/EffectPageCurl.qml" }
+        //        ListElement { name: "Page curl"; source: "Effects/EffectPageCurl.qml" }
         ListElement { name: "Pixelate"; source: "Effects/EffectPixelate.qml" }
         ListElement { name: "Posterize"; source: "Effects/EffectPosterize.qml" }
-//        ListElement { name: "Ripple"; source: "Effects/EffectRipple.qml" }
+        //        ListElement { name: "Ripple"; source: "Effects/EffectRipple.qml" }
         ListElement { name: "Sepia"; source: "Effects/EffectSepia.qml" }
         ListElement { name: "Sharpen"; source: "Effects/EffectSharpen.qml" }
         ListElement { name: "Shockwave"; source: "Effects/EffectShockwave.qml" }
-//        ListElement { name: "Tilt shift"; source: "Effects/EffectTiltShift.qml" }
+        //        ListElement { name: "Tilt shift"; source: "Effects/EffectTiltShift.qml" }
         ListElement { name: "Toon"; source: "Effects/EffectToon.qml" }
         ListElement { name: "Warhol"; source: "Effects/EffectWarhol.qml" }
         ListElement { name: "Wobble"; source: "Effects/EffectWobble.qml" }
@@ -104,6 +103,7 @@ Rectangle {
                 height: 0.8 * itemHeight
                 text: name
                 color: "white"
+                font.family: appFont
             }
 
             states: [
@@ -140,7 +140,7 @@ Rectangle {
         id: list
         anchors.fill: parent
         clip: true
-        anchors.margins: 14
+        anchors.margins: itemMargin
         model: sources
         focus: root.visible && root.opacity && urlBar.opacity === 0
 
@@ -153,18 +153,20 @@ Rectangle {
         }
 
         delegate: Item {
-            height: 40
+            height: itemHeight
             width: parent.width
-            Rectangle {
+            property bool isSelected: list.currentIndex == index
+            Text {
+                color: parent.isSelected ? _primaryGreen : "white"
+                text: name
+                anchors.centerIn: parent
+                font.pixelSize: defaultFontSize
+                font.family: appFont
+                font.styleName: parent.isSelected ? "Bold" : "Regular"
+            }
+            MouseArea {
                 anchors.fill: parent
-                border.color: index == list.currentIndex ? "#44ffffff" : "transparent"
-                color: index == list.currentIndex ? "#22ffffff" : "transparent"
-                radius: 3
-                Text { color: "white" ; text: name ; anchors.centerIn: parent; font.pixelSize: 20  }
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked:  list.currentIndex = index
-                }
+                onClicked:  list.currentIndex = index
             }
         }
     }
diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml
index 5ffe130..a111177 100644
--- a/basicsuite/mediaplayer/FileBrowser.qml
+++ b/basicsuite/mediaplayer/FileBrowser.qml
@@ -50,11 +50,12 @@
 import QtQuick 2.0
 import Qt.labs.folderlistmodel 2.0
 import QtQuick.Controls 1.4
+import QtDeviceUtilities.QtButtonImageProvider 1.0
 
 Item {
     id: fileBrowser
 
-    property string folder: "file:///data/videos"
+    property string folder: VideosLocation
 
     signal fileSelected(string file)
 
@@ -77,7 +78,7 @@ Item {
 
         Rectangle {
             id: root
-            color: "white"
+            color: _backgroundColor
             property alias folder: folders.folder
 
             FolderListModel {
@@ -110,7 +111,8 @@ Item {
                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         text: fileName
                         font.pixelSize: parent.height * .1
-                        color: view.currentIndex === index ? "#80c342" : "#46484a"
+                        font.family: appFont
+                        color: mouseRegion.pressed ? _primaryGreen : "white"
                         elide: Text.ElideRight
                     }
 
@@ -182,16 +184,17 @@ Item {
             Rectangle {
                 width: parent.width;
                 height: 70
-                color: "#f6f6f6"
+                color: _backgroundColor
                 id: titleBar
 
-                Button {
+                QtButton {
                     id: backButton
                     text: qsTr("Back")
                     anchors.left: parent.left
                     anchors.leftMargin: parent.width * .05
                     anchors.verticalCenter: parent.verticalCenter
                     onClicked: up()
+                    fillColor: _primaryGreen
                 }
 
                 Text {
@@ -203,28 +206,28 @@ Item {
                     anchors.bottom: parent.bottom
 
                     text: String(folders.folder).replace("file://", "")
-                    color: "#46484a"
+                    color: "white"
                     elide: Text.ElideLeft
                     verticalAlignment: Text.AlignVCenter
                     font.pixelSize: backButton.height * .8
+                    font.family: appFont
                 }
 
-                Button {
+                QtButton {
                     id: cancelButton
                     text: qsTr("Cancel")
-                    checkable: true
-                    checked: true
                     anchors.right: parent.right
                     anchors.rightMargin: parent.width * .05
                     anchors.verticalCenter: parent.verticalCenter
                     onClicked: fileBrowser.selectFile("")
+                    fillColor: _primaryGreen
                 }
 
                 Rectangle {
                     width: parent.width
                     anchors.bottom: parent.bottom
                     height: 2
-                    color: "#e4e4e4"
+                    color: _primaryGrey
                 }
             }
 
diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml
index 31bd315..66888ef 100755..100644
--- a/basicsuite/mediaplayer/ImageButton.qml
+++ b/basicsuite/mediaplayer/ImageButton.qml
@@ -49,6 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 
 Item {
     id: root
@@ -73,15 +74,17 @@ Item {
         visible: true
         opacity: pressed ? 0.6 : 1
         smooth: true
+        height: toolbarMenuButtons.height
+        width: height
     }
 
-//    ColorOverlay {
-//        id: glowEffect
-//        anchors.fill: image
-//        source: image
-//        color: pressed ? "#22000000" : checked ? "orange" : "white"
-//        visible: checked || hover || pressed
-//    }
+    ColorOverlay {
+        id: glowEffect
+        anchors.fill: image
+        source: image
+        color: pressed ? "#22000000" : checked ? _primaryGreen : "white"
+        visible: checked || hover || pressed
+    }
 
     MouseArea {
         id: mouseArea
diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml
index e85df5e..34b53b4 100644
--- a/basicsuite/mediaplayer/MetadataView.qml
+++ b/basicsuite/mediaplayer/MetadataView.qml
@@ -48,6 +48,7 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtMultimedia 5.0
 
 Rectangle {
     id: root
@@ -62,10 +63,12 @@ Rectangle {
     Rectangle {
         height: column.height + 30
         width: 500
-        color: "#BB222222"
+        color: _backgroundColor
+        opacity: 0.9
         anchors.centerIn: parent
         anchors.verticalCenterOffset: -50
-
+        border.color: _primaryGrey
+        border.width: 2
 
         Column {
             id: column
@@ -80,6 +83,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.mediaType !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -88,6 +92,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.title !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -96,6 +101,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.leadPerformer !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -104,6 +110,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.contributingArtist !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -112,6 +119,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.albumTitle !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -120,6 +128,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.albumArtist !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -128,6 +137,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.author !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -136,6 +146,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.composer !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -144,6 +155,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.writer !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -152,6 +164,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.genre !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -160,6 +173,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.trackNumber !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -168,6 +182,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.year !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -176,6 +191,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.duration !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -184,6 +200,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.resolution !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -192,6 +209,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.audioBitRate !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -200,6 +218,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.videoBitRate !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
@@ -208,6 +227,7 @@ Rectangle {
                 visible: mediaPlayer && mediaPlayer.metaData.date !== undefined
                 color: "white"
                 font.pixelSize: 24
+                font.family: appFont
                 width: parent.width
                 wrapMode: Text.WordWrap
             }
diff --git a/basicsuite/mediaplayer/ParameterPanel.qml b/basicsuite/mediaplayer/ParameterPanel.qml
index bc6a73e..b67381a 100644
--- a/basicsuite/mediaplayer/ParameterPanel.qml
+++ b/basicsuite/mediaplayer/ParameterPanel.qml
@@ -51,11 +51,10 @@ import QtQuick 2.0
 
 Rectangle {
     id: root
-    height: view.model.count * sliderHeight
-    color: "#BB333333"
+    color: _backgroundColor
     property color lineColor: "black"
     property real spacing: 10
-    property real sliderHeight: 50
+    property real sliderHeight: height * 0.4
     property bool isMouseAbove: mouseAboveMonitor.containsMouse
 
     property ListModel model: ListModel { }
@@ -82,24 +81,26 @@ Rectangle {
                 anchors {
                     top: parent.top
                     bottom: parent.bottom
-                    leftMargin: 15
+                    leftMargin: itemMargin
                     left: parent.left
                 }
                 horizontalAlignment: Text.AlignRight
                 verticalAlignment: Text.AlignVCenter
-                font.pixelSize: 20
+                font.pixelSize: defaultFontSize
                 font.capitalization: Font.Capitalize
-                width: 90
+                font.family: appFont
+                width: root.width * 0.2
+                fontSizeMode: Text.Fit
             }
 
-            Slider {
+            PlayerSlider {
                 anchors {
                     verticalCenter: text.verticalCenter
                     verticalCenterOffset: 3
                     left: text.right
-                    leftMargin: 20
+                    leftMargin: itemMargin
                     right: parent.right
-                    rightMargin: 20
+                    rightMargin: itemMargin
                 }
                 value: model.value
                 onValueChanged: view.model.setProperty(index, "value", value)
diff --git a/basicsuite/mediaplayer/PlaybackControl.qml b/basicsuite/mediaplayer/PlaybackControl.qml
index 66c1c92..99b1d5c 100755..100644
--- a/basicsuite/mediaplayer/PlaybackControl.qml
+++ b/basicsuite/mediaplayer/PlaybackControl.qml
@@ -49,11 +49,13 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtDeviceUtilities.QtButtonImageProvider 1.0
 
 Row {
+    anchors.leftMargin: parent.width * 0.02
     id: root
-    spacing: 26
-    height: playButton.height
+    spacing: parent.width * 0.02
+    height: parent.height
 
     property bool isPlaybackEnabled: false
     property bool isPlaying: false
@@ -64,46 +66,42 @@ Row {
     signal stopButtonPressed()
 
     //Playback Controls
-    ImageButton {
-        id: rateReverseButton
-        enabled: isPlaybackEnabled
-        imageSource: "images/RateButtonReverse.png"
-        anchors.verticalCenter: root.verticalCenter
-        onClicked: {
-            reverseButtonPressed();
+    QtButton{
+        id: playPauseButton
+        width: controlBar.width * 0.06
+        height: width
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: root.spacing
+        fillColor: _primaryGreen
+        Image{
+            anchors.centerIn: parent
+            width: parent.width * 0.5
+            height: width
+            source: !isPlaying ? "images/play_icon.svg" : "images/pause_icon.svg"
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
         }
-    }
-    ImageButton {
-        id: playButton
-        enabled: isPlaybackEnabled
-        imageSource: !isPlaying ? "images/PlayButton.png" : "images/PauseButton.png"
-        anchors.verticalCenter: root.verticalCenter
-//        anchors.right: rateForwardButton.left
-//        anchors.rightMargin: 10
         onClicked: {
             playButtonPressed();
         }
     }
-//    Rectangle{
-//        enabled: isPlaybackEnabled
-//        color: "white"
-//        opacity: enabled ? 1 : 0.3
-//        width: playButton.width
-//        height: width
-//        anchors.verticalCenter: root.verticalCenter
-//        MouseArea {
-//            anchors.fill: parent
-//            onClicked: stopButtonPressed();
-//        }
-//    }
-
-    ImageButton {
-        id: rateForwardButton
-        enabled: isPlaybackEnabled
-        imageSource: "images/RateButtonForward.png"
-        anchors.verticalCenter: root.verticalCenter
+    QtButton{
+        id: stopButton
+        width: controlBar.width * 0.06
+        height: width
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: root.spacing
+        fillColor: _primaryGreen
+        Image{
+            anchors.centerIn: parent
+            width: parent.width * 0.5
+            height: width
+            source: "images/stop_icon.svg"
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+        }
         onClicked: {
-            forwardButtonPressed();
+            stopButtonPressed();
         }
     }
 }
diff --git a/basicsuite/mediaplayer/Slider.qml b/basicsuite/mediaplayer/PlayerSlider.qml
index 0cacbc7..0ec52b5 100644
--- a/basicsuite/mediaplayer/Slider.qml
+++ b/basicsuite/mediaplayer/PlayerSlider.qml
@@ -51,8 +51,7 @@ import QtQuick 2.0
 
 Item {
     id: slider
-
-    height: handleBack.height
+    height: handle.height
     // value is read/write.
     property real value: 0
     property real maximum: 1
@@ -81,8 +80,9 @@ Item {
         id: background
         width: slider.width
         anchors.verticalCenter: slider.verticalCenter
-        height: 2
-        color: "#666666"
+        height: 5
+        color: _primaryGrey
+        radius: 2
 
         MouseArea {
             id: backgroundMouse
@@ -119,29 +119,19 @@ Item {
         anchors.right: handle.right
         anchors.rightMargin: handle.width / 2
         visible: slider.enabled
-        color: "#98c66c"
+        color: "white"
+        radius: 2
     }
 
     Rectangle {
-        id: handleBack
+        id: handle
         width: 40
         height: width
         radius: width / 2
-        color: "#8898c66c"
+        color: _primaryGreen
         antialiasing: true
         anchors.centerIn: handle
-        visible: handle.visible
-    }
-
-    Rectangle {
-        id: handle
-        width: 14
-        height: width
-        radius: width / 2
-        antialiasing: true
-        color: "#98c66c"
-        anchors.verticalCenter: background.verticalCenter
-        visible: slider.enabled
+        visible: true
     }
 }
 
diff --git a/basicsuite/mediaplayer/SeekControl.qml b/basicsuite/mediaplayer/SeekControl.qml
index a7ca93f..16987f7 100755..100644
--- a/basicsuite/mediaplayer/SeekControl.qml
+++ b/basicsuite/mediaplayer/SeekControl.qml
@@ -48,11 +48,11 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtQuick.Controls 2.2
 
 Item {
     id: root
-    height: seekSlider.height
-
+    height: parent.height * 0.5
     property int position: 0
     property int duration: 0
     property bool seekable: false
@@ -62,29 +62,15 @@ Item {
     signal seekValueChanged(int newPosition)
 
     onPositionChanged: {
-        elapsedText.text = formatTime(position);
         seekSlider.value = position;
     }
 
-    onDurationChanged: {
-        remainingText.text = formatTime(duration);
-    }
-
-    Text {
-        id: elapsedText
-        anchors.verticalCenter: seekSlider.verticalCenter
-        anchors.left: root.left
-        text: "00:00"
-        font.pixelSize: 20
-        color: "#cccccc"
-    }
-
-    Slider {
+    PlayerSlider {
         id: seekSlider
-        anchors.leftMargin: 30
-        anchors.rightMargin: 30
-        anchors.left: elapsedText.right
-        anchors.right: remainingText.left
+        anchors.leftMargin: parent.width * 0.02
+        anchors.rightMargin: parent.width * 0.02
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.verticalCenter: root.verticalCenter
         mutable: root.seekable
         enabled: root.enabled
@@ -98,15 +84,6 @@ Item {
         }
     }
 
-    Text {
-        id: remainingText
-        anchors.verticalCenter: seekSlider.verticalCenter
-        anchors.right: root.right
-        text: "00:00"
-        font.pixelSize: 20
-        color: "#cccccc"
-    }
-
     function formatTime(time) {
         time = time / 1000
         var hours = Math.floor(time / 3600);
diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml
index dbaa8d0..73e9cc5 100644
--- a/basicsuite/mediaplayer/UrlBar.qml
+++ b/basicsuite/mediaplayer/UrlBar.qml
@@ -48,6 +48,7 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtQuick.Controls 2.0
 
 Rectangle {
     id: root
@@ -76,54 +77,39 @@ Rectangle {
         text: "Enter URL"
         color: "white"
         font.pixelSize: 20
+        font.family: appFont
     }
 
-    BorderImage {
-        id: urlBar
-        source: "images/ControlBar.png"
-        border.top: 12
-        border.bottom: 12
-        border.left: 12
-        border.right: 12
+    TextField {
+        id: urlInput
         height: 70
-        anchors.centerIn: parent
-        anchors.verticalCenterOffset: -170
         width: 600
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.pixelSize: height * 0.45
+        color: "white"
+        text: ""
+        placeholderText: "http://"
+        font.family: appFont
+        font.styleName: "Light"
+        background: Rectangle {
+            color: _backgroundColor
+            opacity: 0.8
+            border.color: _primaryGrey
+            border.width: 2
+        }
+        onAccepted: root.urlAccepted(urlInput.text);
+    }
 
-        Rectangle {
+    Rectangle {
+        anchors.right: urlBar.left
+        anchors.rightMargin: 32
+        anchors.verticalCenter: urlBar.verticalCenter
+        height: 70
+        width: 70
+        color: _primaryGrey
+        MouseArea {
             anchors.fill: parent
-            anchors.margins: 16
-            color: "#66ffffff"
-            border.color: "#bbffffff"
-            radius: 2
-            antialiasing: true
-
-            TextInput {
-                id: urlInput
-                selectionColor: "#aaffffff"
-                selectedTextColor: "black"
-                selectByMouse: true
-                anchors.fill: parent
-                anchors.margins: 5
-                font.pixelSize: 24
-                color: "black"
-                text: "http://"
-                onAccepted: root.urlAccepted(urlInput.text);
-
-            }
+            onClicked: { urlInput.text = ""; urlInput.paste(); }
         }
     }
-
-//    Rectangle {
-//        anchors.right: urlBar.left
-//        anchors.rightMargin: 32
-//        anchors.verticalCenter: urlBar.verticalCenter
-//        height: 70
-//        width: 70
-//        color: "gray"
-//        MouseArea {
-//            anchors.fill: parent
-//            onClicked: { urlInput.text = ""; urlInput.paste(); }
-//        }
-//    }
 }
diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml
index f2bd427..ab8bec8 100755..100644
--- a/basicsuite/mediaplayer/VolumeControl.qml
+++ b/basicsuite/mediaplayer/VolumeControl.qml
@@ -49,46 +49,110 @@
 ****************************************************************************/
 
 import QtQuick 2.0
+import QtDeviceUtilities.QtButtonImageProvider 1.0
+import QtQuick.Controls 2.2
 
 Item {
     id: root
-    width: 210
-    height: volumeUp.height
-
+    width: parent.width * 0.1
+    height: parent.height
     property alias volume: volumeSlider.value
-
+    property bool muted: root.volume == 0.0
+    property bool volumeItemUp: volumeItem.y == (volumeItem.height + volumeItem.height * 0.05)
     //Volume Controls
-    ImageButton {
-        id: volumeDown
-        imageSource: "images/VolumeDown.png"
-        anchors.verticalCenter: root.verticalCenter
-        anchors.left: root.left
-        scale: 1.4
+    QtButton{
+        id: toggleVolumeButton
+        width: controlBar.width * 0.06
+        height: width
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: controlBar.width * 0.02
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillColor: _primaryGreen
+
+        Image{
+            anchors.centerIn: parent
+            width: parent.width * 0.5
+            height: width
+            source: !muted ? "images/volume_icon.svg" : "images/mute_icon.svg"
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+        }
         onClicked: {
-            root.volume = 0.0;
+            if (volumeItem.opacity == 0)
+                volumeItem.opacity = 1;
+            else if (volumeItem.opacity > 0)
+                volumeItem.opacity = 0;
+
+            if (volumeItem.y === 0)
+                volumeItem.y -= (volumeItem.height + itemMargin);
+            else if (volumeItem !== 0)
+                volumeItem.y = 0;
         }
     }
-    Slider {
-        id: volumeSlider
-        anchors.left: volumeDown.right
-        anchors.leftMargin: 22
-        anchors.rightMargin: 22
-        anchors.right: volumeUp.left
-        maximum: 1.0
-        minimum: 0.0
-        anchors.verticalCenter: root.verticalCenter
-        anchors.verticalCenterOffset: 1
-    }
 
-    ImageButton {
-        id: volumeUp
-        imageSource: "images/VolumeUp.png"
-        anchors.verticalCenter: root.verticalCenter
-        anchors.verticalCenterOffset: 1
-        anchors.right: root.right
-        scale: 1.4
-        onClicked: {
-            root.volume = 1.0
+    Item{
+        id: volumeItem
+        height: applicationWindow.height * 0.4
+        anchors.right: toggleVolumeButton.left //?
+        opacity: 0
+        y: 0
+        z: -1000
+        QtButton{
+            id: muteVolumeButton
+            width: controlBar.width * 0.06
+            height: width
+            anchors.bottom: parent.bottom
+            fillColor: _primaryGrey
+            borderColor: "transparent"
+            Image{
+                anchors.centerIn: parent
+                width: parent.width * 0.5
+                height: parent.height * 0.5
+                source: "images/mute_icon.svg"
+                sourceSize.width: parent.width
+                sourceSize.height: parent.height
+            }
+            onClicked: {
+                root.volume = 0.0
+            }
         }
+
+        Slider {
+            id: volumeSlider
+            anchors.bottom: muteVolumeButton.top
+            anchors.bottomMargin: itemMargin
+            anchors.top: parent.top
+            anchors.horizontalCenter: muteVolumeButton.horizontalCenter
+            orientation: Qt.Vertical
+
+            background: Rectangle{
+                id: sliderBackground
+                x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2
+                y: volumeSlider.bottomPadding
+                implicitWidth: 5
+                implicitHeight: 200
+                height: volumeSlider.availableHeight
+                width: implicitWidth
+                radius: 2
+                color: "white"
+                Rectangle{
+                    height: volumeSlider.visualPosition * parent.height
+                    width: parent.width
+                    color: _primaryGrey
+                    radius: 2
+                }
+            }
+            handle: Rectangle{
+                x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2
+                y: volumeSlider.bottomPadding + volumeSlider.visualPosition * (volumeSlider.availableHeight - height)
+                width: sliderBackground.width * 7
+                height: width
+                radius: height * 0.5
+                color: _primaryGreen
+            }
+        }
+
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+        Behavior on y { NumberAnimation { duration: 100 } }
     }
 }
diff --git a/basicsuite/mediaplayer/images/FullscreenButton.png b/basicsuite/mediaplayer/images/FullscreenButton.png
index 413872a..413872a 100755..100644
--- a/basicsuite/mediaplayer/images/FullscreenButton.png
+++ b/basicsuite/mediaplayer/images/FullscreenButton.png
diff --git a/basicsuite/mediaplayer/images/PlaybackSlider.png b/basicsuite/mediaplayer/images/PlaybackSlider.png
index 3716315..3716315 100755..100644
--- a/basicsuite/mediaplayer/images/PlaybackSlider.png
+++ b/basicsuite/mediaplayer/images/PlaybackSlider.png
diff --git a/basicsuite/mediaplayer/images/SliderHandle.png b/basicsuite/mediaplayer/images/SliderHandle.png
index 5206100..5206100 100755..100644
--- a/basicsuite/mediaplayer/images/SliderHandle.png
+++ b/basicsuite/mediaplayer/images/SliderHandle.png
diff --git a/basicsuite/mediaplayer/images/SliderProgress.png b/basicsuite/mediaplayer/images/SliderProgress.png
index e0efc87..e0efc87 100755..100644
--- a/basicsuite/mediaplayer/images/SliderProgress.png
+++ b/basicsuite/mediaplayer/images/SliderProgress.png
diff --git a/basicsuite/mediaplayer/images/VolumeDown.png b/basicsuite/mediaplayer/images/VolumeDown.png
index 60c626d..60c626d 100755..100644
--- a/basicsuite/mediaplayer/images/VolumeDown.png
+++ b/basicsuite/mediaplayer/images/VolumeDown.png
diff --git a/basicsuite/mediaplayer/images/VolumeUp.png b/basicsuite/mediaplayer/images/VolumeUp.png
index 886fde7..886fde7 100755..100644
--- a/basicsuite/mediaplayer/images/VolumeUp.png
+++ b/basicsuite/mediaplayer/images/VolumeUp.png
diff --git a/basicsuite/mediaplayer/images/back_icon.svg b/basicsuite/mediaplayer/images/back_icon.svg
new file mode 100644
index 0000000..6034bd7
--- /dev/null
+++ b/basicsuite/mediaplayer/images/back_icon.svg
@@ -0,0 +1 @@
+<svg id="back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>back_icon</title><path d="M26.57,43.5a2.61,2.61,0,0,1-2.1-1.06L10.74,24a2.62,2.62,0,0,1,0-3.12L25.06,1.56a2.62,2.62,0,1,1,4.2,3.12L16.1,22.4,28.67,39.32a2.62,2.62,0,0,1-2.1,4.18Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/bluetooth_icon.svg b/basicsuite/mediaplayer/images/bluetooth_icon.svg
new file mode 100644
index 0000000..5dfaa97
--- /dev/null
+++ b/basicsuite/mediaplayer/images/bluetooth_icon.svg
@@ -0,0 +1 @@
+<svg id="bluetooth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>bluetooth_icon</title><path d="M22.38,43.5a1.79,1.79,0,0,1-1.79-1.79V25.82l-9.08,7.86A1.79,1.79,0,1,1,9.18,31l10.37-9L9.1,13a1.79,1.79,0,0,1,2.34-2.7l9.16,7.92V2.29a1.79,1.79,0,0,1,3-1.35l11.34,9.81a1.79,1.79,0,0,1,0,2.7L25,22l9.88,8.55a1.79,1.79,0,0,1,0,2.7L23.55,43.06A1.79,1.79,0,0,1,22.38,43.5ZM24.17,26V37.81L31,31.9Zm0-19.8V18L31,12.1Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/close_icon.svg b/basicsuite/mediaplayer/images/close_icon.svg
new file mode 100644
index 0000000..c98fe51
--- /dev/null
+++ b/basicsuite/mediaplayer/images/close_icon.svg
@@ -0,0 +1 @@
+<svg id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>close_icon</title><path d="M25.5,22,42.09,4.78a2.52,2.52,0,1,0-3.64-3.5L22,18.36,5.55,1.27a2.53,2.53,0,0,0-3.64,3.5L18.49,22,1.91,39.22a2.53,2.53,0,0,0,3.64,3.5L22,25.64,38.45,42.73a2.52,2.52,0,1,0,3.64-3.5Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/header_toggle_icon.svg b/basicsuite/mediaplayer/images/header_toggle_icon.svg
new file mode 100644
index 0000000..06d0b6a
--- /dev/null
+++ b/basicsuite/mediaplayer/images/header_toggle_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>header_toggle_icon</title><g style="isolation:isolate"><g id="toggle"><g style="opacity:0.35000000000000003;mix-blend-mode:multiply"><polygon points="3.36 15 23.27 33 42.64 15 3.36 15" style="fill:none;stroke:#09102b;stroke-linejoin:round;stroke-width:2px"/></g><polygon points="2.36 13 22.27 31 41.64 13 2.36 13" style="fill:none;stroke:#fff;stroke-linejoin:round;stroke-width:2px"/></g></g></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/info_icon.svg b/basicsuite/mediaplayer/images/info_icon.svg
new file mode 100644
index 0000000..64d24c0
--- /dev/null
+++ b/basicsuite/mediaplayer/images/info_icon.svg
@@ -0,0 +1 @@
+<svg id="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>info_icon</title><path d="M21.86,15.59a2,2,0,0,1-1.33-.48A1.69,1.69,0,0,1,20,13.77a1.68,1.68,0,0,1,.56-1.3A1.91,1.91,0,0,1,21.86,12a1.93,1.93,0,0,1,1.28.46,1.65,1.65,0,0,1,.56,1.35,1.7,1.7,0,0,1-.54,1.34,1.88,1.88,0,0,1-1.29.48m1.83,3.83V30.14a2.39,2.39,0,0,1-.53,1.68,1.76,1.76,0,0,1-1.35.57,1.67,1.67,0,0,1-1.32-.58A2.47,2.47,0,0,1,20,30.14V19.53a2.38,2.38,0,0,1,.51-1.66,1.71,1.71,0,0,1,1.32-.56,1.78,1.78,0,0,1,1.35.56,2.16,2.16,0,0,1,.53,1.55" style="fill:#fff"/><path d="M21.89,43.5A21.5,21.5,0,0,1,6.7,6.8,21.5,21.5,0,0,1,37.11,37.2a21.38,21.38,0,0,1-15.21,6.3m0-39.35A17.85,17.85,0,0,0,9.28,34.62,17.85,17.85,0,1,0,34.52,9.38,17.73,17.73,0,0,0,21.9,4.15" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/language_icon.svg b/basicsuite/mediaplayer/images/language_icon.svg
new file mode 100644
index 0000000..f1235c5
--- /dev/null
+++ b/basicsuite/mediaplayer/images/language_icon.svg
@@ -0,0 +1 @@
+<svg id="language" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>language_icon</title><path d="M22,43.5A21.5,21.5,0,1,1,43.5,22,21.52,21.52,0,0,1,22,43.5ZM22,4.12A17.88,17.88,0,1,0,39.88,22,17.9,17.9,0,0,0,22,4.12Z" style="fill:#fff"/><path d="M22,42.6C15.22,42.6,9.7,33.36,9.7,22S15.22,1.41,22,1.41,34.29,10.64,34.29,22,28.78,42.6,22,42.6ZM22,3.22c-5.78,0-10.48,8.43-10.48,18.78S16.22,40.78,22,40.78,32.48,32.36,32.48,22,27.78,3.22,22,3.22Z" style="fill:#fff"/><path d="M22,42.6a.9.9,0,0,1-.91-.91V2.31A.9.9,0,0,1,22,1.41,20.59,20.59,0,0,1,22,42.6ZM22.9,3.24V40.76a18.78,18.78,0,0,0,0-37.53Z" style="fill:#fff"/><path d="M40.41,29.85H3.59a.91.91,0,0,1-.85-.59,20.37,20.37,0,0,1,0-14.52.91.91,0,0,1,.85-.59H40.41a.91.91,0,0,1,.85.59,20.34,20.34,0,0,1,0,14.52.91.91,0,0,1-.85.59ZM4.23,28H39.77a18.45,18.45,0,0,0,0-12.07H4.23A18.49,18.49,0,0,0,4.23,28Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/mute_icon.svg b/basicsuite/mediaplayer/images/mute_icon.svg
new file mode 100644
index 0000000..2ffd61f
--- /dev/null
+++ b/basicsuite/mediaplayer/images/mute_icon.svg
@@ -0,0 +1 @@
+<svg id="mute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>mute_icon</title><path d="M17.92,40.48A2,2,0,0,1,16.68,40L7.59,32.77H2a2,2,0,0,1-2-2V13.22a2,2,0,0,1,2-2h5.6L16.68,4A2,2,0,0,1,19.9,5.5v33a2,2,0,0,1-2,2ZM4,28.8H8.29a2,2,0,0,1,1.24.44l6.41,5.13V9.64L9.52,14.77a2,2,0,0,1-1.24.44H4V28.8Z" style="fill:#fff"/><path d="M42,32.41a2,2,0,0,1-1.4-.58L23.77,15a2,2,0,0,1,2.81-2.81L43.42,29A2,2,0,0,1,42,32.41Z" style="fill:#fff"/><path d="M25.29,32.52a2,2,0,0,1-1.42-3.37L40.48,12.08a2,2,0,0,1,2.85,2.77L26.71,31.92a2,2,0,0,1-1.42.6Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/pause_icon.svg b/basicsuite/mediaplayer/images/pause_icon.svg
new file mode 100644
index 0000000..04000f9
--- /dev/null
+++ b/basicsuite/mediaplayer/images/pause_icon.svg
@@ -0,0 +1 @@
+<svg id="pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>pause_icon</title><path d="M15.51,43.5H9.76a4.65,4.65,0,0,1-4.64-4.64V5.14A4.65,4.65,0,0,1,9.76.5h5.75a4.65,4.65,0,0,1,4.64,4.64V38.86a4.65,4.65,0,0,1-4.64,4.64ZM9.76,4.55a.6.6,0,0,0-.59.59V38.86a.6.6,0,0,0,.59.59h5.75a.6.6,0,0,0,.59-.59V5.14a.6.6,0,0,0-.59-.59Z" style="fill:#fff"/><path d="M34.24,43.5H28.49a4.65,4.65,0,0,1-4.64-4.64V5.14A4.65,4.65,0,0,1,28.49.5h5.75a4.65,4.65,0,0,1,4.64,4.64V38.86a4.65,4.65,0,0,1-4.64,4.64ZM28.49,4.55a.6.6,0,0,0-.59.59V38.86a.6.6,0,0,0,.59.59h5.75a.6.6,0,0,0,.59-.59V5.14a.6.6,0,0,0-.59-.59Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/play_icon.svg b/basicsuite/mediaplayer/images/play_icon.svg
new file mode 100644
index 0000000..ab27771
--- /dev/null
+++ b/basicsuite/mediaplayer/images/play_icon.svg
@@ -0,0 +1 @@
+<svg id="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>play_icon</title><path d="M6.58,43.82c-2.4,0-4.08-1.91-4.08-4.65V4.83C2.5,2.09,4.18.18,6.58.18A5.29,5.29,0,0,1,9.22.95L39,18.12A4.56,4.56,0,0,1,41.5,22,4.56,4.56,0,0,1,39,25.88L9.22,43.05a5.28,5.28,0,0,1-2.65.77ZM6.64,4.28a5.24,5.24,0,0,0,0,.55V39.17a1.56,1.56,0,0,0,.08.55,1.74,1.74,0,0,0,.51-.21L36.92,22.33a1.61,1.61,0,0,0,.46-.36c-.06,0-.19-.16-.46-.31L7.18,4.49a1.6,1.6,0,0,0-.54-.22Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/power_icon.svg b/basicsuite/mediaplayer/images/power_icon.svg
new file mode 100644
index 0000000..b922c0e
--- /dev/null
+++ b/basicsuite/mediaplayer/images/power_icon.svg
@@ -0,0 +1 @@
+<svg id="power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>power_icon</title><path d="M22,17.4a1.82,1.82,0,0,1-1.82-1.82V2.3a1.82,1.82,0,0,1,3.65,0V15.57A1.82,1.82,0,0,1,22,17.4Z" style="fill:#fff"/><path d="M22,43.48A19.15,19.15,0,0,1,15.7,6.25,1.82,1.82,0,0,1,16.9,9.7a15.51,15.51,0,1,0,10.19,0,1.82,1.82,0,0,1,1.2-3.45A19.15,19.15,0,0,1,22,43.48Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/qt-logo.png b/basicsuite/mediaplayer/images/qt-logo.png
index f3e8f29..f3e8f29 100755..100644
--- a/basicsuite/mediaplayer/images/qt-logo.png
+++ b/basicsuite/mediaplayer/images/qt-logo.png
diff --git a/basicsuite/mediaplayer/images/settings_icon.svg b/basicsuite/mediaplayer/images/settings_icon.svg
new file mode 100644
index 0000000..7f5dbde
--- /dev/null
+++ b/basicsuite/mediaplayer/images/settings_icon.svg
@@ -0,0 +1 @@
+<svg id="settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>settings_icon</title><path d="M41,17.82H35a14.73,14.73,0,0,0-1.47-3.24l4-4a2.38,2.38,0,0,0,0-3.38L35.83,5.53a2.39,2.39,0,0,0-3.38,0l-4,4a14.34,14.34,0,0,0-3.53-1.43V2.89A2.39,2.39,0,0,0,22.49.5H20.1a2.39,2.39,0,0,0-2.39,2.39V8.14a14,14,0,0,0-3.84,1.61L10.49,6.37a2.4,2.4,0,0,0-3.38,0L5.42,8.06a2.4,2.4,0,0,0,0,3.38l3.44,3.44A14.24,14.24,0,0,0,7.28,19H2.79A2.39,2.39,0,0,0,.39,21.4v2.39a2.39,2.39,0,0,0,2.39,2.38h4.8a14,14,0,0,0,1.93,4L6.27,33.4a2.4,2.4,0,0,0,0,3.38L8,38.47a2.4,2.4,0,0,0,3.38,0L15,34.84a13.89,13.89,0,0,0,3.94,1.27v5A2.4,2.4,0,0,0,21.3,43.5h2.39a2.4,2.4,0,0,0,2.39-2.39V35.5a14,14,0,0,0,3.38-1.72l3.85,3.85a2.4,2.4,0,0,0,3.38,0l1.69-1.69a2.38,2.38,0,0,0,0-3.38l-4.21-4.22A14.15,14.15,0,0,0,35.31,25H41a2.39,2.39,0,0,0,2.39-2.39V20.21A2.4,2.4,0,0,0,41,17.82ZM21.3,31.5A9.5,9.5,0,1,1,30.8,22,9.5,9.5,0,0,1,21.3,31.5Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg b/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg
new file mode 100644
index 0000000..479a79f
--- /dev/null
+++ b/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg
@@ -0,0 +1 @@
+<svg id="settings_menu_launcher" data-name="settings menu launcher" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>settingsmenu_launcher_icon</title><rect y="1.86" width="44" height="9.43" style="fill:#9d9faa"/><rect y="17.57" width="44" height="9.43" style="fill:#9d9faa"/><rect y="33.29" width="44" height="7.86" style="fill:#9d9faa"/><rect y="1.86" width="44" height="9.43" style="fill:#9ca0aa"/><rect y="17.57" width="44" height="9.43" style="fill:#9ca0aa"/><rect y="33.29" width="44" height="7.86" style="fill:#9ca0aa"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/stop_icon.svg b/basicsuite/mediaplayer/images/stop_icon.svg
new file mode 100644
index 0000000..2eeff5f
--- /dev/null
+++ b/basicsuite/mediaplayer/images/stop_icon.svg
@@ -0,0 +1 @@
+<svg id="stop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>stop_icon</title><path d="M37.66,44H6.34A6.35,6.35,0,0,1,0,37.66V6.34A6.35,6.35,0,0,1,6.34,0H37.66A6.35,6.35,0,0,1,44,6.34V37.66A6.35,6.35,0,0,1,37.66,44ZM6.34,4.14a2.2,2.2,0,0,0-2.2,2.2V37.66a2.2,2.2,0,0,0,2.2,2.2H37.66a2.2,2.2,0,0,0,2.2-2.2V6.34a2.2,2.2,0,0,0-2.2-2.2Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/images/titlebar.sci b/basicsuite/mediaplayer/images/titlebar.sci
index 0418d94..0418d94 100755..100644
--- a/basicsuite/mediaplayer/images/titlebar.sci
+++ b/basicsuite/mediaplayer/images/titlebar.sci
diff --git a/basicsuite/mediaplayer/images/volume_icon.svg b/basicsuite/mediaplayer/images/volume_icon.svg
new file mode 100644
index 0000000..12f944e
--- /dev/null
+++ b/basicsuite/mediaplayer/images/volume_icon.svg
@@ -0,0 +1 @@
+<svg id="volume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>volume_icon</title><path d="M33.13,40.13a2,2,0,0,1-1.4-3.39,20.87,20.87,0,0,0,0-29.48,2,2,0,1,1,2.81-2.81,24.85,24.85,0,0,1,0,35.09,2,2,0,0,1-1.4.58Z" style="fill:#fff"/><path d="M27.38,34.38A2,2,0,0,1,26,31a12.72,12.72,0,0,0,0-18,2,2,0,0,1,2.81-2.81,16.69,16.69,0,0,1,0,23.59,2,2,0,0,1-1.4.58Z" style="fill:#fff"/><path d="M20.13,40.48A2,2,0,0,1,18.89,40L9.8,32.77H4.19a2,2,0,0,1-2-2V13.22a2,2,0,0,1,2-2h5.6L18.89,4A2,2,0,0,1,22.12,5.5v33a2,2,0,0,1-2,2ZM6.18,28.8h4.32a2,2,0,0,1,1.24.44l6.41,5.13V9.64l-6.42,5.14a2,2,0,0,1-1.24.44H6.18V28.8Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml
index d1667bf..741309d 100755..100644
--- a/basicsuite/mediaplayer/main.qml
+++ b/basicsuite/mediaplayer/main.qml
@@ -50,11 +50,16 @@
 
 import QtQuick 2.0
 import QtMultimedia 5.0
+import QtDeviceUtilities.QtButtonImageProvider 1.0
 
 FocusScope {
     id: applicationWindow
     focus: true
 
+    property real buttonHeight: height * 0.05
+    property real itemMargin: Math.min(width * 0.025, height * 0.025)
+    property real defaultFontSize: height * 0.0375
+
     MouseArea {
         id: mouseActivityMonitor
         anchors.fill: parent
@@ -114,42 +119,57 @@ FocusScope {
         onOpenFX: {
             applicationWindow.openFX();
         }
-
-        onToggleFullScreen: {
-//            viewer.toggleFullscreen();
-        }
     }
 
-    ParameterPanel {
-        id: parameterPanel
-        opacity: controlBar.opacity
-        visible: effectSelectionPanel.visible && model.count !== 0
-        height: 116
-        width: 500
+    Rectangle {
+        id: effectsWrapper
+        color: "transparent"
+        Behavior on opacity { NumberAnimation { } }
         anchors {
-            bottomMargin: 15
+            top: parent.top
             bottom: controlBar.top
-            right: effectSelectionPanel.left
-            rightMargin: 15
+            bottomMargin: itemMargin
+            right: parent.right
+            left: parent.left
         }
-    }
+        visible: opacity > 0
+        opacity: 0
 
-    EffectSelectionPanel {
-        id: effectSelectionPanel
-        visible: false
-        opacity: controlBar.opacity
-        anchors {
-            bottom: controlBar.top
-            right: controlBar.right
-            //            rightMargin: 15
-            bottomMargin: 15
+        ParameterPanel {
+            id: parameterPanel
+            opacity: controlBar.opacity * 0.9
+            visible: effectSelectionPanel.visible && model.count !== 0
+            height: parent.height * 0.15
+            width: parent.width * 0.4
+            anchors {
+                bottom: parent.bottom
+                right: effectSelectionPanel.left
+                rightMargin: itemMargin
+            }
+            z: 10
         }
-        width: 250
-        height: 350
-        itemHeight: 80
-        onEffectSourceChanged: {
-            content.effectSource = effectSource
-            parameterPanel.model = content.effect.parameters
+
+        EffectSelectionPanel {
+            id: effectSelectionPanel
+            opacity: controlBar.opacity * 0.9
+            width: parent.width * 0.225
+            height: parent.height * 0.7
+            anchors {
+                right: parent.right
+                bottom: parent.bottom
+            }
+            z: 10
+            onEffectSourceChanged: {
+                content.effectSource = effectSource
+                parameterPanel.model = content.effect.parameters
+            }
+            itemHeight: height / 8
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: effectsWrapper.opacity = 0
+            enabled: effectsWrapper.opacity !== 0
         }
     }
 
@@ -165,35 +185,6 @@ FocusScope {
         }
     }
 
-    Rectangle {
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.rightMargin: 32
-        anchors.topMargin: 32
-        width: 40
-        height: 40
-        radius: width / 2
-        color: infoMouser.pressed ? "#BB999999" : "#88444444"
-        antialiasing: true
-        visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && controlBar.state === "VISIBLE"
-
-        Text {
-            anchors.centerIn: parent
-            text: "i"
-            font.italic: true
-            font.bold: true
-            color: "white"
-            font.pixelSize: 28
-        }
-
-        MouseArea {
-            id: infoMouser
-            anchors.fill: parent
-            anchors.margins: -10
-            onClicked: metadataView.opacity = 1
-        }
-    }
-
     MetadataView {
         id: metadataView
         mediaPlayer: content.videoPlayer.mediaPlayer
@@ -223,7 +214,6 @@ FocusScope {
             openFX();
             return;
         } else if (event.key === Qt.Key_F && event.modifiers & Qt.ControlModifier) {
-//            viewer.toggleFullscreen();
             return;
         } else if (event.key === Qt.Key_Up || event.key === Qt.Key_VolumeUp) {
             content.videoPlayer.mediaPlayer.volume = Math.min(1, content.videoPlayer.mediaPlayer.volume + 0.1);
@@ -241,7 +231,6 @@ FocusScope {
             }
             return;
         } else if (applicationWindow.isFullScreen && event.key === Qt.Key_Escape) {
-//            viewer.toggleFullscreen();
             return;
         }
 
@@ -267,14 +256,10 @@ FocusScope {
 
     function init() {
         content.init()
-        content.openVideo("file:///data/videos/Qt_video_720p.webm");
+        content.openVideo(DefaultVideoUrl);
     }
 
     function openVideo() {
-        //videoFileBrowser.show()
-        //        var videoFile = viewer.openFileDialog();
-        //        if (videoFile != "")
-        //            content.openVideo(videoFile);
         fileBrowser.show()
     }
 
@@ -287,7 +272,7 @@ FocusScope {
     }
 
     function openFX() {
-        effectSelectionPanel.visible = !effectSelectionPanel.visible;
+        effectsWrapper.opacity = effectsWrapper.opacity === 0 ? 1 : 0
     }
 
     function close() {
diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro
index 4667caf..c56ba88 100644
--- a/basicsuite/mediaplayer/mediaplayer.pro
+++ b/basicsuite/mediaplayer/mediaplayer.pro
@@ -15,8 +15,8 @@ content.files = \
     MetadataView.qml \
     ParameterPanel.qml \
     PlaybackControl.qml \
+    PlayerSlider.qml \
     SeekControl.qml \
-    Slider.qml \
     UrlBar.qml \
     VolumeControl.qml \
     Effects \
diff --git a/basicsuite/mediaplayer/preview_l.jpg b/basicsuite/mediaplayer/preview_l.jpg
index f6cc262..98f528e 100644
--- a/basicsuite/mediaplayer/preview_l.jpg
+++ b/basicsuite/mediaplayer/preview_l.jpg