From c5cd05b60f1a6582b1b5b36f983c1d6d7f652cd2 Mon Sep 17 00:00:00 2001
From: Michael Zanetti <michael_zanetti@gmx.net>
Date: Fri, 30 Nov 2018 16:10:41 +0100
Subject: [PATCH] improve media view

---
 nymea-app/images.qrc                          |   6 +
 nymea-app/ui/devicepages/MediaDevicePage.qml  | 244 +++++++++++++++++-
 .../ui/images/media-playlist-repeat-one.svg   |  19 ++
 nymea-app/ui/images/media-playlist-repeat.svg |  18 ++
 .../ui/images/media-playlist-shuffle.svg      | 170 ++++++++++++
 nymea-app/ui/images/media-playlist.svg        | 193 ++++++++++++++
 nymea-app/ui/images/stock_music.svg           | 173 +++++++++++++
 nymea-app/ui/images/stock_video.svg           | 164 ++++++++++++
 8 files changed, 977 insertions(+), 10 deletions(-)
 create mode 100644 nymea-app/ui/images/media-playlist-repeat-one.svg
 create mode 100644 nymea-app/ui/images/media-playlist-repeat.svg
 create mode 100644 nymea-app/ui/images/media-playlist-shuffle.svg
 create mode 100644 nymea-app/ui/images/media-playlist.svg
 create mode 100644 nymea-app/ui/images/stock_music.svg
 create mode 100644 nymea-app/ui/images/stock_video.svg

diff --git a/nymea-app/images.qrc b/nymea-app/images.qrc
index a5c271a4..1bd386d1 100644
--- a/nymea-app/images.qrc
+++ b/nymea-app/images.qrc
@@ -161,5 +161,11 @@
         <file>ui/images/mqtt.svg</file>
         <file>ui/images/sensors/co2.svg</file>
         <file>ui/images/sensors/noise.svg</file>
+        <file>ui/images/media-playlist-repeat-one.svg</file>
+        <file>ui/images/media-playlist-repeat.svg</file>
+        <file>ui/images/media-playlist-shuffle.svg</file>
+        <file>ui/images/media-playlist.svg</file>
+        <file>ui/images/stock_music.svg</file>
+        <file>ui/images/stock_video.svg</file>
     </qresource>
 </RCC>
diff --git a/nymea-app/ui/devicepages/MediaDevicePage.qml b/nymea-app/ui/devicepages/MediaDevicePage.qml
index 58a4ba27..e68a017c 100644
--- a/nymea-app/ui/devicepages/MediaDevicePage.qml
+++ b/nymea-app/ui/devicepages/MediaDevicePage.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
 import QtQuick.Layouts 1.1
 import Nymea 1.0
 import "../components"
