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

[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

840. By Andrew Hayzen on 2015-02-08

* Create generic MultiSelectListView.qml for handling multiselect
* Create MusicListView.qml with our patches to ListView
* Move Flickables from components into their own Flickables folder.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

839. By Andrew Hayzen on 2015-02-08

* Do not allow LibraryEmptyState loader to be active if content-hub is running. Fixes: https://bugs.launchpad.net/bugs/1418366.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

838. By Andrew Hayzen on 2015-02-07

* Move all Dialog components into their own files in components/Dialog.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

837. By Andrew Hayzen on 2015-02-07

* Create common components for Play All, Queue All and Shuffle buttons within 'Views'.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

836. By Andrew Hayzen on 2015-02-05

* Split EmptyStates into a page (for noMusic) and a component (for noPlaylists) and load in async.

Approved by Ubuntu Phone Apps Jenkins Bot, Victor Thompson.

835. By Andrew Hayzen on 2015-02-05

* Move existing head states into HeadState folder
* Create MultiSelectHeadState SearchableHeadState PlaylistHeadState
* Migrate AddToPlaylist Albums Artists Genres NowPlaying Playlists Songs SongsView to use the new HeadState.

Approved by Ubuntu Phone Apps Jenkins Bot, Victor Thompson.

834. By Andrew Hayzen on 2015-02-05

* Make use of SDK PageStack.push(url, properties) instead of creating the component, object and pushing ourselves.

Approved by Victor Thompson, Ubuntu Phone Apps Jenkins Bot.

833. By Andrew Hayzen on 2015-02-04

* Rename common to components
* Move all qml components in components
* Move any JS scripts into logic.

Approved by Ubuntu Phone Apps Jenkins Bot, Victor Thompson.

=== modified file 'CMakeLists.txt'
--- CMakeLists.txt	2014-09-08 08:08:13 +0000
+++ CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -13,10 +13,10 @@
 set(DESKTOP_FILE "${PROJECT_NAME}_${APP_NAME}.desktop")
 set(URLS_FILE "${PROJECT_NAME}_${APP_NAME}.url-dispatcher")
 set(APP_HARDCODE music-app)
-set(MAIN_QML music-app.qml)
-set(ICON_FILE images/[e-mail])
+set(MAIN_QML app/music-app.qml)
+set(ICON_FILE app/graphics/[e-mail])
 set(AUTOPILOT_DIR music_app)
-set(UBUNTU_MANIFEST_PATH "click/manifest.json.in" CACHE INTERNAL "Tell QtCreator location and name of the manifest file")
+set(UBUNTU_MANIFEST_PATH "manifest.json.in" CACHE INTERNAL "Tell QtCreator location and name of the manifest file")
 
 if(CLICK_MODE)
     if(NOT DEFINED BZR_SOURCE)
@@ -30,6 +30,14 @@
     set(EXEC "qmlscene -qt5 ${MAIN_QML} --url=%u -I ./plugins")
     set(DESKTOP_DIR ${DATA_DIR})
     set(URLS_DIR ${DATA_DIR})
+    
+    if(NOT BZR_REVNO)
+        set(BZR_REVNO "latest")
+    endif(NOT BZR_REVNO)
+    
+    configure_file(manifest.json.in ${CMAKE_CURRENT_BINARY_DIR}/manifest.json)
+    install(FILES ${CMAKE_CURRENT_BINARY_DIR}/manifest.json apparmor.json
+            music-app-content.json DESTINATION ${CMAKE_INSTALL_PREFIX})
 else(CLICK_MODE)
     set(DATA_DIR ${CMAKE_INSTALL_DATADIR}/${APP_HARDCODE})
     set(EXEC ${APP_HARDCODE})
@@ -53,7 +61,7 @@
 file(GLOB SRC_FILES
      RELATIVE ${CMAKE_CURRENT_SOURCE_DIR}
      *.qml *.js *.png *.js *.json)
-install(DIRECTORY common images DESTINATION ${DATA_DIR})
+install(DIRECTORY app DESTINATION ${DATA_DIR})
 install(FILES ${SRC_FILES} ${ICON_FILE} DESTINATION ${DATA_DIR})
 
 configure_file(${DESKTOP_FILE}.in.in ${DESKTOP_FILE}.in)
@@ -71,9 +79,7 @@
 # Tests
 enable_testing()
 
-add_subdirectory(click)
-add_subdirectory(common)
-add_subdirectory(images)
+add_subdirectory(app)
 add_subdirectory(po)
 add_subdirectory(tests)
 
 
=== added directory 'app'
=== added file 'app/CMakeLists.txt'
--- app/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,10 @@
+add_subdirectory(components)
+add_subdirectory(graphics)
+add_subdirectory(logic)
+add_subdirectory(ui)
+
+# make the qml files visible on qtcreator
+file(GLOB APP_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR}
+*.qml *.js *.png *.js *.json)
+
+add_custom_target(com_ubuntu_music_APP_Files ALL SOURCES ${APP_FILES})
 
