Merge lp:~nik90/podbird/5.5-kevin-redesign into lp:podbird

[Nekhelesh Ramananthan]

This MP is a huge one brings a lot of improvements which are listed below,
- Redesigned the episodes page and search page according to the designs provided by Kevin (community designer) which is a lot of list..best would be to run this branch and check ;)

- Starting a download or deleting a download file no longer refreshes the entire episodesModel as it is expensive and jarring to the user. Instead I have used episodeModel.setProperty(), episodeModel.insert() to intelligently update only the concerned episode.

- In the episodes page, the episodes are now separated by "New" and "Listened". Again this is done intelligently using the setProperty() function. This enables us to no longer show the "tick" icon.

- The Podcasts page now shows alternating colors for listitems

- The blurred background component has been cleaned up and is now more customizable. It allow for setting the blur opacity which helps with using different values for the Light and Dark theme.

- Dark theme has received some minor color changes.

- Sqlite Schema Upgrade to v1.1. In this version I introduced a new column to every episode "Queued" which keeps track if the episode is in the download queue or not. By storing this in the database, the queue status is preserved if if the user closes the episode page and reopens another page. This is important to inform the user of what episodes are being auto-downloaded by Podbird on app startup.

[lp:~nik90/podbird/5.5-kevin-redesign]

67. By Nekhelesh Ramananthan on 2015-04-03

Fixed a rare case where the downloading status was not shown properly when the user closes and reopens the episodes page

[Nekhelesh Ramananthan (nik90)]

Here's a screenshot of what it looks now https://imgur.com/5gKB4QG

[lp:~nik90/podbird/5.5-kevin-redesign]

68. By Nekhelesh Ramananthan on 2015-04-05

Used a cutom progress bar and tweaked theme colors

69. By Nekhelesh Ramananthan on 2015-04-05

Small UI Tweaks

70. By Nekhelesh Ramananthan on 2015-04-06

Dynamically load/unload the search tab

71. By Nekhelesh Ramananthan on 2015-04-06

Renamed search tab to search page

72. By Nekhelesh Ramananthan on 2015-04-07

merged prerequisite

73. By Nekhelesh Ramananthan on 2015-04-09

Added a new column queued to database via a schema upgrade

74. By Nekhelesh Ramananthan on 2015-04-10

Added comments and fixed alter table sqlite command

75. By Nekhelesh Ramananthan on 2015-04-11

merged prerequisite

76. By Nekhelesh Ramananthan on 2015-04-11

Tweaked bottom bar color

77. By Nekhelesh Ramananthan on 2015-04-11

Added a new application icon

78. By Nekhelesh Ramananthan on 2015-04-11

Changed New to Unheard

79. By Nekhelesh Ramananthan on 2015-04-11

Fixed issue where auto-download did not set the queue status correctly. Also fixed formatTime() function complaining about model.duration missing

80. By Nekhelesh Ramananthan on 2015-04-15

merged prerequisite fix

81. By Nekhelesh Ramananthan on 2015-04-15

Merged prerequisite

82. By Nekhelesh Ramananthan on 2015-04-16

Merged prerequisite

[Nekhelesh Ramananthan (nik90)]

Note: If you notice any issues while testing this branch, please list them out. Most likely they have been fixed in one of the MPs which came after this. For instance, the database scheme upgrade done in this MP is usually to its full potential only in lp:~nik90/podbird/7-mark-episode-listened MP.

[Michael Sheldon (michael-sheldon)]

Only found two small issues that don't appear to be covered by other branches; I've added fixes for them myself whilst merging, they were just that 1) the new download indicator doesn't show any activity when download manager gives bad progress information (I've made the progress indicator bounce back and forth under these circumstances) and 2) the redesigned episodes page shows "NaN:NaN" for podcasts that don't provide duration information.

Like I said, I've fixed these though, so have now merged this branch :).

review: Approve

=== modified file 'app/podbird.qml'
--- app/podbird.qml	2015-04-15 23:06:20 +0000
+++ app/podbird.qml	2015-04-18 14:12:52 +0000
@@ -167,9 +167,18 @@
                 objectName: "podcastsTab"
             }
 
-            SearchTab {
+            Tab {
                 id: searchTab
-                objectName: "searchTab"
+
+                title: i18n.tr("Find New Podcasts")
+
+                page: Loader {
+                    parent: searchTab
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    source: (tabs.selectedTab === searchTab) ? Qt.resolvedUrl("ui/SearchPage.qml") : ""
+                }
             }
 
             Tab {
@@ -248,6 +257,7 @@
                 for (var j=0; j < loopCount; j++) {
                     if (!rs2.rows.item(j).downloadedfile && !rs2.rows.item(j).listened) {
                         downloader.addDownload(rs2.rows.item(j).guid, rs2.rows.item(j).audiourl)
+                        tx.executeSql("UPDATE Episode SET queued=1 WHERE guid = ?", [rs2.rows.item(j).guid]);
                     }
                 }
             }
 
=== modified file 'app/podcasts.js'
--- app/podcasts.js	2015-02-28 09:46:48 +0000
+++ app/podcasts.js	2015-04-18 14:12:52 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Michael Sheldon <[e-mail]>
+ * Copyright 2015 Podbird Team
  *
  * This file is part of Podbird.
  *
@@ -17,11 +17,24 @@
  */
 
 function init() {
-    var db = LocalStorage.openDatabaseSync("Podbird", "1.0", "Database of subscribed podcasts and their episodes", 1000000);
+    var db = LocalStorage.openDatabaseSync("Podbird", "", "Database of subscribed podcasts and their episodes", 1000000);
+
     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, listened BOOLEAN, position INTEGER, FOREIGN KEY(podcast) REFERENCES Podcast(rowid))');
+        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, listened BOOLEAN, queued BOOLEAN, position INTEGER, FOREIGN KEY(podcast) REFERENCES Podcast(rowid))');
     });