@@ -8,23 +9,246 @@ import "../customviews"
 DevicePageBase {
     id: root
 
-    ColumnLayout {
+    function stateValue(name) {
+        var stateType = root.deviceClass.stateTypes.findByName(name);
+        if (!stateType) return null
+        return root.device.states.getState(stateType.id).value
+    }
+
+    function executeAction(actionName, params) {
+        var actionTypeId = deviceClass.actionTypes.findByName(actionName).id;
+        print("executing", device, device.id, actionTypeId, actionName, deviceClass.actionTypes, params)
+        engine.deviceManager.executeAction(device.id, actionTypeId, params)
+    }
+
+    readonly property State playbackState: device.states.getState(deviceClass.stateTypes.findByName("playbackStatus").id)
+
+    GridLayout {
         id: contentColumn
         anchors.fill: parent
-        spacing: app.margins
+        anchors.margins: app.margins
+        columns: app.landscape ? 2 : 1
+        columnSpacing: app.margins
+        rowSpacing: app.margins
 
-        ExtendedVolumeController {
+        Pane {
             Layout.fillWidth: true
-            device: root.device
-            deviceClass: root.deviceClass
-//            visible: deviceClass.interfaces.indexOf("extendedvolumecontroller") >= 0
+            Layout.fillHeight: true
+            Material.elevation: 2
+            padding: 0
+
+            contentItem: Rectangle {
+                color: app.foregroundColor
+
+                Image {
+                    id: artworkImage
+                    anchors.fill: parent
+                    fillMode: Image.PreserveAspectFit
+                    source: root.stateValue("artwork")
+                }
+
+                ColorIcon {
+                    id: fallback
+                    anchors.fill: parent
+                    anchors.margins: app.margins * 2
+                    name: root.stateValue("playerType") === "video" ? "../images/stock_video.svg" : "../images/stock_music.svg"
+                    visible: artworkImage.status !== Image.Ready || artworkImage.source === ""
+                    color: app.primaryColor
+                }
+            }
         }
 
-        MediaControllerView {
+        ColumnLayout {
             Layout.fillWidth: true
-            device: root.device
-            deviceClass: root.deviceClass
-            visible: root.deviceClass.interfaces.indexOf("mediacontroller") >= 0
+            spacing: app.margins
+
+            Label {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+                maximumLineCount: 2
+                elide: Text.ElideRight
+                font.pixelSize: app.largeFont
+                font.bold: true
+                text: root.stateValue("title")
+            }
+            Label {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+                maximumLineCount: 2
+                elide: Text.ElideRight
+                text: root.stateValue("artist")
+            }
+            Label {
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+                maximumLineCount: 2
+                elide: Text.ElideRight
+                text: root.stateValue("collection")
+            }
+
+            RowLayout {
+                Layout.fillWidth: true
+                Item { Layout.fillWidth: true }
+
+                ItemDelegate {
+                    Layout.preferredHeight: app.iconSize
+                    Layout.preferredWidth: height
+                    leftPadding: 0; topPadding: 0; rightPadding: 0; bottomPadding: 0
+                    contentItem: ColorIcon {
+                        name: "../images/media-skip-backward.svg"
+                    }
+                    onClicked: {
+                        root.executeAction("skipBack")
+                    }
+                }
+
+                Item { Layout.fillWidth: true }
+                ItemDelegate {
+                    Layout.preferredHeight: app.iconSize * 2
+                    Layout.preferredWidth: height
+                    leftPadding: 0; topPadding: 0; rightPadding: 0; bottomPadding: 0
+                    contentItem: ColorIcon {
+                        name: root.playbackState.value === "Playing" ? "../images/media-playback-pause.svg" : "../images/media-playback-start.svg"
+                    }
+                    onClicked: {
+                        if (root,playbackState.value === "Playing") {
+                            root.executeAction("pause")
+                        } else {
+                            root.executeAction("play")
+                        }
+                    }
+                }
+                Item { Layout.fillWidth: true }
+                ItemDelegate {
+                    Layout.preferredHeight: app.iconSize
+                    Layout.preferredWidth: height
+                    leftPadding: 0; topPadding: 0; rightPadding: 0; bottomPadding: 0
+                    contentItem: ColorIcon {
+                        name: "../images/media-skip-forward.svg"
+                    }
+                    onClicked: {
+                        root.executeAction("skipNext")
+                    }
+                }
+                Item { Layout.fillWidth: true }
+            }
+        }
+    }
+
+    Component {
+        id: volumeSliderPaneComponent
+        Dialog {
+
+            leftPadding: 0
+            topPadding: app.margins / 2
+            rightPadding: 0
+            bottomPadding: app.margins / 2
+
+            contentItem: ColumnLayout {
+                Slider {
+                    Layout.fillHeight: true
+                    orientation: Qt.Vertical
+                    from: 0
+                    to: 100
+                    value: root.stateValue("volume")
+                    onMoved: {
+                        var params = []
+                        var volParam = {}
+                        volParam["paramTypeId"] = root.deviceClass.actionTypes.findByName("volume").id
+                        volParam["value"] = value;
+                        params.push(volParam)
+                        root.executeAction("volume", params);
+                    }
+                }
+                HeaderButton {
+                    imageSource: "../images/audio-speakers-muted-symbolic.svg"
+                    color: root.stateValue("mute") ? app.accentColor : keyColor
+                    onClicked: {
+                        var params = []
+                        var muteParam = {}
+                        muteParam["paramTypeId"] = root.deviceClass.actionTypes.findByName("mute").id
+                        muteParam["value"] = !root.stateValue("mute");
+                        params.push(muteParam)
+                        root.executeAction("mute", params);
+                    }
+                }
+            }
+        }
+    }
+
+    footer: Pane {
+        Material.elevation: 1
+        height: 50
+        padding: 0
+        contentItem: RowLayout {
+//            Item {
+//                Layout.fillWidth: true; Layout.fillHeight: true
+//                HeaderButton {
+//                    anchors.centerIn: parent
+//                    imageSource: "../images/media-playlist.svg"
+//                }
+//            }
+            Item {
+                Layout.fillWidth: true; Layout.fillHeight: true
+                visible: root.deviceClass.interfaces.indexOf("shufflerepeat") >= 0
+                HeaderButton {
+                    anchors.centerIn: parent
+                    imageSource: root.stateValue("repeat") === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg"
+                    color: root.stateValue("repeat") === "None" ? keyColor : app.accentColor
+                    property var allowedValues: ["None", "All", "One"]
+                    onClicked: {
+                        var params = []
+                        var param = {}
+                        param["paramTypeId"] = root.deviceClass.actionTypes.findByName("repeat").id;
+                        param["value"] = allowedValues[(allowedValues.indexOf(root.stateValue("repeat")) + 1) % 3]
+                        params.push(param)
+                        root.executeAction("repeat", params)
+                    }
+                }
+            }
+            Item {
+                Layout.fillWidth: true; Layout.fillHeight: true
+                visible: root.deviceClass.interfaces.indexOf("shufflerepeat") >= 0
+                HeaderButton {
+                    anchors.centerIn: parent
+                    imageSource: "../images/media-playlist-shuffle.svg"
+                    color: root.stateValue("shuffle") ? app.accentColor: keyColor
+                    onClicked: {
+                        var params = []
+                        var param = {}
+                        param["paramTypeId"] = root.deviceClass.actionTypes.findByName("shuffle").id;
+                        param["value"] = !root.stateValue("shuffle")
+                        params.push(param)
+                        root.executeAction("shuffle", params)
+                    }
+                }
+            }
+            Item {
+                id: volumeButtonContainer
+                Layout.fillWidth: true; Layout.fillHeight: true
+                HeaderButton {
+                    id: volumeButton
+                    anchors.centerIn: parent
+                    imageSource: "../images/audio-speakers-symbolic.svg"
+                    onClicked: {
+                        print("...");
+                        print(volumeButton.x, volumeButton.y)
+                        print(Qt.point(volumeButton.x, volumeButton.y))
+                        print(volumeButton.mapToItem(root, volumeButton.x,0))
+                        var buttonPosition = root.mapFromItem(volumeButtonContainer, volumeButton.x, 0)
+                        var sliderHeight = 200
+                        var props = {}
+                        props["x"] = buttonPosition.x
+                        props["y"] = root.height - sliderHeight - root.footer.height
+                        props["height"] = sliderHeight
+                        var sliderPane = volumeSliderPaneComponent.createObject(root, props)
+                        sliderPane.open()
+                    }
+                }
+            }
         }
     }
 }
diff --git a/nymea-app/ui/images/media-playlist-repeat-one.svg b/nymea-app/ui/images/media-playlist-repeat-one.svg
new file mode 100644
index 00000000..194ffb94
--- /dev/null
+++ b/nymea-app/ui/images/media-playlist-repeat-one.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg4874" width="96" height="96" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata id="metadata4879">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="layer1" transform="translate(67.857 -78.505)">
+  <rect id="rect4782-45" transform="rotate(90)" x="78.505" y="-28.143" width="96" height="96" style="color:#000000;fill:none"/>
+  <path id="path4174" d="m24.144 146.51c0 2.6304-0.23773 4.7117-0.8965 6.4662-0.65858 1.7545-1.8499 3.1599-3.3555 3.9906-3.0112 1.6614-6.6938 1.4842-11.727 1.5424h-0.01134-56.021-0.01134c-5.0327-0.0582-8.7153 0.11905-11.727-1.5424-1.5056-0.83071-2.6968-2.2361-3.3555-3.9906-0.65858-1.7545-0.89647-3.8358-0.89647-6.4662v-36.001c0-2.6304 0.23773-4.7117 0.89647-6.4662 0.65862-1.7545 1.8499-3.1599 3.3555-3.9906 3.0113-1.6614 6.6938-1.4842 11.727-1.5424h0.01134 16.08v3.9984h-16.047c-5.0542 0.0584-8.3709 0.23705-9.8379 1.0465-0.73353 0.40471-1.1527 0.85205-1.543 1.8918-0.39031 1.0398-0.64063 2.6928-0.64063 5.0624v36.001c0 2.3696 0.2502 4.0227 0.64063 5.0624 0.39031 1.0398 0.80946 1.4871 1.543 1.8918 1.4645 0.80804 4.7768 0.98773 9.8164 1.0465h0.02268 55.953 0.02268c5.0383-0.0588 8.3521-0.23856 9.8164-1.0465 0.73353-0.40471 1.1526-0.85205 1.543-1.8918 0.39035-1.0398 0.64063-2.6928 0.64063-5.0624v-36.001c0-2.3696-0.2502-4.0227-0.64063-5.0624-0.39031-1.0398-0.80942-1.4871-1.543-1.8918-1.4643-0.80792-4.7782-0.98769-9.8164-1.0465h-14.025v-3.9984h14.037 0.01134c5.0328 0.0582 8.7153-0.11906 11.727 1.5424 1.5056 0.83071 2.6969 2.2361 3.3555 3.9906 0.65862 1.7545 0.8965 3.8358 0.8965 6.4662v36.001z" style="color-rendering:auto;color:#000000;fill:#808080;font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:none;font-variant-numeric:normal;font-variant-position:normal;image-rendering:auto;isolation:auto;mix-blend-mode:normal;shape-padding:0;shape-rendering:auto;solid-color:#000000;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none;white-space:normal"/>
+  <path id="path5588-9-2-96" d="m-36.856 88.505 0.0076 24c3.6501-1.6688 7.366-3.5359 11.149-5.5987 3.7477-2.0678 7.3628-4.2005 10.843-6.4003-3.48-2.1557-7.0951-4.2681-10.843-6.3358-3.7853-2.0639-7.5033-3.9519-11.155-5.6652z" style="color:#000000;fill:#808080"/>
+  <text id="text4199" x="-20.479099" y="138.50511" style="fill:#808080;font-family:Ubuntu;font-size:33.062px;font-weight:500;letter-spacing:0px;line-height:125%;stroke-width:1px;text-align:center;text-anchor:middle;word-spacing:0px" xml:space="preserve"><tspan id="tspan4197" x="-20.479099" y="138.50511" style="fill:#808080;font-family:Ubuntu;font-weight:500;stroke-width:1px">1</tspan></text>
+ </g>
+</svg>
diff --git a/nymea-app/ui/images/media-playlist-repeat.svg b/nymea-app/ui/images/media-playlist-repeat.svg
new file mode 100644
index 00000000..54a2d0e4
--- /dev/null
+++ b/nymea-app/ui/images/media-playlist-repeat.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg4874" width="96" height="96" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata id="metadata4879">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="layer1" transform="translate(67.857 -78.505)">
+  <rect id="rect4782-45" transform="rotate(90)" x="78.505" y="-28.143" width="96" height="96" style="color:#000000;fill:none"/>
+  <path id="path4174" d="m24.144 146.51c0 2.6304-0.23773 4.7117-0.8965 6.4662-0.65858 1.7545-1.8499 3.1599-3.3555 3.9906-3.0112 1.6614-6.6938 1.4842-11.727 1.5424h-0.01134-56.021-0.01134c-5.0327-0.0582-8.7153 0.11905-11.727-1.5424-1.5056-0.83071-2.6968-2.2361-3.3555-3.9906-0.65858-1.7545-0.89647-3.8358-0.89647-6.4662v-36.001c0-2.6304 0.23773-4.7117 0.89647-6.4662 0.65862-1.7545 1.8499-3.1599 3.3555-3.9906 3.0113-1.6614 6.6938-1.4842 11.727-1.5424h0.01134 16.08v3.9984h-16.047c-5.0542 0.0584-8.3709 0.23705-9.8379 1.0465-0.73353 0.40471-1.1527 0.85205-1.543 1.8918-0.39031 1.0398-0.64063 2.6928-0.64063 5.0624v36.001c0 2.3696 0.2502 4.0227 0.64063 5.0624 0.39031 1.0398 0.80946 1.4871 1.543 1.8918 1.4645 0.80804 4.7768 0.98773 9.8164 1.0465h0.02268 55.953 0.02268c5.0383-0.0588 8.3521-0.23856 9.8164-1.0465 0.73353-0.40471 1.1526-0.85205 1.543-1.8918 0.39035-1.0398 0.64063-2.6928 0.64063-5.0624v-36.001c0-2.3696-0.2502-4.0227-0.64063-5.0624-0.39031-1.0398-0.80942-1.4871-1.543-1.8918-1.4643-0.80792-4.7782-0.98769-9.8164-1.0465h-14.025v-3.9984h14.037 0.01134c5.0328 0.0582 8.7153-0.11906 11.727 1.5424 1.5056 0.83071 2.6969 2.2361 3.3555 3.9906 0.65862 1.7545 0.8965 3.8358 0.8965 6.4662v36.001z" style="color-rendering:auto;color:#000000;fill:#808080;font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:none;font-variant-numeric:normal;font-variant-position:normal;image-rendering:auto;isolation:auto;mix-blend-mode:normal;shape-padding:0;shape-rendering:auto;solid-color:#000000;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none;white-space:normal"/>
+  <path id="path5588-9-2-96" d="m-36.856 88.505 0.0076 24c3.6501-1.6688 7.366-3.5359 11.149-5.5987 3.7477-2.0678 7.3628-4.2005 10.843-6.4003-3.48-2.1557-7.0951-4.2681-10.843-6.3358-3.7853-2.0639-7.5033-3.9519-11.155-5.6652z" style="color:#000000;fill:#808080"/>
+ </g>
+</svg>
diff --git a/nymea-app/ui/images/media-playlist-shuffle.svg b/nymea-app/ui/images/media-playlist-shuffle.svg
new file mode 100644
index 00000000..d16487d5
--- /dev/null
+++ b/nymea-app/ui/images/media-playlist-shuffle.svg
@@ -0,0 +1,170 @@
+<?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="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="media-playlist-shuffle.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.024999"
+     inkscape:cx="-53.950191"
+     inkscape:cy="59.266894"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-8.0000001"
+       id="guide4080"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="92,-8.0000001"
+       orientation="1,0"
+       id="guide4760"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <rect
+       transform="rotate(90)"
+       y="-28.142855"
+       x="78.505035"
+       height="96"
+       width="96.000008"
+       id="rect4782-46"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:3.99920893;marker:none;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4091"
+       d="m 4.1437794,108.46828 h -9.999987 c -9.9511944,0 -16.7903624,5.96531 -20.8007814,11.5872 -3.916536,5.49026 -5.471131,10.78724 -5.560554,11.09522 v -0.0488 l -0.07219,0.24405 c 0,0 -0.002,0.006 -0.002,0.006 l -0.0076,0.0215 v 0.002 c -7.93e-4,0.003 -1.397366,4.85818 -4.859376,9.7149 -3.434986,4.81881 -8.699565,9.44939 -16.699199,9.44939 h -9.999987 v -3.99837 h 10.000025 c 6.506834,0 10.382739,-3.48418 13.439432,-7.77231 2.907591,-4.07898 4.100674,-7.97507 4.197279,-8.29555 v -0.13277 l 0.191244,-0.38071 c 0.133417,-0.46228 1.817272,-6.20066 6.115238,-12.22563 4.494198,-6.30007 12.501278,-13.26429 24.0566544,-13.26429 h 9.999988 v 3.99842 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       id="path4205"
+       d="m -63.857139,106.46987 v 4 h 10.000025 c 6.506872,0 10.382739,3.48335 13.439432,7.77148 1.229632,1.72499 2.137701,3.39976 2.800781,4.80274 0.598677,-1.28367 1.35035,-2.72294 2.269531,-4.26758 -0.531477,-0.92988 -1.119799,-1.88646 -1.810545,-2.85547 -3.434986,-4.8188 -8.699527,-9.45117 -16.699199,-9.45117 z m 35.052736,27.09375 c -0.345827,0.98848 -0.976214,2.59679 -1.917959,4.49805 0.267968,0.40477 0.51685,0.80587 0.808592,1.21484 4.494198,6.30007 12.501278,13.26367 24.0566554,13.26367 h 9.999987 0.002 v -4 h -9.999987 c -9.9511944,0 -16.7903624,-5.96404 -20.8007814,-11.58593 -0.825411,-1.15706 -1.524472,-2.29576 -2.148472,-3.39063 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079107;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.99940658;marker:none;enable-background:accumulate"
+       d="m 2.1432374,94.505073 0.0076,24.000007 c 3.650079,-1.66876 7.365959,-3.53593 11.1492276,-5.59872 3.747742,-2.06778 7.362822,-4.20051 10.84286,-6.40027 -3.480038,-2.15574 -7.095118,-4.26806 -10.84286,-6.33583 C 9.5147174,98.106343 5.7967214,96.218363 2.1447144,94.505073 Z"
+       id="path5588-9-2-9"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5670"
+       d="m 2.1432374,138.50507 0.0076,24 c 3.650079,-1.66875 7.365959,-3.53592 11.1492276,-5.59871 3.747742,-2.06778 7.362822,-4.20052 10.84286,-6.40028 -3.480038,-2.15574 -7.095118,-4.26805 -10.84286,-6.33582 -3.7853476,-2.06392 -7.5033436,-3.9519 -11.1553506,-5.66519 z"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.99940658;marker:none;enable-background:accumulate" />
+  </g>
+</svg>
diff --git a/nymea-app/ui/images/media-playlist.svg b/nymea-app/ui/images/media-playlist.svg
new file mode 100644
index 00000000..3ab686d4
--- /dev/null
+++ b/nymea-app/ui/images/media-playlist.svg
@@ -0,0 +1,193 @@
+<?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="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="media-playlist.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.024999"
+     inkscape:cx="1.5729484"
+     inkscape:cy="43.174365"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="92,-8.0000001"
+       id="guide4075" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,12"
+       id="guide4078" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-9.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+             d="M 12 4 L 11.996094 60 C 11.996094 60 38.67204 48.520868 62 31.982422 C 62 31.978423 61.997094 31.973494 61.996094 31.966797 C 61.993094 31.962798 61.990375 31.954817 61.984375 31.949219 C 61.981375 31.94522 61.975256 31.935285 61.972656 31.929688 C 61.969656 31.925689 61.966797 31.91956 61.966797 31.914062 C 37.360487 14.848185 12 4 12 4 z M 16.052734 10.435547 C 22.210524 13.23248 36.461491 20.11424 54.519531 31.978516 C 37.108361 43.569719 22.328791 50.699781 16.050781 53.556641 L 16.052734 10.435547 z "
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="path4176" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+             d="m 388.43206,361.07316 c -0.12331,-0.0552 -0.008,-0.0131 -0.0996,-0.0586 a 4.0244714,4.0244712 0 0 1 -0.21883,-0.10547 c -0.002,-0.001 0.01,0.007 0.008,0.006 l 0.31067,0.15821 z"
+             id="path2194-5" />
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             id="rect4178"
+             width="8"
+             height="8.0031652"
+             x="-429.36221"
+             y="-353.96921"
+             transform="matrix(0,-1,-1,0,0,0)" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="m 347.9668,357.36133 0,56 4,0 0,-56 -4,0 z"
+             id="path4180"
+             inkscape:connector-curvature="0" />
+          <rect
+             transform="matrix(0,-1,-1,0,0,0)"
+             y="-369.97556"
+             x="-429.36221"
+             height="8.0031652"
+             width="8"
+             id="rect4182"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="m 363.97461,357.36133 0,56 4,0 0,-56 -4,0 z"
+             id="path4184"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/nymea-app/ui/images/stock_music.svg b/nymea-app/ui/images/stock_music.svg
new file mode 100644
index 00000000..b43bc37d
--- /dev/null
+++ b/nymea-app/ui/images/stock_music.svg
@@ -0,0 +1,173 @@
+<?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="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="stock_music.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8.7812488"
+     inkscape:cx="56.506765"
+     inkscape:cy="41.753728"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="false"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-8.0000001"
+       id="guide4080"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="92,-8.0000001"
+       orientation="1,0"
+       id="guide4760"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <path
+             inkscape:connector-curvature="0"
+             id="path4393"
+             d="m 434.94803,360.83478 c 0.0125,1.12499 -0.16349,2.62112 -0.46267,4.61114 l -5.32748,33.94069 c -1.70308,7.99492 -2.23261,7.99488 -8.98973,7.99488 h -13.23182 -42.13175 c 0.41314,0.58986 0.82896,1.17197 1.23767,1.78162 h -0.002 c 1.70285,2.54004 2.91458,5.24656 2.9146,8.88277 0,4.55464 -1.74495,7.27171 -4.04296,8.91596 -2.298,1.64421 -5.19476,2.18946 -7.43386,2.18946 -2.70005,0 -5.58147,-0.92217 -7.77745,-2.92125 -2.19598,-1.99908 -3.73443,-5.0725 -3.73449,-9.4916 0,-4.99015 1.39467,-8.50054 4.11712,-10.48487 2.14348,-1.56235 5.00648,-2.4256 8.53879,-2.73391 h 0.006 0.004 c 0.42854,-0.0432 0.86812,-0.0742 1.32161,-0.10147 0.69823,-0.0419 2.00489,-0.0332 2.00489,-0.0332 h 41.97951 c 5.99707,0 6.35516,3e-4 7.72278,-7.99684 l 3.95705,-25.9536 c 1.04913,-8.01156 0.3143,-8.01245 -4.1835,-8.01245 h -38.63347 c 0.41315,0.58987 0.82897,1.17198 1.23769,1.78163 h -0.002 c 1.70285,2.54004 2.91458,5.24655 2.91459,8.88277 0,4.55464 -1.74494,7.27171 -4.04294,8.91594 -2.29802,1.64423 -5.19477,2.18947 -7.43388,2.18947 -2.70004,0 -5.58147,-0.92217 -7.77745,-2.92125 -2.19598,-1.99909 -3.73442,-5.07248 -3.7345,-9.4916 0,-4.99014 1.39468,-8.50055 4.11714,-10.48486 2.14348,-1.56237 5.00647,-2.4256 8.53879,-2.73391 h 0.006 0.004 c 0.42856,-0.0432 0.86813,-0.0742 1.32163,-0.10148 0.69823,-0.0418 2.00488,-0.0331 2.00488,-0.0331 h 45.9775 11.97656 c 5.25982,0 7.00192,0.0341 7.03953,3.4091 z"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;display:inline;fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.33608699;enable-background:new" />
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/nymea-app/ui/images/stock_video.svg b/nymea-app/ui/images/stock_video.svg
new file mode 100644
index 00000000..56c5a4f4
--- /dev/null
+++ b/nymea-app/ui/images/stock_video.svg
@@ -0,0 +1,164 @@
+<?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="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="stock_video.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.024999"
+     inkscape:cx="32.83274"
+     inkscape:cy="55.067605"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="92,-8.0000001"
+       id="guide4075" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,12"
+       id="guide4078" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-9.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="M 4 11 L 4 85 L 8 85 L 8 81 L 16 81 L 16 81.001953 L 16 85 L 20 85 L 76 85 L 80 85 L 80 81.001953 L 80 81 L 88 81 L 88 85 L 92 85 L 92 11 L 88 11 L 88 15 L 80 15 L 80 14.998047 L 80 11 L 20 11 L 16 11 L 16 14.998047 L 16 15 L 8 15 L 8 11 L 4 11 z M 20 14.998047 L 76 14.998047 L 76 46 L 20 46 L 20 14.998047 z M 8 21 L 16 21 L 16 27 L 8 27 L 8 21 z M 80 21 L 88 21 L 88 27 L 80 27 L 80 21 z M 8 33 L 16 33 L 16 39 L 8 39 L 8 33 z M 80 33 L 88 33 L 88 39 L 80 39 L 80 33 z M 8 45 L 16 45 L 16 46 L 16 49.998047 L 16 51 L 8 51 L 8 45 z M 80 45 L 88 45 L 88 51 L 80 51 L 80 45 z M 20 49.998047 L 76 49.998047 L 76 81.001953 L 20 81.001953 L 20 49.998047 z M 8 57 L 16 57 L 16 63 L 8 63 L 8 57 z M 80 57 L 88 57 L 88 63 L 80 63 L 80 57 z M 8 69 L 16 69 L 16 75 L 8 75 L 8 69 z M 80 69 L 88 69 L 88 75 L 80 75 L 80 69 z "
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="rect4175" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>