=== renamed directory 'common' => 'app/components'
=== modified file 'app/components/BlurredBackground.qml'
--- common/BlurredBackground.qml	2014-11-11 02:46:42 +0000
+++ app/components/BlurredBackground.qml	2015-02-10 03:13:44 +0000
@@ -25,7 +25,7 @@
 Item {
     width: parent.width
 
-    property string art  // : player.currentMetaFile === "" ? Qt.resolvedUrl("../images/[e-mail]") : player.currentMetaArt
+    property string art  // : player.currentMetaFile === "" ? Qt.resolvedUrl("../graphics/[e-mail]") : player.currentMetaArt
 
     // dark layer
     Rectangle {
 
=== modified file 'app/components/CMakeLists.txt'
--- common/CMakeLists.txt	2015-01-20 17:47:30 +0000
+++ app/components/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -1,7 +1,11 @@
+add_subdirectory(Dialog)
+add_subdirectory(HeadState)
+add_subdirectory(Flickables)
 add_subdirectory(ListItemActions)
+add_subdirectory(ViewButton)
 add_subdirectory(Walkthrough)
 
 # make the qml files visible on qtcreator
-file(GLOB COMMON_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+file(GLOB COMPONENTS_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
 
-add_custom_target(com_ubuntu_music_COMMON_QMLFiles ALL SOURCES ${COMMON_QML_FILES})
+add_custom_target(com_ubuntu_music_COMPONENTS_QMLFiles ALL SOURCES ${COMPONENTS_QML_FILES})
 
=== modified file 'app/components/CoverGrid.qml'
--- common/CoverGrid.qml	2015-01-11 16:34:22 +0000
+++ app/components/CoverGrid.qml	2015-02-10 03:13:44 +0000
@@ -60,7 +60,7 @@
                         ? (coverGrid.covers[index].art !== undefined
                            ? coverGrid.covers[index].art
                            : "image://albumart/artist=" + coverGrid.covers[index].author + "&album=" + coverGrid.covers[index].album)
-                        : Qt.resolvedUrl("../images/[e-mail]")
+                        : Qt.resolvedUrl("../graphics/[e-mail]")
 
                 // TODO: This should be investigated once http://pad.lv/1391368
                 //       is resolved. Once it is, these can either be set to
@@ -73,7 +73,7 @@
 
                 onStatusChanged: {
                     if (status === Image.Error) {
-                        source = Qt.resolvedUrl("../images/[e-mail]")
+                        source = Qt.resolvedUrl("../graphics/[e-mail]")
                     } else if (status === Image.Ready && index === 0) {
                         firstSource = source
                     }
 
=== added directory 'app/components/Dialog'
=== added file 'app/components/Dialog/CMakeLists.txt'
--- app/components/Dialog/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB DIALOG_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_DIALOG_QMLFiles ALL SOURCES ${DIALOG_QML_FILES})
 
=== added file 'app/components/Dialog/ContentHubErrorDialog.qml'
--- app/components/Dialog/ContentHubErrorDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/ContentHubErrorDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,38 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+
+Dialog {
+    id: dialogContentHubError
+
+    property alias errorText: errorLabel.text
+
+    Label {
+        id: errorLabel
+        color: styleMusic.common.black
+    }
+
+    Button {
+        text: i18n.tr("OK")
+        onClicked: PopupUtils.close(dialogContentHubError)
+    }
+}
 
=== added file 'app/components/Dialog/ContentHubNotFoundDialog.qml'
--- app/components/Dialog/ContentHubNotFoundDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/ContentHubNotFoundDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,46 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+
+Dialog {
+    id: dialogContentHubNotFound
+
+    Label {
+        color: styleMusic.common.black
+        text: i18n.tr("Imported file not found")
+    }
+
+    Button {
+        text: i18n.tr("Wait")
+        onClicked: {
+            PopupUtils.close(dialogContentHubNotFound)
+
+            contentHubWaitForFile.dialog = PopupUtils.open(Qt.resolvedUrl("ContentHubWaitDialog.qml"), mainView)
+            contentHubWaitForFile.start();
+        }
+    }
+
+    Button {
+        text: i18n.tr("Cancel")
+        onClicked: PopupUtils.close(dialogContentHubNotFound)
+    }
+}
 
=== added file 'app/components/Dialog/ContentHubWaitDialog.qml'
--- app/components/Dialog/ContentHubWaitDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/ContentHubWaitDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,37 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+import "../"
+
+Dialog {
+    id: dialogContentHubWait
+
+    LoadingSpinnerComponent {
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: undefined
+            margins: units.gu(0)
+        }
+        loadingText: i18n.tr("Waiting for file(s)...")
+        visible: true
+    }
+}
 
=== added file 'app/components/Dialog/EditPlaylistDialog.qml'
--- app/components/Dialog/EditPlaylistDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/EditPlaylistDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,80 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+import QtQuick.LocalStorage 2.0
+import "../../logic/meta-database.js" as Library
+import "../../logic/playlists.js" as Playlists
+
+Dialog {
+    id: dialogEditPlaylist
+    // TRANSLATORS: this is a title of a dialog with a prompt to rename a playlist
+    title: i18n.tr("Rename playlist")
+
+    property string oldPlaylistName: ""
+
+    TextField {
+        id: playlistName
+        inputMethodHints: Qt.ImhNoPredictiveText
+        placeholderText: i18n.tr("Enter playlist name")
+    }
+    Label {
+        id: editplaylistoutput
+        color: "red"
+        visible: false
+    }
+
+    Button {
+        text: i18n.tr("Change")
+        color: styleMusic.dialog.confirmButtonColor
+        onClicked: {
+            editplaylistoutput.visible = true
+
+            if (playlistName.text.length > 0) { // make sure something is acually inputed
+                console.debug("Debug: User changed name from "+oldPlaylistName+" to "+playlistName.text)
+
+                if (Playlists.renamePlaylist(oldPlaylistName, playlistName.text) === true) {
+
+                    if (Library.recentContainsPlaylist(oldPlaylistName)) {
+                        Library.recentRenamePlaylist(oldPlaylistName, playlistName.text)
+                    }
+
+                    line2 = playlistName.text
+
+                    playlistChangedHelper()  // update recent/playlist models
+
+                    PopupUtils.close(dialogEditPlaylist)
+                }
+                else {
+                    editplaylistoutput.text = i18n.tr("Playlist already exists")
+                }
+            }
+            else {
+                editplaylistoutput.text = i18n.tr("Please type in a name.")
+            }
+        }
+    }
+    Button {
+        text: i18n.tr("Cancel")
+        color: styleMusic.dialog.cancelButtonColor
+        onClicked: PopupUtils.close(dialogEditPlaylist)
+    }
+}
 
=== added file 'app/components/Dialog/NewPlaylistDialog.qml'
--- app/components/Dialog/NewPlaylistDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/NewPlaylistDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,75 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+import QtQuick.LocalStorage 2.0
+import "../../logic/playlists.js" as Playlists
+
+
+Dialog {
+    id: dialogNewPlaylist
+    objectName: "dialogNewPlaylist"
+    title: i18n.tr("New playlist")
+    TextField {
+        id: playlistName
+        objectName: "playlistNameTextField"
+        placeholderText: i18n.tr("Enter playlist name")
+        inputMethodHints: Qt.ImhNoPredictiveText
+    }
+    Label {
+        id: newplaylistoutput
+        color: "red"
+        visible: false // should only be visible when an error is made.
+    }
+
+    Button {
+        text: i18n.tr("Create")
+        color: styleMusic.dialog.confirmButtonColor
+        objectName: "newPlaylistDialogCreateButton"
+        onClicked: {
+            newplaylistoutput.visible = false // make sure its hidden now if there was an error last time
+            if (playlistName.text.length > 0) { // make sure something is acually inputed
+                if (Playlists.addPlaylist(playlistName.text) === true) {
+                    console.debug("Debug: User created a new playlist named: ", playlistName.text)
+
+                    playlistModel.filterPlaylists();  // reload model
+
+                    PopupUtils.close(dialogNewPlaylist)
+                }
+                else {
+                    console.debug("Debug: Playlist already exists")
+                    newplaylistoutput.visible = true
+                    newplaylistoutput.text = i18n.tr("Playlist already exists")
+                }
+            }
+            else {
+                newplaylistoutput.visible = true
+                newplaylistoutput.text = i18n.tr("Please type in a name.")
+            }
+        }
+    }
+
+    Button {
+        text: i18n.tr("Cancel")
+        color: styleMusic.dialog.cancelButtonColor
+        onClicked: PopupUtils.close(dialogNewPlaylist)
+    }
+}
 
=== added file 'app/components/Dialog/RemovePlaylistDialog.qml'
--- app/components/Dialog/RemovePlaylistDialog.qml	1970-01-01 00:00:00 +0000
+++ app/components/Dialog/RemovePlaylistDialog.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,59 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+import QtQuick.LocalStorage 2.0
+import "../../logic/meta-database.js" as Library
+import "../../logic/playlists.js" as Playlists
+
+Dialog {
+    id: dialogRemovePlaylist
+    // TRANSLATORS: this is a title of a dialog with a prompt to delete a playlist
+    title: i18n.tr("Permanently delete playlist?")
+    text: "("+i18n.tr("This cannot be undone")+")"
+
+    property string oldPlaylistName
+
+    Button {
+        text: i18n.tr("Remove")
+        color: styleMusic.dialog.confirmRemoveButtonColor
+        onClicked: {
+            // removing playlist
+            Playlists.removePlaylist(dialogRemovePlaylist.oldPlaylistName)
+
+            if (Library.recentContainsPlaylist(dialogRemovePlaylist.oldPlaylistName)) {
+                Library.recentRemovePlaylist(dialogRemovePlaylist.oldPlaylistName)
+            }
+
+            playlistChangedHelper(true)  // update recent/playlist models
+
+            songStackPage.page = undefined
+            PopupUtils.close(dialogRemovePlaylist)
+
+            mainPageStack.goBack()
+        }
+    }
+    Button {
+        text: i18n.tr("Cancel")
+        color: styleMusic.dialog.cancelButtonColor
+        onClicked: PopupUtils.close(dialogRemovePlaylist)
+    }
+}
 
=== added directory 'app/components/Flickables'
=== added file 'app/components/Flickables/CMakeLists.txt'
--- app/components/Flickables/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/components/Flickables/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB FLICKABLES_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_FLICKABLES_QMLFiles ALL SOURCES ${FLICKABLES_QML_FILES})
 
=== renamed file 'common/CardView.qml' => 'app/components/Flickables/CardView.qml'
--- common/CardView.qml	2014-11-23 03:50:40 +0000
+++ app/components/Flickables/CardView.qml	2015-02-10 03:13:44 +0000
@@ -17,6 +17,7 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
+import "../"
 
 
 Flickable {
 
=== added file 'app/components/Flickables/MultiSelectListView.qml'
--- app/components/Flickables/MultiSelectListView.qml	1970-01-01 00:00:00 +0000
+++ app/components/Flickables/MultiSelectListView.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,51 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+MusicListView {
+    property var selectedItems: []
+
+    signal clearSelection()
+    signal closeSelection()
+    signal selectAll()
+
+    onClearSelection: selectedItems = []
+    onCloseSelection: {
+        clearSelection()
+        state = "normal"
+    }
+    onSelectAll: {
+        var tmp = selectedItems
+
+        for (var i=0; i < model.count; i++) {
+            if (tmp.indexOf(i) === -1) {
+                tmp.push(i)
+            }
+        }
+
+        selectedItems = tmp
+    }
+    onVisibleChanged: {
+        if (!visible) {
+            closeSelection()
+        }
+    }
+}
 
=== added file 'app/components/Flickables/MusicListView.qml'
--- app/components/Flickables/MusicListView.qml	1970-01-01 00:00:00 +0000
+++ app/components/Flickables/MusicListView.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,32 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+ListView {
+    Component.onCompleted: {
+        // FIXME: workaround for qtubuntu not returning values depending on the grid unit definition
+        // for Flickable.maximumFlickVelocity and Flickable.flickDeceleration
+        var scaleFactor = units.gridUnit / 8;
+        maximumFlickVelocity = maximumFlickVelocity * scaleFactor;
+        flickDeceleration = flickDeceleration * scaleFactor;
+    }
+}
 
=== added directory 'app/components/HeadState'
=== added file 'app/components/HeadState/CMakeLists.txt'
--- app/components/HeadState/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/components/HeadState/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB HEAD_STATE_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_HEAD_STATE_QMLFiles ALL SOURCES ${HEAD_STATE_QML_FILES})
 
=== added file 'app/components/HeadState/MultiSelectHeadState.qml'
--- app/components/HeadState/MultiSelectHeadState.qml	1970-01-01 00:00:00 +0000
+++ app/components/HeadState/MultiSelectHeadState.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) 2015
+ *      Andrew Hayzen <[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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+PageHeadState {
+    id: selectionState
+    actions: [
+        Action {
+            iconName: "select"
+            text: i18n.tr("Select All")
+            onTriggered: {
+                if (listview.selectedItems.length === listview.model.count) {
+                    listview.clearSelection()
+                } else {
+                    listview.selectAll()
+                }
+            }
+        },
+        Action {
+            enabled: listview.selectedItems.length !== 0
+            iconName: "add-to-playlist"
+            text: i18n.tr("Add to playlist")
+            onTriggered: {
+                var items = []
+
+                for (var i=0; i < listview.selectedItems.length; i++) {
+                    items.push(makeDict(listview.model.get(listview.selectedItems[i], listview.model.RoleModelData)));
+                }
+
+                mainPageStack.push(Qt.resolvedUrl("../../ui/AddToPlaylist.qml"),
+                                   {"chosenElements": items})
+
+                listview.closeSelection()
+            }
+        },
+        Action {
+            enabled: listview.selectedItems.length > 0
+            iconName: "add"
+            text: i18n.tr("Add to queue")
+            visible: addToQueue
+
+            onTriggered: {
+                var items = []
+
+                for (var i=0; i < listview.selectedItems.length; i++) {
+                    items.push(listview.model.get(listview.selectedItems[i], listview.model.RoleModelData));
+                }
+
+                trackQueue.appendList(items)
+
+                listview.closeSelection()
+            }
+        },
+        Action {
+            enabled: listview.selectedItems.length > 0
+            iconName: "delete"
+            text: i18n.tr("Delete")
+            visible: removable
+
+            onTriggered: {
+                removed(listview.selectedItems)
+
+                listview.closeSelection()
+            }
+        }
+
+    ]
+    backAction: Action {
+        text: i18n.tr("Cancel selection")
+        iconName: "back"
+        onTriggered: {
+            listview.clearSelection()
+            listview.state = "normal"
+        }
+    }
+    head: thisPage.head
+    name: "selection"
+
+    PropertyChanges {
+        target: thisPage.head
+        backAction: selectionState.backAction
+        actions: selectionState.actions
+    }
+
+    property bool addToQueue: true
+    property ListView listview
+    property bool removable: false
+    property Page thisPage
+
+    signal removed(var selectedItems)
+}
 
=== added file 'app/components/HeadState/PlaylistsHeadState.qml'
--- app/components/HeadState/PlaylistsHeadState.qml	1970-01-01 00:00:00 +0000
+++ app/components/HeadState/PlaylistsHeadState.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2015
+ *      Andrew Hayzen <[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 QtQuick 2.3
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0
+
+
+PageHeadState {
+    name: "default"
+    head: thisPage.head
+    actions: [
+        Action {
+            id: newPlaylistAction
+            objectName: "newPlaylistButton"
+            iconName: "add"
+            onTriggered: {
+                customdebug("New playlist.")
+                PopupUtils.open(Qt.resolvedUrl("../Dialog/NewPlaylistDialog.qml"), mainView)
+            }
+        },
+        Action {
+            id: searchAction
+            iconName: "search"
+            onTriggered: thisPage.state = "search"
+        }
+    ]
+
+    property alias newPlaylistEnabled: newPlaylistAction.enabled
+    property alias searchEnabled: searchAction.enabled
+    property Page thisPage
+}
 
=== renamed file 'common/SearchHeadState.qml' => 'app/components/HeadState/SearchHeadState.qml'
=== added file 'app/components/HeadState/SearchableHeadState.qml'
--- app/components/HeadState/SearchableHeadState.qml	1970-01-01 00:00:00 +0000
+++ app/components/HeadState/SearchableHeadState.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2015
+ *      Andrew Hayzen <[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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+PageHeadState {
+    name: "default"
+    head: thisPage.head
+    actions: Action {
+        id: searchAction
+        iconName: "search"
+        onTriggered: thisPage.state = "search"
+    }
+
+    property alias searchEnabled: searchAction.enabled
+    property Page thisPage
+}
 
=== renamed file 'LibraryListModel.qml' => 'app/components/LibraryListModel.qml'
--- LibraryListModel.qml	2015-01-20 23:58:27 +0000
+++ app/components/LibraryListModel.qml	2015-02-10 03:13:44 +0000
@@ -19,8 +19,8 @@
 
 import QtQuick 2.3
 import QtQuick.LocalStorage 2.0
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
 
 Item {
     id: libraryListModelItem
 
=== modified file 'app/components/ListItemActions/AddToPlaylist.qml'
--- common/ListItemActions/AddToPlaylist.qml	2015-01-11 15:54:04 +0000
+++ app/components/ListItemActions/AddToPlaylist.qml	2015-02-10 03:13:44 +0000
@@ -30,13 +30,7 @@
     onTriggered: {
         console.debug("Debug: Add track to playlist");
 
-        var comp = Qt.createComponent("../../MusicaddtoPlaylist.qml")
-        var addToPlaylist = comp.createObject(mainPageStack, {"chosenElements": [makeDict(model)]});
-
-        if (addToPlaylist == null) {  // Error Handling
-         console.log("Error creating object");
-        }
-
-        mainPageStack.push(addToPlaylist)
+        mainPageStack.push(Qt.resolvedUrl("../../ui/AddToPlaylist.qml"),
+                           {"chosenElements": [makeDict(model)]})
     }
 }
 
=== modified file 'app/components/ListItemActions/AddToQueue.qml'
--- common/ListItemActions/AddToQueue.qml	2014-10-28 00:00:26 +0000
+++ app/components/ListItemActions/AddToQueue.qml	2015-02-10 03:13:44 +0000
@@ -19,7 +19,7 @@
 import QtQuick 2.3
 import QtQuick.LocalStorage 2.0
 import Ubuntu.Components 1.1
-import "../../meta-database.js" as Library
+import "../../logic/meta-database.js" as Library
 
 Action {
     iconName: "add"
 
=== modified file 'app/components/MusicPage.qml'
--- common/MusicPage.qml	2015-01-10 19:22:08 +0000
+++ app/components/MusicPage.qml	2015-02-10 03:13:44 +0000
@@ -25,7 +25,7 @@
 Page {
     id: thisPage
     anchors {
-        bottomMargin: musicToolbar.visible ? musicToolbar.currentHeight : 0
+        bottomMargin: musicToolbar.visible ? musicToolbar.height : 0
         fill: parent
     }
 
@@ -56,7 +56,7 @@
 
     onVisibleChanged: {
         if (visible) {
-            musicToolbar.setPage(thisPage);
+            mainPageStack.setPage(thisPage);
         }
     }
 }
 
=== modified file 'app/components/MusicRow.qml'
--- common/MusicRow.qml	2014-10-23 17:40:04 +0000
+++ app/components/MusicRow.qml	2015-02-10 03:13:44 +0000
@@ -55,7 +55,7 @@
 
         onStatusChanged: {
             if (status === Image.Error) {
-                source = Qt.resolvedUrl("../images/[e-mail]")
+                source = Qt.resolvedUrl("../graphics/[e-mail]")
             }
         }
         visible: imageSource !== undefined
 
=== renamed file 'MusicToolbar.qml' => 'app/components/MusicToolbar.qml'
--- MusicToolbar.qml	2015-01-23 07:22:52 +0000
+++ app/components/MusicToolbar.qml	2015-02-10 03:13:44 +0000
@@ -18,335 +18,265 @@
  */
 
 import QtQuick 2.3
-import QtQuick.LocalStorage 2.0
 import QtMultimedia 5.0
 import Ubuntu.Components 1.1
-import Ubuntu.Components.Popups 1.0
-import "common"
 
-Item {
+Rectangle {
     anchors {
         bottom: parent.bottom
         left: parent.left
         right: parent.right
     }
-
-    // Properties storing the current page info
-    property var currentPage: null
-    property var currentTab: null
-
-    // Properties and signals for the toolbar
-    property alias currentHeight: musicToolbarPanel.height
-    property alias opened: musicToolbarPanel.opened
-
-    property bool popping: false
-
-    /* Helper functions */
-
-    // Back button has been pressed, jump up pageStack or back to parent page
-    function goBack()
-    {
-        if (mainPageStack !== null && mainPageStack.depth > 1) {
-            mainPageStack.pop(currentPage)
-        }
-    }
-
-    // Pop a specific page in the stack
-    function popPage(page)
-    {
-        var tmpPages = []
-
-        popping = true
-
-        while (mainPageStack.currentPage !== page && mainPageStack.depth > 0) {
-            tmpPages.push(mainPageStack.currentPage)
-            mainPageStack.pop()
-        }
-
-        if (mainPageStack.depth > 0) {
-            mainPageStack.pop()
-        }
-
-        for (var i=tmpPages.length - 1; i > -1; i--) {
-            mainPageStack.push(tmpPages[i])
-        }
-
-        popping = false
-    }
-
-    // Set the current page, and any parent/stacks
-    function setPage(childPage)
-    {
-        if (!popping) {
-            currentPage = childPage;
-        }
-    }
-
-    Panel {
-        id: musicToolbarPanel
+    color: styleMusic.common.black
+    height: units.gu(7.25)
+    objectName: "musicToolbarObject"
+
+    // Hack for autopilot otherwise MusicToolbar appears as QQuickRectangle
+    // due to bug 1341671 it is required that there is a property so that
+    // qml doesn't optimise using the parent type
+    property bool bug1341671workaround: true
+
+    /* Toolbar controls */
+    Item {
+        id: toolbarControls
         anchors {
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        height: units.gu(7.25)
-        locked: true
-        opened: true
-
-        /* Expanded toolbar */
-        Item {
-            id: musicToolbarExpandedContainer
-            anchors {
-                fill: parent
-            }
+            fill: parent
+        }
+        state: trackQueue.model.count === 0 ? "disabled" : "enabled"
+        states: [
+            State {
+                name: "disabled"
+                PropertyChanges {
+                    target: disabledPlayerControlsGroup
+                    visible: true
+                }
+                PropertyChanges {
+                    target: enabledPlayerControlsGroup
+                    visible: false
+                }
+            },
+            State {
+                name: "enabled"
+                PropertyChanges {
+                    target: disabledPlayerControlsGroup
+                    visible: false
+                }
+                PropertyChanges {
+                    target: enabledPlayerControlsGroup
+                    visible: true
+                }
+            }
+        ]
+
+        /* Disabled (empty state) controls */
+        Item {
+            id: disabledPlayerControlsGroup
+            anchors {
+                bottom: playerControlsProgressBar.top
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+
+            Label {
+                id: noSongsInQueueLabel
+                anchors {
+                    left: parent.left
+                    leftMargin: units.gu(2)
+                    right: disabledPlayerControlsPlayButton.left
+                    rightMargin: units.gu(2)
+                    verticalCenter: parent.verticalCenter
+                }
+                color: styleMusic.playerControls.labelColor
+                text: i18n.tr("Tap to shuffle music")
+                fontSize: "large"
+                visible: !emptyPageLoader.noMusic
+                wrapMode: Text.WordWrap
+                maximumLineCount: 2
+            }
+
+            /* Play/Pause button */
+            Icon {
+                id: disabledPlayerControlsPlayButton
+                anchors {
+                    right: parent.right
+                    rightMargin: units.gu(3)
+                    verticalCenter: parent.verticalCenter
+                }
+                color: "#FFF"
+                height: units.gu(2.5)
+                name: player.playbackState === MediaPlayer.PlayingState ?
+                          "media-playback-pause" : "media-playback-start"
+                objectName: "disabledSmallPlayShape"
+                width: height
+            }
+
+            /* Click to shuffle music */
+            MouseArea {
+                anchors {
+                    fill: parent
+                }
+                onClicked: {
+                    if (emptyPageLoader.noMusic) {
+                        return;
+                    }
+
+                    if (trackQueue.model.count === 0) {
+                        playRandomSong();
+                    }
+                    else {
+                        player.toggle();
+                    }
+                }
+            }
+        }
+
+        /* Enabled (queue > 0) controls */
+        Item {
+            id: enabledPlayerControlsGroup
+            anchors {
+                bottom: playerControlsProgressBar.top
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+
+            /* Album art in player controls */
+            CoverGrid {
+                 id:  playerControlsImage
+                 anchors {
+                     bottom: parent.bottom
+                     left: parent.left
+                     top: parent.top
+                 }
+                 covers: [{art: player.currentMetaArt, author: player.currentMetaArtist, album: player.currentMetaArt}]
+                 size: parent.height
+            }
+
+            /* Column of meta labels */
+            Column {
+                id: playerControlsLabels
+                anchors {
+                    left: playerControlsImage.right
+                    leftMargin: units.gu(1.5)
+                    right: playerControlsPlayButton.left
+                    rightMargin: units.gu(1)
+                    verticalCenter: parent.verticalCenter
+                }
+
+                /* Title of track */
+                Label {
+                    id: playerControlsTitle
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    color: "#FFF"
+                    elide: Text.ElideRight
+                    fontSize: "small"
+                    font.weight: Font.DemiBold
+                    text: player.currentMetaTitle === ""
+                          ? player.source : player.currentMetaTitle
+                }
+
+                /* Artist of track */
+                Label {
+                    id: playerControlsArtist
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    color: "#FFF"
+                    elide: Text.ElideRight
+                    fontSize: "small"
+                    opacity: 0.4
+                    text: player.currentMetaArtist
+                }
+            }
+
+            /* Play/Pause button */
+            Icon {
+                id: playerControlsPlayButton
+                anchors {
+                    right: parent.right
+                    rightMargin: units.gu(3)
+                    verticalCenter: parent.verticalCenter
+                }
+                color: "#FFF"
+                height: units.gu(2.5)
+                name: player.playbackState === MediaPlayer.PlayingState ?
+                          "media-playback-pause" : "media-playback-start"
+                objectName: "playShape"
+                width: height
+            }
+
+            /* Mouse area to jump to now playing */
+            MouseArea {
+                anchors {
+                    fill: parent
+                }
+                objectName: "jumpNowPlaying"
+
+                onClicked: tabs.pushNowPlaying()
+            }
+
+            /* Mouse area for the play button (ontop of the jump to now playing) */
+            MouseArea {
+                anchors {
+                    bottom: parent.bottom
+                    horizontalCenter: playerControlsPlayButton.horizontalCenter
+                    top: parent.top
+                }
+                onClicked: player.toggle()
+                width: units.gu(8)
+
+                Rectangle {
+                    anchors {
+                        fill: parent
+                    }
+                    color: "#FFF"
+                    opacity: parent.pressed ? 0.1 : 0
+
+                    Behavior on opacity {
+                        UbuntuNumberAnimation {
+                            duration: UbuntuAnimation.FastDuration
+                        }
+                    }
+                }
+            }
+        }
+
+        /* Object which provides the progress bar when toolbar is minimized */
+        Rectangle {
+            id: playerControlsProgressBar
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            color: styleMusic.common.black
+            height: units.gu(0.25)
 
             Rectangle {
-                id: musicToolbarPlayerControls
+                id: playerControlsProgressBarHint
                 anchors {
-                    fill: parent
-                }
-                color: "#000"
-                state: trackQueue.model.count === 0 ? "disabled" : "enabled"
-                states: [
-                    State {
-                        name: "disabled"
-                        PropertyChanges {
-                            target: disabledPlayerControlsGroup
-                            visible: true
-                        }
-                        PropertyChanges {
-                            target: enabledPlayerControlsGroup
-                            visible: false
-                        }
-                    },
-                    State {
-                        name: "enabled"
-                        PropertyChanges {
-                            target: disabledPlayerControlsGroup
-                            visible: false
-                        }
-                        PropertyChanges {
-                            target: enabledPlayerControlsGroup
-                            visible: true
-                        }
-                    }
-                ]
-
-                /* Disabled (empty state) controls */
-                Item {
-                    id: disabledPlayerControlsGroup
-                    anchors {
-                        bottom: playerControlsProgressBar.top
-                        left: parent.left
-                        right: parent.right
-                        top: parent.top
-                    }
-
-                    Label {
-                        id: noSongsInQueueLabel
-                        anchors {
-                            left: parent.left
-                            leftMargin: units.gu(2)
-                            right: disabledPlayerControlsPlayButton.left
-                            rightMargin: units.gu(2)
-                            verticalCenter: parent.verticalCenter
-                        }
-                        color: styleMusic.playerControls.labelColor
-                        text: i18n.tr("Tap to shuffle music")
-                        fontSize: "large"
-                        visible: !emptyPage.noMusic
-                        wrapMode: Text.WordWrap
-                        maximumLineCount: 2
-                    }
-
-                    /* Play/Pause button */
-                    Icon {
-                        id: disabledPlayerControlsPlayButton
-                        anchors {
-                            right: parent.right
-                            rightMargin: units.gu(3)
-                            verticalCenter: parent.verticalCenter
-                        }
-                        color: "#FFF"
-                        height: units.gu(2.5)
-                        name: player.playbackState === MediaPlayer.PlayingState ?
-                                  "media-playback-pause" : "media-playback-start"
-                        objectName: "disabledSmallPlayShape"
-                        width: height
-                    }
-
-                    /* Click to shuffle music */
-                    MouseArea {
-                        anchors {
-                            fill: parent
-                        }
-                        onClicked: {
-                            if (emptyPage.noMusic) {
-                                return;
-                            }
-
-                            if (trackQueue.model.count === 0) {
-                                playRandomSong();
-                            }
-                            else {
-                                player.toggle();
-                            }
-                        }
-                    }
-                }
-
-                /* Enabled (queue > 0) controls */
-                Item {
-                    id: enabledPlayerControlsGroup
-                    anchors {
-                        bottom: playerControlsProgressBar.top
-                        left: parent.left
-                        right: parent.right
-                        top: parent.top
-                    }
-
-                    /* Album art in player controls */
-                    CoverGrid {
-                         id:  playerControlsImage
-                         anchors {
-                             bottom: parent.bottom
-                             left: parent.left
-                             top: parent.top
-                         }
-                         covers: [{art: player.currentMetaArt, author: player.currentMetaArtist, album: player.currentMetaArt}]
-                         size: parent.height
-                    }
-
-                    /* Column of meta labels */
-                    Column {
-                        id: playerControlsLabels
-                        anchors {
-                            left: playerControlsImage.right
-                            leftMargin: units.gu(1.5)
-                            right: playerControlsPlayButton.left
-                            rightMargin: units.gu(1)
-                            verticalCenter: parent.verticalCenter
-                        }
-
-                        /* Title of track */
-                        Label {
-                            id: playerControlsTitle
-                            anchors {
-                                left: parent.left
-                                right: parent.right
-                            }
-                            color: "#FFF"
-                            elide: Text.ElideRight
-                            fontSize: "small"
-                            font.weight: Font.DemiBold
-                            text: player.currentMetaTitle === ""
-                                  ? player.source : player.currentMetaTitle
-                        }
-
-                        /* Artist of track */
-                        Label {
-                            id: playerControlsArtist
-                            anchors {
-                                left: parent.left
-                                right: parent.right
-                            }
-                            color: "#FFF"
-                            elide: Text.ElideRight
-                            fontSize: "small"
-                            opacity: 0.4
-                            text: player.currentMetaArtist
-                        }
-                    }
-
-                    /* Play/Pause button */
-                    Icon {
-                        id: playerControlsPlayButton
-                        anchors {
-                            right: parent.right
-                            rightMargin: units.gu(3)
-                            verticalCenter: parent.verticalCenter
-                        }
-                        color: "#FFF"
-                        height: units.gu(2.5)
-                        name: player.playbackState === MediaPlayer.PlayingState ?
-                                  "media-playback-pause" : "media-playback-start"
-                        objectName: "playShape"
-                        width: height
-                    }
-
-                    MouseArea {
-                        anchors {
-                            bottom: parent.bottom
-                            horizontalCenter: playerControlsPlayButton.horizontalCenter
-                            top: parent.top
-                        }
-                        onClicked: player.toggle()
-                        width: units.gu(8)
-
-                        Rectangle {
-                            anchors {
-                                fill: parent
-                            }
-                            color: "#FFF"
-                            opacity: parent.pressed ? 0.1 : 0
-
-                            Behavior on opacity {
-                                UbuntuNumberAnimation {
-                                    duration: UbuntuAnimation.FastDuration
-                                }
-                            }
-                        }
-                    }
-
-                    /* Mouse area to jump to now playing */
-                    Item {
-                        anchors {
-                            bottom: parent.bottom
-                            left: parent.left
-                            right: playerControlsLabels.right
-                            top: parent.top
-                        }
-                        objectName: "jumpNowPlaying"
-                        function trigger() {
-                            tabs.pushNowPlaying();
-                        }
-                    }
-                }
-
-                /* Object which provides the progress bar when toolbar is minimized */
-                Rectangle {
-                    id: playerControlsProgressBar
-                    anchors {
-                        bottom: parent.bottom
-                        left: parent.left
-                        right: parent.right
-                    }
-                    color: styleMusic.common.black
-                    height: units.gu(0.25)
-
-                    Rectangle {
-                        id: playerControlsProgressBarHint
-                        anchors {
-                            left: parent.left
-                            top: parent.top
-                        }
-                        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;
-                            }
-                        }
+                    left: parent.left
+                    top: parent.top
+                }
+                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;
                     }
                 }
             }
         }
     }
 }
-
 
=== added file 'app/components/NowPlaying.qml'
--- app/components/NowPlaying.qml	1970-01-01 00:00:00 +0000
+++ app/components/NowPlaying.qml	2015-02-10 03:13:44 +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;
+                    }
+                }
+            }
+        }
+    }
+}
 
=== renamed file 'Player.qml' => 'app/components/Player.qml'
=== added file 'app/components/PlaylistsEmptyState.qml'
--- app/components/PlaylistsEmptyState.qml	1970-01-01 00:00:00 +0000
+++ app/components/PlaylistsEmptyState.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,58 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+Rectangle {
+    id: playlistsEmptyState
+    anchors {
+        fill: parent
+    }
+    color: mainView.backgroundColor
+
+    Column {
+        anchors.centerIn: parent
+        spacing: units.gu(4)
+        width: units.gu(36)
+
+        Label {
+            color: styleMusic.libraryEmpty.labelColor
+            elide: Text.ElideRight
+            fontSize: "x-large"
+            horizontalAlignment: Text.AlignLeft
+            maximumLineCount: 2
+            text: i18n.tr("No playlists found")
+            width: parent.width
+            wrapMode: Text.WordWrap
+        }
+
+        Label {
+            color: styleMusic.libraryEmpty.labelColor
+            elide: Text.ElideRight
+            fontSize: "large"
+            horizontalAlignment: Text.AlignLeft
+            maximumLineCount: 4
+            text: i18n.tr("Get more out of Music by tapping the %1 icon to start making playlists for every mood and occasion.").arg('"+"')
+            width: parent.width
+            wrapMode: Text.WordWrap
+        }
+    }
+}
 
=== renamed file 'Style.qml' => 'app/components/Style.qml'
=== added directory 'app/components/ViewButton'
=== added file 'app/components/ViewButton/CMakeLists.txt'
--- app/components/ViewButton/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/components/ViewButton/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB VIEW_BUTTON_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_VIEW_BUTTON_QMLFiles ALL SOURCES ${VIEW_BUTTON_QML_FILES})
 
