From 697257670ce956173b32da552554cc6727dc2994 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 12 Jul 2015 15:33:00 -0400
Subject: [PATCH] update dto dictionary building

---
 .../bower_components/iron-meta/.bower.json    |   6 +-
 dashboard-ui/css/card.css                     |   4 +
 dashboard-ui/css/librarybrowser.css           |   8 +-
 dashboard-ui/index.html                       |   2 +-
 dashboard-ui/itemdetails.html                 |   4 +-
 dashboard-ui/nowplaying.html                  |   2 +-
 dashboard-ui/photos.html                      |  50 +++-
 dashboard-ui/scripts/favorites.js             |  52 +++-
 dashboard-ui/scripts/homeupcoming.js          | 100 +++++--
 dashboard-ui/scripts/indexpage.js             |  14 +-
 dashboard-ui/scripts/librarybrowser.js        |  50 ++--
 dashboard-ui/scripts/photos.js                | 253 ++++++------------
 dashboard-ui/scripts/secondaryitems.js        | 121 ++++-----
 dashboard-ui/scripts/site.js                  |   4 +-
 dashboard-ui/scripts/tvupcoming.js            | 109 ++++++--
 dashboard-ui/tvupcoming.html                  |   2 +-
 16 files changed, 429 insertions(+), 352 deletions(-)

diff --git a/dashboard-ui/bower_components/iron-meta/.bower.json b/dashboard-ui/bower_components/iron-meta/.bower.json
index 8119ebcf4..9e650790b 100644
--- a/dashboard-ui/bower_components/iron-meta/.bower.json
+++ b/dashboard-ui/bower_components/iron-meta/.bower.json
@@ -25,14 +25,14 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-meta",
+  "homepage": "https://github.com/PolymerElements/iron-meta",
   "_release": "1.0.3",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.3",
     "commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
   },
-  "_source": "git://github.com/polymerelements/iron-meta.git",
+  "_source": "git://github.com/PolymerElements/iron-meta.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-meta"
+  "_originalSource": "PolymerElements/iron-meta"
 }
\ No newline at end of file
diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css
index 6889af7bf..cb59563e4 100644
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@@ -106,6 +106,10 @@
     margin-bottom: 24px;
 }
 
+.hiddenScrollX .bottomPaddedCard .cardBox {
+    margin-bottom: 0;
+}
+
 .visualCardBox {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 29c42836f..227119edc 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -72,8 +72,8 @@
     }
 
     .pageWithAbsoluteTabs .pageTabContent {
-        padding-left: .5em !important;
-        padding-right: .5em !important;
+        padding-left: .3em !important;
+        padding-right: .3em !important;
     }
 }
 
@@ -84,6 +84,8 @@
 .listHeader {
     margin: .25em 0;
     padding-left: 2px;
+    line-height: 1.25em;
+    line-height: initial;
 }
 
     .listHeader + paper-button {
@@ -1748,4 +1750,4 @@ paper-icon-button.listviewMenuButton {
     .detailsMenuOverview {
         max-height: 160px;
     }
-}
\ No newline at end of file
+}
diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html
index 010aca9ab..db6e570ea 100644
--- a/dashboard-ui/index.html
+++ b/dashboard-ui/index.html
@@ -57,7 +57,7 @@
                 </neon-animatable>
                 <neon-animatable>
                     <div class="pageTabContent homeUpcomingTabContent">
-                        <div id="upcomingItems" class="itemsContainer">
+                        <div id="upcomingItems">
                         </div>
                         <div class="noItemsMessage" style="display: none;">
                             <p>${MessageNothingHere}</p>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index faba217ed..4672897c6 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -42,8 +42,8 @@
         <div class="itemTabs photoTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
                 <a href="photos.html" class="ui-btn-active lnkPhotoAlbums"><iron-icon icon="photo-album"></iron-icon>${TabAlbums}</a>
-                <a href="photos.html?context=photos-photos" class="lnkPhotos"><iron-icon icon="photo"></iron-icon>${TabPhotos}</a>
-                <a href="photos.html?context=photos-videos" class="lnkVideos"><iron-icon icon="videocam"></iron-icon>${TabVideos}</a>
+                <a href="photos.html?tab=1" class="lnkPhotos"><iron-icon icon="photo"></iron-icon>${TabPhotos}</a>
+                <a href="photos.html?tab=2" class="lnkVideos"><iron-icon icon="videocam"></iron-icon>${TabVideos}</a>
             </div>
         </div>
         <div id="tvShowsTabs" class="itemTabs" style="display: none;">
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index 9a4110123..5dc859a23 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -14,7 +14,7 @@
                 <paper-fab mini icon="cast" class="blue nowPlayingCastIcon" onclick="MediaController.showPlayerSelection();" style="vertical-align:middle;"></paper-fab>
             </div>
 
