Merge lp:~nik90/cliffhanger/more-improvements into lp:~flashback-dev/cliffhanger/trunk

[Nekhelesh Ramananthan]

- Added a generic grid view element
- Added ability to filter movies by genre
- Reorganised the UI folder
- Merged UpcomingMovie.js and NowPlaying.js files
- Added comments to improve code readibility

- Added a generic grid view element
- Added ability to filter movies by genre
- Reorganised the UI folder
- Merged UpcomingMovie.js and NowPlaying.js files
- Added comments to improve code readibility

[lp:~nik90/cliffhanger/more-improvements]

11. By Nekhelesh Ramananthan on 2013-11-14

small code cleanup

12. By Nekhelesh Ramananthan on 2013-11-14

Reorganized the UI folder

13. By Nekhelesh Ramananthan on 2013-11-14

Added comments to backend files and improved the poster url returned to carousel

14. By Nekhelesh Ramananthan on 2013-11-14

Merged UpcomingMovie.js and NowPlayingMovie.js files

15. By Nekhelesh Ramananthan on 2013-11-14

Simplified Search.js

[Nekhelesh Ramananthan (nik90)]

This work done in this MP is being split to smaller MP for convenience and clarity. Hence rejecting this MP.

review: Disapprove

Unmerged revisions

15. By Nekhelesh Ramananthan on 2013-11-14

Simplified Search.js

14. By Nekhelesh Ramananthan on 2013-11-14

Merged UpcomingMovie.js and NowPlayingMovie.js files

13. By Nekhelesh Ramananthan on 2013-11-14

Added comments to backend files and improved the poster url returned to carousel

12. By Nekhelesh Ramananthan on 2013-11-14

Reorganized the UI folder

11. By Nekhelesh Ramananthan on 2013-11-14

small code cleanup

10. By Nekhelesh Ramananthan on 2013-11-14

enabled all tabs again

9. By Nekhelesh Ramananthan on 2013-11-14

merge from trunk

8. By Nekhelesh Ramananthan on 2013-11-14

Added ability to filter movies by genre

7. By Nekhelesh Ramananthan on 2013-11-14

Added new component Grid

=== modified file 'Cliffhanger.qml'
--- Cliffhanger.qml	2013-11-13 20:50:15 +0000
+++ Cliffhanger.qml	2013-11-14 23:41:47 +0000
@@ -1,8 +1,10 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
+import "ui/movie"
+import "ui/tv"
+import "ui/person"
+import "ui/home"
 import "ui"
-import "graphics"
-import "components"
 
 MainView {
     // objectName for functional testing purposes (autopilot-qt5)
@@ -21,9 +23,7 @@
     height: units.gu(75)
 
     // TODO: This is a temporary app background. Final background color needs to be decided.
-    headerColor: UbuntuColors.coolGrey
     backgroundColor: UbuntuColors.coolGrey
-    footerColor: UbuntuColors.coolGrey
 
     PageStack {
         id: pagestack
@@ -34,15 +34,14 @@
             id: root
 
             // Moviedb App Properties
-            //readonly property string baseUrl: "http://api.themoviedb.org/3"
-            readonly property string baseUrl: "http://private-4b62-themoviedb.apiary.io/3"
+            readonly property string baseUrl: "http://api.themoviedb.org/3"
             readonly property string api_Key: "?api_key=d0a2929acb64b7c203071e87a621dfb3"
 
             // Home Tab
-//            Tab {
-//                title: "Home"
-//                page: HomeTab {}
-//            }
+            //            Tab {
+            //                title: "Home"
+            //                page: HomeTab {}
+            //            }
 
             // Movies tab
             Tab {
@@ -62,10 +61,12 @@
                 page: PersonTab {}
             }
 
+            // About Tab
             Tab {
                 title: "About"
                 page: About {}
             }
+
         }
     }
 }
 