=== added file 'app/components/ViewButton/PlayAllButton.qml'
--- app/components/ViewButton/PlayAllButton.qml	1970-01-01 00:00:00 +0000
+++ app/components/ViewButton/PlayAllButton.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,34 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+Button {
+    color: UbuntuColors.green
+    height: units.gu(4)
+    // TRANSLATORS: this appears in a button with limited space (around 14 characters)
+    text: i18n.tr("Play all")
+    width: units.gu(15)
+
+    property var model
+
+    onClicked: trackClicked(model, 0)  // play track
+}
 
=== added file 'app/components/ViewButton/QueueAllButton.qml'
--- app/components/ViewButton/QueueAllButton.qml	1970-01-01 00:00:00 +0000
+++ app/components/ViewButton/QueueAllButton.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,46 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+Button {
+    height: units.gu(4)
+    strokeColor: UbuntuColors.green
+    width: units.gu(15)
+
+    property var model
+
+    onClicked: addQueueFromModel(model)
+
+    Text {
+        anchors {
+            centerIn: parent
+        }
+        color: "white"
+        elide: Text.ElideRight
+        height: parent.height
+        horizontalAlignment: Text.AlignHCenter
+        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
+        text: i18n.tr("Queue all")
+        verticalAlignment: Text.AlignVCenter
+        width: parent.width - units.gu(2)
+    }
+}
 