-            <neon-animated-pages selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
+            <neon-animated-pages selected="{{selected}}">
                 <neon-animatable>
                     <div style="text-align:center;">
 
diff --git a/dashboard-ui/photos.html b/dashboard-ui/photos.html
index 75ab0b50f..0bb3f53e7 100644
--- a/dashboard-ui/photos.html
+++ b/dashboard-ui/photos.html
@@ -4,20 +4,52 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="photosPage" data-role="page" class="page libraryPage" data-require="scripts/photos,scripts/queryfilters">
+    <div id="photosPage" data-role="page" class="page libraryPage pageWithAbsoluteTabs" data-require="scripts/photos">
 
-        <div class="libraryViewNav scopedLibraryViewNav">
-            <a href="photos.html" class="ui-btn-active lnkPhotoAlbums"><iron-icon icon="photo-album"></iron-icon>${TabAlbums}</a>
-            <a href="photos.html?context=photos-photos" class="lnkPhotos"><iron-icon icon="photo"></iron-icon>${TabPhotos}</a>
-            <a href="photos.html?context=photos-videos" class="lnkVideos"><iron-icon icon="videocam"></iron-icon>${TabVideos}</a>
+        <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
+            <paper-tabs style="display:none;">
+                <paper-tab><iron-icon icon="photo-album"></iron-icon>${TabAlbums}</paper-tab>
+                <paper-tab><iron-icon icon="photo"></iron-icon>${TabPhotos}</paper-tab>
+                <paper-tab><iron-icon icon="videocam"></iron-icon>${TabVideos}</paper-tab>
+            </paper-tabs>
+            <div class="legacyTabs" style="display:none;">
+                <a href="photos.html" class="ui-btn-active lnkPhotoAlbums"><iron-icon icon="photo-album"></iron-icon>${TabAlbums}</a>
+                <a href="photos.html?tab=1" class="lnkPhotos"><iron-icon icon="photo"></iron-icon>${TabPhotos}</a>
+                <a href="photos.html?tab=2" class="lnkVideos"><iron-icon icon="videocam"></iron-icon>${TabVideos}</a>
+            </div>
         </div>
 
-        <div data-role="content">
-            <div class="viewSettings">
-                <div class="listTopPaging">
+        <neon-animated-pages>
+            <neon-animatable>
+                <div class="pageTabContent albumTabContent">
+                    <div class="viewSettings">
+                        <div class="listTopPaging">
+                        </div>
+                    </div>
+                    <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
                 </div>
+            </neon-animatable>
+            <div class="pageTabContent photoTabContent">
+                <div class="viewSettings">
+                    <div class="listTopPaging">
+                    </div>
+                </div>
+                <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
             </div>
-            <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+            <neon-animatable>
+            </neon-animatable>
+            <neon-animatable>
+                <div class="pageTabContent videoTabContent">
+                    <div class="viewSettings">
+                        <div class="listTopPaging">
+                        </div>
+                    </div>
+                    <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+                </div>
+            </neon-animatable>
+        </neon-animated-pages>
+
+        <div data-role="content">
         </div>
     </div>
 </body>
