Merge lp:~music-app-dev/music-app/prototype-now-playing-side-panel into lp:music-app

[Victor Thompson]

* Conditional layouts for the music app

DO NOT MERGE, just want to keep this MP to see a diff of what's been added.

[lp:~music-app-dev/music-app/prototype-now-playing-side-panel]

842. By Victor Thompson on 2015-02-11

Add ItemLayout to the Layouts.

Unmerged revisions

842. By Victor Thompson on 2015-02-11

Add ItemLayout to the Layouts.

841. By Victor Thompson on 2015-02-10

start conditional layout prototype

=== modified file 'app/components/MusicPage.qml'
--- app/components/MusicPage.qml	2015-01-21 19:04:07 +0000
+++ app/components/MusicPage.qml	2015-02-11 03:14:13 +0000
@@ -19,6 +19,7 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
+import Ubuntu.Layouts 1.0
 
 
 // generic page for music, could be useful for bottomedge implementation
@@ -28,6 +29,7 @@
         bottomMargin: musicToolbar.visible ? musicToolbar.height : 0
         fill: parent
     }
+    Layouts.item: "MusicPage"
 
     property bool searchable: false
     property int searchResultsCount

=== added file 'app/components/NowPlaying.qml'
--- app/components/NowPlaying.qml	1970-01-01 00:00:00 +0000
+++ app/components/NowPlaying.qml	2015-02-11 03:14:13 +0000
@@ -0,0 +1,550 @@
+/*
+ * Copyright (C) 2013, 2014, 2015
+ *      Andrew Hayzen <[e-mail]>
+ *      Daniel Holm <[e-mail]>
+ *      Victor Thompson <[e-mail]>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtMultimedia 5.0
+import QtQuick 2.3
+import QtQuick.LocalStorage 2.0
+import Ubuntu.Components 1.1
+import Ubuntu.Thumbnailer 0.1
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
+import "../components/ListItemActions"
+import "../components/Themes/Ambiance"
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
+
+Item {
+    id: nowPlayingView
+    objectName: "nowPlayingView"
+
+    anchors {
+        fill: parent
+    }
+
+    property bool isListView: false
+
+    Item {
+        id: fullview
+        anchors {
+            top: parent.top
+            topMargin: mainView.header.height
+        }
+        height: parent.height - mainView.header.height - units.gu(9.5)
+        visible: !isListView || wideAspect
+        width: parent.width
+
+        BlurredBackground {
+            id: blurredBackground
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+            art: albumImage.firstSource
+            height: parent.height - units.gu(7)
+
+            Item {
+                id: albumImageContainer
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    top: parent.top
+                }
+                height: parent.height
+                width: parent.width
+
+                CoverGrid {
+                    id: albumImage
+                    anchors.centerIn: parent
+                    covers: [{art: player.currentMetaArt, author: player.currentMetaArtist, album: player.currentMetaAlbum}]
+                    size: parent.width > parent.height ? parent.height : parent.width
+                }
+            }
+
+            Rectangle {
+                id: nowPlayingWideAspectLabelsBackground
+                anchors.bottom: parent.bottom
+                color: styleMusic.common.black
+                height: nowPlayingWideAspectTitle.lineCount === 1 ? units.gu(10) : units.gu(13)
+                opacity: 0.8
+                width: parent.width
+            }
+
+            /* Column for labels in wideAspect */
+            Column {
+                id: nowPlayingWideAspectLabels
+                spacing: units.gu(1)
+                anchors {
+                    left: parent.left
+                    leftMargin: units.gu(2)
+                    right: parent.right
+                    rightMargin: units.gu(2)
+                    top: nowPlayingWideAspectLabelsBackground.top
+                    topMargin: nowPlayingWideAspectTitle.lineCount === 1 ? units.gu(2) : units.gu(1.5)
+                }
+
+                /* Title of track */
+                Label {
+                    id: nowPlayingWideAspectTitle
+                    anchors {
+                        left: parent.left
+                        leftMargin: units.gu(1)
+                        right: parent.right
+                        rightMargin: units.gu(1)
+                    }
+                    color: styleMusic.playerControls.labelColor
+                    elide: Text.ElideRight
+                    fontSize: "x-large"
+                    maximumLineCount: 2
+                    objectName: "playercontroltitle"
+                    text: trackQueue.model.count === 0 ? "" : player.currentMetaTitle === "" ? player.currentMetaFile : player.currentMetaTitle
+                    wrapMode: Text.WordWrap
+                }
+
+                /* Artist of track */
+                Label {
+                    id: nowPlayingWideAspectArtist
+                    anchors {
+                        left: parent.left
+                        leftMargin: units.gu(1)
+                        right: parent.right
+                        rightMargin: units.gu(1)
+                    }
+                    color: styleMusic.nowPlaying.labelSecondaryColor
+                    elide: Text.ElideRight
+                    fontSize: "small"
+                    text: trackQueue.model.count === 0 ? "" : player.currentMetaArtist
+                }
+            }
+
+            /* Detect cover art swipe */
+            MouseArea {
+                anchors.fill: parent
+                property string direction: "None"
+                property real lastX: -1
+
+                onPressed: lastX = mouse.x
+
+                onReleased: {
+                    var diff = mouse.x - lastX
+                    if (Math.abs(diff) < units.gu(4)) {
+                        return;
+                    } else if (diff < 0) {
+                        player.nextSong()
+                    } else if (diff > 0) {
+                        player.previousSong()
+                    }
+                }
+            }
+        }
+
+        /* Background for progress bar component */
+        Rectangle {
+            id: musicToolbarFullProgressBackground
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+                top: blurredBackground.bottom
+            }
+            color: styleMusic.common.black
+        }
+
+        /* Progress bar component */
+        Item {
+            id: musicToolbarFullProgressContainer
+            anchors.left: parent.left
+            anchors.leftMargin: units.gu(3)
+            anchors.right: parent.right
+            anchors.rightMargin: units.gu(3)
+            anchors.top: blurredBackground.bottom
+            anchors.topMargin: units.gu(1)
+            height: units.gu(3)
+            width: parent.width
+
+            /* Position label */
+            Label {
+                id: musicToolbarFullPositionLabel
+                anchors.top: progressSliderMusic.bottom
+                anchors.topMargin: units.gu(-2)
+                anchors.left: parent.left
+                color: styleMusic.nowPlaying.labelSecondaryColor
+                fontSize: "small"
+                height: parent.height
+                horizontalAlignment: Text.AlignHCenter
+                text: durationToString(player.position)
+                verticalAlignment: Text.AlignVCenter
+                width: units.gu(3)
+            }
+
+            Slider {
+                id: progressSliderMusic
+                anchors.left: parent.left
+                anchors.right: parent.right
+                maximumValue: player.duration  // load value at startup
+                objectName: "progressSliderShape"
+                style: UbuntuBlueSliderStyle {}
+                value: player.position  // load value at startup
+
+                function formatValue(v) {
+                    if (seeking) {  // update position label while dragging
+                        musicToolbarFullPositionLabel.text = durationToString(v)
+                    }
+
+                    return durationToString(v)
+                }
+
+                property bool seeking: false
+                property bool seeked: false
+
+                onSeekingChanged: {
+                    if (seeking === false) {
+                        musicToolbarFullPositionLabel.text = durationToString(player.position)
+                    }
+                }
+
+                onPressedChanged: {
+                    seeking = pressed
+
+                    if (!pressed) {
+                        seeked = true
+                        player.seek(value)
+
+                        musicToolbarFullPositionLabel.text = durationToString(value)
+                    }
+                }
+
+                Connections {
+                    target: player
+                    onPositionChanged: {
+                        // seeked is a workaround for bug 1310706 as the first position after a seek is sometimes invalid (0)
+                        if (progressSliderMusic.seeking === false && !progressSliderMusic.seeked) {
+                            musicToolbarFullPositionLabel.text = durationToString(player.position)
+                            musicToolbarFullDurationLabel.text = durationToString(player.duration)
+
+                            progressSliderMusic.value = player.position
+                            progressSliderMusic.maximumValue = player.duration
+                        }
+
+                        progressSliderMusic.seeked = false;
+                    }
+                    onStopped: {
+                        musicToolbarFullPositionLabel.text = durationToString(0);
+                        musicToolbarFullDurationLabel.text = durationToString(0);
+                    }
+                }
+            }
+
+            /* Duration label */
+            Label {
+                id: musicToolbarFullDurationLabel
+                anchors.top: progressSliderMusic.bottom
+                anchors.topMargin: units.gu(-2)
+                anchors.right: parent.right
+                color: styleMusic.nowPlaying.labelSecondaryColor
+                fontSize: "small"
+                height: parent.height
+                horizontalAlignment: Text.AlignHCenter
+                text: durationToString(player.duration)
+                verticalAlignment: Text.AlignVCenter
+                width: units.gu(3)
+            }
+        }
+    }
+
+    Loader {
+        id: queueListLoader
+        anchors {
+            fill: parent
+        }
+        asynchronous: true
+        sourceComponent: MultiSelectListView {
+            id: queueList
+            anchors {
+                bottomMargin: musicToolbarFullContainer.height + units.gu(2)
+                fill: parent
+                topMargin: units.gu(2)
+            }
+            delegate: queueDelegate
+            footer: Item {
+                height: mainView.height - (styleMusic.common.expandHeight + queueList.currentHeight) + units.gu(8)
+            }
+            model: trackQueue.model
+            objectName: "nowPlayingqueueList"
+
+            property int normalHeight: units.gu(6)
+            property int transitionDuration: 250  // transition length of animations
+
+            onCountChanged: customdebug("Queue: Now has: " + queueList.count + " tracks")
+
+            Component {
+                id: queueDelegate
+                ListItemWithActions {
+                    id: queueListItem
+                    color: player.currentIndex === index ? "#2c2c34" : styleMusic.mainView.backgroundColor
+                    height: queueList.normalHeight
+                    objectName: "nowPlayingListItem" + index
+                    state: ""
+
+                    leftSideAction: Remove {
+                        onTriggered: trackQueue.removeQueueList([index])
+                    }
+                    multiselectable: true
+                    reorderable: true
+                    rightSideActions: [
+                        AddToPlaylist{
+
+                        }
+                    ]
+
+                    onItemClicked: {
+                        customdebug("File: " + model.filename) // debugger
+                        trackQueueClick(index);  // toggle track state
+                    }
+                    onReorder: {
+                        console.debug("Move: ", from, to);
+
+                        trackQueue.model.move(from, to, 1);
+                        Library.moveQueueItem(from, to);
+
+                        // Maintain currentIndex with current song
+                        if (from === player.currentIndex) {
+                            player.currentIndex = to;
+                        }
+                        else if (from < player.currentIndex && to >= player.currentIndex) {
+                            player.currentIndex -= 1;
+                        }
+                        else if (from > player.currentIndex && to <= player.currentIndex) {
+                            player.currentIndex += 1;
+                        }
+
+                        queueIndex = player.currentIndex
+                    }
+
+                    Item {
+                        id: trackContainer;
+                        anchors {
+                            fill: parent
+                        }
+
+                        NumberAnimation {
+                            id: trackContainerReorderAnimation
+                            target: trackContainer;
+                            property: "anchors.leftMargin";
+                            duration: queueList.transitionDuration;
+                            to: units.gu(2)
+                        }
+
+                        NumberAnimation {
+                            id: trackContainerResetAnimation
+                            target: trackContainer;
+                            property: "anchors.leftMargin";
+                            duration: queueList.transitionDuration;
+                            to: units.gu(0.5)
+                        }
+
+                        MusicRow {
+                            id: musicRow
+                            height: parent.height
+                            column: Column {
+                                Label {
+                                    id: trackTitle
+                                    color: player.currentIndex === index ? UbuntuColors.blue
+                                                                            : styleMusic.common.music
+                                    fontSize: "small"
+                                    objectName: "titleLabel"
+                                    text: model.title
+                                }
+
+                                Label {
+                                    id: trackArtist
+                                    color: styleMusic.common.subtitle
+                                    fontSize: "x-small"
+                                    objectName: "artistLabel"
+                                    text: model.author
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        visible: isListView || wideAspect
+    }
+
+    /* Full toolbar */
+    Rectangle {
+        id: musicToolbarFullContainer
+        anchors.bottom: parent.bottom
+        color: styleMusic.common.black
+        height: units.gu(10)
+        width: parent.width
+
+        /* Repeat button */
+        MouseArea {
+            id: nowPlayingRepeatButton
+            anchors.right: nowPlayingPreviousButton.left
+            anchors.rightMargin: units.gu(1)
+            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+            height: units.gu(6)
+            opacity: player.repeat && !emptyPageLoader.noMusic ? 1 : .4
+            width: height
+            onClicked: player.repeat = !player.repeat
+
+            Icon {
+                id: repeatIcon
+                height: units.gu(3)
+                width: height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                name: "media-playlist-repeat"
+                objectName: "repeatShape"
+                opacity: player.repeat && !emptyPageLoader.noMusic ? 1 : .4
+            }
+        }
+
+        /* Previous button */
+        MouseArea {
+            id: nowPlayingPreviousButton
+            anchors.right: nowPlayingPlayButton.left
+            anchors.rightMargin: units.gu(1)
+            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+            height: units.gu(6)
+            opacity: trackQueue.model.count === 0  ? .4 : 1
+            width: height
+            onClicked: player.previousSong()
+
+            Icon {
+                id: nowPlayingPreviousIndicator
+                height: units.gu(3)
+                width: height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                name: "media-skip-backward"
+                objectName: "previousShape"
+                opacity: 1
+            }
+        }
+
+        /* Play/Pause button */
+        MouseArea {
+            id: nowPlayingPlayButton
+            anchors.centerIn: parent
+            height: units.gu(10)
+            width: height
+            onClicked: player.toggle()
+
+            Icon {
+                id: nowPlayingPlayIndicator
+                height: units.gu(6)
+                width: height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                opacity: emptyPageLoader.noMusic ? .4 : 1
+                color: "white"
+                name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause" : "media-playback-start"
+                objectName: "playShape"
+            }
+        }
+
+        /* Next button */
+        MouseArea {
+            id: nowPlayingNextButton
+            anchors.left: nowPlayingPlayButton.right
+            anchors.leftMargin: units.gu(1)
+            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+            height: units.gu(6)
+            opacity: trackQueue.model.count === 0 ? .4 : 1
+            width: height
+            onClicked: player.nextSong()
+
+            Icon {
+                id: nowPlayingNextIndicator
+                height: units.gu(3)
+                width: height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                name: "media-skip-forward"
+                objectName: "forwardShape"
+                opacity: 1
+            }
+        }
+
+        /* Shuffle button */
+        MouseArea {
+            id: nowPlayingShuffleButton
+            anchors.left: nowPlayingNextButton.right
+            anchors.leftMargin: units.gu(1)
+            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+            height: units.gu(6)
+            opacity: player.shuffle && !emptyPageLoader.noMusic ? 1 : .4
+            width: height
+            onClicked: player.shuffle = !player.shuffle
+
+            Icon {
+                id: shuffleIcon
+                height: units.gu(3)
+                width: height
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                name: "media-playlist-shuffle"
+                objectName: "shuffleShape"
+                opacity: player.shuffle && !emptyPageLoader.noMusic ? 1 : .4
+            }
+        }
+
+        /* Object which provides the progress bar when in the queue */
+        Rectangle {
+            id: playerControlsProgressBar
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            color: styleMusic.common.black
+            height: units.gu(0.25)
+            visible: isListView || wideAspect
+
+            Rectangle {
+                id: playerControlsProgressBarHint
+                anchors {
+                    left: parent.left
+                    bottom: parent.bottom
+                }
+                color: UbuntuColors.blue
+                height: parent.height
+                width: player.duration > 0 ? (player.position / player.duration) * playerControlsProgressBar.width : 0
+
+                Connections {
+                    target: player
+                    onPositionChanged: {
+                        playerControlsProgressBarHint.width = (player.position / player.duration) * playerControlsProgressBar.width
+                    }
+                    onStopped: {
+                        playerControlsProgressBarHint.width = 0;
+                    }
+                }
+            }
+        }
+    }
+}

=== modified file 'app/music-app.qml'
--- app/music-app.qml	2015-02-08 04:40:52 +0000
+++ app/music-app.qml	2015-02-11 03:14:13 +0000
@@ -22,6 +22,7 @@
 import Ubuntu.Components.Popups 1.0
 import Ubuntu.Components.ListItems 1.0 as ListItem
 import Ubuntu.Content 0.1
+import Ubuntu.Layouts 1.0
 import Ubuntu.MediaScanner 0.1
 import Qt.labs.settings 1.0
 import QtMultimedia 5.0
@@ -966,300 +967,339 @@
         }
     }
 
-    Loader {
-        id: musicToolbar
-        anchors {
-            bottom: parent.bottom
-            left: parent.left
-            right: parent.right
-        }
-        asynchronous: true
-        source: "components/MusicToolbar.qml"
-        visible: mainPageStack.currentPage.title !== i18n.tr("Now playing") &&
-                 mainPageStack.currentPage.title !== i18n.tr("Queue") &&
-                 mainPageStack.currentPage.title !== i18n.tr("Select playlist") &&
-                 !firstRun
-        z: 200  // put on top of everything else
-    }
-
-    PageStack {
-        id: mainPageStack
-
-        // Properties storing the current page info
-        property Page currentMusicPage: null  // currentPage can be Tabs
-        property bool popping: false
-
-        /* Helper functions */
-
-        // Go back up the stack if possible
-        function goBack() {
-            if (depth > 1) {
-                pop()
-            }
-        }
-
-        // Pop a specific page in the stack
-        function popPage(page) {
-            var tmpPages = []
-
-            popping = true
-
-            while (currentPage !== page && depth > 0) {
-                tmpPages.push(currentPage)
-                pop()
-            }
-
-            if (depth > 0) {
-                pop()
-            }
-
-            for (var i=tmpPages.length - 1; i > -1; i--) {
-                push(tmpPages[i])
-            }
-
-            popping = false
-        }
-
-        // Set the current page, and any parent/stacks
-        function setPage(childPage) {
-            if (!popping) {
-                currentMusicPage = childPage;
-            }
-        }
-
-        Tabs {
-            id: tabs
+    Layouts {
+        objectName: "musicLayout"
+        id: layouts
+        anchors.fill: parent
+        layouts: [
+            ConditionalLayout {
+                name: "wideAspect"
+                when: wideAspect
+                Rectangle {
+                    anchors.fill: parent
+                    color: "transparent"
+                    ItemLayout {
+                        item: "MusicPage"
+                        width: layouts.width*0.625
+                        anchors {
+                            top: parent.top
+                            bottom: parent.bottom
+                        }
+                    }
+                    Rectangle {
+                        width: layouts.width*0.375
+                        anchors {
+                            top: parent.top
+                            bottom:parent.bottom
+                            right: parent.right
+                        }
+                        color: "transparent"
+
+                        NowPlaying {
+                            id: nowPlaying
+                            Layouts.item: "nowPlaying"
+                        }
+                    }
+                }
+            }
+        ]
+
+        Loader {
+            id: musicToolbar
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            asynchronous: true
+            source: "components/MusicToolbar.qml"
+            visible: mainPageStack.currentPage.title !== i18n.tr("Now playing") &&
+                     mainPageStack.currentPage.title !== i18n.tr("Queue") &&
+                     mainPageStack.currentPage.title !== i18n.tr("Select playlist") &&
+                     !firstRun &&
+                     !wideAspect
+            z: 200  // put on top of everything else
+        }
+
+        PageStack {
+            id: mainPageStack
+
+            // Properties storing the current page info
+            property Page currentMusicPage: null  // currentPage can be Tabs
+            property bool popping: false
+
+            /* Helper functions */
+
+            // Go back up the stack if possible
+            function goBack() {
+                if (depth > 1) {
+                    pop()
+                }
+            }
+
+            // Pop a specific page in the stack
+            function popPage(page) {
+                var tmpPages = []
+
+                popping = true
+
+                while (currentPage !== page && depth > 0) {
+                    tmpPages.push(currentPage)
+                    pop()
+                }
+
+                if (depth > 0) {
+                    pop()
+                }
+
+                for (var i=tmpPages.length - 1; i > -1; i--) {
+                    push(tmpPages[i])
+                }
+
+                popping = false
+            }
+
+            // Set the current page, and any parent/stacks
+            function setPage(childPage) {
+                if (!popping) {
+                    currentMusicPage = childPage;
+                }
+            }
+
+            Tabs {
+                id: tabs
+                anchors {
+                    fill: parent
+                }
+
+                property Tab lastTab: selectedTab
+
+                onSelectedTabChanged: {
+                    // pause loading of the models in the old tab
+                    if (lastTab !== null && lastTab !== selectedTab) {
+                        allowLoading(lastTab, false);
+                    }
+
+                    lastTab = selectedTab;
+
+                    ensurePopulated(selectedTab);
+                }
+
+                onSelectedTabIndexChanged: {
+                    if (loadedUI) {  // store the tab index if changed by the user
+                        startupSettings.tabIndex = selectedTabIndex
+                    }
+                }
+
+                // Use a repeater to 'hide' the recent tab when the model is empty
+                // A repeater is used because the Tabs component respects adds and
+                // removes. Whereas replacing the list tabChildren does not appear
+                // to respect removes and setting the page as active: false causes
+                // the page to be blank but the action to still in the overflow
+                Repeater {
+                    id: recentTabRepeater
+                    // If the model has not loaded and at startup the db was not empty
+                    // then show recent or
+                    // If the workerlist has been set and it has values then show recent
+                    model: (!recentModel.preLoadComplete && !startupRecentEmpty) ||
+                           (recentModel.workerList !== undefined &&
+                            recentModel.workerList.length > 0) ? 1 : 0
+                    delegate: Component {
+                        // First tab is all music
+                        Tab {
+                            property bool populated: recentTabRepeater.populated
+                            property var loader: [recentModel.filterRecent]
+                            property bool loading: recentTabRepeater.loading
+                            property var model: [recentModel, albumTracksModel]
+                            id: recentTab
+                            objectName: "recentTab"
+                            anchors.fill: parent
+                            title: page.title
+
+                            // Tab content begins here
+                            page: Recent {
+                                id: recentPage
+                            }
+                        }
+                    }
+
+                    // Store the startup state of the db separately otherwise
+                    // it breaks the binding of model
+                    property bool startupRecentEmpty: Library.isRecentEmpty()
+
+                    // cached values of the recent model that are copied when
+                    // the tab is created
+                    property bool loading: false
+                    property bool populated: false
+
+                    onCountChanged: {
+                        if (count === 0 && loadedUI) {
+                            // Jump to the albums tab when recent is empty
+                            tabs.selectedTabIndex = albumsTab.index
+                        } else if (count > 0 && !loadedUI) {
+                            // UI is still loading and recent tab has been inserted
+                            // so move the selected index 'down' as the value is
+                            // not auto updated - this is for the case of loading
+                            // directly to the recent tab (otherwise the content
+                            // appears as the second tab but the tabs think they are
+                            // on the first tab)
+                            tabs.selectedTabIndex -= 1
+                        } else if (count > 0 && loadedUI) {
+                            // tab inserted while the app is running so move the
+                            // selected index 'up' to keep the same position
+                            tabs.selectedTabIndex += 1
+                        }
+                    }
+                }
+
+                // Second tab is arists
+                Tab {
+                    property bool populated: true
+                    property var loader: []
+                    property bool loading: false
+                    property var model: []
+                    id: artistsTab
+                    objectName: "artistsTab"
+                    anchors.fill: parent
+                    title: page.title
+
+                    // tab content
+                    page: Artists {
+                        id: artistsPage
+                    }
+                }
+
+                // third tab is albums
+                Tab {
+                    property bool populated: true
+                    property var loader: []
+                    property bool loading: false
+                    property var model: []
+                    id: albumsTab
+                    objectName: "albumsTab"
+                    anchors.fill: parent
+                    title: page.title
+
+                    // Tab content begins here
+                    page: Albums {
+                        id: albumsPage
+                    }
+                }
+
+                // forth tab is genres
+                Tab {
+                    property bool populated: true
+                    property var loader: []
+                    property bool loading: false
+                    property var model: []
+                    id: genresTab
+                    objectName: "genresTab"
+                    anchors.fill: parent
+                    title: page.title
+
+                    // Tab content begins here
+                    page: Genres {
+                        id: genresPage
+                    }
+                }
+
+                // fourth tab is all songs
+                Tab {
+                    property bool populated: true
+                    property var loader: []
+                    property bool loading: false
+                    property var model: []
+                    id: songsTab
+                    objectName: "songsTab"
+                    anchors.fill: parent
+                    title: page.title
+
+                    // Tab content begins here
+                    page: Songs {
+                        id: tracksPage
+                    }
+                }
+
+
+                // fifth tab is the playlists
+                Tab {
+                    property bool populated: false
+                    property var loader: [playlistModel.filterPlaylists]
+                    property bool loading: false
+                    property var model: [playlistModel, albumTracksModel]
+                    id: playlistsTab
+                    objectName: "playlistsTab"
+                    anchors.fill: parent
+                    title: page.title
+
+                    // Tab content begins here
+                    page: Playlists {
+                        id: playlistsPage
+                    }
+                }
+
+                // Set the models in the tab to allow/disallow loading
+                function allowLoading(tabToLoad, state)
+                {
+                    if (tabToLoad !== undefined && tabToLoad.model !== undefined)
+                    {
+                        for (var i=0; i < tabToLoad.model.length; i++)
+                        {
+                            tabToLoad.model[i].canLoad = state;
+                        }
+                    }
+                }
+
+                function ensurePopulated(selectedTab)
+                {
+                    allowLoading(selectedTab, true);  // allow loading of the models
+
+                    if (!selectedTab.populated && !selectedTab.loading && loadedUI) {
+                        loading.visible = true
+                        selectedTab.loading = true
+
+                        if (selectedTab.loader !== undefined)
+                        {
+                            for (var i=0; i < selectedTab.loader.length; i++)
+                            {
+                                selectedTab.loader[i]();
+                            }
+                        }
+                    }
+                    loading.visible = selectedTab.loading || !selectedTab.populated
+                }
+
+                function pushNowPlaying()
+                {
+                    // only push if on a different page
+                    if (mainPageStack.currentPage.title !== i18n.tr("Now playing")
+                            && mainPageStack.currentPage.title !== i18n.tr("Queue")) {
+                        mainPageStack.push(Qt.resolvedUrl("components/NowPlaying.qml"), {})
+                    }
+
+                    if (mainPageStack.currentPage.title === i18n.tr("Queue")) {
+                        mainPageStack.currentPage.isListView = false;  // ensure full view
+                    }
+                }
+            } // end of tabs
+        }
+
+        Loader {
+            id: emptyPageLoader
+            // Do not be active if content-hub is importing due to the models resetting
+            // this then causes the empty page loader to partially run then showing a blank header
+            active: noMusic && !firstRun && contentHubWaitForFile.processId === -1
             anchors {
                 fill: parent
             }
-
-            property Tab lastTab: selectedTab
-
-            onSelectedTabChanged: {
-                // pause loading of the models in the old tab
-                if (lastTab !== null && lastTab !== selectedTab) {
-                    allowLoading(lastTab, false);
-                }
-
-                lastTab = selectedTab;
-
-                ensurePopulated(selectedTab);
-            }
-
-            onSelectedTabIndexChanged: {
-                if (loadedUI) {  // store the tab index if changed by the user
-                    startupSettings.tabIndex = selectedTabIndex
-                }
-            }
-
-            // Use a repeater to 'hide' the recent tab when the model is empty
-            // A repeater is used because the Tabs component respects adds and
-            // removes. Whereas replacing the list tabChildren does not appear
-            // to respect removes and setting the page as active: false causes
-            // the page to be blank but the action to still in the overflow
-            Repeater {
-                id: recentTabRepeater
-                // If the model has not loaded and at startup the db was not empty
-                // then show recent or
-                // If the workerlist has been set and it has values then show recent
-                model: (!recentModel.preLoadComplete && !startupRecentEmpty) ||
-                       (recentModel.workerList !== undefined &&
-                        recentModel.workerList.length > 0) ? 1 : 0
-                delegate: Component {
-                    // First tab is all music
-                    Tab {
-                        property bool populated: recentTabRepeater.populated
-                        property var loader: [recentModel.filterRecent]
-                        property bool loading: recentTabRepeater.loading
-                        property var model: [recentModel, albumTracksModel]
-                        id: recentTab
-                        objectName: "recentTab"
-                        anchors.fill: parent
-                        title: page.title
-
-                        // Tab content begins here
-                        page: Recent {
-                            id: recentPage
-                        }
-                    }
-                }
-
-                // Store the startup state of the db separately otherwise
-                // it breaks the binding of model
-                property bool startupRecentEmpty: Library.isRecentEmpty()
-
-                // cached values of the recent model that are copied when
-                // the tab is created
-                property bool loading: false
-                property bool populated: false
-
-                onCountChanged: {
-                    if (count === 0 && loadedUI) {
-                        // Jump to the albums tab when recent is empty
-                        tabs.selectedTabIndex = albumsTab.index
-                    } else if (count > 0 && !loadedUI) {
-                        // UI is still loading and recent tab has been inserted
-                        // so move the selected index 'down' as the value is
-                        // not auto updated - this is for the case of loading
-                        // directly to the recent tab (otherwise the content
-                        // appears as the second tab but the tabs think they are
-                        // on the first tab)
-                        tabs.selectedTabIndex -= 1
-                    } else if (count > 0 && loadedUI) {
-                        // tab inserted while the app is running so move the
-                        // selected index 'up' to keep the same position
-                        tabs.selectedTabIndex += 1
-                    }
-                }
-            }
-
-            // Second tab is arists
-            Tab {
-                property bool populated: true
-                property var loader: []
-                property bool loading: false
-                property var model: []
-                id: artistsTab
-                objectName: "artistsTab"
-                anchors.fill: parent
-                title: page.title
-
-                // tab content
-                page: Artists {
-                    id: artistsPage
-                }
-            }
-
-            // third tab is albums
-            Tab {
-                property bool populated: true
-                property var loader: []
-                property bool loading: false
-                property var model: []
-                id: albumsTab
-                objectName: "albumsTab"
-                anchors.fill: parent
-                title: page.title
-
-                // Tab content begins here
-                page: Albums {
-                    id: albumsPage
-                }
-            }
-
-            // forth tab is genres
-            Tab {
-                property bool populated: true
-                property var loader: []
-                property bool loading: false
-                property var model: []
-                id: genresTab
-                objectName: "genresTab"
-                anchors.fill: parent
-                title: page.title
-
-                // Tab content begins here
-                page: Genres {
-                    id: genresPage
-                }
-            }
-
-            // fourth tab is all songs
-            Tab {
-                property bool populated: true
-                property var loader: []
-                property bool loading: false
-                property var model: []
-                id: songsTab
-                objectName: "songsTab"
-                anchors.fill: parent
-                title: page.title
-
-                // Tab content begins here
-                page: Songs {
-                    id: tracksPage
-                }
-            }
-
-
-            // fifth tab is the playlists
-            Tab {
-                property bool populated: false
-                property var loader: [playlistModel.filterPlaylists]
-                property bool loading: false
-                property var model: [playlistModel, albumTracksModel]
-                id: playlistsTab
-                objectName: "playlistsTab"
-                anchors.fill: parent
-                title: page.title
-
-                // Tab content begins here
-                page: Playlists {
-                    id: playlistsPage
-                }
-            }
-
-            // Set the models in the tab to allow/disallow loading
-            function allowLoading(tabToLoad, state)
-            {
-                if (tabToLoad !== undefined && tabToLoad.model !== undefined)
-                {
-                    for (var i=0; i < tabToLoad.model.length; i++)
-                    {
-                        tabToLoad.model[i].canLoad = state;
-                    }
-                }
-            }
-
-            function ensurePopulated(selectedTab)
-            {
-                allowLoading(selectedTab, true);  // allow loading of the models
-
-                if (!selectedTab.populated && !selectedTab.loading && loadedUI) {
-                    loading.visible = true
-                    selectedTab.loading = true
-
-                    if (selectedTab.loader !== undefined)
-                    {
-                        for (var i=0; i < selectedTab.loader.length; i++)
-                        {
-                            selectedTab.loader[i]();
-                        }
-                    }
-                }
-                loading.visible = selectedTab.loading || !selectedTab.populated
-            }
-
-            function pushNowPlaying()
-            {
-                // only push if on a different page
-                if (mainPageStack.currentPage.title !== i18n.tr("Now playing")
-                        && mainPageStack.currentPage.title !== i18n.tr("Queue")) {
-                    mainPageStack.push(Qt.resolvedUrl("ui/NowPlaying.qml"), {})
-                }
-
-                if (mainPageStack.currentPage.title === i18n.tr("Queue")) {
-                    mainPageStack.currentPage.isListView = false;  // ensure full view
-                }
-            }
-        } // end of tabs
-    }
-
-    Loader {
-        id: emptyPageLoader
-        // Do not be active if content-hub is importing due to the models resetting
-        // this then causes the empty page loader to partially run then showing a blank header
-        active: noMusic && !firstRun && contentHubWaitForFile.processId === -1
-        anchors {
-            fill: parent
-        }
-        source: "ui/LibraryEmptyState.qml"
-        visible: active
-
-        property bool noMusic: allSongsModel.rowCount === 0 && allSongsModelModel.status === SongsModel.Ready && loadedUI
-    }
-
-    LoadingSpinnerComponent {
-        id: loading
+            source: "ui/LibraryEmptyState.qml"
+            visible: active
+
+            property bool noMusic: allSongsModel.rowCount === 0 && allSongsModelModel.status === SongsModel.Ready && loadedUI
+        }
+
+        LoadingSpinnerComponent {
+            id: loading
+        }
     }
 } // end of main view

=== renamed file 'app/ui/NowPlaying.qml' => 'app/ui/NowPlayingView.qml'
--- app/ui/NowPlaying.qml	2015-02-08 04:06:28 +0000
+++ app/ui/NowPlayingView.qml	2015-02-11 03:14:13 +0000
@@ -37,7 +37,7 @@
     title: isListView ? queueTitle : nowPlayingTitle
     visible: false
 
-    property bool isListView: false
+    property alias isListView: nowPlaying.isListView
     // TRANSLATORS: this appears in the header with limited space (around 20 characters)
     property string nowPlayingTitle: i18n.tr("Now playing") 
     // TRANSLATORS: this appears in the header with limited space (around 20 characters)
@@ -137,511 +137,7 @@
         }
     ]
 
-    Item {
-        id: fullview
-        anchors {
-            top: parent.top
-            topMargin: mainView.header.height
-        }
-        height: parent.height - mainView.header.height - units.gu(9.5)
-        visible: !isListView
-        width: parent.width
-
-        BlurredBackground {
-            id: blurredBackground
-            anchors {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-            }
-            art: albumImage.firstSource
-            height: parent.height - units.gu(7)
-  
-            Item {
-                id: albumImageContainer
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                    top: parent.top
-                }
-                height: parent.height
-                width: parent.width
-
-                CoverGrid {
-                    id: albumImage
-                    anchors.centerIn: parent
-                    covers: [{art: player.currentMetaArt, author: player.currentMetaArtist, album: player.currentMetaAlbum}]
-                    size: parent.width > parent.height ? parent.height : parent.width
-                }
-            }
-
-            Rectangle {
-                id: nowPlayingWideAspectLabelsBackground
-                anchors.bottom: parent.bottom
-                color: styleMusic.common.black
-                height: nowPlayingWideAspectTitle.lineCount === 1 ? units.gu(10) : units.gu(13)
-                opacity: 0.8
-                width: parent.width
-            }
-
-            /* Column for labels in wideAspect */
-            Column {
-                id: nowPlayingWideAspectLabels
-                spacing: units.gu(1)
-                anchors {
-                    left: parent.left
-                    leftMargin: units.gu(2)
-                    right: parent.right
-                    rightMargin: units.gu(2)
-                    top: nowPlayingWideAspectLabelsBackground.top
-                    topMargin: nowPlayingWideAspectTitle.lineCount === 1 ? units.gu(2) : units.gu(1.5)
-                }
-
-                /* Title of track */
-                Label {
-                    id: nowPlayingWideAspectTitle
-                    anchors {
-                        left: parent.left
-                        leftMargin: units.gu(1)
-                        right: parent.right
-                        rightMargin: units.gu(1)
-                    }
-                    color: styleMusic.playerControls.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "x-large"
-                    maximumLineCount: 2
-                    objectName: "playercontroltitle"
-                    text: trackQueue.model.count === 0 ? "" : player.currentMetaTitle === "" ? player.currentMetaFile : player.currentMetaTitle
-                    wrapMode: Text.WordWrap
-                }
-
-                /* Artist of track */
-                Label {
-                    id: nowPlayingWideAspectArtist
-                    anchors {
-                        left: parent.left
-                        leftMargin: units.gu(1)
-                        right: parent.right
-                        rightMargin: units.gu(1)
-                    }
-                    color: styleMusic.nowPlaying.labelSecondaryColor
-                    elide: Text.ElideRight
-                    fontSize: "small"
-                    text: trackQueue.model.count === 0 ? "" : player.currentMetaArtist
-                }
-            }
-
-            /* Detect cover art swipe */
-            MouseArea {
-                anchors.fill: parent
-                property string direction: "None"
-                property real lastX: -1
-
-                onPressed: lastX = mouse.x
-
-                onReleased: {
-                    var diff = mouse.x - lastX
-                    if (Math.abs(diff) < units.gu(4)) {
-                        return;
-                    } else if (diff < 0) {
-                        player.nextSong()
-                    } else if (diff > 0) {
-                        player.previousSong()
-                    }
-                }
-            }
-        }
-
-        /* Background for progress bar component */
-        Rectangle {
-            id: musicToolbarFullProgressBackground
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
-                top: blurredBackground.bottom
-            }
-            color: styleMusic.common.black
-        }
-
-        /* Progress bar component */
-        Item {
-            id: musicToolbarFullProgressContainer
-            anchors.left: parent.left
-            anchors.leftMargin: units.gu(3)
-            anchors.right: parent.right
-            anchors.rightMargin: units.gu(3)
-            anchors.top: blurredBackground.bottom
-            anchors.topMargin: units.gu(1)
-            height: units.gu(3)
-            width: parent.width
-
-            /* Position label */
-            Label {
-                id: musicToolbarFullPositionLabel
-                anchors.top: progressSliderMusic.bottom
-                anchors.topMargin: units.gu(-2)
-                anchors.left: parent.left
-                color: styleMusic.nowPlaying.labelSecondaryColor
-                fontSize: "small"
-                height: parent.height
-                horizontalAlignment: Text.AlignHCenter
-                text: durationToString(player.position)
-                verticalAlignment: Text.AlignVCenter
-                width: units.gu(3)
-            }
-
-            Slider {
-                id: progressSliderMusic
-                anchors.left: parent.left
-                anchors.right: parent.right
-                maximumValue: player.duration  // load value at startup
-                objectName: "progressSliderShape"
-                style: UbuntuBlueSliderStyle {}
-                value: player.position  // load value at startup
-
-                function formatValue(v) {
-                    if (seeking) {  // update position label while dragging
-                        musicToolbarFullPositionLabel.text = durationToString(v)
-                    }
-
-                    return durationToString(v)
-                }
-
-                property bool seeking: false
-                property bool seeked: false
-
-                onSeekingChanged: {
-                    if (seeking === false) {
-                        musicToolbarFullPositionLabel.text = durationToString(player.position)
-                    }
-                }
-
-                onPressedChanged: {
-                    seeking = pressed
-
-                    if (!pressed) {
-                        seeked = true
-                        player.seek(value)
-
-                        musicToolbarFullPositionLabel.text = durationToString(value)
-                    }
-                }
-
-                Connections {
-                    target: player
-                    onPositionChanged: {
-                        // seeked is a workaround for bug 1310706 as the first position after a seek is sometimes invalid (0)
-                        if (progressSliderMusic.seeking === false && !progressSliderMusic.seeked) {
-                            musicToolbarFullPositionLabel.text = durationToString(player.position)
-                            musicToolbarFullDurationLabel.text = durationToString(player.duration)
-
-                            progressSliderMusic.value = player.position
-                            progressSliderMusic.maximumValue = player.duration
-                        }
-
-                        progressSliderMusic.seeked = false;
-                    }
-                    onStopped: {
-                        musicToolbarFullPositionLabel.text = durationToString(0);
-                        musicToolbarFullDurationLabel.text = durationToString(0);
-                    }
-                }
-            }
-
-            /* Duration label */
-            Label {
-                id: musicToolbarFullDurationLabel
-                anchors.top: progressSliderMusic.bottom
-                anchors.topMargin: units.gu(-2)
-                anchors.right: parent.right
-                color: styleMusic.nowPlaying.labelSecondaryColor
-                fontSize: "small"
-                height: parent.height
-                horizontalAlignment: Text.AlignHCenter
-                text: durationToString(player.duration)
-                verticalAlignment: Text.AlignVCenter
-                width: units.gu(3)
-            }
-        }
-    }
-
-    Loader {
-        id: queueListLoader
-        anchors {
-            fill: parent
-        }
-        asynchronous: true
-        sourceComponent: MultiSelectListView {
-            id: queueList
-            anchors {
-                bottomMargin: musicToolbarFullContainer.height + units.gu(2)
-                fill: parent
-                topMargin: units.gu(2)
-            }
-            delegate: queueDelegate
-            footer: Item {
-                height: mainView.height - (styleMusic.common.expandHeight + queueList.currentHeight) + units.gu(8)
-            }
-            model: trackQueue.model
-            objectName: "nowPlayingqueueList"
-
-            property int normalHeight: units.gu(6)
-            property int transitionDuration: 250  // transition length of animations
-
-            onCountChanged: customdebug("Queue: Now has: " + queueList.count + " tracks")
-
-            Component {
-                id: queueDelegate
-                ListItemWithActions {
-                    id: queueListItem
-                    color: player.currentIndex === index ? "#2c2c34" : styleMusic.mainView.backgroundColor
-                    height: queueList.normalHeight
-                    objectName: "nowPlayingListItem" + index
-                    state: ""
-
-                    leftSideAction: Remove {
-                        onTriggered: trackQueue.removeQueueList([index])
-                    }
-                    multiselectable: true
-                    reorderable: true
-                    rightSideActions: [
-                        AddToPlaylist{
-
-                        }
-                    ]
-
-                    onItemClicked: {
-                        customdebug("File: " + model.filename) // debugger
-                        trackQueueClick(index);  // toggle track state
-                    }
-                    onReorder: {
-                        console.debug("Move: ", from, to);
-
-                        trackQueue.model.move(from, to, 1);
-                        Library.moveQueueItem(from, to);
-
-                        // Maintain currentIndex with current song
-                        if (from === player.currentIndex) {
-                            player.currentIndex = to;
-                        }
-                        else if (from < player.currentIndex && to >= player.currentIndex) {
-                            player.currentIndex -= 1;
-                        }
-                        else if (from > player.currentIndex && to <= player.currentIndex) {
-                            player.currentIndex += 1;
-                        }
-
-                        queueIndex = player.currentIndex
-                    }
-
-                    Item {
-                        id: trackContainer;
-                        anchors {
-                            fill: parent
-                        }
-
-                        NumberAnimation {
-                            id: trackContainerReorderAnimation
-                            target: trackContainer;
-                            property: "anchors.leftMargin";
-                            duration: queueList.transitionDuration;
-                            to: units.gu(2)
-                        }
-
-                        NumberAnimation {
-                            id: trackContainerResetAnimation
-                            target: trackContainer;
-                            property: "anchors.leftMargin";
-                            duration: queueList.transitionDuration;
-                            to: units.gu(0.5)
-                        }
-
-                        MusicRow {
-                            id: musicRow
-                            height: parent.height
-                            column: Column {
-                                Label {
-                                    id: trackTitle
-                                    color: player.currentIndex === index ? UbuntuColors.blue
-                                                                            : styleMusic.common.music
-                                    fontSize: "small"
-                                    objectName: "titleLabel"
-                                    text: model.title
-                                }
-
-                                Label {
-                                    id: trackArtist
-                                    color: styleMusic.common.subtitle
-                                    fontSize: "x-small"
-                                    objectName: "artistLabel"
-                                    text: model.author
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        visible: isListView
-    }
-
-    /* Full toolbar */
-    Rectangle {
-        id: musicToolbarFullContainer
-        anchors.bottom: parent.bottom
-        color: styleMusic.common.black
-        height: units.gu(10)
-        width: parent.width
-
-        /* Repeat button */
-        MouseArea {
-            id: nowPlayingRepeatButton
-            anchors.right: nowPlayingPreviousButton.left
-            anchors.rightMargin: units.gu(1)
-            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-            height: units.gu(6)
-            opacity: player.repeat && !emptyPageLoader.noMusic ? 1 : .4
-            width: height
-            onClicked: player.repeat = !player.repeat
-
-            Icon {
-                id: repeatIcon
-                height: units.gu(3)
-                width: height
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "white"
-                name: "media-playlist-repeat"
-                objectName: "repeatShape"
-                opacity: player.repeat && !emptyPageLoader.noMusic ? 1 : .4
-            }
-        }
-
-        /* Previous button */
-        MouseArea {
-            id: nowPlayingPreviousButton
-            anchors.right: nowPlayingPlayButton.left
-            anchors.rightMargin: units.gu(1)
-            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-            height: units.gu(6)
-            opacity: trackQueue.model.count === 0  ? .4 : 1
-            width: height
-            onClicked: player.previousSong()
-
-            Icon {
-                id: nowPlayingPreviousIndicator
-                height: units.gu(3)
-                width: height
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "white"
-                name: "media-skip-backward"
-                objectName: "previousShape"
-                opacity: 1
-            }
-        }
-
-        /* Play/Pause button */
-        MouseArea {
-            id: nowPlayingPlayButton
-            anchors.centerIn: parent
-            height: units.gu(10)
-            width: height
-            onClicked: player.toggle()
-
-            Icon {
-                id: nowPlayingPlayIndicator
-                height: units.gu(6)
-                width: height
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                opacity: emptyPageLoader.noMusic ? .4 : 1
-                color: "white"
-                name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause" : "media-playback-start"
-                objectName: "playShape"
-            }
-        }
-
-        /* Next button */
-        MouseArea {
-            id: nowPlayingNextButton
-            anchors.left: nowPlayingPlayButton.right
-            anchors.leftMargin: units.gu(1)
-            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-            height: units.gu(6)
-            opacity: trackQueue.model.count === 0 ? .4 : 1
-            width: height
-            onClicked: player.nextSong()
-
-            Icon {
-                id: nowPlayingNextIndicator
-                height: units.gu(3)
-                width: height
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "white"
-                name: "media-skip-forward"
-                objectName: "forwardShape"
-                opacity: 1
-            }
-        }
-
-        /* Shuffle button */
-        MouseArea {
-            id: nowPlayingShuffleButton
-            anchors.left: nowPlayingNextButton.right
-            anchors.leftMargin: units.gu(1)
-            anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-            height: units.gu(6)
-            opacity: player.shuffle && !emptyPageLoader.noMusic ? 1 : .4
-            width: height
-            onClicked: player.shuffle = !player.shuffle
-
-            Icon {
-                id: shuffleIcon
-                height: units.gu(3)
-                width: height
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                color: "white"
-                name: "media-playlist-shuffle"
-                objectName: "shuffleShape"
-                opacity: player.shuffle && !emptyPageLoader.noMusic ? 1 : .4
-            }
-        }
-
-        /* Object which provides the progress bar when in the queue */
-        Rectangle {
-            id: playerControlsProgressBar
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
-            }
-            color: styleMusic.common.black
-            height: units.gu(0.25)
-            visible: isListView
-
-            Rectangle {
-                id: playerControlsProgressBarHint
-                anchors {
-                    left: parent.left
-                    bottom: parent.bottom
-                }
-                color: UbuntuColors.blue
-                height: parent.height
-                width: player.duration > 0 ? (player.position / player.duration) * playerControlsProgressBar.width : 0
-
-                Connections {
-                    target: player
-                    onPositionChanged: {
-                        playerControlsProgressBarHint.width = (player.position / player.duration) * playerControlsProgressBar.width
-                    }
-                    onStopped: {
-                        playerControlsProgressBarHint.width = 0;
-                    }
-                }
-            }
-        }
+    NowPlaying {
+        id: view
     }
 }