=== added file 'app/components/ViewButton/ShuffleButton.qml'
--- app/components/ViewButton/ShuffleButton.qml	1970-01-01 00:00:00 +0000
+++ app/components/ViewButton/ShuffleButton.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,46 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+
+Button {
+    height: units.gu(4)
+    strokeColor: UbuntuColors.green
+    width: units.gu(15)
+
+    property var model
+
+    onClicked: shuffleModel(model)
+
+    Text {
+        anchors {
+            centerIn: parent
+        }
+        color: "white"
+        elide: Text.ElideRight
+        height: parent.height
+        horizontalAlignment: Text.AlignHCenter
+        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
+        text: i18n.tr("Shuffle")
+        verticalAlignment: Text.AlignVCenter
+        width: parent.width - units.gu(2)
+    }
+}
 
=== modified file 'app/components/Walkthrough/Slide1.qml'
--- common/Walkthrough/Slide1.qml	2015-02-02 14:03:12 +0000
+++ app/components/Walkthrough/Slide1.qml	2015-02-10 03:13:44 +0000
@@ -39,7 +39,7 @@
             height: (parent.height - bodyText.contentHeight - introductionText.height - 4*units.gu(4))/2
             image: Image {
                 id: centerImage
-                source: Qt.resolvedUrl("../../images/[e-mail]")
+                source: Qt.resolvedUrl("../../graphics/[e-mail]")
             }
             radius: "medium"
             width: height
 
=== modified file 'app/components/Walkthrough/Slide2.qml'
--- common/Walkthrough/Slide2.qml	2015-02-02 13:37:23 +0000
+++ app/components/Walkthrough/Slide2.qml	2015-02-10 03:13:44 +0000
@@ -38,7 +38,7 @@
             }
             height: (parent.height - bodyText.contentHeight - introductionText.height - 4*units.gu(4))/2
             fillMode: Image.PreserveAspectFit
-            source: Qt.resolvedUrl("../../images/sd_phone_icon.png")
+            source: Qt.resolvedUrl("../../graphics/sd_phone_icon.png")
         }
 
         Label {
 
=== modified file 'app/components/Walkthrough/Slide3.qml'
--- common/Walkthrough/Slide3.qml	2015-02-02 13:37:23 +0000
+++ app/components/Walkthrough/Slide3.qml	2015-02-10 03:13:44 +0000
@@ -38,7 +38,7 @@
             }
             height: (parent.height - introductionText.height - finalMessage.contentHeight - 4.5*units.gu(4))/2
             fillMode: Image.PreserveAspectFit
-            source: Qt.resolvedUrl("../../images/music_download_icon.png")
+            source: Qt.resolvedUrl("../../graphics/music_download_icon.png")
         }
 
         Label {
 
=== modified file 'app/components/Walkthrough/Walkthrough.qml'
--- common/Walkthrough/Walkthrough.qml	2015-01-31 02:47:16 +0000
+++ app/components/Walkthrough/Walkthrough.qml	2015-02-10 03:13:44 +0000
@@ -134,7 +134,7 @@
                 anchors.verticalCenter: parent.verticalCenter
                 antialiasing: true
                 height: width
-                source: listView.currentIndex == index ?  "../../images/[e-mail]" : "../../images/[e-mail]"
+                source: listView.currentIndex == index ?  "../../graphics/[e-mail]" : "../../graphics/[e-mail]"
                 width: units.gu(1.5)
             }
         }
 
=== renamed file 'WorkerModelLoader.qml' => 'app/components/WorkerModelLoader.qml'
--- WorkerModelLoader.qml	2015-02-01 03:35:07 +0000
+++ app/components/WorkerModelLoader.qml	2015-02-10 03:13:44 +0000
@@ -21,7 +21,7 @@
 
 WorkerScript {
      id: worker
-     source: "worker-library-loader.js"
+     source: "../logic/worker-library-loader.js"
 
      property bool canLoad: true
      property bool completed: false
 
=== renamed directory 'images' => 'app/graphics'
=== added directory 'app/logic'
=== added file 'app/logic/CMakeLists.txt'
--- app/logic/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/logic/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB LOGIC_JS_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.js)
+
+add_custom_target(com_ubuntu_music_LOGIC_JSFiles ALL SOURCES ${LOGIC_JS_FILES})
 
=== renamed file 'meta-database.js' => 'app/logic/meta-database.js'
=== renamed file 'playlists.js' => 'app/logic/playlists.js'
=== renamed file 'worker-library-loader.js' => 'app/logic/worker-library-loader.js'
=== renamed file 'music-app.qml' => 'app/music-app.qml'
--- music-app.qml	2015-02-05 22:40:14 +0000
+++ app/music-app.qml	2015-02-10 03:13:44 +0000
@@ -22,15 +22,17 @@
 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
 import QtQuick.LocalStorage 2.0
 import QtGraphicalEffects 1.0
 import UserMetrics 0.1
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
-import "common"
+import "logic/meta-database.js" as Library
+import "logic/playlists.js" as Playlists
+import "components"
+import "ui"
 
 MainView {
     objectName: "music"
@@ -55,10 +57,10 @@
     focus: true
     Keys.onPressed: {
         if(event.key === Qt.Key_Escape) {
-            if (musicToolbar.currentPage.searchable && musicToolbar.currentPage.state === "search") {
-                musicToolbar.currentPage.state = "default"
+            if (mainPageStack.currentMusicPage.searchable && mainPageStack.currentMusicPage.state === "search") {
+                mainPageStack.currentMusicPage.state = "default"
             } else {
-                musicToolbar.goBack();  // Esc      Go back
+                mainPageStack.goBack();  // Esc      Go back
             }
         }
         else if(event.modifiers === Qt.AltModifier) {
@@ -95,8 +97,8 @@
                 player.repeat = !player.repeat
                 break;
             case Qt.Key_F:  //      Ctrl+F      Show Search popup
-                if (musicToolbar.currentPage.searchable && musicToolbar.currentPage.state === "default") {
-                    musicToolbar.currentPage.state = "search"
+                if (mainPageStack.currentMusicPage.searchable && mainPageStack.currentMusicPage.state === "default") {
+                    mainPageStack.currentMusicPage.state = "search"
                     header.show()
                 }
 
@@ -159,7 +161,7 @@
         id: backAction
         text: i18n.tr("Back")
         keywords: i18n.tr("Go back to last page")
-        onTriggered: musicToolbar.goBack();
+        onTriggered: mainPageStack.goBack();
     }
 
     // With a default Quit action only the first 4 actions are displayed
@@ -304,7 +306,7 @@
 
                 if (success === true) {
                     if (contentHubWaitForFile.processId === -1) {
-                        contentHubWaitForFile.dialog = PopupUtils.open(contentHubWait, mainView)
+                        contentHubWaitForFile.dialog = PopupUtils.open(Qt.resolvedUrl("components/Dialog/ContentHubWaitDialog.qml"), mainView)
                         contentHubWaitForFile.searchPaths = contentHub.searchPaths;
                         contentHubWaitForFile.processId = processId;
                         contentHubWaitForFile.start();
@@ -318,7 +320,7 @@
                     }
                 }
                 else {
-                    var errordialog = PopupUtils.open(contentHubError, mainView)
+                    var errordialog = PopupUtils.open(Qt.resolvedUrl("components/Dialog/ContentHubErrorDialog.qml"), mainView)
                     errordialog.errorText = err.join("\n")
                 }
             }
@@ -416,7 +418,7 @@
                     stopTimer();
 
                     console.debug("File(s) were not found", JSON.stringify(searchPaths))
-                    PopupUtils.open(contentHubNotFound, mainView)
+                    PopupUtils.open(Qt.resolvedUrl("components/Dialog/ContentHubNotFoundDialog.qml"), mainView)
                 }
             }
             else {
@@ -435,67 +437,6 @@
         }
     }
 