diff --git a/dashboard-ui/scripts/favorites.js b/dashboard-ui/scripts/favorites.js
index 9f4632a0e..2fcdd10bf 100644
--- a/dashboard-ui/scripts/favorites.js
+++ b/dashboard-ui/scripts/favorites.js
@@ -1,13 +1,29 @@
 (function ($, document) {
 
+    function enableScrollX() {
+        return $.browser.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function getPosterShape() {
+        return enableScrollX() ? 'overflowportrait' : 'portrait';
+    }
+
+    function getSquareShape() {
+        return enableScrollX() ? 'overflowSquare' : 'square';
+    }
+
     function getSections() {
 
         return [
-            { name: 'HeaderFavoriteMovies', types: "Movie", id: "favoriteMovies", shape: 'backdrop', preferThumb: true, showTitle: false },
-            { name: 'HeaderFavoriteShows', types: "Series", id: "favoriteShows", shape: 'backdrop', preferThumb: true, showTitle: false },
-            { name: 'HeaderFavoriteEpisodes', types: "Episode", id: "favoriteEpisode", shape: 'backdrop', preferThumb: false, showTitle: true, showParentTitle: true },
-            { name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: 'autohome', preferThumb: false, showTitle: true },
-            { name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: 'square', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true }
+            { name: 'HeaderFavoriteMovies', types: "Movie", id: "favoriteMovies", shape: getPosterShape(), showTitle: false },
+            { name: 'HeaderFavoriteShows', types: "Series", id: "favoriteShows", shape: getPosterShape(), showTitle: false },
+            { name: 'HeaderFavoriteEpisodes', types: "Episode", id: "favoriteEpisode", shape: getThumbShape(), preferThumb: false, showTitle: true, showParentTitle: true },
+            { name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: getSquareShape(), preferThumb: false, showTitle: true },
+            { name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true }
         ];
     }
 
@@ -17,7 +33,7 @@
 
         var options = {
 
-            SortBy: isSingleSection ? "SortName" : "Random",
+            SortBy: "SortName",
             SortOrder: "Ascending",
             IncludeItemTypes: section.types,
             Filters: "IsFavorite",
@@ -37,8 +53,24 @@
             var html = '';
 
             if (result.Items.length) {
-                html += '<h1 class="listHeader">' + Globalize.translate(section.name) + '</h1>';
+
                 html += '<div>';
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate(section.name) + '</h1>';
+
+                if (result.TotalRecordCount > result.Items.length) {
+                    var href = "secondaryitems.html?type=" + section.types + "&filters=IsFavorite&titlekey=" + section.name;
+
+                    html += '<a class="clearLink" href="' + href + '" style="margin-left:2em;"><paper-button raised class="more mini">' + Globalize.translate('ButtonMoreItems') + '</paper-button></a>';
+                }
+
+                html += '</div>';
+
+                if (enableScrollX()) {
+                    html += '<div class="itemsContainer hiddenScrollX">';
+                } else {
+                    html += '<div class="itemsContainer">';
+                }
+
                 html += LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     preferThumb: section.preferThumb,
@@ -54,12 +86,6 @@
                 });
 
                 html += '</div>';
-
-                if (result.TotalRecordCount > result.Items.length) {
-                    var href = "secondaryitems.html?type=" + section.types + "&filters=IsFavorite&titlekey=" + section.name;
-
-                    html += '<a class="clearLink" href="' + href + '"><paper-button raised class="more">' + Globalize.translate('ButtonMoreItems') + '</paper-button></a>';
-                }
             }
 
             elem.innerHTML = html;
diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js
index b9752f3c4..a709ee650 100644
--- a/dashboard-ui/scripts/homeupcoming.js
+++ b/dashboard-ui/scripts/homeupcoming.js
@@ -37,21 +37,7 @@
             }
 
             var elem = page.querySelector('#upcomingItems');
-            elem.innerHTML = LibraryBrowser.getPosterViewHtml({
-                items: items,
-                showLocationTypeIndicator: false,
-                shape: "backdrop",
-                showTitle: true,
-                showPremiereDate: true,
-                showPremiereDateIndex: true,
-                preferThumb: true,
-                context: context || 'home-upcoming',
-                lazy: true,
-                showDetailsMenu: true
-
-            });
-
-            ImageLoader.lazyChildren(elem);
+            renderUpcoming(elem, items);
 
             Dashboard.hideLoadingMsg();
 
@@ -59,6 +45,90 @@
         });
     }
 