+
+    /*
+     Schema Upgrade to v1.1 which adds a new queued boolean variable which is needed to track the queued status
+     of a episode properly.
+    */
+    if (db.version == "1.0") {
+        db.changeVersion("1.0", "1.1", function(tx) {
+            tx.executeSql('ALTER TABLE Episode ADD queued BOOLEAN');
+            tx.executeSql('UPDATE Episode SET queued=0');
+        });
+    }
+
     return db;
 }
 
 
=== modified file 'app/themes/Dark.qml'
--- app/themes/Dark.qml	2015-03-04 02:58:36 +0000
+++ app/themes/Dark.qml	2015-04-18 14:12:52 +0000
@@ -21,12 +21,12 @@
 
 QtObject {
     // MainView
-    property color background: "#1E1E23"
+    property color background: "#242423"
 
     // Main Text Colors
     property color baseText: "White"
     property color baseSubText: "#999999"
-    property color focusText: "#FF9900"
+    property color focusText: "#35AF44"
 
     // Icon Colors
     property color baseIcon: "White"
@@ -37,8 +37,8 @@
     property color neutralActionButton: UbuntuColors.coolGrey
 
     // Bottom Player Bar Colors
-    property color bottomBarBackground: "#0F0F0F"
+    property color bottomBarBackground: "#15141A"
 
     // Highlight Color
-    property color hightlightListView: "#2C2C34"
+    property color hightlightListView: "#333533"
 }
 
=== modified file 'app/themes/Light.qml'
--- app/themes/Light.qml	2015-03-04 02:58:36 +0000
+++ app/themes/Light.qml	2015-04-18 14:12:52 +0000
@@ -21,12 +21,12 @@
 
 QtObject {
     // MainView
-    property color background: "#EEEEEE"
+    property color background: "#ECECEC"
 
     // Main Text Colors
     property color baseText: UbuntuColors.darkGrey
     property color baseSubText: "#999999"
-    property color focusText: UbuntuColors.orange
+    property color focusText: "#35AF44"
 
     // Icon Colors
     property color baseIcon: UbuntuColors.darkGrey
@@ -37,8 +37,8 @@
     property color neutralActionButton: UbuntuColors.coolGrey
 
     // Bottom Player Bar Colors
-    property color bottomBarBackground: "#0F0F0F"
+    property color bottomBarBackground: "#323435"
 
     // Highlight Color
-    property color hightlightListView: "#D8D8D8"
+    property color hightlightListView: "#F5F5F5"
 }
 
=== modified file 'app/ui/ActionButton.qml'
--- app/ui/ActionButton.qml	2015-03-08 11:10:07 +0000
+++ app/ui/ActionButton.qml	2015-04-18 14:12:52 +0000
@@ -23,6 +23,7 @@
     id: abstractButton
 
     property string iconName
+    property alias color: _icon.color
 
     Rectangle {
         visible: abstractButton.pressed
 
=== modified file 'app/ui/BlurredBackground.qml'
--- app/ui/BlurredBackground.qml	2015-02-10 06:57:54 +0000
+++ app/ui/BlurredBackground.qml	2015-04-18 14:12:52 +0000
@@ -25,15 +25,8 @@
 Item {
     width: parent.width
 
-    property string art  // : player.currentMetaFile === "" ? Qt.resolvedUrl("../images/[e-mail]") : player.currentMetaArt
-
-    // dark layer
-    Rectangle {
-        anchors {
-            fill: parent
-        }
-        color: "black" 
-    }
+    property string art
+    property real backgroundStrength: 0.4
 
     // the album art
     Image {
@@ -44,16 +37,6 @@
         fillMode: Image.PreserveAspectCrop
         height: parent.height
         source: art // this has to be fixed for the default cover art to work - cant find in this dir
-
-        // TODO: This should be investigated once http://pad.lv/1391368
-        //       is resolved. Once it is, these can either be set to
-        //       "height" and "width" or a property exposed via the
-        //       SDK or Thumbnailer to avoid a regression caused by
-        //       these hardcoded values changing in the Thumbnailer.
-        //       512 is size of the "xlarge" thumbnails in pixels.
-        sourceSize.height: 512
-        sourceSize.width: 512
-
         visible: false
         width: Math.max(parent.height, parent.width)
     }
@@ -63,8 +46,8 @@
         id: backgroundBlur
         anchors.fill: backgroundImage
         source: backgroundImage
-        radius: units.dp(42)
-        opacity: 0.2
+        radius: units.dp(30)
+        opacity: backgroundStrength
     }
     onArtChanged: {
         // TODO: This is a work around for LP:1261078 and LP:1306845. Ideally,
 
=== modified file 'app/ui/EpisodesPage.qml'
--- app/ui/EpisodesPage.qml	2015-03-29 15:33:26 +0000
+++ app/ui/EpisodesPage.qml	2015-04-18 14:12:52 +0000
@@ -30,17 +30,21 @@
     id: episodesPage
 
     visible: false
-    title: episodeName
+    title: i18n.tr("Podcast")
+    flickable: null
 
     property string episodeName
     property string episodeId
     property string episodeArtist
     property string episodeImage
+    property string tempGuid: "NULL"
 
     property bool episodesUpdating: false;
 
     Component.onCompleted: {
         loadEpisodes(episodeId, episodeArtist, episodeImage)
+        if (downloader.downloadingGuid != "")
+            tempGuid = downloader.downloadingGuid
     }
 
     /*
@@ -95,7 +99,7 @@
                     onTriggered: {
                         var db = Podcasts.init();
                         db.transaction(function (tx) {
-                            tx.executeSql("UPDATE Episode SET listened=1 WHERE podcast=?", [episodeModel.pid]);
+                            tx.executeSql("UPDATE Episode SET listened=1 WHERE podcast=?", [episodeId]);
                             refreshModel();
                         });
                     }
@@ -122,6 +126,7 @@
                     episodeList.forceActiveFocus()
                     searchField.text = ""
                     episodesPage.state = "default"
+                    episodeList.positionViewAtBeginning()
                 }
             }
 
@@ -139,7 +144,36 @@
     Connections {
         target: downloader
         onDownloadingGuidChanged: {
-            loadEpisodes(episodeId, episodeArtist, episodeImage);
+            var db = Podcasts.init();
+            db.transaction(function (tx) {
+                /*
+                 If tempGuid is NULL, then the episode currently being downloaded is not found within
+                 this podcast. On the other hand, if it is within this podcast, then update the episodeModel
+                 with the downloadedfile location we just received from the downloader.
+                */
+                if (tempGuid != "NULL") {
+                    var rs2 = tx.executeSql("SELECT downloadedfile, podcast FROM Episode WHERE guid=?", [tempGuid]);
+                    for (var i=0; i<episodeModel.count; i++) {
+                        if (episodeModel.get(i).guid == tempGuid) {
+                            console.log("[LOG]: Setting episode download URL to " + rs2.rows.item(0).downloadedfile)
+                            episodeModel.setProperty(i, "downloadedfile", rs2.rows.item(0).downloadedfile)
+                            break
+                        }
+                    }
+                    tempGuid = "NULL"
+                }
+
+                /*
+                 Here it is checked if the currently downloaded episode belongs to the podcast
+                 page being currently displayed. If it is, then the downloaded episode guid is
+                 stored in the tempGuid variable to track it.
+                */
+                var rs = tx.executeSql("SELECT podcast FROM Episode WHERE guid=?", [downloader.downloadingGuid]);
+
+                if (downloader.downloadingGuid != "" && rs.rows.item(0).podcast == episodeId && tempGuid == "NULL") {
+                    tempGuid = downloader.downloadingGuid
+                }
+            });
         }
     }
 
