Merge lp:~nik90/podbird/add-queue-support into lp:podbird/devel

[Nekhelesh Ramananthan]

Added Queue Support

This however removes,
 - usermetrics since it won't be updated due to the app being in the background
 - playing from the previously saved position...again this won't work when the app is in the background.

[lp:~nik90/podbird/add-queue-support]

138. By Nekhelesh Ramananthan on 2016-03-14

Removed unnecessary comments and getNextIndex() function

139. By Nekhelesh Ramananthan on 2016-03-14

Removed unnecessary js queue functions

140. By Nekhelesh Ramananthan on 2016-03-14

Fixed empty bottom player controls

141. By Nekhelesh Ramananthan on 2016-03-14

Another small fix

142. By Nekhelesh Ramananthan on 2016-03-14

Revert manifest framework change

143. By Nekhelesh Ramananthan on 2016-03-14

Small code style change

144. By Nekhelesh Ramananthan on 2016-03-14

Changed string fullview

=== modified file 'app/podbird.qml'
--- app/podbird.qml	2016-03-05 16:54:12 +0000
+++ app/podbird.qml	2016-03-14 00:33:23 +0000
@@ -19,7 +19,7 @@
 import QtQuick 2.4
 import Podbird 1.0
 import UserMetrics 0.1
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import Ubuntu.Connectivity 1.0
 import Qt.labs.settings 1.0
 import Ubuntu.Components 1.3
@@ -50,6 +50,7 @@
         db.transaction(function (tx) {
             tx.executeSql('UPDATE Episode SET queued=0 WHERE queued=1');
         })
+        Podcasts.clearQueue()
     }
 
     // RefreshModel function to call refreshModel() function of the tab currently
@@ -167,55 +168,121 @@
         }
     }
 