+    function enableScrollX() {
+        return $.browser.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function renderUpcoming(elem, items) {
+
+        var groups = [];
+
+        var currentGroupName = '';
+        var currentGroup = [];
+
+        var i, length;
+
+        for (i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+
+            var dateText = '';
+
+            if (item.PremiereDate) {
+                try {
+
+                    dateText = LibraryBrowser.getFutureDateText(parseISO8601Date(item.PremiereDate, { toLocal: true }), true);
+
+                } catch (err) {
+                }
+            }
+
+            if (dateText != currentGroupName) {
+
+                if (currentGroup.length) {
+                    groups.push({
+                        name: currentGroupName,
+                        items: currentGroup
+                    });
+                }
+
+                currentGroupName = dateText;
+                currentGroup = [];
+            } else {
+                currentGroup.push(item);
+            }
+        }
+
+        var html = '';
+
+        for (i = 0, length = groups.length; i < length; i++) {
+
+            var group = groups[i];
+
+            html += '<div class="homePageSection">';
+            html += '<h1 class="listHeader">' + group.name + '</h1>';
+
+            if (enableScrollX()) {
+                html += '<div class="itemsContainer hiddenScrollX">';
+            } else {
+                html += '<div class="itemsContainer">';
+            }
+
+            html += LibraryBrowser.getPosterViewHtml({
+                items: group.items,
+                showLocationTypeIndicator: false,
+                shape: getThumbShape(),
+                showTitle: true,
+                showPremiereDate: true,
+                preferThumb: true,
+                context: 'tv',
+                lazy: true,
+                showDetailsMenu: true
+
+            });
+            html += '</div>';
+
+            html += '</div>';
+        }
+
+        elem.innerHTML = html;
+        ImageLoader.lazyChildren(elem);
+    }
+
     $(document).on('pageinitdepends', "#indexPage", function () {
 
         var page = this;
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index 8ccbd45b7..60489bfc8 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -211,10 +211,11 @@
         var page = this;
 
         var tabs = page.querySelector('paper-tabs');
-        LibraryBrowser.configurePaperLibraryTabs(page, page.querySelectorAll('paper-tabs')[0], page.querySelectorAll('neon-animated-pages')[0]);
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'));
 
         $(tabs).on('iron-select', function () {
             var selected = this.selected;
+
             if (LibraryBrowser.navigateOnLibraryTabSelect()) {
 
                 if (selected) {
@@ -232,17 +233,6 @@
             loadTab(page, parseInt(this.selected));
         });
 
-        $(page.querySelector('neon-animated-pages')).on('iron-select', function () {
-
-            // When transition animations are used, add a content loading delay to allow the animations to finish
-            // Otherwise with both operations happening at the same time, it can cause the animation to not run at full speed.
-            var delay = LibraryBrowser.enableFullPaperTabs() ? 500 : 0;
-            var pages = this;
-            setTimeout(function () {
-                $(pages).trigger('tabchange');
-            }, delay);
-        });
-
         Events.on(page.querySelector('.btnTakeTour'), 'click', function () {
             takeTour(page, Dashboard.getCurrentUserId());
         });
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 57058c1de..58fc45613 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -120,6 +120,12 @@
 
         configureSwipeTabs: function (ownerpage, tabs, pages) {
 
+            if (!$.browser.safari) {
+                // Safari doesn't handle the horizontal swiping very well
+                pages.entryAnimation = 'slide-from-right-animation';
+                pages.exitAnimation = 'slide-left-animation';
+            }
+
             var pageCount = pages.querySelectorAll('neon-animatable').length;
 
             function allowSwipe(e) {
@@ -162,7 +168,6 @@
         },
 
         enableFullPaperTabs: function () {
-            //return true;
             return AppInfo.isNativeApp;
         },
 
@@ -192,12 +197,6 @@
                     tabs.noBar = true;
                 }
                 else {
-                    // Safari doesn't handle the horizontal swiping very well
-
-                    // Not very iOS-like I suppose
-                    pages.entryAnimation = 'slide-from-right-animation';
-                    pages.exitAnimation = 'slide-left-animation';
-
                     LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pages);
                 }
 
@@ -223,6 +222,17 @@
             }
 
             $(ownerpage).on('pagebeforeshowready', LibraryBrowser.onTabbedPageBeforeShowReady);
+
+            $(pages).on('iron-select', function () {
+
+                // When transition animations are used, add a content loading delay to allow the animations to finish
+                // Otherwise with both operations happening at the same time, it can cause the animation to not run at full speed.
+                var delay = LibraryBrowser.enableFullPaperTabs() ? 500 : 0;
+                var pgs = this;
+                setTimeout(function () {
+                    $(pgs).trigger('tabchange');
+                }, delay);
+            });
         },
 
         onTabbedPageBeforeShowReady: function () {
@@ -1412,26 +1422,7 @@
 
                 primaryImageAspectRatio = LibraryBrowser.getAveragePrimaryImageAspectRatio([item]);
 
-                if (options.showPremiereDateIndex) {
-
-                    if (item.PremiereDate) {
-                        try {
-
-                            dateText = LibraryBrowser.getFutureDateText(parseISO8601Date(item.PremiereDate, { toLocal: true }), true);
-
-                        } catch (err) {
-                        }
-                    }
-
-                    var newIndexValue = dateText || Globalize.translate('HeaderUnknownDate');
-
-                    if (newIndexValue != currentIndexValue) {
-
-                        html += '<h2 class="timelineHeader detailSectionHeader" style="text-align:center;">' + newIndexValue + '</h2>';
-                        currentIndexValue = newIndexValue;
-                    }
-                }
-                else if (options.showStartDateIndex) {
+                if (options.showStartDateIndex) {
 
                     if (item.StartDate) {
                         try {
@@ -1675,7 +1666,10 @@
 
             var mediaSourceCount = item.MediaSourceCount || 1;
 
-            var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
+            var href = options.linkItem === false ? '#' :
+                (options.useSecondaryItemsPage && item.IsFolder) ?
+                    ('secondaryitems.html?parentid=' + item.Id) :
+                    LibraryBrowser.getHref(item, options.context);
 
             if (item.UserData) {
                 cssClass += ' ' + LibraryBrowser.getUserDataCssClass(item.UserData.Key);
diff --git a/dashboard-ui/scripts/photos.js b/dashboard-ui/scripts/photos.js
index a596ea7ef..c6f8b421d 100644
--- a/dashboard-ui/scripts/photos.js
+++ b/dashboard-ui/scripts/photos.js
@@ -2,26 +2,42 @@
 
     var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
 
-    // The base query options
-    var query = {
+    var data = {};
+    function getQuery(tab) {
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
-        StartIndex: 0,
-        ImageTypeLimit: 1,
-        EnableImageTypes: "Primary"
-    };
+        var key = getSavedQueryKey(tab);
+        var pageData = data[key];
 
-    function getSavedQueryKey() {
-
-        return 'photos' + (query.ParentId || '');
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    Fields: "PrimaryImageAspectRatio,SortName,SyncInfo",
+                    ImageTypeLimit: 1,
+                    EnableImageTypes: "Primary",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                }
+            };
+            setQueryPerTab(tab, pageData.query);
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData.query;
     }
 
-    function reloadItems(page) {
+    function getSavedQueryKey(tab) {
+
+        return getWindowUrl() + "&tab=" + tab;
+    }
+
+    function reloadItems(page, tabIndex) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery(tabIndex);
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -38,112 +54,52 @@
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            updateFilterControls(page);
-
             if (view == "Poster") {
                 // Poster
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
-                    shape: "auto",
+                    shape: "square",
                     context: getParameterByName('context') || 'photos',
-                    showTitle: query.MediaTypes != 'Photo',
                     overlayText: true,
-                    lazy: true
-                });
-            }
-            else if (view == "PosterCard") {
-
-                // Poster
-                html = LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    shape: "auto",
-                    context: getParameterByName('context') || 'photos',
-                    showTitle: true,
                     lazy: true,
-                    cardLayout: true,
-                    showPremiereDate: true
+                    coverImage: true,
+                    useSecondaryItemsPage: true
                 });
             }
 
-            var elem = page.querySelector('#items');
+            var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(page, tabIndex);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(page, tabIndex);
             });
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+            LibraryBrowser.saveQueryValues(getSavedQueryKey(tabIndex), query);
 
             Dashboard.hideLoadingMsg();
         });
     }
 