-    Component {
-        id: contentHubWait
-        Dialog {
-            id: dialogContentHubWait
-
-            LoadingSpinnerComponent {
-                anchors {
-                    margins: units.gu(0)
-                }
-                loadingText: i18n.tr("Waiting for file(s)...")
-                visible: true
-            }
-        }
-    }
-
-    Component {
-        id: contentHubError
-        Dialog {
-            id: dialogContentHubError
-
-            property alias errorText: errorLabel.text
-
-            Label {
-                id: errorLabel
-                color: styleMusic.common.black
-            }
-
-            Button {
-                text: i18n.tr("OK")
-                onClicked: PopupUtils.close(dialogContentHubError)
-            }
-        }
-    }
-
-    Component {
-        id: contentHubNotFound
-        Dialog {
-            id: dialogContentHubNotFound
-
-            Label {
-                color: styleMusic.common.black
-                text: i18n.tr("Imported file not found")
-            }
-
-            Button {
-                text: i18n.tr("Wait")
-                onClicked: {
-                    PopupUtils.close(dialogContentHubNotFound)
-
-                    contentHubWaitForFile.dialog = PopupUtils.open(contentHubWait, mainView)
-                    contentHubWaitForFile.start();
-                }
-            }
-
-            Button {
-                text: i18n.tr("Cancel")
-                onClicked: PopupUtils.close(dialogContentHubNotFound)
-            }
-        }
-    }
-
     // UserMetrics to show Music stuff on welcome screen
     Metric {
         id: songsMetric
@@ -607,9 +548,7 @@
 
         // Display walkthrough on first run, even if the user has music
         if (firstRun) {
-            var comp = Qt.createComponent("common/Walkthrough/FirstRunWalkthrough.qml")
-            var walkthrough = comp.createObject(mainPageStack, {});
-            mainPageStack.push(walkthrough)
+            mainPageStack.push(Qt.resolvedUrl("components/Walkthrough/FirstRunWalkthrough.qml"), {})
         }
 
         if (args.values.url) {
@@ -808,10 +747,10 @@
 
                 // TODO: improve in refactoring to be able detect when a track is removed
                 // Update playlists page
-                if (musicPlaylistPage.visible) {
+                if (playlistsPage.visible) {
                     playlistModel.filterPlaylists()
                 } else {
-                    musicPlaylistPage.changed = true
+                    playlistsPage.changed = true
                 }
             }
         }
@@ -847,10 +786,10 @@
                 console.debug("Removed recent:", JSON.stringify(removed))
                 Library.recentRemoveAlbums(removed)
 
-                if (musicStartPage.visible) {
+                if (recentPage.visible) {
                     recentModel.filterRecent()
                 } else {
-                    musicStartPage.changed = true
+                    recentPage.changed = true
                 }
             }
         }
@@ -965,7 +904,7 @@
             if (trackQueue.model.count === 0) {
                 // Nothing in the queue so stop and pop the queue
                 player.stop()
-                musicToolbar.goBack()
+                mainPageStack.goBack()
             } else if (items.indexOf(player.currentIndex) > -1) {
                 // Current track was removed
 
@@ -1022,6 +961,7 @@
             if (preLoadComplete)
             {
                 loading.visible = false
+<<<<<<< TREE
                 playlistTab.loading = false
                 playlistTab.populated = true
             }
@@ -1401,82 +1341,339 @@
 
                     Image {
                         id: imageEmptySD
+=======
+                playlistsTab.loading = false
+                playlistsTab.populated = true
+            }
+        }
+    }
+
+    Layouts {
+        objectName: "musicLayout"
+        id: layouts
+        anchors.fill: parent
+        layouts: [
+            ConditionalLayout {
+                name: "wideAspect"
+                when: wideAspect
+                Rectangle {
+                    anchors.fill: parent
+                    color: "transparent"
+                    Rectangle {
+                        width: layouts.width*0.375
+>>>>>>> MERGE-SOURCE
                         anchors {
-                            verticalCenter: parent.verticalCenter
-                        }
-                        antialiasing: true
-                        fillMode: Image.PreserveAspectFit
-                        height: units.gu(7)
-                        smooth: true
-                        source: "images/music_empty_SD.png"
-                    }
-                }
-
-                Label {
-                    color: styleMusic.libraryEmpty.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "x-large"
-                    horizontalAlignment: Text.AlignLeft
-                    maximumLineCount: 2
-                    text: i18n.tr("No music found")
-                    width: parent.width
-                    wrapMode: Text.WordWrap
-                }
-
-                Label {
-                    color: styleMusic.libraryEmpty.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "large"
-                    horizontalAlignment: Text.AlignLeft
-                    maximumLineCount: 4
-                    text: i18n.tr("Connect your device to any computer and simply drag files to the Music folder or insert removable media with music.")
-                    width: parent.width
-                    wrapMode: Text.WordWrap
-                }
-            }
-        }
-
-        // Overlay to show when no playlists are on the device
-        Rectangle {
-            id: playlistsEmpty
+                            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
-                topMargin: -emptyPage.header.height
-            }
-            color: mainView.backgroundColor
-            visible: emptyPage.noPlaylists && !emptyPage.noMusic && (playlistTab.index === tabs.selectedTab.index || mainPageStack.currentPage.title === i18n.tr("Select playlist"))
-
-            Column {
-                anchors.centerIn: parent
-                spacing: units.gu(4)
-                width: units.gu(36)
-
-                Label {
-                    color: styleMusic.libraryEmpty.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "x-large"
-                    horizontalAlignment: Text.AlignLeft
-                    maximumLineCount: 2
-                    text: i18n.tr("No playlists found")
-                    width: parent.width
-                    wrapMode: Text.WordWrap
-                }
-
-                Label {
-                    color: styleMusic.libraryEmpty.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "large"
-                    horizontalAlignment: Text.AlignLeft
-                    maximumLineCount: 4
-                    text: i18n.tr("Get more out of Music by tapping the %1 icon to start making playlists for every mood and occasion.").arg('"+"')
-                    width: parent.width
-                    wrapMode: Text.WordWrap
-                }
-            }
-        }
-    }
-
-    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
 