@@ -155,12 +189,12 @@
                 onClicked: {
                     var db = Podcasts.init();
                     db.transaction(function (tx) {
-                        var rs = tx.executeSql("SELECT downloadedfile FROM Episode WHERE downloadedfile NOT NULL AND podcast=?", [episodeModel.pid]);
+                        var rs = tx.executeSql("SELECT downloadedfile FROM Episode WHERE downloadedfile NOT NULL AND podcast=?", [episodeId]);
                         for(var i = 0; i < rs.rows.length; i++) {
                             fileManager.deleteFile(rs.rows.item(i).downloadedfile);
                         }
-                        tx.executeSql("DELETE FROM Episode WHERE podcast=?", [episodeModel.pid]);
-                        tx.executeSql("DELETE FROM Podcast WHERE rowid=?", [episodeModel.pid]);
+                        tx.executeSql("DELETE FROM Episode WHERE podcast=?", [episodeId]);
+                        tx.executeSql("DELETE FROM Podcast WHERE rowid=?", [episodeId]);
                         mainStack.pop()
                         PopupUtils.close(dialogInternal)
                     });
@@ -187,9 +221,6 @@
 
     ListModel {
         id: episodeModel
-        property string pid;
-        property string artist;
-        property string image;
     }
 
     SortFilterModel {
@@ -199,12 +230,118 @@
         filter.pattern: RegExp(searchField.text, "gi")
     }
 
-    ListView {
+    function formatTime(seconds) {
+        var time = Podcasts.getTimeDiff(seconds)
+        var hour = time[0]
+        var minute = time[1]
+        // TRANSLATORS: the first argument is the number of hours,
+        // followed by minute (eg. 20h 3m)
+        if(hour > 0 &&  minute > 0) {
+            // xgettext: no-c-format
+            return (i18n.tr("%1 hr %2 min"))
+            .arg(hour)
+            .arg(minute)
+        }
+
+        // TRANSLATORS: this string indicates the number of hours
+        // eg. 20h (no plural state required)
+        else if(hour > 0 && minute === 0) {
+            // xgettext: no-c-format
+            return (i18n.tr("%1 hr"))
+            .arg(hour)
+        }
+
+        // TRANSLATORS: this string indicates the number of minutes
+        // eg. 15m (no plural state required)
+        else if(hour === 0 && minute > 0) {
+            // xgettext: no-c-format
+            return (i18n.tr("%1 min"))
+            .arg(minute)
+        }
+
+        else {
+            return Podcasts.formatTime(seconds)
+        }
+    }
+
+    UbuntuListView {
         id: episodeList
 
+        anchors.fill: parent
+        model: sortedEpisodeModel
+
         clip: true
-        anchors.fill: parent
-        model: sortedEpisodeModel
+        section.property: "listened"
+        section.labelPositioning: ViewSection.InlineLabels
+
+        section.delegate: Rectangle {
+            width: parent.width
+            color: section === "0" ? podbird.theme.hightlightListView : "Transparent"
+            height: header.implicitHeight + units.gu(2)
+            Label {
+                id: header
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: units.gu(2)
+                    verticalCenter: parent.verticalCenter
+                }
+                fontSize: "x-large"
+                text: section === "0" ? i18n.tr("Unheard") : i18n.tr("Listened")
+            }
+        }
+
+        header: BlurredBackground {
+            id: blurredBackground
+
+            art: episodeImage
+            width: parent.width
+            visible: episodesPage.state !== "search"
+            height: episodesPage.state !== "search" ? cover.height + units.gu(4) : 0
+            backgroundStrength: podbird.settings.themeName === "Light.qml" ? 0.3 : 0.6
+
+            Image {
+                id:cover
+                width: units.gu(12)
+                height: width
+                sourceSize.height: width
+                sourceSize.width: width
+                source: episodeImage
+                anchors {
+                    left: parent.left
+                    top: parent.top
+                    margins: units.gu(2)
+                }
+            }
+
+            Column {
+                id: podcastTitle
+
+                anchors {
+                    left: cover.right
+                    right: parent.right
+                    bottom: parent.bottom
+                    margins: units.gu(2)
+                }
+
+                Label {
+                    text: episodeName
+                    width: parent.width
+                    wrapMode: Text.WordWrap
+                    maximumLineCount: 2
+                    elide: Text.ElideRight
+                    color: podbird.theme.baseText
+                }
+
+                Label {
+                    text: i18n.tr("%1 episode", "%1 episodes", episodeList.count).arg(episodeList.count)
+                    width: parent.width
+                    elide: Text.ElideRight
+                    fontSize: "x-small"
+                    color: podbird.theme.baseText
+                }
+            }
+        }
 
         footer: Item {
             width: parent.width
@@ -214,51 +351,41 @@
         delegate: ListItem.Empty {
             id: listItem
 
-            property bool expanded: false
+            property bool expanded
 
-            width: parent.width
-            height: mainColumn.height
+            height: dataColumn.height + units.gu(2)
             highlightWhenPressed: false
+            showDivider: false
 
-            onClicked: listItem.expanded = !listItem.expanded
+            onClicked: {
+                expanded = !expanded;
+            }
 
             Rectangle {
-                anchors.fill: parent
-                color: listItem.pressed ? podbird.theme.hightlightListView : "transparent"
+                visible: !model.listened
+                width: parent.width
+                height: dataColumn.height + units.gu(2)
+                color: podbird.theme.hightlightListView
             }
 
             Column {
-                id: mainColumn
-
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                    margins: units.gu(2)
-                    topMargin: units.gu(1)
-                }
+                id: dataColumn
 
                 spacing: units.gu(1)
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: units.gu(2)
+                anchors.top: parent.top
+                anchors.topMargin: units.gu(0.5)
 
                 RowLayout {
-                    id: titleRow
+                    id: rowlayout
 
                     width: parent.width
-                    spacing: units.gu(2)
-
-                    Image {
-                        id: imgFrame
-                        width: units.gu(6)
-                        height: width
-                        sourceSize.height: width
-                        sourceSize.width: width
-                        source: model.image
-                    }
+                    height: titleColumn.height
 
                     Column {
-                        id: detailColumn
-
-                        anchors.verticalCenter: imgFrame.verticalCenter
+                        id: titleColumn
                         Layout.fillWidth: true
 
                         Label {
@@ -267,19 +394,97 @@
                             maximumLineCount: 2
                             wrapMode: Text.WordWrap
                             elide: Text.ElideRight
-                            color: currentGuid === model.guid ? podbird.theme.focusText
-                                                              : podbird.theme.baseText
+                            color: listItem.expanded || currentGuid === model.guid || downloader.downloadingGuid === model.guid ? podbird.theme.focusText
+                                                                                                                                : podbird.theme.baseText
                         }
 
                         Label {
                             id: episodePublishDate
                             width: parent.width
-                            text: Qt.formatDate(new Date(model.published), "MMM d, yyyy")
+                            text: formatTime(model.duration) + " | " + Qt.formatDate(new Date(model.published), "MMM d, yyyy")
                             fontSize: "x-small"
-                            color: currentGuid === model.guid ? podbird.theme.focusText
-                                                              : podbird.theme.baseText
                             elide: Text.ElideRight
-                        }
+                            color: podbird.theme.baseSubText
+                        }
+                    }
+
+                    ActionButton {
+                        id: downloadButton
+
+                        width: units.gu(5)
+                        height: units.gu(4)
+
+                        property bool queued: false
+
+                        iconName: model.downloadedfile ? "delete" : (queued && downloader.downloadingGuid !== model.guid ? "history" : "save")
+                        enabled: downloader.downloadingGuid !== model.guid
+                        color: downloader.downloadingGuid === model.guid ? podbird.theme.focusText
+                                                                         : podbird.theme.baseText
+
+                        onClicked: {
+                            if (model.downloadedfile) {
+                                fileManager.deleteFile(model.downloadedfile);
+                                var db = Podcasts.init();
+                                db.transaction(function (tx) {
+                                    tx.executeSql("UPDATE Episode SET downloadedfile = NULL WHERE guid = ?", [model.guid]);
+                                });
+                                episodeModel.setProperty(index, "downloadedfile", "")
+                                downloadButton.queued = false
+                            } else {
+                                downloadButton.queued = true;
+                                downloader.addDownload(model.guid, model.audiourl);
+                            }
+                        }
+                    }
+
+                    ActionButton {
+                        width: units.gu(4)
+                        height: units.gu(4)
+
+                        iconName: player.playbackState === MediaPlayer.PlayingState && currentGuid === model.guid ? "media-playback-pause"
+                                                                                                                  : "media-playback-start"
+                        color: player.playbackState === MediaPlayer.PlayingState && currentGuid === model.guid ? podbird.theme.focusText
+                                                                                                               : podbird.theme.baseIcon
+
+                        onClicked: {
+                            var db = Podcasts.init();
+                            db.transaction(function (tx) {
+                                if (currentGuid === model.guid) {
+                                    if (player.playbackState === MediaPlayer.PlayingState) {
+                                        player.pause()
+                                    } else {
+                                        player.play()
+                                    }
+                                } else {
+                                    currentGuid = "";
+                                    player.source = model.downloadedfile ? model.downloadedfile : model.audiourl;
+                                    var rs = tx.executeSql("SELECT position FROM Episode WHERE guid=?", [model.guid]);
+                                    player.play();
+                                    player.seek(rs.rows.item(0).position);
+                                    currentName = model.name;
+                                    currentArtist = model.artist;
+                                    currentImage = model.image;
+                                    currentGuid = model.guid;
+                                }
+                            });
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: progressBar
+                    radius: width/3
+                    width: parent.width
+                    height: units.dp(5)
+                    color: Theme.palette.normal.base
+                    visible: downloader.downloadingGuid === model.guid
+                    Rectangle {
+                        height: parent.height
+                        radius: parent.radius
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+                        color: podbird.theme.focusText
+                        width: downloader.progress > 0 ? Math.min((downloader.progress / 100) * parent.width, parent.width) : 0
                     }
                 }
 
@@ -288,184 +493,15 @@
                     text: model.description
                     textFormat: Text.RichText
                     clip: true
-                    height: listItem.expanded ? contentHeight : units.gu(4)
+                    height: listItem.expanded ? contentHeight : 0
                     wrapMode: Text.WordWrap
                     width: parent.width
-                    elide: Text.ElideRight
                     fontSize: "small"
                     color: podbird.theme.baseSubText
                     Behavior on height {
                         UbuntuNumberAnimation {
-                            duration: UbuntuAnimation.SlowDuration
-                        }
-                    }
-
-                }
-
-                Item {
-                    id: statusBox
-
-                    width: parent.width
-                    height: units.gu(6)
-
-                    function formatTime(seconds) {
-                        var time = Podcasts.getTimeDiff(seconds)
-                        var hour = time[0]
-                        var minute = time[1]
-                        // TRANSLATORS: the first argument is the number of hours,
-                        // followed by minute (eg. 20h 3m)
-                        if(hour > 0 &&  minute > 0) {
-                            // xgettext: no-c-format
-                            return (i18n.tr("%1h %2m"))
-                            .arg(hour)
-                            .arg(minute)
-                        }
-
-                        // TRANSLATORS: this string indicates the number of hours
-                        // eg. 20h (no plural state required)
-                        else if(hour > 0 && minute === 0) {
-                            // xgettext: no-c-format
-                            return (i18n.tr("%1h"))
-                            .arg(hour)
-                        }
-
-                        // TRANSLATORS: this string indicates the number of minutes
-                        // eg. 15m (no plural state required)
-                        else if(hour === 0 && minute > 0) {
-                            // xgettext: no-c-format
-                            return (i18n.tr("%1m"))
-                            .arg(minute)
-                        }
-
-                        else {
-                            return Podcasts.formatTime(model.duration)
-                        }
-                    }
-
-                    Rectangle {
-                        id: listened
-                        border.color: UbuntuColors.lightGrey
-                        height: units.gu(2.5)
-                        width: height
-                        radius: width / 2
-                        anchors.right: durationIcon.left
-                        anchors.rightMargin: units.gu(2)
-                        anchors.verticalCenter: actionRow.verticalCenter
-                        visible: model.listened
-                        Icon {
-                            id: tick
-                            name: "tick"
-                            anchors.centerIn: parent
-                            anchors.verticalCenterOffset: units.gu(0.1)
-                            height: units.gu(1.4)
-                            width: height
-                        }
-                    }
-
-                    Icon {
-                        id: durationIcon
-                        width: units.gu(2.5)
-                        height: width
-                        name: "alarm-clock"
-                        visible: duration.text !== ""
-                        anchors.right: duration.left
-                        anchors.rightMargin: units.gu(0.5)
-                        anchors.verticalCenter: actionRow.verticalCenter
-                        color: podbird.theme.baseIcon
-                    }
-
-                    Label {
-                        id: duration
-                        color: podbird.theme.baseText
-                        anchors.right: parent.right
-                        anchors.verticalCenter: durationIcon.verticalCenter
-                        fontSize: "small"
-                        text: !isNaN(model.duration) && model.duration !== 0 ? statusBox.formatTime(model.duration) : ""
-                    }
-
-                    Row {
-                        id: actionRow
-
-                        anchors.left: parent.left
-                        anchors.leftMargin: units.gu(-1.5)
-
-                        ActionButton {
-                            width: units.gu(5)
-                            height: units.gu(4)
-
-                            iconName: player.playbackState === MediaPlayer.PlayingState && currentGuid === model.guid ? "media-playback-pause"
-                                                                                                                      : "media-playback-start"
-
-                            onClicked: {
-                                var db = Podcasts.init();
-                                db.transaction(function (tx) {
-                                    if (currentGuid === model.guid) {
-                                        if (player.playbackState === MediaPlayer.PlayingState) {
-                                            player.pause()
-                                        } else {
-                                            player.play()
-                                        }
-                                    } else {
-                                        currentGuid = "";
-                                        player.source = model.downloadedfile ? model.downloadedfile : model.audiourl;
-                                        var rs = tx.executeSql("SELECT position FROM Episode WHERE guid=?", [model.guid]);
-                                        player.play();
-                                        player.seek(rs.rows.item(0).position);
-                                        currentName = model.name;
-                                        currentArtist = model.artist;
-                                        currentImage = model.image;
-                                        currentGuid = model.guid;
-                                    }
-                                });
-                            }
-                        }
-
-                        ActionButton {
-                            id: downloadButton
-
-                            width: units.gu(5)
-                            height: units.gu(4)
-
-                            property bool queued: false
-
-                            iconName: model.downloadedfile ? "delete" : (queued && downloader.downloadingGuid !== model.guid ? "history" : "save")
-                            opacity: downloader.downloadingGuid === model.guid ? 0.4 : 1.0
-                            enabled: downloader.downloadingGuid !== model.guid
-
-                            ActivityIndicator {
-                                anchors.centerIn: parent
-                                visible: downloader.downloadingGuid === model.guid
-                                running: visible
-                            }
-
-                            onClicked: {
-                                if (model.downloadedfile) {
-                                    fileManager.deleteFile(model.downloadedfile);
-                                    var db = Podcasts.init();
-                                    db.transaction(function (tx) {
-                                        tx.executeSql("UPDATE Episode SET downloadedfile = NULL WHERE guid = ?", [model.guid]);
-                                    });
-                                    loadEpisodes(episodeModel.pid, episodeModel.artist, episodeModel.image);
-                                } else {
-                                    downloadButton.queued = true;
-                                    downloader.addDownload(model.guid, model.audiourl);
-                                }
-                            }
-                        }
-                    }
-
-
-                    ProgressBar {
-                        visible: downloader.downloadingGuid === model.guid
-                        minimumValue: 0
-                        maximumValue: 100
-                        anchors.left: actionRow.right
-                        anchors.right: model.listened ? listened.left : durationIcon.left
-                        anchors.leftMargin: units.gu(2)
-                        anchors.rightMargin: units.gu(2)
-                        anchors.verticalCenter: actionRow.verticalCenter
-                        height: units.gu(2.6)
-                        value: downloader.progress
+                            duration: UbuntuAnimation.BriskDuration
+                        }
                     }
                 }
             }
@@ -483,21 +519,27 @@
 
     function refreshModel() {
         var db = Podcasts.init();
-        loadEpisodes(episodeModel.pid, episodeModel.artist, episodeModel.image);
+        loadEpisodes(episodeId, episodeArtist, episodeImage);
         episodesUpdating = false;
     }
 
     function loadEpisodes(pid, artist, img) {
+        var i, episode;
+        var newCount = 0;
+
+        episodeModel.clear();
+
         var db = Podcasts.init();
         db.transaction(function (tx) {
-            episodeModel.clear();
             var rs = tx.executeSql("SELECT rowid, * FROM Episode WHERE podcast=? ORDER BY published DESC", [pid]);
-            for(var i = 0; i < rs.rows.length; i++) {
-                var episode = rs.rows.item(i);
-                episodeModel.pid = pid;
-                episodeModel.artist = artist;
-                episodeModel.image = img;
-                episodeModel.append({"guid" : episode.guid, "listened" : episode.listened, "published": episode.published, "name" : episode.name, "description" : episode.description, "duration" : episode.duration, "position" : episode.position, "downloadedfile" : episode.downloadedfile, "image" : img, "artist" : artist, "audiourl" : episode.audiourl});
+            for(i = 0; i < rs.rows.length; i++) {
+                episode = rs.rows.item(i);
+                if (!episode.listened) {
+                    episodeModel.insert(newCount, {"guid" : episode.guid, "listened" : episode.listened, "published": episode.published, "name" : episode.name, "description" : episode.description, "duration" : episode.duration, "position" : episode.position, "downloadedfile" : episode.downloadedfile, "image" : img, "artist" : artist, "audiourl" : episode.audiourl});
+                    newCount++;
+                } else {
+                    episodeModel.insert(i,{"guid" : episode.guid, "listened" : episode.listened, "published": episode.published, "name" : episode.name, "description" : episode.description, "duration" : episode.duration, "position" : episode.position, "downloadedfile" : episode.downloadedfile, "image" : img, "artist" : artist, "audiourl" : episode.audiourl});
+                }
             }
         });
     }
 
=== modified file 'app/ui/PlayerControls.qml'
--- app/ui/PlayerControls.qml	2015-03-08 11:10:07 +0000
+++ app/ui/PlayerControls.qml	2015-04-18 14:12:52 +0000
@@ -53,7 +53,7 @@
             id: progressBarHint
             anchors.left: parent.left
             anchors.top: cover.bottom
-            color: UbuntuColors.orange
+            color: podbird.theme.focusText
             height: units.gu(0.25)
             width: player.duration > 0 ? (player.position / player.duration) * parent.width : 0
         }
@@ -72,7 +72,7 @@
                 color: "white"
                 elide: Text.ElideRight
                 maximumLineCount: 2
-                wrapMode: Text.WrapAnywhere
+                wrapMode: Text.WordWrap
                 text: currentName
             }
 
 
=== modified file 'app/ui/PodcastsTab.qml'
--- app/ui/PodcastsTab.qml	2015-03-29 15:33:26 +0000
+++ app/ui/PodcastsTab.qml	2015-04-18 14:12:52 +0000
@@ -186,13 +186,6 @@
             filter.pattern: RegExp(searchField.text, "gi")
         }
 