=== added file 'backend/GenreList.js'
--- backend/GenreList.js	1970-01-01 00:00:00 +0000
+++ backend/GenreList.js	2013-11-14 23:41:47 +0000
@@ -0,0 +1,30 @@
+WorkerScript.onMessage = function(message) {
+    /*
+      XML HTTP Request to retrieve the list of genres. The retrieved list is synced
+      to a list model with the following structure,
+        id      -> Unique ID used by the API
+        name    -> Genre
+      */
+
+    var XHR = new XMLHttpRequest();
+
+    XHR.open("GET", message.url);
+    XHR.setRequestHeader("Accept", "application/json");
+
+    XHR.onreadystatechange = function() {
+        if(XHR.readyState != XHR.DONE)
+            return;
+        if(XHR.status != 200)
+            return;
+
+        var obj = JSON.parse(XHR.responseText);
+
+        for(var i=0; i<obj.genres.length; i++) {
+            message.model.append({"name": obj.genres[i].name,
+                                     "id": obj.genres[i].id});
+            message.model.sync()
+        }
+    };
+
+    XHR.send();
+}
 
=== added file 'backend/GenreMovies.js'
--- backend/GenreMovies.js	1970-01-01 00:00:00 +0000
+++ backend/GenreMovies.js	2013-11-14 23:41:47 +0000
@@ -0,0 +1,43 @@
+WorkerScript.onMessage = function(message) {
+    /*
+      XML HTTP Request to retrieve the movies of a certain genre. The retrieved
+      results are synced to a list model with the following structure.
+        name        -> Name of the movie
+        thumb_url   -> Movie poster thumbnail
+        id          -> Unique identification ID used by the API
+      */
+
+    var XHR = new XMLHttpRequest();
+    var thumb_url;
+
+    // Clear model of any data before syncing it with new data
+    message.model.clear()
+
+    XHR.open("GET", message.url);
+    XHR.setRequestHeader("Accept", "application/json");
+
+    XHR.onreadystatechange = function() {
+        if(XHR.readyState != XHR.DONE)
+            return;
+        if(XHR.status != 200)
+            return;
+
+        var obj = JSON.parse(XHR.responseText);
+
+        for(var i=0; i<obj.results.length; i++) {
+
+            // Ensuring that a valid URL is always sent.
+            if (obj.results[i].poster_path == null)
+                thumb_url = "../graphics/toolbarIcon.png"
+            else                
+                thumb_url = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + obj.results[i].poster_path
+
+            message.model.append({"name": obj.results[i].title,
+                                     "thumb_url": thumb_url,
+                                     "id": obj.results[i].id});
+            message.model.sync()
+        }
+    };
+
+    XHR.send();
+}
 