-    function updateFilterControls(page) {
+    function setQueryPerTab(tab, query) {
 
-        // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
-
-            this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.radioSortOrder', page).each(function () {
-
-            this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.chkStandardFilter', page).each(function () {
-
-            var filters = "," + (query.Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        }).checkboxradio('refresh');
-    }
-
-    var filtersLoaded;
-    function reloadFiltersIfNeeded(page) {
-
-        if (!filtersLoaded) {
-
-            filtersLoaded = true;
-
-            QueryFilters.loadFilters(page, Dashboard.getCurrentUserId(), query, function () {
-
-                reloadItems(page);
-            });
-        }
-    }
-
-    function setQueryPerContext(page) {
-
-        var context = getParameterByName('context');
-
-        $('.libraryViewNav a', page).removeClass('ui-btn-active');
-
-        if (context == 'photos-photos') {
+        if (tab == 1) {
             query.Recursive = true;
             query.MediaTypes = 'Photo';
-            $('.lnkPhotos', page).addClass('ui-btn-active');
         }
-        else if (context == 'photos-videos') {
+        else if (tab == 2) {
             query.Recursive = true;
             query.MediaTypes = 'Video';
-            $('.lnkVideos', page).addClass('ui-btn-active');
         }
-        else {
+        else if (tab == 0) {
             query.Recursive = false;
             query.MediaTypes = null;
-            $('.lnkPhotoAlbums', page).addClass('ui-btn-active');
         }
 
         query.ParentId = getParameterByName('parentId') || LibraryMenu.getTopParentId();
@@ -208,109 +164,70 @@
 
     function onListItemClick(e) {
 
-        var page = $(this).parents('.page');
+        var page = $(this).parents('.page')[0];
         var info = LibraryBrowser.getListItemInfo(this);
 
         if (info.mediaType == 'Photo') {
+            var tab = page.querySelector('neon-animated-pages').selected;
+            var query = getQuery(tab);
+
             Photos.startSlideshow(page, query, info.id);
             return false;
         }
     }
 
+    function loadTab(page, index) {
+
+        switch (index) {
+
+            case 0:
+                {
+                    reloadItems(page.querySelector('.albumTabContent'), 0);
+                }
+                break;
+            case 1:
+                {
+                    reloadItems(page.querySelector('.photoTabContent'), 1);
+                }
+                break;
+            case 2:
+                {
+                    reloadItems(page.querySelector('.videoTabContent'), 2);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+
     $(document).on('pageinitdepends', "#photosPage", function () {
 
         var page = this;
 
-        $('.viewPanel', page).on('panelopen', function () {
+        var tabs = page.querySelector('paper-tabs');
+        LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'));
 
-            reloadFiltersIfNeeded(page);
+        $(tabs).on('iron-select', function () {
+            var selected = this.selected;
+            if (LibraryBrowser.navigateOnLibraryTabSelect()) {
+
+                if (selected) {
+                    Dashboard.navigate('photos.html?tab=' + selected + '&topParentId=' + LibraryMenu.getTopParentId());
+                } else {
+                    Dashboard.navigate('photos.html?topParentId=' + LibraryMenu.getTopParentId());
+                }
+
+            } else {
+                page.querySelector('neon-animated-pages').selected = selected;
+            }
         });
 
-        $('.radioSortBy', this).on('click', function () {
-            query.SortBy = this.getAttribute('data-sortby');
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
-        $('.radioSortOrder', this).on('click', function () {
-            query.SortOrder = this.getAttribute('data-sortorder');
-            query.StartIndex = 0;
-            reloadItems(page);
+        $(page.querySelector('neon-animated-pages')).on('tabchange', function () {
+            loadTab(page, parseInt(this.selected));
         });
 
         $(page).on('click', '.mediaItem', onListItemClick);
 
-        $('.chkStandardFilter', this).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Filters || "";
-
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + ',' + filterName) : filterName;
-            }
-
-            query.Filters = filters;
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
-        $('#radioBasicFilters', this).on('change', function () {
-
-            if (this.checked) {
-                $('.basicFilters', page).show();
-                $('.advancedFilters', page).hide();
-            } else {
-                $('.basicFilters', page).hide();
-            }
-        });
-
-        $('#radioAdvancedFilters', this).on('change', function () {
-
-            if (this.checked) {
-                $('.advancedFilters', page).show();
-                $('.basicFilters', page).hide();
-            } else {
-                $('.advancedFilters', page).hide();
-            }
-        });
-
-        $('#selectPageSize', page).on('change', function () {
-            query.Limit = parseInt(this.value);
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
-    }).on('pagebeforeshowready', "#photosPage", function () {
-
-        var page = this;
-
-        setQueryPerContext(page);
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        var viewKey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewKey, query);
-        QueryFilters.onPageShow(page, query);
-
-        LibraryBrowser.getSavedViewSetting(viewKey).done(function (val) {
-
-            if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-            } else {
-                reloadItems(page);
-            }
-        });
-
-        updateFilterControls(this);
     });
 
     window.Photos = {
diff --git a/dashboard-ui/scripts/secondaryitems.js b/dashboard-ui/scripts/secondaryitems.js
index 2a552f246..c61a02dbc 100644
--- a/dashboard-ui/scripts/secondaryitems.js
+++ b/dashboard-ui/scripts/secondaryitems.js
@@ -33,7 +33,7 @@
                 pageData.query.Filters = filters;
             }
 
-            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            pageData.query.ParentId = getParameterByName('parentid') || LibraryMenu.getTopParentId();
             LibraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
         return pageData.query;
@@ -44,6 +44,21 @@
         return getWindowUrl();
     }
 
+    function onListItemClick(e) {
+
+        var page = $(this).parents('.page')[0];
+        var info = LibraryBrowser.getListItemInfo(this);
+
+        if (info.mediaType == 'Photo') {
+            var query = getQuery();
+
+            require(['scripts/photos'], function () {
+                Photos.startSlideshow(page, query, info.id);
+            });
+            return false;
+        }
+    }
+
     function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
@@ -56,7 +71,6 @@
             window.scrollTo(0, 0);
 
             var html = '';
-            var trigger = false;
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
@@ -66,84 +80,37 @@
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            if (view == "Thumb") {
-
-                html = LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    lazy: true,
-                    overlayText: true
-                });
+            var posterOptions = {
+                items: result.Items,
+                shape: "auto",
+                centerText: true,
+                lazy: true,
+                overlayText: true
+            };
 
+            if (query.IncludeItemTypes == "MusicAlbum") {
+                posterOptions.overlayText = false;
+                posterOptions.showParentTitle = true;
+                posterOptions.overlayPlayButton = true;
             }
-            else if (view == "ThumbCard") {
-
-                html = LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    shape: "backdrop",
-                    preferThumb: true,
-                    lazy: true,
-                    cardLayout: true,
-                    showTitle: true,
-                    showSeriesYear: true
-                });
+            else if (query.IncludeItemTypes == "MusicArtist") {
+                posterOptions.overlayText = false;
+                posterOptions.overlayPlayButton = true;
             }
-            else if (view == "Banner") {
-
-                html = LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    shape: "banner",
-                    preferBanner: true,
-                    lazy: true
-                });
+            else if (query.IncludeItemTypes == "Episode") {
+                posterOptions.overlayText = false;
+                posterOptions.showParentTitle = true;
+                posterOptions.overlayPlayButton = true;
+                posterOptions.centerText = false;
             }
-            else if (view == "List") {
 
-                html = LibraryBrowser.getListViewHtml({
-                    items: result.Items,
-                    sortBy: query.SortBy
-                });
-                trigger = true;
-            }
-            else {
-
-                var posterOptions = {
-                    items: result.Items,
-                    shape: "auto",
-                    centerText: true,
-                    lazy: true,
-                    overlayText: true
-                };
-
-                if (query.IncludeItemTypes == "MusicAlbum") {
-                    posterOptions.overlayText = false;
-                    posterOptions.showParentTitle = true;
-                    posterOptions.overlayPlayButton = true;
-                }
-                else if (query.IncludeItemTypes == "MusicArtist") {
-                    posterOptions.overlayText = false;
-                    posterOptions.overlayPlayButton = true;
-                }
-                else if (query.IncludeItemTypes == "Episode") {
-                    posterOptions.overlayText = false;
-                    posterOptions.showParentTitle = true;
-                    posterOptions.overlayPlayButton = true;
-                    posterOptions.centerText = false;
-                }
-
-                // Poster
-                html = LibraryBrowser.getPosterViewHtml(posterOptions);
-            }
+            // Poster
+            html = LibraryBrowser.getPosterViewHtml(posterOptions);
 
             var elem = page.querySelector('#items');
             elem.innerHTML = html + pagingHtml;
             ImageLoader.lazyChildren(elem);
 
-            if (trigger) {
-                Events.trigger(elem, 'create');
-            }
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -159,10 +126,22 @@
         });
     }
 
-    $(document).on('pagebeforeshowready', "#secondaryItemsPage", function () {
+    $(document).on('pageinitdepends', "#secondaryItemsPage", function () {
 
         var page = this;
 
+        $(page).on('click', '.mediaItem', onListItemClick);
+
+    }).on('pagebeforeshowready', "#secondaryItemsPage", function () {
+
+        var page = this;
+
+        if (getParameterByName('parentid')) {
+            ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('parentid')).done(function (parent) {
+                LibraryMenu.setTitle(parent.Name);
+            });
+        }
+
         if (LibraryBrowser.needsRefresh(page)) {
             reloadItems(page);
         }
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 115ce3bf8..d60c060ee 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1709,8 +1709,8 @@ var AppInfo = {};
         AppInfo.supportsSyncPathSetting = isCordova && isAndroid;
 
         if (isCordova && isAndroid) {
-            AppInfo.directPlayAudioContainers = ['aac', 'mp3', 'ogg', 'flac', 'wma', 'm4a', 'oga'];
-            AppInfo.directPlayVideoContainers = ['mkv', 'mp4', 'mov', 'm4v', 'avi', 'flv', 'wmv', 'webm'];
+            AppInfo.directPlayAudioContainers = "flac,aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape".split(',');
+            AppInfo.directPlayVideoContainers = "m4v,3gp,ts,mpegts,mov,xvid,vob,mkv,wmv,asf,ogm,ogv,m2v,avi,mpg,mpeg,mp4,webm".split(',');
         } else {
             AppInfo.directPlayAudioContainers = [];
             AppInfo.directPlayVideoContainers = [];
diff --git a/dashboard-ui/scripts/tvupcoming.js b/dashboard-ui/scripts/tvupcoming.js
index 72c20f0ee..4154d9641 100644
--- a/dashboard-ui/scripts/tvupcoming.js
+++ b/dashboard-ui/scripts/tvupcoming.js
@@ -19,14 +19,6 @@
 
         query.ParentId = LibraryMenu.getTopParentId();
 
-        var context = '';
-
-        if (query.ParentId) {
-
-            context = 'tv';
-
-        }
-
         ApiClient.getJSON(ApiClient.getUrl("Shows/Upcoming", query)).done(function (result) {
 
             var items = result.Items;
@@ -38,21 +30,7 @@
             }
 
             var elem = page.querySelector('#upcomingItems');
-            elem.innerHTML = LibraryBrowser.getPosterViewHtml({
-                items: items,
-                showLocationTypeIndicator: false,
-                shape: "backdrop",
-                showTitle: true,
-                showPremiereDate: true,
-                showPremiereDateIndex: true,
-                preferThumb: true,
-                context: context || 'home-upcoming',
-                lazy: true,
-                showDetailsMenu: true
-
-            });
-
-            ImageLoader.lazyChildren(elem);
+            renderUpcoming(elem, items);
 
             Dashboard.hideLoadingMsg();
 
@@ -60,6 +38,91 @@
 
         });
     }
+
+    function enableScrollX() {
+        return $.browser.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function renderUpcoming(elem, items) {
+
+        var groups = [];
+
+        var currentGroupName = '';
+        var currentGroup = [];
+
+        var i, length;
+
+        for (i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+
+            var dateText = '';
+
+            if (item.PremiereDate) {
+                try {
+
+                    dateText = LibraryBrowser.getFutureDateText(parseISO8601Date(item.PremiereDate, { toLocal: true }), true);
+
+                } catch (err) {
+                }
+            }
+
+            if (dateText != currentGroupName) {
+
+                if (currentGroup.length) {
+                    groups.push({
+                        name: currentGroupName,
+                        items: currentGroup
+                    });
+                }
+
+                currentGroupName = dateText;
+                currentGroup = [];
+            } else {
+                currentGroup.push(item);
+            }
+        }
+
+        var html = '';
+
+        for (i = 0, length = groups.length; i < length; i++) {
+
+            var group = groups[i];
+
+            html += '<div class="homePageSection">';
+            html += '<h1 class="listHeader">' + group.name + '</h1>';
+
+            if (enableScrollX()) {
+                html += '<div class="itemsContainer hiddenScrollX">';
+            } else {
+                html += '<div class="itemsContainer">';
+            }
+
+            html += LibraryBrowser.getPosterViewHtml({
+                items: group.items,
+                showLocationTypeIndicator: false,
+                shape: getThumbShape(),
+                showTitle: true,
+                showPremiereDate: true,
+                preferThumb: true,
+                context: 'tv',
+                lazy: true,
+                showDetailsMenu: true
+
+            });
+            html += '</div>';
+
+            html += '</div>';
+        }
+
+        elem.innerHTML = html;
+        ImageLoader.lazyChildren(elem);
+    }
+
     $(document).on('pagebeforeshowready', "#tvUpcomingPage", function () {
 
         var page = this;
diff --git a/dashboard-ui/tvupcoming.html b/dashboard-ui/tvupcoming.html
index 39cebefb3..61b66dd8b 100644
--- a/dashboard-ui/tvupcoming.html
+++ b/dashboard-ui/tvupcoming.html
@@ -17,7 +17,7 @@
         </div>
         <div data-role="content">
             <div class="ehsContent">
-                <div id="upcomingItems" class="itemsContainer">
+                <div id="upcomingItems">
                 </div>
                 <div class="noItemsMessage" style="display: none;">
                     <p>${MessageNothingHere}</p>