-        ListModel {
-            id: episodeModel
-            property string pid;
-            property string artist;
-            property string image;
-        }
-
         ListView {
             id: view
 
@@ -213,6 +206,7 @@
                 height: units.gu(8)
                 removable: true
                 confirmRemoval: true
+                showDivider: false
                 highlightWhenPressed: false
 
                 onItemRemoved: {
@@ -230,7 +224,8 @@
 
                 Rectangle {
                     anchors.fill: parent
-                    color: listItem.pressed ? podbird.theme.hightlightListView : "transparent"
+                    opacity: 0.3
+                    color: index % 2 === 0 ? podbird.theme.hightlightListView : "Transparent"
                 }
 
                 onClicked: {
 
=== renamed file 'app/ui/SearchTab.qml' => 'app/ui/SearchPage.qml'
--- app/ui/SearchTab.qml	2015-03-29 15:33:26 +0000
+++ app/ui/SearchPage.qml	2015-04-18 14:12:52 +0000
@@ -23,24 +23,64 @@
 import Ubuntu.Components.ListItems 1.0 as ListItem
 import "../podcasts.js" as Podcasts
 
-Tab {
-    title: i18n.tr("Find New Podcasts")
+Page {
+    id: searchPage
 
     property var xhr: new XMLHttpRequest;
 
-    page: Page {
-        Column {
-            spacing: units.gu(2)
-            anchors.fill: parent
-            anchors.topMargin: units.gu(2)
-
-            TextField {
+    /*
+         #FIXME: The following lines of code is necessary due to a upstream bug
+         in the SDK http://pad.lv/1400297. This bug is still present in the rtm.
+         Once it is fixed, this following property and connection can be remvoed.
+        */
+    property Item __oldContents: null
+    Connections {
+        target: searchPage.head
+        onContentsChanged: {
+            if (searchPage.__oldContents) {
+                searchPage.__oldContents.parent = null;
+            }
+            searchPage.__oldContents = searchPage.head.contents;
+        }
+    }
+
+    state: "default"
+    states: [
+        PageHeadState {
+            name: "default"
+            head: searchPage.head
+            actions: [
+                Action {
+                    iconName: "search"
+                    text: i18n.tr("Search Episode")
+                    onTriggered: {
+                        searchPage.state = "search"
+                        searchField.forceActiveFocus()
+                    }
+                }
+            ]
+        },
+
+        PageHeadState {
+            name: "search"
+            head: searchPage.head
+            backAction: Action {
+                iconName: "back"
+                text: i18n.tr("Back")
+                onTriggered: {
+                    resultsView.forceActiveFocus()
+                    searchField.text = ""
+                    searchPage.state = "default"
+                }
+            }
+
+            contents: TextField {
                 id: searchField
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.margins: units.gu(2)
+                inputMethodHints: Qt.ImhNoPredictiveText
                 placeholderText: i18n.tr("Search...")
-                inputMethodHints: Qt.ImhNoPredictiveText;
+                anchors.left: parent ? parent.left : undefined
+                anchors.right: parent ? parent.right : undefined
+                anchors.rightMargin: units.gu(2)
                 onTextChanged: {
                     if (text.length > 2) {
                         search(text)
@@ -49,95 +89,106 @@
                     }
                 }
             }
-
-            ListView {
-                id: resultsView
-                clip: true
-                width: parent.width
-                model: searchResults
-                height: parent.height - searchField.height - units.gu(2)
-
-                footer: Item {
-                    width: parent.width
-                    height: units.gu(7)
-                }
-
-                delegate: ListItem.Empty {
-                    id: listItem
-
-                    height: units.gu(8)
-                    highlightWhenPressed: false
-
-                    Rectangle {
-                        anchors.fill: parent
-                        color: listItem.pressed ? podbird.theme.hightlightListView : "transparent"
-                    }
-
-                    RowLayout {
-                        id: titleRow
-
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.margins: units.gu(2)
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        spacing: units.gu(2)
-
-                        Image {
-                            id: imgFrame
-                            width: units.gu(6)
-                            height: width
-                            sourceSize.height: width
-                            sourceSize.width: width
-                            source: model.image
-                        }
-
-                        Column {
-                            id: detailColumn
-
-                            anchors.verticalCenter: imgFrame.verticalCenter
-                            Layout.fillWidth: true
-
-                            Label {
-                                id: podcastTitle
-                                textFormat: Text.PlainText
-                                text: model.name
-                                width: parent.width
-                                fontSize: "small"
-                                elide: Text.ElideRight
-                            }
-
-                            Label {
-                                id: episodeCount
-                                width: parent.width
-                                color: "#999999"
-                                text: model.artist
-                                fontSize: "x-small"
-                                elide: Text.ElideRight
-                            }
-                        }
-
-                        Button {
-                            anchors.right: parent.right
-                            text: i18n.tr("Subscribe")
-                            color: UbuntuColors.green
-                            onClicked: {
-                                Podcasts.subscribe(model.artist, model.name, model.feed, model.image);
-                                imageDownloader.feed = model.feed;
-                                imageDownloader.download(model.image);
-                                tabs.selectedTabIndex = 0;
-                                searchField.text = ""
-                            }
-                        }
-                    }
-                }
-
-                Scrollbar {
-                    flickableItem: resultsView
-                }
-
-            }
-        }
+        }
+    ]
+
+    EmptyState {
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: Qt.inputMethod.visible ? units.gu(4) : 0
+        visible: searchResults.count === 0
+        iconName: "search"
+        title: searchPage.state !== "search" ? i18n.tr("Looking for a new Podcast?") : i18n.tr("No Podcasts found")
+        subTitle: searchPage.state !== "search" ? i18n.tr("Click the 'magnifier' at the top to search.") : i18n.tr("No podcasts found matching the search term.")
+    }
+
+    ListView {
+        id: resultsView
+
+        clip: true
+        model: searchResults
+        anchors.fill: parent
+
+        footer: Item {
+            width: parent.width
+            height: units.gu(7)
+        }
+
+        delegate: ListItem.Empty {
+            id: listItem
+
+            height: units.gu(8)
+            showDivider: false
+            highlightWhenPressed: false
+
+            Rectangle {
+                anchors.fill: parent
+                opacity: 0.3
+                color: index % 2 === 0 ? podbird.theme.hightlightListView : "Transparent"
+            }
+
+            RowLayout {
+                id: titleRow
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: units.gu(2)
+                anchors.verticalCenter: parent.verticalCenter
+
+                spacing: units.gu(2)
+
+                Image {
+                    id: imgFrame
+                    width: units.gu(6)
+                    height: width
+                    sourceSize.height: width
+                    sourceSize.width: width
+                    source: model.image
+                }
+
+                Column {
+                    id: detailColumn
+
+                    anchors.verticalCenter: imgFrame.verticalCenter
+                    Layout.fillWidth: true
+
+                    Label {
+                        id: podcastTitle
+                        textFormat: Text.PlainText
+                        text: model.name
+                        width: parent.width
+                        fontSize: "medium"
+                        elide: Text.ElideRight
+                    }
+
+                    Label {
+                        id: episodeCount
+                        width: parent.width
+                        color: "#999999"
+                        text: model.artist
+                        fontSize: "x-small"
+                        elide: Text.ElideRight
+                    }
+                }
+
+                Button {
+                    anchors.right: parent.right
+                    text: i18n.tr("Subscribe")
+                    color: UbuntuColors.green
+                    onClicked: {
+                        Podcasts.subscribe(model.artist, model.name, model.feed, model.image);
+                        imageDownloader.feed = model.feed;
+                        imageDownloader.download(model.image);
+                        tabs.selectedTabIndex = 0;
+                        searchField.text = ""
+                    }
+                }
+            }
+        }
+
+        Scrollbar {
+            flickableItem: resultsView
+        }
+
     }
 
     ListModel {
 
=== modified file 'po/com.mikeasoft.podbird.pot'
--- po/com.mikeasoft.podbird.pot	2015-04-16 10:18:41 +0000
+++ po/com.mikeasoft.podbird.pot	2015-04-18 14:12:52 +0000
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2015-04-16 12:16+0200\n"
+"POT-Creation-Date: 2015-04-16 12:43+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -18,7 +18,11 @@
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
-#: ../app/podbird.qml:178
+#: ../app/podbird.qml:173
+msgid "Find New Podcasts"
+msgstr ""
+
+#: ../app/podbird.qml:187
 msgid "Settings"
 msgstr ""
 
@@ -59,7 +63,7 @@
 #: ../app/settings/DownloadSetting.qml:34
 #: ../app/settings/DownloadSetting.qml:35
 #: ../app/settings/DownloadSetting.qml:36
-#: ../app/settings/DownloadSetting.qml:37
+#: ../app/settings/DownloadSetting.qml:37 ../app/ui/EpisodesPage.qml:337
 #, qt-format
 msgid "%1 episode"
 msgid_plural "%1 episodes"
@@ -78,61 +82,73 @@
 msgid "Dark"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:85
+#: ../app/ui/EpisodesPage.qml:33
+msgid "Podcast"
+msgstr ""
+
+#: ../app/ui/EpisodesPage.qml:89 ../app/ui/SearchPage.qml:55
 msgid "Search Episode"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:94
+#: ../app/ui/EpisodesPage.qml:98
 msgid "Mark all listened"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:105 ../app/ui/EpisodesPage.qml:153
+#: ../app/ui/EpisodesPage.qml:109 ../app/ui/EpisodesPage.qml:187
 msgid "Unsubscribe"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:120 ../app/ui/PodcastsTab.qml:86
-#: ../app/ui/PodcastsTab.qml:109
+#: ../app/ui/EpisodesPage.qml:124 ../app/ui/PodcastsTab.qml:86
+#: ../app/ui/PodcastsTab.qml:109 ../app/ui/SearchPage.qml:69
 msgid "Back"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:131
+#: ../app/ui/EpisodesPage.qml:136
 msgid "Search episode"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:150
+#: ../app/ui/EpisodesPage.qml:184
 msgid "Unsubscribe Confirmation"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:151
+#: ../app/ui/EpisodesPage.qml:185
 #, qt-format
 msgid "Are you sure you want to unsubscribe from <b>%1</b>?"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:170
+#: ../app/ui/EpisodesPage.qml:204
 msgid "Cancel"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:184
+#: ../app/ui/EpisodesPage.qml:218
 msgid "No Episodes found"
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:185
+#: ../app/ui/EpisodesPage.qml:219
 msgid "No episodes found matching the search term."
 msgstr ""
 
-#: ../app/ui/EpisodesPage.qml:319
-#, no-c-format, qt-format
-msgid "%1h %2m"
-msgstr ""
-
-#: ../app/ui/EpisodesPage.qml:328
-#, no-c-format, qt-format
-msgid "%1h"
-msgstr ""
-
-#: ../app/ui/EpisodesPage.qml:336
-#, no-c-format, qt-format
-msgid "%1m"
+#: ../app/ui/EpisodesPage.qml:241
+#, no-c-format, qt-format
+msgid "%1 hr %2 min"
+msgstr ""
+
+#: ../app/ui/EpisodesPage.qml:250
+#, no-c-format, qt-format
+msgid "%1 hr"
+msgstr ""
+
+#: ../app/ui/EpisodesPage.qml:258
+#, no-c-format, qt-format
+msgid "%1 min"
+msgstr ""
+
+#: ../app/ui/EpisodesPage.qml:290
+msgid "Unheard"
+msgstr ""
+
+#: ../app/ui/EpisodesPage.qml:290
+msgid "Listened"
 msgstr ""
 
 #: ../app/ui/NowPlayingPage.qml:28
@@ -197,26 +213,34 @@
 "page to add some."
 msgstr ""
 
-#: ../app/ui/PodcastsTab.qml:175
+#: ../app/ui/PodcastsTab.qml:175 ../app/ui/SearchPage.qml:101
 msgid "No podcasts found matching the search term."
 msgstr ""
 
-#: ../app/ui/PodcastsTab.qml:291
+#: ../app/ui/PodcastsTab.qml:286
 #, qt-format
 msgid "%1 unheard episode"
 msgid_plural "%1 unheard episodes"
 msgstr[0] ""
 msgstr[1] ""
 
-#: ../app/ui/SearchTab.qml:27
-msgid "Find New Podcasts"
-msgstr ""
-
-#: ../app/ui/SearchTab.qml:42
+#: ../app/ui/SearchPage.qml:80
 msgid "Search..."
 msgstr ""
 
-#: ../app/ui/SearchTab.qml:122
+#: ../app/ui/SearchPage.qml:100
+msgid "Looking for a new Podcast?"
+msgstr ""
+
+#: ../app/ui/SearchPage.qml:100
+msgid "No Podcasts found"
+msgstr ""
+
+#: ../app/ui/SearchPage.qml:101
+msgid "Click the 'magnifier' at the top to search."
+msgstr ""
+
+#: ../app/ui/SearchPage.qml:175
 msgid "Subscribe"
 msgstr ""
 
@@ -323,6 +347,6 @@
 msgid "Finish"
 msgstr ""
 
-#: /home/krnekhelesh/Documents/Ubuntu-Projects/MP-Reviews/builddir/build-5-auto-download-option-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-Default/po/Podbird.desktop.in.h:1
+#: /home/krnekhelesh/Documents/Ubuntu-Projects/MP-Reviews/builddir/build-5.5-kevin-episodes-design-UbuntuSDK_for_armhf_GCC_ubuntu_sdk_14_10_utopic-Default/po/Podbird.desktop.in.h:1
 msgid "Podbird"
 msgstr ""
 
=== modified file 'podbird.png'
 Binary files podbird.png	2015-03-30 00:28:42 +0000 and podbird.png	2015-04-18 14:12:52 +0000 differ