=== modified file 'backend/MovieDetails.js'
--- backend/MovieDetails.js	2013-11-13 20:50:15 +0000
+++ backend/MovieDetails.js	2013-11-14 23:41:47 +0000
@@ -1,4 +1,7 @@
 WorkerScript.onMessage = function(message) {
+    /*
+      XML HTTP Request to retrieve the details of a movie.
+      */
 
     var XHR = new XMLHttpRequest();    
     var thumb_url;
@@ -14,6 +17,7 @@
 
         var obj = JSON.parse(XHR.responseText);
 
+        // Syncing the movie cast to the castModel
         for(var i=0; i<obj.credits.cast.length; i++) {
             if (obj.credits.cast[i].profile_path == null)
                 thumb_url = "null"
@@ -27,6 +31,7 @@
             message.castModel.sync()
         }
 
+        // Syncing the movie crew to the crewModel
         for(var j=0; j<obj.credits.crew.length; j++) {
             message.crewModel.append({"name": obj.credits.crew[j].name,
                                          "id": obj.credits.crew[j].id,
@@ -34,9 +39,10 @@
             message.crewModel.sync()
         }
 
+        // Obtaining movies similar to the movie currently viewed
         for(var i=0; i<obj.similar_movies.results.length; i++) {
             if (obj.similar_movies.results[i].poster_path == null)
-                thumb_url = "null"
+                thumb_url = "../graphics/toolbarIcon.png"
             else
                 thumb_url = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + obj.similar_movies.results[i].poster_path
 
@@ -46,7 +52,13 @@
             message.similarMovieModel.sync()
         }
 
-        WorkerScript.sendMessage({ 'poster': obj.poster_path,
+        if(obj.poster_path == null)
+            thumb_url = "../../graphics/toolbarIcon.png"
+        else
+            thumb_url = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + obj.poster_path
+
+        // Returning movie details such as poster path, title, description, genre, theme etc.
+        WorkerScript.sendMessage({ 'poster': thumb_url,
                                      "title": obj.original_title,
                                      "description": obj.overview,
                                      "runtime": obj.runtime,
 
=== removed file 'backend/NowPlayingMovie.js'
--- backend/NowPlayingMovie.js	2013-11-13 20:50:15 +0000
+++ backend/NowPlayingMovie.js	1970-01-01 00:00:00 +0000
@@ -1,32 +0,0 @@
-WorkerScript.onMessage = function(message) {
-
-    var XHR = new XMLHttpRequest();
-    var thumb_url;
-
-    XHR.open("GET", message.url);
-    XHR.setRequestHeader("Accept", "application/json");
-
-    XHR.onreadystatechange = function() {
-        if(XHR.readyState != XHR.DONE)
-            return;
-        if(XHR.status != 200)
-            return;
-
-        var obj = JSON.parse(XHR.responseText);
-
-        for(var i=0; i<obj.results.length; i++) {
-
-            if (obj.results[i].poster_path == null)
-                thumb_url = "null"
-            else
-                thumb_url = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + obj.results[i].poster_path
-
-            message.model.append({"name": obj.results[i].title,
-                                     "thumb_url": thumb_url,
-                                     "id": obj.results[i].id});
-            message.model.sync()
-        }
-    };
-
-    XHR.send();
-}
 
=== modified file 'backend/PersonDetails.js'
--- backend/PersonDetails.js	2013-11-13 21:28:13 +0000
+++ backend/PersonDetails.js	2013-11-14 23:41:47 +0000
@@ -37,11 +37,24 @@
         }
 
         for(i=0; i<obj.combined_credits.crew.length; i++) {
-            message.directedModel.append({"title": obj.combined_credits.crew[i].title,
-                                             "character": obj.combined_credits.crew[i].job,
-                                             "media_type": obj.combined_credits.cast[i].media_type,
-                                             "id": obj.combined_credits.crew[i].id,
-                                             "iconUrl": thumb_url});
+            if (obj.combined_credits.crew[i].poster_path == null)
+                thumb_url = "null"
+            else
+                thumb_url = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + obj.combined_credits.crew[i].poster_path
+
+
+            if(obj.combined_credits.crew[i].media_type == "movie")
+                message.directedModel.append({"title": obj.combined_credits.crew[i].title,
+                                              "character": obj.combined_credits.crew[i].job,
+                                              "media_type": obj.combined_credits.crew[i].media_type,
+                                              "id": obj.combined_credits.crew[i].id,
+                                              "iconUrl": thumb_url});
+            else if(obj.combined_credits.crew[i].media_type == "tv")
+                message.directedModel.append({"title": obj.combined_credits.crew[i].name,
+                                              "character": obj.combined_credits.crew[i].job,
+                                              "media_type": obj.combined_credits.crew[i].media_type,
+                                              "id": obj.combined_credits.crew[i].id,
+                                              "iconUrl": thumb_url});
             message.directedModel.sync()
         }
 
 
=== modified file 'backend/Search.js'
--- backend/Search.js	2013-11-13 20:50:15 +0000
+++ backend/Search.js	2013-11-14 23:41:47 +0000
@@ -2,6 +2,7 @@
 
     var XHR = new XMLHttpRequest();
     var thumb_url;
+
     message.model.clear()
 
     XHR.open("GET", message.url);
@@ -17,8 +18,8 @@
 
         for(var i=0; i<obj.results.length; i++) {
 
-            if (message.type == "movie") {
-
+            switch(message.type) {
+            case "movie":
                 if (obj.results[i].poster_path == null)
                     thumb_url = "null"
                 else
@@ -27,10 +28,9 @@
                 message.model.append({"name": obj.results[i].title,
                                          "id": obj.results[i].id,
                                          "thumb_url": thumb_url});
-            }
-
-            else if (message.type == "person"){
-
+                break;
+
+            case "person":
                 if (obj.results[i].profile_path == null)
                     thumb_url = "null"
                 else
@@ -39,9 +39,9 @@
                 message.model.append({"name": obj.results[i].name,
                                          "id": obj.results[i].id,
                                          "thumb_url": thumb_url});
-            }
+                break;
 
-            else if (message.type == "tv") {
+            case "tv":
                 if (obj.results[i].poster_path == null)
                     thumb_url = "null"
                 else
@@ -50,6 +50,7 @@
                 message.model.append({"name": obj.results[i].name,
                                          "id": obj.results[i].id,
                                          "thumb_url": thumb_url});
+                break;
             }
 
             message.model.sync()
 
=== renamed file 'backend/UpcomingMovie.js' => 'backend/TrendingMovie.js'
=== added file 'components/Grid.qml'
--- components/Grid.qml	1970-01-01 00:00:00 +0000
+++ components/Grid.qml	2013-11-14 23:41:47 +0000
@@ -0,0 +1,106 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1
+
+Item {
+    id: grid
+
+    // Header Title
+    property alias header: header.text
+
+    // Grid Data Model
+    property alias dataModel: gridView.model
+
+    // Grid Thumbnail size
+    property int size: units.gu(12)
+
+    // Signal triggered when a thumb
+    signal thumbClicked(var model)
+
+    width: parent.width
+
+    Column {
+        id: container
+
+        anchors.fill: parent
+        spacing: units.gu(1)
+
+        Header {
+            id: header
+            text: "Default Header Title"
+            visible: text != "Default Header Title"
+            ActivityIndicator {
+                running: dataModel.count === 0 ? true : false
+                anchors.right: parent.right
+            }
+        }
+
+        Component {
+            id: gridDelegate
+            Item {
+                id: thumbContainer
+
+                width: grid.size + units.gu(2)
+                height: thumbColumn.height
+
+                Column {
+                    id: thumbColumn
+                    spacing: units.gu(0.5)
+                    anchors.fill: parent
+
+                    // Widget to curve edges and encase the thumbnail
+                    UbuntuShape {
+                        id: gridThumb
+
+                        width: grid.size
+                        height: grid.size + units.gu(5)
+
+                        image: Image {
+                            source: thumb_url
+                            fillMode: Image.PreserveAspectFit
+                            smooth: true
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: grid.thumbClicked(model)
+                        }
+                    }
+
+                    // Label showing the movie/tv show name
+                    Label {
+                        id: gridThumbDescription
+
+                        text: name
+                        maximumLineCount: 2
+                        elide: Text.ElideRight
+                        wrapMode: Text.WordWrap
+                        width: gridThumb.width
+                        horizontalAlignment: Text.AlignHCenter
+
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: grid.thumbClicked(model)
+                        }
+                    }
+                }
+            }
+        }
+
+
+        GridView {
+            id: gridView
+
+            clip: true
+            width: parent.width
+            height: parent.height - header.height - parent.spacing
+            snapMode: GridView.SnapToRow
+
+            cellHeight: grid.size + units.gu(12)
+            cellWidth: grid.size + container.spacing
+
+            delegate: gridDelegate
+        }
+
+    }
+}
 
=== added directory 'graphics/samples'
=== added file 'graphics/samples/america.jpg'
 Binary files graphics/samples/america.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/america.jpg	2013-11-14 23:41:47 +0000 differ
=== added file 'graphics/samples/avengers.jpg'
 Binary files graphics/samples/avengers.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/avengers.jpg	2013-11-14 23:41:47 +0000 differ
=== added file 'graphics/samples/insidious.jpg'
 Binary files graphics/samples/insidious.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/insidious.jpg	2013-11-14 23:41:47 +0000 differ
=== added file 'graphics/samples/iron-man.jpg'
 Binary files graphics/samples/iron-man.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/iron-man.jpg	2013-11-14 23:41:47 +0000 differ
=== added file 'graphics/samples/pirates.jpg'
 Binary files graphics/samples/pirates.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/pirates.jpg	2013-11-14 23:41:47 +0000 differ
=== added file 'graphics/samples/thor.jpg'
 Binary files graphics/samples/thor.jpg	1970-01-01 00:00:00 +0000 and graphics/samples/thor.jpg	2013-11-14 23:41:47 +0000 differ
=== added directory 'ui'
=== removed directory 'ui'
=== renamed file 'ui/About.qml' => 'ui/About.qml'
=== added directory 'ui/home'
=== renamed file 'ui/HomeTab.qml' => 'ui/home/HomeTab.qml'
--- ui/HomeTab.qml	2013-11-11 11:39:45 +0000
+++ ui/home/HomeTab.qml	2013-11-14 23:41:47 +0000
@@ -1,7 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
-import "../tests"
+import "../../components"
 
 Page {
     id: homePage
 
=== added directory 'ui/movie'
=== added file 'ui/movie/MovieByGenre.qml'
--- ui/movie/MovieByGenre.qml	1970-01-01 00:00:00 +0000
+++ ui/movie/MovieByGenre.qml	2013-11-14 23:41:47 +0000
@@ -0,0 +1,70 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "../../components"
+
+Page {
+    id: movieByGenrePage
+
+    title: "Genre"
+    visible: false
+    flickable: null
+
+    property string genre_id
+    property string genre_url: root.baseUrl + "/genre/list" + root.api_Key
+    property string genre_movie_url: root.baseUrl + "/genre/" + genre_id + "/movies" + root.api_Key
+
+    Component.onCompleted: {
+        genreWorker.source = "../../backend/GenreList.js"
+        genreWorker.sendMessage({"url": genre_url, "model": genreListModel})
+    }
+
+    ListModel { id: genreListModel  }
+    ListModel { id: genreMoviesModel  }
+
+    WorkerScript { id: genreWorker }
+
+    Flickable {
+        clip: true
+        anchors.fill: parent
+        contentHeight: mainColumn.height + units.gu(5)
+        interactive: contentHeight > parent.height
+
+        Column {
+            id: mainColumn
+
+            anchors {
+                left: parent.left;
+                right: parent.right;
+                top: parent.top;
+                margins: units.gu(2)
+            }
+
+            spacing: units.gu(2)
+
+            OptionSelector {
+                text: "Choose movie genre"
+                model: genreListModel
+                delegate: genreDelegate
+                onDelegateClicked: {
+                    genreMoviesModel.clear()
+                    genreWorker.source = "../../backend/GenreMovies.js"
+                    genre_id = genreListModel.get(index).id
+                    genreWorker.sendMessage({"model": genreMoviesModel, "url": genre_movie_url})
+                }
+            }
+
+            Component {
+                id: genreDelegate
+                OptionSelectorDelegate { text: name }
+            }
+
+            Grid {
+                id: movieList
+                dataModel: genreMoviesModel
+                visible: genreMoviesModel.count != 0
+                height: units.gu(50)
+                onThumbClicked: pageStack.push(Qt.resolvedUrl("MoviePage.qml"), {"movie_id": model.id})
+            }
+        }
+    }
+}
 
=== renamed file 'ui/MoviePage.qml' => 'ui/movie/MoviePage.qml'
--- ui/MoviePage.qml	2013-11-13 20:50:15 +0000
+++ ui/movie/MoviePage.qml	2013-11-14 23:41:47 +0000
@@ -2,7 +2,7 @@
 import Ubuntu.Components 0.1
 import QtGraphicalEffects 1.0
 import Ubuntu.Components.ListItems 0.1
-import "../components"
+import "../../components"
 
 Page {
     id: moviePage
@@ -21,13 +21,9 @@
 
     WorkerScript {
         id: movieWorker
-        source: "../backend/MovieDetails.js"
+        source: "../../backend/MovieDetails.js"
         onMessage: {
-            if(messageObject.poster == null)
-                thumb.source = Qt.resolvedUrl("../graphics/toolbarIcon.png")
-            else
-                thumb.source = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + messageObject.poster
-
+            thumb.source = messageObject.poster
             title.text = messageObject.title
             description.text = messageObject.description
             releaseDate.subText = messageObject.releasedate
@@ -47,15 +43,15 @@
 
             cast1.text = castModel.get(0).name
             cast1.subText = castModel.get(0).character
-            cast1.icon = castModel.get(0).iconUrl === "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : castModel.get(0).iconUrl;
+            cast1.icon = castModel.get(0).iconUrl === "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : castModel.get(0).iconUrl;
 
             cast2.text = castModel.get(1).name
             cast2.subText = castModel.get(1).character
-            cast2.icon = castModel.get(1).iconUrl === "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : castModel.get(1).iconUrl;
+            cast2.icon = castModel.get(1).iconUrl === "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : castModel.get(1).iconUrl;
 
             cast3.text = castModel.get(2).name
             cast3.subText = castModel.get(2).character
-            cast3.icon = castModel.get(2).iconUrl === "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : castModel.get(2).iconUrl;
+            cast3.icon = castModel.get(2).iconUrl === "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : castModel.get(2).iconUrl;
 
             crew1.text = crewModel.get(0).name
             crew1.subText = crewModel.get(0).job
@@ -108,8 +104,8 @@
             delegate: Subtitled {
                 text: name
                 subText: character
-                icon: iconUrl == "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : iconUrl
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": id})
+                icon: iconUrl == "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : iconUrl
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": id})
             }
         }
     }
@@ -134,7 +130,7 @@
             delegate: Subtitled {
                 text: name
                 subText: job
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": id})
             }
         }
     }
@@ -223,7 +219,7 @@
             Image{
                 id: star
                 width: units.gu(5)
-                source: Qt.resolvedUrl("../graphics/rating.png")
+                source: Qt.resolvedUrl("../../graphics/rating.png")
                 fillMode: Image.PreserveAspectFit
                 smooth: true
             }
@@ -271,19 +267,19 @@
             Subtitled {
                 id: cast1;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": castModel.get(0).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": castModel.get(0).id})
             }
 
             Subtitled {
                 id: cast2;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": castModel.get(1).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": castModel.get(1).id})
             }
 
             Subtitled {
                 id: cast3;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": castModel.get(2).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": castModel.get(2).id})
             }
 
             Standard {
@@ -298,19 +294,19 @@
             Subtitled {
                 id: crew1;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": crewModel.get(0).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": crewModel.get(0).id})
             }
 
             Subtitled {
                 id: crew2;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": crewModel.get(1).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": crewModel.get(1).id})
             }
 
             Subtitled {
                 id: crew3;
                 progression: true
-                onClicked: pageStack.push(Qt.resolvedUrl("PersonPage.qml"), {"person_id": crewModel.get(2).id})
+                onClicked: pageStack.push(Qt.resolvedUrl("../person/PersonPage.qml"), {"person_id": crewModel.get(2).id})
             }
 
             Standard {
 
=== renamed file 'ui/MovieTab.qml' => 'ui/movie/MovieTab.qml'
--- ui/MovieTab.qml	2013-11-12 17:43:07 +0000
+++ ui/movie/MovieTab.qml	2013-11-14 23:41:47 +0000
@@ -1,7 +1,7 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1
-import "../components"
+import "../../components"
 
 Page {
     // Movie URLs
@@ -13,7 +13,7 @@
     ListModel {
         id: nowPlayingModel
         Component.onCompleted: {
-            homePageWorker.source =  "../backend/NowPlayingMovie.js"
+            homePageWorker.source =  "../../backend/TrendingMovie.js"
             homePageWorker.sendMessage({'model': nowPlayingModel, 'url': nowPlayingUrl})
         }
     }
@@ -21,7 +21,7 @@
     ListModel {
         id: upcomingMovieModel
         Component.onCompleted: {
-            homePageWorker.source =  "../backend/UpcomingMovie.js"
+            homePageWorker.source =  "../../backend/TrendingMovie.js"
             homePageWorker.sendMessage({'model': upcomingMovieModel, 'url': upcomingUrl})
         }
     }
@@ -88,7 +88,7 @@
             Standard {
                 text: "By Genre"
                 progression: true
-                enabled: false
+                onClicked: pageStack.push(Qt.resolvedUrl("MovieByGenre.qml"))
             }
 
             Standard {
 
=== renamed file 'ui/SearchMovie.qml' => 'ui/movie/SearchMovie.qml'
--- ui/SearchMovie.qml	2013-11-12 20:09:36 +0000
+++ ui/movie/SearchMovie.qml	2013-11-14 23:41:47 +0000
@@ -1,6 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
+import "../../components"
 
 // Page to search for movies
 Page {
 
=== added directory 'ui/person'
=== renamed file 'ui/PersonPage.qml' => 'ui/person/PersonPage.qml'
--- ui/PersonPage.qml	2013-11-13 21:28:13 +0000
+++ ui/person/PersonPage.qml	2013-11-14 23:41:47 +0000
@@ -18,10 +18,10 @@
 
     WorkerScript {
         id: personWorker
-        source: "../backend/PersonDetails.js"
+        source: "../../backend/PersonDetails.js"
         onMessage: {
             if(messageObject.poster == null)
-                thumb.source = Qt.resolvedUrl("../graphics/toolbarIcon.png")
+                thumb.source = Qt.resolvedUrl("../../graphics/toolbarIcon.png")
             else
                 thumb.source = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/" + "w185/" + messageObject.poster
 
@@ -30,7 +30,7 @@
             birthYear.text = messageObject.birthday == null ? "Not Available" : "Born: " + messageObject.birthday
             deathYear.text = messageObject.deathday == null ? "Not Available" :"Dead: " + messageObject.deathday
             birthPlace.text = messageObject.place_of_birth == null ? "Birth Place Not Available" : messageObject.place_of_birth
-            contact.text = messageObject.homepage
+            contact.text = messageObject.homepage == null ? "Homepage Not Available" : messageObject.homepage
         }
     }
 
@@ -168,10 +168,10 @@
 
                 model: actedModel
                 delegate: Subtitled {
-                    icon: iconUrl == "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : iconUrl
+                    icon: iconUrl == "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : iconUrl
                     text: title
                     subText: character
-                    onClicked: media_type == "movie" ? pageStack.push(Qt.resolvedUrl("MoviePage.qml"), {"movie_id": id}) : console.log("Not a movie")
+                    onClicked: media_type == "movie" ? pageStack.push(Qt.resolvedUrl("../movie/MoviePage.qml"), {"movie_id": id}) : console.log("Not a movie")
                 }
             }
 
@@ -191,10 +191,10 @@
 
                 model: directedModel
                 delegate: Subtitled {
-                    icon: iconUrl == "null" ? Qt.resolvedUrl("../graphics/toolbarIcon.png") : iconUrl
+                    icon: iconUrl == "null" ? Qt.resolvedUrl("../../graphics/toolbarIcon.png") : iconUrl
                     text: title
                     subText: character
-                    onClicked: media_type == "movie" ? pageStack.push(Qt.resolvedUrl("MoviePage.qml"), {"movie_id": id}) : console.log("Not a movie")
+                    onClicked: media_type == "movie" ? pageStack.push(Qt.resolvedUrl("../movie/MoviePage.qml"), {"movie_id": id}) : console.log("Not a movie")
                 }
             }
         }
 
=== renamed file 'ui/PersonTab.qml' => 'ui/person/PersonTab.qml'
--- ui/PersonTab.qml	2013-11-12 20:09:36 +0000
+++ ui/person/PersonTab.qml	2013-11-14 23:41:47 +0000
@@ -1,6 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
+import "../../components"
 
 Page {
     // Person URLs
@@ -9,7 +9,7 @@
     ListModel {
         id: popularModel
         Component.onCompleted: {
-            peopleWorker.source =  "../backend/PopularPeople.js"
+            peopleWorker.source =  "../../backend/PopularPeople.js"
             peopleWorker.sendMessage({'model': popularModel, 'url': popularUrl})
         }
     }
 
=== renamed file 'ui/SearchPerson.qml' => 'ui/person/SearchPerson.qml'
--- ui/SearchPerson.qml	2013-11-12 20:09:36 +0000
+++ ui/person/SearchPerson.qml	2013-11-14 23:41:47 +0000
@@ -1,6 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
+import "../../components"
 
 // Page to search for persons
 Page {
 
=== added directory 'ui/tv'
=== renamed file 'ui/SearchTv.qml' => 'ui/tv/SearchTv.qml'
--- ui/SearchTv.qml	2013-11-12 20:09:36 +0000
+++ ui/tv/SearchTv.qml	2013-11-14 23:41:47 +0000
@@ -1,6 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
+import "../../components"
 
 // Page to search for tv shows
 Page {
 
=== renamed file 'ui/TvTab.qml' => 'ui/tv/TvTab.qml'
--- ui/TvTab.qml	2013-11-12 20:09:36 +0000
+++ ui/tv/TvTab.qml	2013-11-14 23:41:47 +0000
@@ -1,6 +1,6 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
-import "../components"
+import "../../components"
 
 Page {
     // Tv Show URLs
@@ -9,7 +9,7 @@
     ListModel {
         id: popularModel
         Component.onCompleted: {
-            tvPageWorker.source =  "../backend/PopularShow.js"
+            tvPageWorker.source =  "../../backend/PopularShow.js"
             tvPageWorker.sendMessage({'model': popularModel, 'url': popularUrl})
         }
     }