=== added directory 'app/ui'
=== renamed file 'MusicaddtoPlaylist.qml' => 'app/ui/AddToPlaylist.qml'
--- MusicaddtoPlaylist.qml	2015-01-28 02:27:52 +0000
+++ app/ui/AddToPlaylist.qml	2015-02-10 03:13:44 +0000
@@ -23,9 +23,11 @@
 import Ubuntu.Components.ListItems 1.0 as ListItem
 import Ubuntu.Components.Popups 1.0
 import QtQuick.LocalStorage 2.0
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
-import "common"
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
 
 
 /* NOTE:
@@ -45,25 +47,10 @@
     searchResultsCount: addToPlaylistModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: addToPlaylistPage.head
-            actions: [
-                Action {
-                    enabled: allSongsModel.count > 0
-                    objectName: "newPlaylistButton"
-                    iconName: "add"
-                    onTriggered: {
-                        customdebug("New playlist.")
-                        PopupUtils.open(newPlaylistDialog, mainView)
-                    }
-                },
-                Action {
-                    enabled: playlistModel.model.count > 0 && allSongsModel.count > 0
-                    iconName: "search"
-                    onTriggered: addToPlaylistPage.state = "search"
-                }
-            ]
+        PlaylistsHeadState {
+            newPlaylistEnabled: allSongsModel.count > 0
+            searchEnabled: playlistModel.model.count > 0 && allSongsModel.count > 0
+            thisPage: addToPlaylistPage
         },
         SearchHeadState {
             id: searchHeader
@@ -129,8 +116,20 @@
                     page.covers = Playlists.getPlaylistCovers(name)
                 }
 
-                musicToolbar.goBack();  // go back to the previous page
+                mainPageStack.goBack();  // go back to the previous page
             }
         }
     }
+
+    // Overlay to show when no playlists are on the device
+    Loader {
+        anchors {
+            fill: parent
+            topMargin: -playlistsPage.header.height
+        }
+        active: playlistModel.model.count === 0 && playlistModel.workerComplete
+        asynchronous: true
+        source: "../components/PlaylistsEmptyState.qml"
+        visible: active
+    }
 }
 
=== renamed file 'MusicAlbums.qml' => 'app/ui/Albums.qml'
--- MusicAlbums.qml	2015-01-20 12:02:52 +0000
+++ app/ui/Albums.qml	2015-02-10 03:13:44 +0000
@@ -20,7 +20,9 @@
 import QtQuick 2.3
 import Ubuntu.Components 1.1
 import Ubuntu.MediaScanner 0.1
-import "common"
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
 
 
 MusicPage {
@@ -31,14 +33,9 @@
     searchResultsCount: albumsModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: albumsPage.head
-            actions: Action {
-                enabled: albumsModelFilter.count > 0
-                iconName: "search"
-                onTriggered: albumsPage.state = "search"
-            }
+        SearchableHeadState {
+            thisPage: albumsPage
+            searchEnabled: albumsModelFilter.count > 0
         },
         SearchHeadState {
             id: searchHeader
@@ -46,6 +43,11 @@
         }
     ]
 
+    // Hack for autopilot otherwise Albums appears as MusicPage
+    // due to bug 1341671 it is required that there is a property so that
+    // qml doesn't optimise using the parent type
+    property bool bug1341671workaround: true
+
     CardView {
         id: albumCardView
         model: SortFilterModel {
@@ -70,24 +72,17 @@
             secondaryText: model.artist != "" ? model.artist : i18n.tr("Unknown Artist")
 
             onClicked: {
-                var comp = Qt.createComponent("common/SongsPage.qml")
-                var songsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "album": model.title,
-                                                      "artist": model.artist,
-                                                      "covers": [{art: model.art}],
-                                                      "isAlbum": true,
-                                                      "genre": undefined,
-                                                      "title": i18n.tr("Album"),
-                                                      "line1": model.artist,
-                                                      "line2": model.title,
-                                                  });
-
-                if (songsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(songsPage)
+                mainPageStack.push(Qt.resolvedUrl("SongsView.qml"),
+                                   {
+                                       "album": model.title,
+                                       "artist": model.artist,
+                                       "covers": [{art: model.art}],
+                                       "isAlbum": true,
+                                       "genre": undefined,
+                                       "title": i18n.tr("Album"),
+                                       "line1": model.artist,
+                                       "line2": model.title
+                                   })
             }
         }
     }
 
=== renamed file 'common/AlbumsPage.qml' => 'app/ui/ArtistView.qml'
--- common/AlbumsPage.qml	2015-01-30 01:23:39 +0000
+++ app/ui/ArtistView.qml	2015-02-10 03:13:44 +0000
@@ -24,11 +24,14 @@
 import Ubuntu.MediaScanner 0.1
 import Ubuntu.Thumbnailer 0.1
 import QtQuick.LocalStorage 2.0
-import "../meta-database.js" as Library
+import "../logic/meta-database.js" as Library
+import "../components"
+import "../components/Flickables"
+import "../components/ViewButton"
 
 MusicPage {
-    id: albumStackPage
-    objectName: "albumsArtistPage"
+    id: artistViewPage
+    objectName: "artistViewPage"
     visible: false
 
     property string artist: ""
@@ -50,57 +53,17 @@
         header: BlurredHeader {
             rightColumn: Column {
                 spacing: units.gu(2)
-                Button {
-                    id: shuffleRow
-                    height: units.gu(4)
-                    strokeColor: UbuntuColors.green
-                    width: units.gu(15)
-                    Text {
-                        anchors {
-                            centerIn: parent
-                        }
-                        color: "white"
-                        elide: Text.ElideRight
-                        height: parent.height
-                        horizontalAlignment: Text.AlignHCenter
-                        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                        text: i18n.tr("Shuffle")
-                        verticalAlignment: Text.AlignVCenter
-                        width: parent.width - units.gu(2)
-                    }
-                    onClicked: shuffleModel(songArtistModel)
-                }
-                Button {
-                    id: queueAllRow
-                    height: units.gu(4)
-                    strokeColor: UbuntuColors.green
-                    width: units.gu(15)
-                    Text {
-                        anchors {
-                            centerIn: parent
-                        }
-                        color: "white"
-                        elide: Text.ElideRight
-                        height: parent.height
-                        horizontalAlignment: Text.AlignHCenter
-                        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                        text: i18n.tr("Queue all")
-                        verticalAlignment: Text.AlignVCenter
-                        width: parent.width - units.gu(2)
-                    }
-                    onClicked: addQueueFromModel(songArtistModel)
-                }
-                Button {
-                    id: playRow
-                    color: UbuntuColors.green
-                    height: units.gu(4)
-                    // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                    text: i18n.tr("Play all")
-                    width: units.gu(15)
-                    onClicked: trackClicked(songArtistModel, 0, true)
+                ShuffleButton {
+                    model: songArtistModel
+                }
+                QueueAllButton {
+                    model: songArtistModel
+                }
+                PlayAllButton {
+                    model: songArtistModel
                 }
             }
-            coverSources: albumStackPage.covers
+            coverSources: artistViewPage.covers
             height: units.gu(30)
             bottomColumn: Column {
                 Label {
@@ -139,18 +102,18 @@
 
             SongsModel {
                 id: songArtistModel
-                albumArtist: albumStackPage.artist
+                albumArtist: artistViewPage.artist
                 store: musicStore
             }
         }
         itemWidth: units.gu(12)
         model: AlbumsModel {
             id: albumsModel
-            albumArtist: albumStackPage.artist
+            albumArtist: artistViewPage.artist
             store: musicStore
             onStatusChanged: {
                 if (albumsModel.status === SongsModel.Ready && loaded && albumsModel.count === 0) {
-                    musicToolbar.popPage(albumStackPage)
+                    mainPageStack.popPage(artistViewPage)
                 }
             }
         }
@@ -162,24 +125,17 @@
             secondaryTextVisible: false
 
             onClicked: {
-                var comp = Qt.createComponent("SongsPage.qml")
-                var songsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "album": model.title,
-                                                      "artist": model.artist,
-                                                      "covers": [{art: model.art}],
-                                                      "isAlbum": true,
-                                                      "genre": undefined,
-                                                      "title": i18n.tr("Album"),
-                                                      "line1": model.artist != "" ? model.artist : i18n.tr("Unknown Artist"),
-                                                      "line2": model.title != "" ? model.title : i18n.tr("Unknown Album"),
-                                                  });
-
-                if (songsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(songsPage)
+                mainPageStack.push(Qt.resolvedUrl("SongsView.qml"),
+                                   {
+                                       "album": model.title,
+                                       "artist": model.artist,
+                                       "covers": [{art: model.art}],
+                                       "isAlbum": true,
+                                       "genre": undefined,
+                                       "title": i18n.tr("Album"),
+                                       "line1": model.artist != "" ? model.artist : i18n.tr("Unknown Artist"),
+                                       "line2": model.title != "" ? model.title : i18n.tr("Unknown Album")
+                                   })
             }
         }
     }
 
=== renamed file 'MusicArtists.qml' => 'app/ui/Artists.qml'
--- MusicArtists.qml	2015-01-20 12:02:52 +0000
+++ app/ui/Artists.qml	2015-02-10 03:13:44 +0000
@@ -24,9 +24,11 @@
 import Ubuntu.MediaScanner 0.1
 import Ubuntu.Thumbnailer 0.1
 import QtQuick.LocalStorage 2.0
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
-import "common"
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
 
 
 MusicPage {
@@ -37,14 +39,9 @@
     searchResultsCount: artistsModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: artistsPage.head
-            actions: Action {
-                enabled: artistsModelFilter.count > 0
-                iconName: "search"
-                onTriggered: artistsPage.state = "search"
-            }
+        SearchableHeadState {
+            thisPage: artistsPage
+            searchEnabled: artistsModelFilter.count > 0
         },
         SearchHeadState {
             id: searchHeader
@@ -52,6 +49,11 @@
         }
     ]
 
+    // Hack for autopilot otherwise Artists appears as MusicPage
+    // due to bug 1341671 it is required that there is a property so that
+    // qml doesn't optimise using the parent type
+    property bool bug1341671workaround: true
+
     CardView {
         id: artistCardView
         itemWidth: units.gu(12)
@@ -97,21 +99,13 @@
                 }
             }
 
-
             onClicked: {
-                var comp = Qt.createComponent("common/AlbumsPage.qml")
-                var albumsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "artist": model.artist,
-                                                      "covers": artistCard.coverSources,
-                                                      "title": i18n.tr("Artist"),
-                                                  });
-
-                if (albumsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(albumsPage)
+                mainPageStack.push(Qt.resolvedUrl("ArtistView.qml"),
+                                   {
+                                       "artist": model.artist,
+                                       "covers": artistCard.coverSources,
+                                       "title": i18n.tr("Artist")
+                                   })
             }
         }
     }
 
=== added file 'app/ui/CMakeLists.txt'
--- app/ui/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/ui/CMakeLists.txt	2015-02-10 03:13:44 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB UI_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_UI_QMLFiles ALL SOURCES ${UI_QML_FILES})
 
=== renamed file 'MusicGenres.qml' => 'app/ui/Genres.qml'
--- MusicGenres.qml	2015-01-20 12:02:52 +0000
+++ app/ui/Genres.qml	2015-02-10 03:13:44 +0000
@@ -20,7 +20,9 @@
 import QtQuick 2.3
 import Ubuntu.Components 1.1
 import Ubuntu.MediaScanner 0.1
-import "common"
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
 
 
 MusicPage {
@@ -31,14 +33,9 @@
     searchResultsCount: genresModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: genresPage.head
-            actions: Action {
-                enabled: genresModelFilter.count > 0
-                iconName: "search"
-                onTriggered: genresPage.state = "search"
-            }
+        SearchableHeadState {
+            thisPage: genresPage
+            searchEnabled: genresModelFilter.count > 0
         },
         SearchHeadState {
             id: searchHeader
@@ -46,6 +43,11 @@
         }
     ]
 
+    // Hack for autopilot otherwise Albums appears as MusicPage
+    // due to bug 1341671 it is required that there is a property so that
+    // qml doesn't optimise using the parent type
+    property bool bug1341671workaround: true
+
     CardView {
         id: genreCardView
         itemWidth: units.gu(12)
@@ -98,23 +100,16 @@
             }
 
             onClicked: {
-                var comp = Qt.createComponent("common/SongsPage.qml")
-                var songsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "covers": genreCard.coverSources,
-                                                      "album": undefined,
-                                                      "isAlbum": true,
-                                                      "genre": model.genre,
-                                                      "title": i18n.tr("Genre"),
-                                                      "line2": model.genre,
-                                                      "line1": i18n.tr("Genre")
-                                                  });
-
-                if (songsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(songsPage)
+                mainPageStack.push(Qt.resolvedUrl("SongsView.qml"),
+                                   {
+                                       "covers": genreCard.coverSources,
+                                       "album": undefined,
+                                       "isAlbum": true,
+                                       "genre": model.genre,
+                                       "title": i18n.tr("Genre"),
+                                       "line2": model.genre,
+                                       "line1": i18n.tr("Genre")
+                                   })
             }
         }
     }
 
=== added file 'app/ui/LibraryEmptyState.qml'
--- app/ui/LibraryEmptyState.qml	1970-01-01 00:00:00 +0000
+++ app/ui/LibraryEmptyState.qml	2015-02-10 03:13:44 +0000
@@ -0,0 +1,123 @@
+/*
+ * 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 QtQuick 2.3
+import Ubuntu.Components 1.1
+
+Page {
+    id: libraryEmptyPage
+    anchors {
+        fill: parent
+    }
+
+    // Overlay to show when no tracks detected on the device
+    Rectangle {
+        id: libraryEmpty
+        anchors {
+            fill: parent
+            topMargin: -libraryEmptyPage.header.height
+        }
+        color: mainView.backgroundColor
+
+        Column {
+            id: noMusicTextColumn
+            anchors {
+                centerIn: parent
+            }
+            spacing: units.gu(4)
+            width: units.gu(36)
+
+            Row {
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                }
+
+                Item {
+                    height: parent.height
+                    width: imageEmptyDownload.width + units.gu(2)
+
+                    Image {
+                        id: imageEmptyDownload
+                        anchors {
+                            horizontalCenter: parent.horizontalCenter
+                            verticalCenter: parent.verticalCenter
+                        }
+                        antialiasing: true
+                        fillMode: Image.PreserveAspectFit
+                        height: units.gu(10)
+                        smooth: true
+                        source: "../graphics/music_empty_download.png"
+                    }
+                }
+
+                Item {
+                    height: parent.height
+                    width: units.gu(7)
+
+                    Image {
+                        id: imageSep
+                        anchors {
+                            horizontalCenter: parent.horizontalCenter
+                            verticalCenter: parent.verticalCenter
+                        }
+                        antialiasing: true
+                        fillMode: Image.PreserveAspectFit
+                        height: units.gu(6)
+                        smooth: true
+                        source: "../graphics/div.png"
+                    }
+                }
+
+                Image {
+                    id: imageEmptySD
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                    }
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                    height: units.gu(7)
+                    smooth: true
+                    source: "../graphics/music_empty_SD.png"
+                }
+            }
+
+            Label {
+                color: styleMusic.libraryEmpty.labelColor
+                elide: Text.ElideRight
+                fontSize: "x-large"
+                horizontalAlignment: Text.AlignLeft
+                maximumLineCount: 2
+                text: i18n.tr("No music found")
+                width: parent.width
+                wrapMode: Text.WordWrap
+            }
+
+            Label {
+                color: styleMusic.libraryEmpty.labelColor
+                elide: Text.ElideRight
+                fontSize: "large"
+                horizontalAlignment: Text.AlignLeft
+                maximumLineCount: 4
+                text: i18n.tr("Connect your device to any computer and simply drag files to the Music folder or insert removable media with music.")
+                width: parent.width
+                wrapMode: Text.WordWrap
+            }
+        }
+    }
+}
 
=== renamed file 'MusicNowPlaying.qml' => 'app/ui/NowPlayingView.qml'
--- MusicNowPlaying.qml	2015-01-28 02:30:43 +0000
+++ app/ui/NowPlayingView.qml	2015-02-10 03:13:44 +0000
@@ -22,11 +22,13 @@
 import QtQuick.LocalStorage 2.0
 import Ubuntu.Components 1.1
 import Ubuntu.Thumbnailer 0.1
-import "common"
-import "common/ListItemActions"
-import "common/Themes/Ambiance"
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
+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
 
 MusicPage {
     id: nowPlaying
@@ -35,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)
@@ -98,14 +100,8 @@
 
                         items.push(makeDict(trackQueue.model.get(player.currentIndex)));
 
-                        var comp = Qt.createComponent("MusicaddtoPlaylist.qml")
-                        var addToPlaylist = comp.createObject(mainPageStack, {"chosenElements": items});
-
-                        if (addToPlaylist == null) {  // Error Handling
-                            console.log("Error creating object");
-                        }
-
-                        mainPageStack.push(addToPlaylist)
+                        mainPageStack.push(Qt.resolvedUrl("AddToPlaylist.qml"),
+                                           {"chosenElements": items})
                     }
                 },
                 Action {
@@ -126,619 +122,22 @@
                 actions: defaultState.actions
             }
         },
-        PageHeadState {
-            id: selectionState
-
-            name: "selection"
-            backAction: Action {
-                text: i18n.tr("Cancel selection")
-                iconName: "back"
-                onTriggered: {
-                    queueListLoader.item.clearSelection()
-                    queueListLoader.item.state = "normal"
-                }
-            }
-            actions: [
-                Action {
-                    text: i18n.tr("Select All")
-                    iconName: "select"
-                    onTriggered: {
-                        if (queueListLoader.item.selectedItems.length === trackQueue.model.count) {
-                            queueListLoader.item.clearSelection()
-                        } else {
-                            queueListLoader.item.selectAll()
-                        }
-                    }
-                },
-                Action {
-                    enabled: queueListLoader.item.selectedItems.length > 0
-                    iconName: "add-to-playlist"
-                    text: i18n.tr("Add to playlist")
-                    onTriggered: {
-                        var items = []
-
-                        for (var i=0; i < queueListLoader.item.selectedItems.length; i++) {
-                            items.push(makeDict(trackQueue.model.get(queueListLoader.item.selectedItems[i])));
-                        }
-
-                        var comp = Qt.createComponent("MusicaddtoPlaylist.qml")
-                        var addToPlaylist = comp.createObject(mainPageStack, {"chosenElements": items});
-
-                        if (addToPlaylist == null) {  // Error Handling
-                            console.log("Error creating object");
-                        }
-
-                        mainPageStack.push(addToPlaylist)
-
-                        queueListLoader.item.closeSelection()
-                    }
-                },
-                Action {
-                    enabled: queueListLoader.item.selectedItems.length > 0
-                    iconName: "delete"
-                    text: i18n.tr("Delete")
-                    onTriggered: {
-                        // Remove the tracks from the queue
-                        // Use slice() to copy the list
-                        // so that the indexes don't change as they are removed
-                        trackQueue.removeQueueList(queueListLoader.item.selectedItems.slice())
-
-                        queueListLoader.item.closeSelection()
-                    }
-                }
-            ]
-            PropertyChanges {
-                target: nowPlaying.head
-                backAction: selectionState.backAction
-                actions: selectionState.actions
+        MultiSelectHeadState {
+            addToQueue: false
+            listview: queueListLoader.item
+            removable: true
+            thisPage: nowPlaying
+
+            onRemoved: {
+                // Remove the tracks from the queue
+                // Use slice() to copy the list
+                // so that the indexes don't change as they are removed
+                trackQueue.removeQueueList(selectedItems.slice())
             }
         }
     ]
 
-    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: ListView {
-            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")
-            }
-
-            // Requirements for ListItemWithActions
-            property var selectedItems: []
-
-            signal clearSelection()
-            signal closeSelection()
-            signal selectAll()
-
-            onClearSelection: selectedItems = []
-            onCloseSelection: {
-                clearSelection()
-                state = "normal"
-            }
-            onSelectAll: {
-                var tmp = selectedItems
-
-                for (var i=0; i < model.count; i++) {
-                    if (tmp.indexOf(i) === -1) {
-                        tmp.push(i)
-                    }
-                }
-
-                selectedItems = tmp
-            }
-            onVisibleChanged: {
-                if (!visible) {
-                    closeSelection()
-                }
-            }
-
-            Component.onCompleted: {
-                // FIXME: workaround for qtubuntu not returning values depending on the grid unit definition
-                // for Flickable.maximumFlickVelocity and Flickable.flickDeceleration
-                var scaleFactor = units.gridUnit / 8;
-                maximumFlickVelocity = maximumFlickVelocity * scaleFactor;
-                flickDeceleration = flickDeceleration * scaleFactor;
-            }
-
-            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 && !emptyPage.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 && !emptyPage.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: emptyPage.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 && !emptyPage.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 && !emptyPage.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
     }
 }
 
=== renamed file 'MusicPlaylists.qml' => 'app/ui/Playlists.qml'
--- MusicPlaylists.qml	2015-01-21 00:10:33 +0000
+++ app/ui/Playlists.qml	2015-02-10 03:13:44 +0000
@@ -23,8 +23,10 @@
 import Ubuntu.Components.Popups 1.0
 import QtMultimedia 5.0
 import QtQuick.LocalStorage 2.0
-import "playlists.js" as Playlists
-import "common"
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
 
 // page for the playlists
 MusicPage {
@@ -37,25 +39,10 @@
     searchResultsCount: playlistModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: playlistsPage.head
-            actions: [
-                Action {
-                    enabled: allSongsModel.count > 0
-                    objectName: "newPlaylistButton"
-                    iconName: "add"
-                    onTriggered: {
-                        customdebug("New playlist.")
-                        PopupUtils.open(newPlaylistDialog, mainView)
-                    }
-                },
-                Action {
-                    enabled: playlistModel.model.count > 0 && allSongsModel.count > 0
-                    iconName: "search"
-                    onTriggered: playlistsPage.state = "search"
-                }
-            ]
+        PlaylistsHeadState {
+            newPlaylistEnabled: allSongsModel.count > 0
+            searchEnabled: playlistModel.model.count > 0 && allSongsModel.count > 0
+            thisPage: playlistsPage
         },
         SearchHeadState {
             id: searchHeader
@@ -99,25 +86,30 @@
             onClicked: {
                 albumTracksModel.filterPlaylistTracks(model.name)
 
-                var comp = Qt.createComponent("common/SongsPage.qml")
-                var songsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "album": undefined,
-                                                      "covers": coverSources,
-                                                      "isAlbum": false,
-                                                      "genre": undefined,
-                                                      "page": playlistsPage,
-                                                      "title": i18n.tr("Playlist"),
-                                                      "line1": i18n.tr("Playlist"),
-                                                      "line2": model.name,
-                                                  });
-
-                if (songsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(songsPage)
+                mainPageStack.push(Qt.resolvedUrl("SongsView.qml"),
+                                   {
+                                       "album": undefined,
+                                       "covers": coverSources,
+                                       "isAlbum": false,
+                                       "genre": undefined,
+                                       "page": playlistsPage,
+                                       "title": i18n.tr("Playlist"),
+                                       "line1": i18n.tr("Playlist"),
+                                       "line2": model.name,
+                                   })
             }
         }
     }
+
+    // Overlay to show when no playlists are on the device
+    Loader {
+        anchors {
+            fill: parent
+            topMargin: -playlistsPage.header.height
+        }
+        active: playlistModel.model.count === 0 && playlistModel.workerComplete
+        asynchronous: true
+        source: "../components/PlaylistsEmptyState.qml"
+        visible: active
+    }
 }
 
=== renamed file 'MusicStart.qml' => 'app/ui/Recent.qml'
--- MusicStart.qml	2014-11-10 22:20:24 +0000
+++ app/ui/Recent.qml	2015-02-10 03:13:44 +0000
@@ -25,12 +25,14 @@
 import Ubuntu.Thumbnailer 0.1
 import QtMultimedia 5.0
 import QtQuick.LocalStorage 2.0
-import "meta-database.js" as Library
-import "playlists.js" as Playlists
-import "common"
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
 
 MusicPage {
-    id: mainpage
+    id: recentPage
+    objectName: "recentPage"
     title: i18n.tr("Recent")
 
     property bool changed: false
@@ -83,25 +85,18 @@
                     albumTracksModel.filterPlaylistTracks(model.data)
                 }
 
-                var comp = Qt.createComponent("common/SongsPage.qml")
-                var songsPage = comp.createObject(mainPageStack,
-                                                  {
-                                                      "album": model.type !== "playlist" ? model.data : undefined,
-                                                      "artist": model.type !== "playlist" ? recentAlbumSongs.get(0, SongsModel.RoleModelData).artist : undefined,
-                                                      "covers": coverSources,
-                                                      "isAlbum": (model.type === "album"),
-                                                      "genre": undefined,
-                                                      "page": mainpage,
-                                                      "title": (model.type === "album") ? i18n.tr("Album") : i18n.tr("Playlist"),
-                                                      "line1": secondaryText,
-                                                      "line2": primaryText,
-                                                  });
-
-                if (songsPage == null) {  // Error Handling
-                    console.log("Error creating object");
-                }
-
-                mainPageStack.push(songsPage)
+                mainPageStack.push(Qt.resolvedUrl("SongsView.qml"),
+                                   {
+                                       "album": model.type !== "playlist" ? model.data : undefined,
+                                       "artist": model.type !== "playlist" ? recentAlbumSongs.get(0, SongsModel.RoleModelData).artist : undefined,
+                                       "covers": coverSources,
+                                       "isAlbum": (model.type === "album"),
+                                       "genre": undefined,
+                                       "page": recentPage,
+                                       "title": (model.type === "album") ? i18n.tr("Album") : i18n.tr("Playlist"),
+                                       "line1": secondaryText,
+                                       "line2": primaryText,
+                                   })
             }
         }
     }
 
=== renamed file 'MusicTracks.qml' => 'app/ui/Songs.qml'
--- MusicTracks.qml	2015-01-26 03:20:37 +0000
+++ app/ui/Songs.qml	2015-02-10 03:13:44 +0000
@@ -23,99 +23,41 @@
 import Ubuntu.Thumbnailer 0.1
 import QtMultimedia 5.0
 import QtQuick.LocalStorage 2.0
-import "playlists.js" as Playlists
-import "common"
-import "common/ListItemActions"
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
+import "../components/ListItemActions"
 
 
 MusicPage {
-    id: tracksPage
-    objectName: "tracksPage"
+    id: songsPage
+    objectName: "songsPage"
     title: i18n.tr("Songs")
     searchable: true
     searchResultsCount: songsModelFilter.count
     state: "default"
     states: [
-        PageHeadState {
-            name: "default"
-            head: tracksPage.head
-            actions: Action {
-                iconName: "search"
-                onTriggered: tracksPage.state = "search"
-            }
+        SearchableHeadState {
+            thisPage: songsPage
+            searchEnabled: songsModelFilter.count > 0
         },
-        PageHeadState {
-            id: selectionState
-            name: "selection"
-            backAction: Action {
-                text: i18n.tr("Cancel selection")
-                iconName: "back"
-                onTriggered: {
-                    tracklist.clearSelection()
-                    tracklist.state = "normal"
-                }
-            }
-            head: tracksPage.head
-            actions: [
-                Action {
-                    iconName: "select"
-                    text: i18n.tr("Select All")
-                    onTriggered: {
-                        if (tracklist.selectedItems.length === tracklist.model.count) {
-                            tracklist.clearSelection()
-                        } else {
-                            tracklist.selectAll()
-                        }
-                    }
-                },
-                Action {
-                    enabled: tracklist.selectedItems.length !== 0
-                    iconName: "add-to-playlist"
-                    text: i18n.tr("Add to playlist")
-                    onTriggered: {
-                        var items = []
-
-                        for (var i=0; i < tracklist.selectedItems.length; i++) {
-                            items.push(makeDict(tracklist.model.get(tracklist.selectedItems[i], tracklist.model.RoleModelData)));
-                        }
-
-                        var comp = Qt.createComponent("MusicaddtoPlaylist.qml")
-                        var addToPlaylist = comp.createObject(mainPageStack, {"chosenElements": items});
-
-                        if (addToPlaylist == null) {  // Error Handling
-                            console.log("Error creating object");
-                        }
-
-                        mainPageStack.push(addToPlaylist)
-
-                        tracklist.closeSelection()
-                    }
-                },
-                Action {
-                    enabled: tracklist.selectedItems.length > 0
-                    iconName: "add"
-                    text: i18n.tr("Add to queue")
-                    onTriggered: {
-                        var items = []
-
-                        for (var i=0; i < tracklist.selectedItems.length; i++) {
-                            items.push(tracklist.model.get(tracklist.selectedItems[i], tracklist.model.RoleModelData));
-                        }
-
-                        trackQueue.appendList(items)
-
-                        tracklist.closeSelection()
-                    }
-                }
-            ]
+        MultiSelectHeadState {
+            listview: tracklist
+            thisPage: songsPage
         },
         SearchHeadState {
             id: searchHeader
-            thisPage: tracksPage
+            thisPage: songsPage
         }
     ]
 
-    ListView {
+    // Hack for autopilot otherwise Albums appears as MusicPage
+    // due to bug 1341671 it is required that there is a property so that
+    // qml doesn't optimise using the parent type
+    property bool bug1341671workaround: true
+
+    MultiSelectListView {
         id: tracklist
         anchors {
             bottomMargin: units.gu(2)
@@ -139,49 +81,12 @@
             filterCaseSensitivity: Qt.CaseInsensitive
         }
 
-        Component.onCompleted: {
-            // FIXME: workaround for qtubuntu not returning values depending on the grid unit definition
-            // for Flickable.maximumFlickVelocity and Flickable.flickDeceleration
-            var scaleFactor = units.gridUnit / 8;
-            maximumFlickVelocity = maximumFlickVelocity * scaleFactor;
-            flickDeceleration = flickDeceleration * scaleFactor;
-        }
-
-        // Requirements for ListItemWithActions
-        property var selectedItems: []
-
-        signal clearSelection()
-        signal closeSelection()
-        signal selectAll()
-
-        onClearSelection: selectedItems = []
-        onCloseSelection: {
-            clearSelection()
-            state = "normal"
-        }
         onStateChanged: {
             if (state === "multiselectable") {
-                tracksPage.state = "selection"
+                songsPage.state = "selection"
             } else {
                 searchHeader.query = ""  // force query back to default
-                tracksPage.state = "default"
-            }
-        }
-
-        onSelectAll: {
-            var tmp = selectedItems
-
-            for (var i=0; i < model.count; i++) {
-                if (tmp.indexOf(i) === -1) {
-                    tmp.push(i)
-                }
-            }
-
-            selectedItems = tmp
-        }
-        onVisibleChanged: {
-            if (!visible) {
-                closeSelection()
+                songsPage.state = "default"
             }
         }
 
@@ -204,7 +109,7 @@
                 ]
 
                 onItemClicked: {
-                    if (tracksPage.state === "search") {  // only play single track when searching
+                    if (songsPage.state === "search") {  // only play single track when searching
                         trackQueue.clear()
                         trackQueue.append(songsModelFilter.get(index))
                         trackQueueClick(0)
 
=== renamed file 'common/SongsPage.qml' => 'app/ui/SongsView.qml'
--- common/SongsPage.qml	2015-01-30 01:23:39 +0000
+++ app/ui/SongsView.qml	2015-02-10 03:13:44 +0000
@@ -24,9 +24,13 @@
 import Ubuntu.MediaScanner 0.1
 import Ubuntu.Thumbnailer 0.1
 import QtQuick.LocalStorage 2.0
-import "../meta-database.js" as Library
-import "../playlists.js" as Playlists
-import "ListItemActions"
+import "../logic/meta-database.js" as Library
+import "../logic/playlists.js" as Playlists
+import "../components"
+import "../components/Flickables"
+import "../components/HeadState"
+import "../components/ListItemActions"
+import "../components/ViewButton"
 
 MusicPage {
     id: songStackPage
@@ -121,7 +125,7 @@
                     objectName: "editPlaylist"
                     iconName: "edit"
                     onTriggered: {
-                        var dialog = PopupUtils.open(editPlaylistDialog, mainView)
+                        var dialog = PopupUtils.open(Qt.resolvedUrl("../components/Dialog/EditPlaylistDialog.qml"), mainView)
                         dialog.oldPlaylistName = line2
                     }
                 },
@@ -129,7 +133,7 @@
                     objectName: "deletePlaylist"
                     iconName: "delete"
                     onTriggered: {
-                        var dialog = PopupUtils.open(removePlaylistDialog, mainView)
+                        var dialog = PopupUtils.open(Qt.resolvedUrl("../components/Dialog/RemovePlaylistDialog.qml"), mainView)
                         dialog.oldPlaylistName = line2
                     }
                 }
@@ -140,100 +144,29 @@
                 actions: playlistState.actions
             }
         },
-        PageHeadState {
-            id: selectionState
-            name: "selection"
-            backAction: Action {
-                text: i18n.tr("Cancel selection")
-                iconName: "back"
-                onTriggered: {
-                    albumtrackslist.clearSelection()
-                    albumtrackslist.state = "normal"
-                }
-            }
-            actions: [
-                Action {
-                    iconName: "select"
-                    text: i18n.tr("Select All")
-                    onTriggered: {
-                        if (albumtrackslist.selectedItems.length === albumtrackslist.model.count) {
-                            albumtrackslist.clearSelection()
-                        } else {
-                            albumtrackslist.selectAll()
-                        }
-                    }
-                },
-                Action {
-                    enabled: albumtrackslist.selectedItems.length > 0
-                    iconName: "add-to-playlist"
-                    text: i18n.tr("Add to playlist")
-                    onTriggered: {
-                        var items = []
-
-                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
-                            items.push(makeDict(albumtrackslist.model.get(albumtrackslist.selectedItems[i], albumtrackslist.model.RoleModelData)));
-                        }
-
-                        var comp = Qt.createComponent("../MusicaddtoPlaylist.qml")
-                        var addToPlaylist = comp.createObject(mainPageStack, {"chosenElements": items, "page": songStackPage});
-
-                        if (addToPlaylist == null) {  // Error Handling
-                            console.log("Error creating object");
-                        }
-
-                        mainPageStack.push(addToPlaylist)
-
-                        albumtrackslist.closeSelection()
-                    }
-                },
-                Action {
-                    enabled: albumtrackslist.selectedItems.length > 0
-                    iconName: "add"
-                    text: i18n.tr("Add to queue")
-                    onTriggered: {
-                        var items = []
-
-                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
-                            items.push(albumtrackslist.model.get(albumtrackslist.selectedItems[i], albumtrackslist.model.RoleModelData));
-                        }
-
-                        trackQueue.appendList(items)
-
-                        albumtrackslist.closeSelection()
-                    }
-                },
-                Action {
-                    enabled: albumtrackslist.selectedItems.length > 0
-                    iconName: "delete"
-                    text: i18n.tr("Delete")
-                    visible: songStackPage.line1 === i18n.tr("Playlist")
-                    onTriggered: {
-                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
-                            Playlists.removeFromPlaylist(songStackPage.line2, albumtrackslist.selectedItems[i])
-
-                            // Update indexes as an index has been removed
-                            for (var j=i + 1; j < albumtrackslist.selectedItems.length; j++) {
-                                if (albumtrackslist.selectedItems[j] > albumtrackslist.selectedItems[i]) {
-                                    albumtrackslist.selectedItems[j]--;
-                                }
-                            }
-                        }
-
-                        albumtrackslist.closeSelection()
-
-                        playlistChangedHelper()  // update recent/playlist models
-
-                        albumTracksModel.filterPlaylistTracks(songStackPage.line2)
-
-                        // refresh cover art
-                        songStackPage.covers = Playlists.getPlaylistCovers(songStackPage.line2)
-                    }
-                }
-            ]
-            PropertyChanges {
-                target: songStackPage.head
-                backAction: selectionState.backAction
-                actions: selectionState.actions
+        MultiSelectHeadState {
+            listview: albumtrackslist
+            removable: songStackPage.line1 === i18n.tr("Playlist")
+            thisPage: songStackPage
+
+            onRemoved: {
+                for (var i=0; i < selectedItems.length; i++) {
+                    Playlists.removeFromPlaylist(songStackPage.line2, selectedItems[i])
+
+                    // Update indexes as an index has been removed
+                    for (var j=i + 1; j < selectedItems.length; j++) {
+                        if (selectedItems[j] > selectedItems[i]) {
+                            selectedItems[j]--;
+                        }
+                    }
+                }
+
+                playlistChangedHelper()  // update recent/playlist models
+
+                albumTracksModel.filterPlaylistTracks(songStackPage.line2)
+
+                // refresh cover art
+                songStackPage.covers = Playlists.getPlaylistCovers(songStackPage.line2)
             }
         }
     ]
@@ -243,12 +176,12 @@
         store: musicStore
         onStatusChanged: {
             if (songsModel.status === SongsModel.Ready && loaded && songsModel.count === 0) {
-                musicToolbar.popPage(songStackPage)
+                mainPageStack.popPage(songStackPage)
             }
         }
     }
 
-    ListView {
+    MultiSelectListView {
         id: albumtrackslist
         anchors {
             fill: parent
@@ -258,67 +191,12 @@
         objectName: "songspage-listview"
         width: parent.width
 
-        // Requirements for ListItemWithActions
-        property var selectedItems: []
-
-        signal clearSelection()
-        signal closeSelection()
-        signal selectAll()
-
-        onClearSelection: selectedItems = []
-        onCloseSelection: {
-            clearSelection()
-            state = "normal"
-        }
-        onSelectAll: {
-            var tmp = selectedItems
-
-            for (var i=0; i < model.count; i++) {
-                if (tmp.indexOf(i) === -1) {
-                    tmp.push(i)
-                }
-            }
-
-            selectedItems = tmp
-        }
-        onVisibleChanged: {
-            if (!visible) {
-                closeSelection()
-            }
-        }
-
-        Component.onCompleted: {
-            // FIXME: workaround for qtubuntu not returning values depending on the grid unit definition
-            // for Flickable.maximumFlickVelocity and Flickable.flickDeceleration
-            var scaleFactor = units.gridUnit / 8;
-            maximumFlickVelocity = maximumFlickVelocity * scaleFactor;
-            flickDeceleration = flickDeceleration * scaleFactor;
-        }
-
         header: BlurredHeader {
             rightColumn: Column {
                 spacing: units.gu(2)
-                Button {
-                    id: shuffleRow
-                    height: units.gu(4)
-                    strokeColor: UbuntuColors.green
-                    width: units.gu(15)
-                    Text {
-                        anchors {
-                            centerIn: parent
-                        }
-                        color: "white"
-                        elide: Text.ElideRight
-                        height: parent.height
-                        horizontalAlignment: Text.AlignHCenter
-                        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                        text: i18n.tr("Shuffle")
-                        verticalAlignment: Text.AlignVCenter
-                        width: parent.width - units.gu(2)
-                    }
+                ShuffleButton {
+                    model: albumtrackslist.model
                     onClicked: {
-                        shuffleModel(albumtrackslist.model)  // play track
-
                         if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
                             Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
                         } else if (songStackPage.line1 === i18n.tr("Playlist")) {
@@ -330,36 +208,12 @@
                         recentModel.filterRecent()
                     }
                 }
-                Button {
-                    id: queueAllRow
-                    height: units.gu(4)
-                    strokeColor: UbuntuColors.green
-                    width: units.gu(15)
-                    Text {
-                        anchors {
-                            centerIn: parent
-                        }
-                        color: "white"
-                        elide: Text.ElideRight
-                        height: parent.height
-                        horizontalAlignment: Text.AlignHCenter
-                        // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                        text: i18n.tr("Queue all")
-                        verticalAlignment: Text.AlignVCenter
-                        width: parent.width - units.gu(2)
-                    }
-                    onClicked: addQueueFromModel(albumtrackslist.model)
+                QueueAllButton {
+                    model: albumtrackslist.model
                 }
-                Button {
-                    id: playRow
-                    color: UbuntuColors.green
-                    height: units.gu(4)
-                    // TRANSLATORS: this appears in a button with limited space (around 14 characters)
-                    text: i18n.tr("Play all")
-                    width: units.gu(15)
+                PlayAllButton {
+                    model: albumtrackslist.model
                     onClicked: {
-                        trackClicked(albumtrackslist.model, 0)  // play track
-
                         if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
                             Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
                         } else if (songStackPage.line1 === i18n.tr("Playlist")) {
@@ -528,101 +382,4 @@
     }
 
     Component.onCompleted: loaded = true
-
-    // Edit name of playlist dialog
-    Component {
-        id: editPlaylistDialog
-        Dialog {
-            id: dialogEditPlaylist
-            // TRANSLATORS: this is a title of a dialog with a prompt to rename a playlist
-            title: i18n.tr("Rename playlist")
-
-            property string oldPlaylistName: ""
-
-            TextField {
-                id: playlistName
-                inputMethodHints: Qt.ImhNoPredictiveText
-                placeholderText: i18n.tr("Enter playlist name")
-            }
-            Label {
-                id: editplaylistoutput
-                color: "red"
-                visible: false
-            }
-
-            Button {
-                text: i18n.tr("Change")
-                color: styleMusic.dialog.confirmButtonColor
-                onClicked: {
-                    editplaylistoutput.visible = true
-
-                    if (playlistName.text.length > 0) { // make sure something is acually inputed
-                        console.debug("Debug: User changed name from "+oldPlaylistName+" to "+playlistName.text)
-
-                        if (Playlists.renamePlaylist(oldPlaylistName, playlistName.text) === true) {
-
-                            if (Library.recentContainsPlaylist(oldPlaylistName)) {
-                                Library.recentRenamePlaylist(oldPlaylistName, playlistName.text)
-                            }
-
-                            line2 = playlistName.text
-
-                            playlistChangedHelper()  // update recent/playlist models
-
-                            PopupUtils.close(dialogEditPlaylist)
-                        }
-                        else {
-                            editplaylistoutput.text = i18n.tr("Playlist already exists")
-                        }
-                    }
-                    else {
-                        editplaylistoutput.text = i18n.tr("Please type in a name.")
-                    }
-                }
-            }
-            Button {
-                text: i18n.tr("Cancel")
-                color: styleMusic.dialog.cancelButtonColor
-                onClicked: PopupUtils.close(dialogEditPlaylist)
-            }
-        }
-    }
-
-    // Remove playlist dialog
-    Component {
-        id: removePlaylistDialog
-        Dialog {
-            id: dialogRemovePlaylist
-            // TRANSLATORS: this is a title of a dialog with a prompt to delete a playlist
-            title: i18n.tr("Permanently delete playlist?")
-            text: "("+i18n.tr("This cannot be undone")+")"
-
-            property string oldPlaylistName
-
-            Button {
-                text: i18n.tr("Remove")
-                color: styleMusic.dialog.confirmRemoveButtonColor
-                onClicked: {
-                    // removing playlist
-                    Playlists.removePlaylist(dialogRemovePlaylist.oldPlaylistName)
-
-                    if (Library.recentContainsPlaylist(dialogRemovePlaylist.oldPlaylistName)) {
-                        Library.recentRemovePlaylist(dialogRemovePlaylist.oldPlaylistName)
-                    }
-
-                    playlistChangedHelper(true)  // update recent/playlist models
-
-                    songStackPage.page = undefined
-                    PopupUtils.close(dialogRemovePlaylist)
-
-                    musicToolbar.goBack()
-                }
-            }
-            Button {
-                text: i18n.tr("Cancel")
-                color: styleMusic.dialog.cancelButtonColor
-                onClicked: PopupUtils.close(dialogRemovePlaylist)
-            }
-        }
-    }
 }
 
=== renamed file 'click/apparmor.json' => 'apparmor.json'
=== removed directory 'click'
=== removed file 'click/CMakeLists.txt'
--- click/CMakeLists.txt	2014-07-01 23:13:50 +0000
+++ click/CMakeLists.txt	1970-01-01 00:00:00 +0000
@@ -1,15 +0,0 @@
-if(CLICK_MODE)
-    if(NOT BZR_REVNO)
-        set(BZR_REVNO "latest")
-    endif(NOT BZR_REVNO)
-    configure_file(manifest.json.in ${CMAKE_CURRENT_BINARY_DIR}/manifest.json)
-    install(FILES ${CMAKE_CURRENT_BINARY_DIR}/manifest.json apparmor.json
-            music-app-content.json DESTINATION ${CMAKE_INSTALL_PREFIX})
-endif(CLICK_MODE)
-
-# make the click files visible on qtcreator
-file(GLOB CLICK_FILES
-     RELATIVE ${CMAKE_CURRENT_SOURCE_DIR}
-     *.json *.json.in)
-
-add_custom_target(com_ubuntu_music_CLICKFiles ALL SOURCES ${CLICK_FILES})
 
=== renamed file 'click/manifest.json.in' => 'manifest.json.in'
=== renamed file 'click/music-app-content.json' => 'music-app-content.json'
=== modified file 'tests/autopilot/music_app/__init__.py'