-    // UserMetrics to show Podbird stats on welcome screen
-    Metric {
-        id: podcastsMetric
-        name: "podcast-metrics"
-        // TRANSLATORS: this refers to a number of songs greater than one. The actual number will be prepended to the string automatically (plural forms are not yet fully supported in usermetrics, the library that displays that string)
-        format: i18n.tr("Podcasts listened to today: <b>%1</b>")
-        emptyFormat: i18n.tr("No podcasts listened to today")
-        domain: "com.mikeasoft.podbird"
-    }
-
-    // Load the media player only when the user starts to play some media. This
-    // should improve app-startup slightly.
-    Loader {
-        id: playerLoader
-        sourceComponent: currentUrl != "" ? playerComponent : undefined
-    }
-
-    Component {
-        id: playerComponent
-        MediaPlayer {
-            id: player
-
-            property bool podcastCounted: false
-
-            source: currentUrl
-
-            onSourceChanged: {
-                podcastCounted = false
-            }
-
-            onPositionChanged: {
-                if (currentGuid == "" || duration <= 0) {
-                    return;
-                }
-
-                if (position > 10000 && !podcastCounted) {
-                    podcastCounted = true
-                    podcastsMetric.increment()
-                    console.log("[LOG]: Podcast User metric incremented")
-                }
-
-                var db = Podcasts.init();
-                db.transaction(function (tx) {
-                    tx.executeSql("UPDATE Episode SET position=? WHERE guid=?", [position >= duration ? 120 : position, currentGuid]);
-                    if (position >= duration - 120) {
-                        tx.executeSql("UPDATE Episode SET listened = 1 WHERE guid=?", [currentGuid]);
-                    }
-                });
-            }
+    MediaPlayer {
+        id: player
+
+        // Wrapper function around decodeURIComponent() to prevent exceptions
+        // from bubbling up to the app.
+        function decodeFileURI(filename)
+        {
+            var newFilename = "";
+            try {
+                newFilename = decodeURIComponent(filename);
+            } catch (e) {
+                newFilename = filename;
+                console.log("Unicode decoding error:", filename, e.message)
+            }
+
+            return newFilename;
+        }
+
+        function metaForSource(source) {
+            var blankMeta = {
+                name: "",
+                artist: "",
+                image: "",
+                guid: "",
+            }
+
+            source = source.toString()
+
+            if (source.indexOf("file://") === 0) {
+                source = source.substring(7);
+            }
+
+            return Podcasts.lookup(decodeFileURI(source)) || blankMeta;
+        }
+
+        function toggle() {
+            if (playbackState === MediaPlayer.PlayingState) {
+                pause()
+            } else {
+                play()
+            }
+        }
+
+        function playEpisode(guid, image, name, artist, url) {
+            // Clear current queue
+            player.playlist.clear()
+            Podcasts.clearQueue()
+
+            // Add episode to queue
+            player.playlist.addItem(Qt.resolvedUrl(url))
+            Podcasts.addItemToQueue(guid, image, name, artist, url)
+
+            // Play episode
+            player.play()
+        }
+
+        function addEpisodeToQueue(guid, image, name, artist, url) {
+            player.playlist.addItem(Qt.resolvedUrl(url))
+            Podcasts.addItemToQueue(guid, image, name, artist, url)
+
+            // If added episode is the first one in the queue, then set the current metadata
+            // so that the bottom player controls will be shown, allowing the user to play
+            // the episode if he chooses to.
+            if (player.playlist.itemCount === 0) {
+                currentGuid = guid
+                currentName = name
+                currentArtist = artist
+                currentImage = image
+                currentUrl = url
+            }
+        }
+
+        property bool endOfMedia: false
+        property double progress: 0
+
+        playlist: Playlist {
+            playbackMode: Playlist.Sequential
+
+            readonly property bool canGoPrevious: currentIndex !== 0
+            readonly property bool canGoNext: currentIndex !== itemCount - 1
+
+            onCurrentItemSourceChanged: {
+                var meta = player.metaForSource(currentItemSource)
+                currentGuid = "";
+                currentName = meta.name
+                currentArtist = meta.artist
+                currentImage = meta.image
+                currentGuid = meta.guid
+            }
+        }
+
+        onStatusChanged: {
+            if (status === MediaPlayer.EndOfMedia) {
+                console.log("[LOG]: End of Media. Stopping.")
+                endOfMedia = true
+                stop()
+            }
+        }
+
+        onStopped: {
+            if (playlist.itemCount > 0) {
+                if (endOfMedia) {
+                    // We just ended media, so jump to start of playlist
+                    playlist.currentIndex  = 0;
+
+                    // Play then pause otherwise when we come from EndOfMedia
+                    // it calls next() until EndOfMedia again.
+                    play()
+                }
+
+                pause()
+            }
+
+            // Always reset endOfMedia
+            endOfMedia = false
         }
     }
 
@@ -290,13 +357,13 @@
         states: [
             State {
                 name: "shown"
-                when: currentUrl != "" && !mainStack.currentPage.isNowPlayingPage
+                when: player.playlist.itemCount !== 0 && !mainStack.currentPage.isNowPlayingPage
                 PropertyChanges { target: playerControlLoader; anchors.bottomMargin: 0 }
             },
 
             State {
                 name: "hidden"
-                when: currentUrl == "" || mainStack.currentPage.isNowPlayingPage || !playerControl.visible
+                when: player.playlist.itemCount === 0 || mainStack.currentPage.isNowPlayingPage || !playerControl.visible
                 PropertyChanges { target: playerControlLoader; anchors.bottomMargin: -units.gu(7) }
             }
         ]

=== modified file 'app/podcasts.js'
--- app/podcasts.js	2016-03-05 20:10:55 +0000
+++ app/podcasts.js	2016-03-14 00:33:23 +0000
@@ -22,6 +22,7 @@
     db.transaction(function(tx) {
         tx.executeSql('CREATE TABLE IF NOT EXISTS Podcast(artist TEXT, name TEXT, description TEXT, feed TEXT, image TEXT, lastupdate TIMESTAMP)');
         tx.executeSql('CREATE TABLE IF NOT EXISTS Episode(guid TEXT, podcast INTEGER, name TEXT, subtitle TEXT, description TEXT, duration INTEGER, audiourl TEXT, downloadedfile TEXT, published TIMESTAMP, queued BOOLEAN, listened BOOLEAN, favourited BOOLEAN, position INTEGER, FOREIGN KEY(podcast) REFERENCES Podcast(rowid))');
+        tx.executeSql('CREATE TABLE IF NOT EXISTS Queue(ind INTEGER NOT NULL, guid TEXT, image TEXT, name TEXT, artist TEXT, url TEXT)');
     });
 
     /*
@@ -39,6 +40,104 @@
     return db;
 }
 
+// Function to add item to queue
+function addItemToQueue(guid, image, name, artist, url) {
+    var db = init()
+
+    db.transaction(function(tx) {
+        var ind = getNextIndex(tx);
+        var rs = tx.executeSql("INSERT OR REPLACE INTO Queue (ind, guid, image, name, artist, url) VALUES (?, ?, ?, ?, ?, ?)", [ind, guid, image, name, artist, url]);
+        if (rs.rowsAffected > 0) {
+            console.log("[LOG]: QUEUE add OK")
+        } else {
+            console.log("[LOG]: QUEUE add FAIL")
+        }
+    });
+}
+
+function removeItemFromQueue(source) {
+    var db = init()
+
+    db.transaction(function(tx) {
+        // Remove selected source from the queue
+        tx.executeSql("DELETE FROM Queue WHERE url = ?", source)
+
+        // Rebuild queue in order
+        var rs = tx.executeSql("SELECT ind FROM Queue ORDER BY ind ASC")
+
+        for (var i=0; i<rs.rows.length; i++) {
+            tx.executeSql("UPDATE Queue SET ind = ? WHERE ind = ?", [i, rs.rows.item(i).ind])
+        }
+    })
+}
+
+// Function to clear the queue
+function clearQueue() {
+    var db = init();
+    db.transaction(function(tx) {
+        tx.executeSql("DELETE FROM Queue");
+    });
+}
+
+function lookup(source) {
+    var db = init();
+    var meta = {
+        name: "",
+        artist: "",
+        image: "",
+        guid: "",
+    }
+
+    db.transaction(function(tx) {
+        var rs = tx.executeSql("SELECT * FROM Queue ORDER BY ind ASC");
+        for(var i = 0; i < rs.rows.length; i++) {
+            var episode = rs.rows.item(i);
+            if (source  === episode.url) {
+                meta.name = episode.name
+                meta.artist = episode.artist
+                meta.image = episode.image
+                meta.guid = episode.guid
+                break
+            }
+        }
+    });
+
+    return meta
+}
+
+// Function to get the next index for the queue
+function getNextIndex(tx) {
+    var ind;
+
+    if (tx === undefined) {
+        var db = init();
+        db.transaction(function(tx) {
+            ind = getNextIndex(tx);
+        });
+    } else {
+        var rs = tx.executeSql('SELECT MAX(ind) FROM Queue')
+        ind = isQueueEmpty(tx) ? 0 : rs.rows.item(0)["MAX(ind)"] + 1
+    }
+
+    return ind;
+}
+
+function isQueueEmpty(tx) {
+    var empty = false;
+
+    if (tx === undefined) {
+        var db = init();
+        db.transaction( function(tx) {
+            empty = isQueueEmpty(tx)
+        });
+    } else {
+        var rs = tx.executeSql("SELECT count(*) as value FROM Queue")
+        empty = rs.rows.item(0).value === 0
+    }
+
+    return empty
+}
+
 function subscribe(artist, name, feed, img) {
     var db = init();
     db.transaction(function(tx) {

=== modified file 'app/ui/EpisodesPage.qml'
--- app/ui/EpisodesPage.qml	2016-03-06 23:00:20 +0000
+++ app/ui/EpisodesPage.qml	2016-03-14 00:33:23 +0000
@@ -17,7 +17,7 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import Ubuntu.Components 1.3
 import QtQuick.LocalStorage 2.0
 import Ubuntu.DownloadManager 0.1
@@ -443,8 +443,8 @@
                 id: listItemLayout
 
                 title.text: model.name !== undefined ? model.name.trim() : "Undefined"
-                title.color: currentGuid === model.guid || downloader.downloadingGuid === model.guid ? podbird.appTheme.focusText
-                                                                                                     : podbird.appTheme.baseText
+                title.color: downloader.downloadingGuid === model.guid ? podbird.appTheme.focusText
+                                                                       : podbird.appTheme.baseText
                 // #FIXME: Change this 2 to prevent title eliding when UITK is updated to rev > 1800
                 title.maximumLineCount: 1
 
@@ -512,6 +512,14 @@
                     },
 
                     Action {
+                        iconName: "add-to-playlist"
+                        onTriggered: {
+                            var url = model.downloadedfile ? model.downloadedfile : model.audiourl
+                            player.addEpisodeToQueue(model.guid, model.image, model.name, model.artist, url)
+                        }
+                    },
+
+                    Action {
                         iconName: model.favourited ? "unlike" : "like"
                         onTriggered: {
                             var db = Podcasts.init();
@@ -537,20 +545,10 @@
 
             onClicked: {
                 Haptics.play()
-                var db = Podcasts.init();
-                db.transaction(function (tx) {
-                    if (currentGuid !== model.guid) {
-                        currentGuid = "";
-                        currentUrl = model.downloadedfile ? model.downloadedfile : model.audiourl;
-                        var rs = tx.executeSql("SELECT position FROM Episode WHERE guid=?", [model.guid]);
-                        playerLoader.item.play();
-                        playerLoader.item.seek(rs.rows.item(0).position);
-                        currentName = model.name;
-                        currentArtist = model.artist;
-                        currentImage = model.image;
-                        currentGuid = model.guid;
-                    }
-                });
+                if (currentGuid !== model.guid) {
+                    currentUrl = model.downloadedfile ? model.downloadedfile : model.audiourl;
+                    player.playEpisode(model.guid, model.image, model.name, model.artist, currentUrl)
+                }
             }
         }
 

=== modified file 'app/ui/EpisodesTab.qml'
--- app/ui/EpisodesTab.qml	2016-03-06 23:00:20 +0000
+++ app/ui/EpisodesTab.qml	2016-03-14 00:33:23 +0000
@@ -17,7 +17,7 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import Ubuntu.Components 1.3
 import QtQuick.LocalStorage 2.0
 import Ubuntu.DownloadManager 0.1
@@ -381,8 +381,8 @@
                     id: listItemLayout
 
                     title.text: model.name !== undefined ? model.name.trim() : "Undefined"
-                    title.color: currentGuid === model.guid || downloader.downloadingGuid === model.guid ? podbird.appTheme.focusText
-                                                                                                         : podbird.appTheme.baseText
+                    title.color: downloader.downloadingGuid === model.guid ? podbird.appTheme.focusText
+                                                                           : podbird.appTheme.baseText
                     // #FIXME: Change this 2 to prevent title eliding when UITK is updated to rev > 1800
                     title.maximumLineCount: 1
 
@@ -466,6 +466,14 @@
                         },
 
                         Action {
+                            iconName: "add-to-playlist"
+                            onTriggered: {
+                                var url = model.downloadedfile ? model.downloadedfile : model.audiourl
+                                player.addEpisodeToQueue(model.guid, model.image, model.name, model.artist, url)
+                            }
+                        },
+
+                        Action {
                             iconName: model.favourited ? "unlike" : "like"
                             onTriggered: {
                                 var db = Podcasts.init();
@@ -497,20 +505,10 @@
 
                 onClicked: {
                     Haptics.play()
-                    var db = Podcasts.init();
-                    db.transaction(function (tx) {
-                        if (currentGuid !== model.guid) {
-                            currentGuid = "";
-                            currentUrl = model.downloadedfile ? model.downloadedfile : model.audiourl;
-                            var rs = tx.executeSql("SELECT position FROM Episode WHERE guid=?", [model.guid]);
-                            playerLoader.item.play();
-                            playerLoader.item.seek(rs.rows.item(0).position);
-                            currentName = model.name;
-                            currentArtist = model.artist;
-                            currentImage = model.image;
-                            currentGuid = model.guid;
-                        }
-                    });
+                    if (currentGuid !== model.guid) {
+                        currentUrl = model.downloadedfile ? model.downloadedfile : model.audiourl;
+                        player.playEpisode(model.guid, model.image, model.name, model.artist, currentUrl)
+                    }
                 }
             }
 

=== modified file 'app/ui/NowPlayingPage.qml'
--- app/ui/NowPlayingPage.qml	2016-03-04 10:40:54 +0000
+++ app/ui/NowPlayingPage.qml	2016-03-14 00:33:23 +0000
@@ -17,8 +17,9 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import Ubuntu.Components 1.3
+import QtQuick.LocalStorage 2.0
 import "../podcasts.js" as Podcasts
 import "../components"
 
@@ -26,245 +27,350 @@
     id: nowPlayingPage
 
     visible: false
-    title: i18n.tr("Now Playing")
 
     property bool isNowPlayingPage: true
-    property bool isLandscapeMode: width > height
-
-    // Landscape rule
-    states: [
-        State {
-            name: "landscape"
-            when: isLandscapeMode
-
-            PropertyChanges {
-                target: blurredBackground
-                width: parent.width/2.2
-                height: parent.height
-            }
-
-            AnchorChanges {
-                target: blurredBackground
+
+    header: PageHeader {
+        title: i18n.tr("Now Playing")
+
+        StyleHints {
+            backgroundColor: podbird.appTheme.background
+        }
+
+        trailingActionBar.actions: Action {
+            iconName: "delete"
+            visible: nowPlayingPageSections.selectedIndex === 1
+            onTriggered: {
+                Podcasts.clearQueue()
+                player.playlist.clear()
+                mainStack.pop()
+            }
+        }
+
+        extension: Sections {
+            id: nowPlayingPageSections
+
+            anchors {
+                left: parent.left
+                leftMargin: units.gu(2)
+                bottom: parent.bottom
+            }
+
+            StyleHints {
+                selectedSectionColor: podbird.appTheme.focusText
+            }
+            model: [i18n.tr("Full view"), i18n.tr("Queue")]
+        }
+    }
+
+    VisualItemModel {
+        id: tabs
+
+        Item {
+            id: nowPlayingItem
+
+            width: tabView.width
+            height: tabView.height
+
+            property bool isLandscapeMode: nowPlayingPage.width > nowPlayingPage.height
+
+            // Landscape rule
+            states: [
+                State {
+                    name: "landscape"
+                    when: nowPlayingItem.isLandscapeMode
+
+                    PropertyChanges {
+                        target: blurredBackground
+                        width: nowPlayingPage.width/2.2
+                        height: nowPlayingPage.height
+                    }
+
+                    AnchorChanges {
+                        target: blurredBackground
+                        anchors {
+                            top: nowPlayingItem.top
+                            left: parent.left
+                            right: undefined
+                        }
+                    }
+
+                    AnchorChanges {
+                        target: dataContainer
+                        anchors {
+                            top: nowPlayingItem.top
+                            left: blurredBackground.right
+                            right: parent.right
+                            bottom: parent.bottom
+                        }
+                    }
+                }
+            ]
+
+            BlurredBackground {
+                id: blurredBackground
+
+                anchors.left: parent.left
+                anchors.top: nowPlayingItem.top
+                anchors.right: parent.right
+                height: title.lineCount === 1 ? nowPlayingPage.height/2.3 + units.gu(3)
+                                              : nowPlayingPage.height/2.3
+                art: currentImage
+
+                Image {
+                    width: Math.min(nowPlayingPage.width/2, nowPlayingPage.height/2)
+                    height: width
+                    sourceSize.height: width
+                    sourceSize.width: width
+                    source: currentImage
+                    asynchronous: true
+                    anchors.centerIn: parent
+                }
+            }
+
+            Item {
+                id: dataContainer
+
                 anchors {
-                    top: parent.top
+                    top: blurredBackground.bottom
                     left: parent.left
-                    right: undefined
-                }
-            }
-
-            AnchorChanges {
-                target: dataContainer
-                anchors {
-                    top: parent.top
-                    left: blurredBackground.right
                     right: parent.right
                     bottom: parent.bottom
+                    margins: units.gu(2)
+                    bottomMargin: nowPlayingItem.isLandscapeMode ? units.gu(4) : units.gu(2)
+                }
+
+                Label {
+                    id: title
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    text: currentName
+                    elide: Text.ElideRight
+                    textSize: Label.Large
+                    maximumLineCount: 2
+                    wrapMode: Text.WordWrap
+                    color: podbird.appTheme.baseText
+                }
+
+                Label {
+                    id: artist
+                    anchors.left: title.left
+                    anchors.right: title.right
+                    anchors.top: title.bottom
+                    anchors.topMargin: units.gu(1)
+                    text: currentArtist
+                    elide: Text.ElideRight
+                    textSize: Label.Small
+                    color: podbird.appTheme.baseSubText
+                }
+
+                Slider {
+                    id: scrubber
+
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        bottom: controls.top
+                        bottomMargin: nowPlayingItem.isLandscapeMode && title.lineCount < 2 ? units.gu(4) : units.gu(2)
+                    }
+
+                    live: true
+                    minimumValue: 0
+                    maximumValue: player.duration
+                    value: player.position
+                    height: units.gu(2)
+
+                    onValueChanged: {
+                        if (pressed) {
+                            player.seek(value);
+                        }
+                    }
+
+                    function formatValue(v) { return Podcasts.formatTime(v/1000); }
+                    StyleHints { foregroundColor: podbird.appTheme.focusText }
+                }
+
+                Connections {
+                    target: player
+                    onPositionChanged: scrubber.value = player.position
+                }
+
+                Label {
+                    id: startTime
+                    textSize: Label.Small
+                    anchors.left: scrubber.left
+                    anchors.top: scrubber.bottom
+                    color: podbird.appTheme.baseText
+                    text: Podcasts.formatTime(player.position / 1000)
+                }
+
+                Label {
+                    id: endTime
+                    textSize: Label.Small
+                    anchors.right: scrubber.right
+                    anchors.top: scrubber.bottom
+                    color: podbird.appTheme.baseText
+                    text: Podcasts.formatTime(player.duration / 1000)
+                }
+
+                Row {
+                    id: controls
+
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: units.gu(1)
+
+                    AbstractButton {
+                        id: mediaBackwardButton
+                        width: units.gu(6)
+                        height: width
+                        anchors.verticalCenter: parent.verticalCenter
+                        enabled: player.playlist.canGoPrevious
+                        opacity: enabled ? 1.0 : 0.4
+                        onClicked: player.playlist.previous()
+
+                        Icon {
+                            id: mediaBackwardIcon
+                            width: units.gu(3)
+                            height: width
+                            anchors.centerIn: parent
+                            color: podbird.appTheme.baseIcon
+                            name: "media-skip-backward"
+                        }
+                    }
+
+                    AbstractButton {
+                        id: skipBackwardButton
+                        width: units.gu(6)
+                        height: width
+                        anchors.verticalCenter: parent.verticalCenter
+                        opacity: player.position === 0 ? 0.4 : 1.0
+                        onClicked: {
+                            if (player.position > 0) {
+                                player.seek(player.position - podbird.settings.skipBack * 1000);
+                            }
+                        }
+
+                        Row {
+                            spacing: units.gu(1)
+                            anchors.centerIn: parent
+
+                            Label {
+                                // TRANSLATORS: The string shown in the UI is -15s to denote the number of seconds that the podcast playback will skip backward.
+                                // xgettext: no-c-format
+                                text: i18n.tr("-%1s").arg(podbird.settings.skipBack)
+                                textSize: Label.XxSmall
+                                color: podbird.appTheme.baseText
+                                anchors.verticalCenter: skipBackwardIcon.verticalCenter
+                            }
+
+                            Icon {
+                                id: skipBackwardIcon
+                                width: units.gu(3)
+                                height: width
+                                name: "media-seek-backward"
+                                color: podbird.appTheme.baseIcon
+                            }
+                        }
+                    }
+
+                    AbstractButton {
+                        id: playButton
+                        width: units.gu(10)
+                        height: width
+                        opacity: playButton.pressed ? 0.4 : 1.0
+                        onClicked: player.playbackState === MediaPlayer.PlayingState ? player.pause() : player.play()
+
+                        Icon {
+                            id: playIcon
+                            width: units.gu(6)
+                            height: width
+                            anchors.centerIn: parent
+                            color: podbird.appTheme.baseIcon
+                            name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
+                                                                                    : "media-playback-start"
+                        }
+                    }
+
+                    AbstractButton {
+                        id: skipForwardButton
+                        width: units.gu(6)
+                        height: width
+                        anchors.verticalCenter: parent.verticalCenter
+                        opacity: player.position === 0 ? 0.4 : 1.0
+                        onClicked: {
+                            if (player.position > 0) {
+                                player.seek(player.position + podbird.settings.skipForward * 1000);
+                            }
+                        }
+
+                        Row {
+                            spacing: units.gu(1)
+                            anchors.centerIn: parent
+
+                            Icon {
+                                id: skipForwardIcon
+                                width: units.gu(3)
+                                height: width
+                                name: "media-seek-forward"
+                                color: podbird.appTheme.baseIcon
+                            }
+
+                            Label {
+                                // TRANSLATORS: The string shown in the UI is +15s to denote the number of seconds that the podcast playback will skip forward.
+                                // xgettext: no-c-format
+                                text: i18n.tr("+%1s").arg(podbird.settings.skipForward)
+                                textSize: Label.XxSmall
+                                color: podbird.appTheme.baseText
+                                anchors.verticalCenter: skipForwardIcon.verticalCenter
+                            }
+                        }
+                    }
+
+                    AbstractButton {
+                        id: mediaForwardButton
+                        width: units.gu(6)
+                        height: width
+                        anchors.verticalCenter: parent.verticalCenter
+                        enabled: player.playlist.canGoNext
+                        opacity: enabled ? 1.0 : 0.4
+                        onClicked: player.playlist.next()
+
+                        Icon {
+                            id: mediaForwardIcon
+                            width: units.gu(3)
+                            height: width
+                            anchors.centerIn: parent
+                            color: podbird.appTheme.baseIcon
+                            name: "media-skip-forward"
+                        }
+                    }
                 }
             }
         }
-    ]
-
-    BlurredBackground {
-        id: blurredBackground
-
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.right: parent.right
-        height: title.lineCount === 1 ? parent.height/2 + units.gu(3)
-                                      : parent.height/2
-        art: currentImage
-
-        Image {
-            width: Math.min(parent.width/2, parent.height)
-            height: width
-            sourceSize.height: width
-            sourceSize.width: width
-            source: currentImage
-            asynchronous: true
-            anchors.centerIn: parent
+
+        Queue {
+            width: tabView.width
+            height: tabView.height
         }
     }
 
-    Item {
-        id: dataContainer
+    ListView {
+        id: tabView
+        model: tabs
+        interactive: false
 
         anchors {
-            top: blurredBackground.bottom
+            top: nowPlayingPage.header.bottom
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-            margins: units.gu(2)
-            bottomMargin: isLandscapeMode ? units.gu(4) : units.gu(2)
-        }
-
-        Label {
-            id: title
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            text: currentName
-            elide: Text.ElideRight
-            textSize: Label.Large
-            maximumLineCount: 2
-            wrapMode: Text.WordWrap
-            color: podbird.appTheme.baseText
-        }
-
-        Label {
-            id: artist
-            anchors.left: title.left
-            anchors.right: title.right
-            anchors.top: title.bottom
-            anchors.topMargin: units.gu(1)
-            text: currentArtist
-            elide: Text.ElideRight
-            textSize: Label.Small
-            color: podbird.appTheme.baseSubText
-        }
-
-        Slider {
-            id: scrubber
-
-            anchors {
-                left: parent.left
-                right: parent.right
-                bottom: controls.top
-                bottomMargin: isLandscapeMode && title.lineCount < 2 ? units.gu(4) : units.gu(2)
-            }
-
-            live: true
-            minimumValue: 0
-            maximumValue: playerLoader.item.duration
-            value: playerLoader.item.position
-            height: units.gu(2)
-
-            onValueChanged: {
-                if (pressed) {
-                    playerLoader.item.seek(value);
-                }
-            }
-
-            function formatValue(v) { return Podcasts.formatTime(v/1000); }
-            StyleHints { foregroundColor: podbird.appTheme.focusText }
-        }
-
-        Connections {
-            target: playerLoader.item
-            onPositionChanged: scrubber.value = playerLoader.item.position
-        }
-
-        Label {
-            id: startTime
-            textSize: Label.Small
-            anchors.left: scrubber.left
-            anchors.top: scrubber.bottom
-            color: podbird.appTheme.baseText
-            text: Podcasts.formatTime(playerLoader.item.position / 1000)
-        }
-
-        Label {
-            id: endTime
-            textSize: Label.Small
-            anchors.right: scrubber.right
-            anchors.top: scrubber.bottom
-            color: podbird.appTheme.baseText
-            text: Podcasts.formatTime(playerLoader.item.duration / 1000)
-        }
-
-        Row {
-            id: controls
-
-            anchors.bottom: parent.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: units.gu(2)
-
-            AbstractButton {
-                id: skipBackwardButton
-                width: units.gu(6)
-                height: width
-                anchors.verticalCenter: parent.verticalCenter
-                opacity: playerLoader.item.position === 0 ? 0.4 : 1.0
-                onClicked: {
-                    if (playerLoader.item.position > 0) {
-                        playerLoader.item.seek(playerLoader.item.position - podbird.settings.skipBack * 1000);
-                    }
-                }
-
-                Row {
-                    spacing: units.gu(1)
-                    anchors.centerIn: parent
-
-                    Label {
-                        // TRANSLATORS: The string shown in the UI is -15s to denote the number of seconds that the podcast playback will skip backward.
-                        // xgettext: no-c-format
-                        text: i18n.tr("-%1s").arg(podbird.settings.skipBack)
-                        textSize: Label.XxSmall
-                        color: podbird.appTheme.baseText
-                        anchors.verticalCenter: skipBackwardIcon.verticalCenter
-                    }
-
-                    Icon {
-                        id: skipBackwardIcon
-                        width: units.gu(3)
-                        height: width
-                        name: "media-seek-backward"
-                        color: podbird.appTheme.baseIcon
-                    }
-                }
-            }
-
-            AbstractButton {
-                id: playButton
-                width: units.gu(10)
-                height: width
-                opacity: playButton.pressed ? 0.4 : 1.0
-                onClicked: playerLoader.item.playbackState === MediaPlayer.PlayingState ? playerLoader.item.pause() : playerLoader.item.play()
-
-                Icon {
-                    id: playIcon
-                    width: units.gu(6)
-                    height: width
-                    anchors.centerIn: parent
-                    color: podbird.appTheme.baseIcon
-                    name: playerLoader.item.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
-                                                                                       : "media-playback-start"
-                }
-            }
-
-            AbstractButton {
-                id: skipForwardButton
-                width: units.gu(6)
-                height: width
-                anchors.verticalCenter: parent.verticalCenter
-                opacity: playerLoader.item.position === 0 ? 0.4 : 1.0
-                onClicked: {
-                    if (playerLoader.item.position > 0) {
-                        playerLoader.item.seek(playerLoader.item.position + podbird.settings.skipForward * 1000);
-                    }
-                }
-
-                Row {
-                    spacing: units.gu(1)
-                    anchors.centerIn: parent
-
-                    Icon {
-                        id: skipForwardIcon
-                        width: units.gu(3)
-                        height: width
-                        name: "media-seek-forward"
-                        color: podbird.appTheme.baseIcon
-                    }
-
-                    Label {
-                        // TRANSLATORS: The string shown in the UI is +15s to denote the number of seconds that the podcast playback will skip forward.
-                        // xgettext: no-c-format
-                        text: i18n.tr("+%1s").arg(podbird.settings.skipForward)
-                        textSize: Label.XxSmall
-                        color: podbird.appTheme.baseText
-                        anchors.verticalCenter: skipForwardIcon.verticalCenter
-                    }
-                }
-            }
-        }
+        }
+
+        orientation: Qt.Horizontal
+        snapMode: ListView.SnapOneItem
+        currentIndex: nowPlayingPageSections.selectedIndex
+        highlightMoveDuration: UbuntuAnimation.SlowDuration
     }
 }

=== modified file 'app/ui/PlayerControls.qml'
--- app/ui/PlayerControls.qml	2016-03-04 10:40:54 +0000
+++ app/ui/PlayerControls.qml	2016-03-14 00:33:23 +0000
@@ -17,7 +17,7 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import Ubuntu.Components 1.3
 
 Rectangle {
@@ -49,7 +49,7 @@
         anchors.top: cover.bottom
         color: podbird.appTheme.focusText
         height: units.gu(0.25)
-        width: playerLoader.item.duration > 0 ? (playerLoader.item.position / playerLoader.item.duration) * parent.width : 0
+        width: player.duration > 0 ? (player.position / player.duration) * parent.width : 0
     }
 
     Column {
@@ -97,16 +97,16 @@
             visible: playButton.pressed
         }
 
-        onClicked: playerLoader.item.playbackState === MediaPlayer.PlayingState ? playerLoader.item.pause()
-                                                                                : playerLoader.item.play()
+        onClicked: player.playbackState === MediaPlayer.PlayingState ? player.pause()
+                                                                     : player.play()
 
         Icon {
             color: "white"
             width: units.gu(3)
             height: width
             anchors.centerIn: playButtonBackground
-            name: playerLoader.item.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
-                                                                               : "media-playback-start"
+            name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause"
+                                                                    : "media-playback-start"
             opacity: playButton.pressed ? 0.4 : 1.0
         }
     }

=== modified file 'app/ui/PodcastsTab.qml'
--- app/ui/PodcastsTab.qml	2016-03-06 23:00:20 +0000
+++ app/ui/PodcastsTab.qml	2016-03-14 00:33:23 +0000
@@ -17,7 +17,7 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.4
+import QtMultimedia 5.6
 import QtQuick.LocalStorage 2.0
 import Ubuntu.Components 1.3
 import Ubuntu.DownloadManager 0.1

=== added file 'app/ui/Queue.qml'
--- app/ui/Queue.qml	1970-01-01 00:00:00 +0000
+++ app/ui/Queue.qml	2016-03-14 00:33:23 +0000
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2016 Podbird Team
+ *
+ * This file is part of Podbird.
+ *
+ * Podbird 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.
+ *
+ * Podbird 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.4
+import Ubuntu.Components 1.3
+import "../podcasts.js" as Podcasts
+import "../components"
+
+Item {
+    id: queuePage
+
+    ListView {
+        id: queueList
+
+        anchors.fill: parent
+        model: player.playlist
+
+        delegate: ListItem {
+            id: listItem
+
+            height: layout.height
+            divider.visible: false
+
+            ListItemLayout {
+                id: layout
+
+                // Grab the metaData for the current index using its unique source url
+                property var metaModel: player.metaForSource(model.source)
+
+                Image {
+                    id: imgFrame
+                    width: units.gu(6)
+                    height: width
+                    source: Qt.resolvedUrl(layout.metaModel.image)
+                    sourceSize.height: width
+                    sourceSize.width: width
+                    SlotsLayout.position: SlotsLayout.First
+                }
+
+                title.text: layout.metaModel.name
+                // #FIXME: Change this 2 to prevent title eliding when UITK is updated to rev > 1800
+                title.maximumLineCount: 1
+                title.color: player.playlist.currentIndex === index ? podbird.appTheme.focusText
+                                                                    : podbird.appTheme.baseText
+
+                subtitle.text: layout.metaModel.artist
+                subtitle.color: podbird.appTheme.baseSubText
+            }
+
+            leadingActions: ListItemActions {
+                actions: [
+                    Action {
+                        iconName: "delete"
+                        onTriggered: {
+                            player.playlist.removeItem(index)
+                            var source = model.source
+
+                            source = source.toString()
+
+                            if (source.indexOf("file://") === 0) {
+                                source = source.substring(7);
+                            }
+
+                            Podcasts.removeItemFromQueue(source)
+                        }
+                    }
+                ]
+            }
+
+            onClicked: {
+                if (player.playlist.currentIndex === index) {
+                    player.toggle()
+                } else {
+                    player.playlist.currentIndex = index
+                }
+            }
+        }
+    }
+}

=== modified file 'po/podbird.nik90.pot'
--- po/podbird.nik90.pot	2016-03-06 23:40:40 +0000
+++ po/podbird.nik90.pot	2016-03-14 00:33:23 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-03-07 05:06+0530\n"
+"POT-Creation-Date: 2016-03-14 06:03+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -34,27 +34,17 @@
 msgid "Skip"
 msgstr ""
 
-#. TRANSLATORS: this refers to a number of songs greater than one. The actual number will be prepended to the string automatically (plural forms are not yet fully supported in usermetrics, the library that displays that string)
-#: ../app/podbird.qml:175
-#, qt-format
-msgid "Podcasts listened to today: <b>%1</b>"
-msgstr ""
-
-#: ../app/podbird.qml:176
-msgid "No podcasts listened to today"
-msgstr ""
-
-#: ../app/podcasts.js:182
+#: ../app/podcasts.js:281
 #, no-c-format, qt-format
 msgid "%1 hr %2 min"
 msgstr ""
 
-#: ../app/podcasts.js:191
+#: ../app/podcasts.js:290
 #, no-c-format, qt-format
 msgid "%1 hr"
 msgstr ""
 
-#: ../app/podcasts.js:199
+#: ../app/podcasts.js:298
 #, no-c-format, qt-format
 msgid "%1 min"
 msgstr ""
@@ -284,18 +274,26 @@
 msgid "Older"
 msgstr ""
 
-#: ../app/ui/NowPlayingPage.qml:29
+#: ../app/ui/NowPlayingPage.qml:34
 msgid "Now Playing"
 msgstr ""
 
+#: ../app/ui/NowPlayingPage.qml:62
+msgid "Full view"
+msgstr ""
+
+#: ../app/ui/NowPlayingPage.qml:62
+msgid "Queue"
+msgstr ""
+
 #. TRANSLATORS: The string shown in the UI is -15s to denote the number of seconds that the podcast playback will skip backward.
-#: ../app/ui/NowPlayingPage.qml:200
+#: ../app/ui/NowPlayingPage.qml:262
 #, no-c-format, qt-format
 msgid "-%1s"
 msgstr ""
 
 #. TRANSLATORS: The string shown in the UI is +15s to denote the number of seconds that the podcast playback will skip forward.
-#: ../app/ui/NowPlayingPage.qml:261
+#: ../app/ui/NowPlayingPage.qml:323
 #, no-c-format, qt-format
 msgid "+%1s"
 msgstr ""
@@ -529,10 +527,10 @@
 msgid "Finish"
 msgstr ""
 
-#: /home/krnekhelesh/Development/devel-trunk-untouched-build/po/Podbird.desktop.in.h:1
+#: /home/krnekhelesh/Development/add-playlist-support-build/po/Podbird.desktop.in.h:1
 msgid "The chirpiest podcast manager for Ubuntu"
 msgstr ""
 
-#: /home/krnekhelesh/Development/devel-trunk-untouched-build/po/Podbird.desktop.in.h:2
+#: /home/krnekhelesh/Development/add-playlist-support-build/po/Podbird.desktop.in.h:2
 msgid "podcast;audio;itunes;broadcast;digital;stream;podcatcher;video;vodcast;"
 msgstr ""