web client touchups

dashboard-ui/addplugin.html

@@ -39,6 +39,14 @@
                         </p>
                         <p id="regInfo">
                         </p>
+                        <p class="supporterDescription">This is a <a data-rel="popup" href="#supporterPlugins">supporter-only</a> plugin.<br />
+                            <br />
+                            It will require a <a href="supporter.html">supporter key</a> in order to register after the <strong>14-day free trial</strong>.</p>
+                        <p class="premiumDescription">
+                            This is a <a data-rel="popup" href="#premiumPlugins">premium</a> plugin.<br />
+                            <br />
+                            It will require a <a href="supporter.html">supporter key</a> in order to purchase and register after the <strong>14-day free trial</strong>.
+                        </p>
                         <div class="premiumHasPrice" style="display: none">
                             <p id="regPrice">
                             </p>

dashboard-ui/css/detailtable.css

@@ -51,15 +51,7 @@
 }
 
 .detailTable .btnPlay {
-    border: 0;
-    padding: 0;
     margin: 0;
-    background: none;
-    cursor: pointer;
-}
-
-    .detailTable .btnPlay:hover {
-        opacity: .6;
 }
 
 @media all and (min-width: 600px) {

dashboard-ui/css/librarybrowser.css

@@ -958,6 +958,10 @@ a.itemTag:hover {
     margin-bottom: .25em;
 }
 
+.timelineItemsContainer {
+    text-align: left;
+}
+
 .alphabetPicker {
     position: fixed;
     right: 2px;

dashboard-ui/dashboard.html

@@ -70,10 +70,11 @@
                     <div data-role="collapsible" data-collapsed="true" style="margin-top: 1em;">
                         <h3>Links</h3>
                         <div>
+                            <p>Bookmark url: <a id="bookmarkUrl" href="#" data-ajax="false"></a></p>
+                            <p class="externalUrl"></p>
                             <p><a href="http://mediabrowser3.com/community" target="_blank">Community</a></p>
                             <p><a href="https://github.com/MediaBrowser/MediaBrowser" target="_blank">Github</a></p>
-                            <p><a href="../swagger-ui/index.html" target="_blank">Interactive Api Documentation</a></p>
+                            <p><a href="../swagger-ui/index.html" target="_blank">Api Documentation</a></p>
-                            <p>Server bookmark: <a id="bookmarkUrl" href="#" data-ajax="false" onclick="return !DashboardPage.bookmarkPageIfSupported(this.href);"></a></p>
                         </div>
                     </div>
 

dashboard-ui/gamesystems.html

@@ -13,67 +13,9 @@
             <a href="gamestudios.html">Studios</a>
         </div>
         <div data-role="content">
-            <div class="viewSettings">
+            <br />
-                <div class="viewControls">
-                    <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
-                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
-                </div>
-                <div class="listTopPaging">
-                </div>
-                <div class="viewSummary"></div>
-            </div>
             <div id="items" class="itemsContainer"></div>
         </div>
-        <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="a" data-position-fixed="true">
-
-            <form>
-                <div id="sortpanel">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            <h3>Sort By:</h3>
-                        </legend>
-
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName">
-                        <label for="radioSortName">Name</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating">
-                        <label for="radioCommunityRating">Community Rating</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated">
-                        <label for="radioDateCreated">Date Added</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            <h3>Sort Order:</h3>
-                        </legend>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending">
-                        <label for="radioAscending">Ascending</label>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending">
-                        <label for="radioDescending">Descending</label>
-                    </fieldset>
-                </div>
-            </form>
-        </div>
-        <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="a" data-position-fixed="true">
-            <form>
-                <fieldset data-role="controlgroup">
-                    <legend>
-                        <h3>Filters:</h3>
-                    </legend>
-                    <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite">
-                    <label for="chkIsFavorite">Favorite</label>
-
-                    <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes">
-                    <label for="chkLikes">Likes</label>
-
-                    <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes">
-                    <label for="chkDislikes">Dislikes</label>
-                </fieldset>
-            </form>
-        </div>
     </div>
 </body>
 </html>

dashboard-ui/livetvchannel.html

@@ -19,9 +19,10 @@
                 </td>
                 <td style="vertical-align: top; padding: 0;">
                     <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
-                    <p style="margin: 2em 0;">
+                    <p style="margin: 1.5em 0;">
                         <span class="userDataIcons"></span>
                     </p>
+                    <p class="currentProgram"></p>
                 </td>
             </tr>
         </table>

dashboard-ui/livetvprogram.html

@@ -53,7 +53,6 @@
                     </div>
                     <div class="detailSectionContent" style="padding: 0 1em;">
 
-                        <p class="status"></p>
                         <p class="airDate"></p>
                     </div>
                 </div>

dashboard-ui/livetvtimer.html

@@ -13,7 +13,8 @@
             <a href="livetvseriestimers.html">Series</a>
         </div>
         <div data-role="content">
-            <form class="liveTvTimerForm" style="margin: 0 auto;">
+
+            <div class="readOnlyContent" style="margin: 0 auto;">
                 <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
                 <p class="itemEpisodeName"></p>
                 <p class="itemMiscInfo miscTvProgramInfo"></p>
@@ -25,10 +26,11 @@
 
                 <p style="margin-top: 2em;">
                     <span class="status"></span>
-                    <a id="btnCancelTimer" href="#" style="margin-left: 2em;">Cancel Recording</a>
                 </p>
 
+            </div>
             <br />
+            <form class="liveTvTimerForm" style="margin: 0 auto;">
 
                 <div data-role="collapsible" data-mini="true">
                     <h3>Pre/Post Padding</h3>
@@ -70,7 +72,11 @@
                         </button>
                     </li>
                 </ul>
+                <p style="border-top: 1px solid #444; padding-top: .5em; margin-top: 2em;">
+                    <button id="btnCancelTimer" type="button" data-mini="true" data-icon="delete">Cancel Recording</button>
+                </p>
             </form>
+
         </div>
         <script type="text/javascript">
             $('.liveTvTimerForm').off('submit', LiveTvTimerPage.onSubmit).on('submit', LiveTvTimerPage.onSubmit);

dashboard-ui/plugincatalog.html

@@ -5,7 +5,6 @@
 </head>
 <body>
     <div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage">
-
         <div data-role="content">
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
@@ -18,23 +17,22 @@
                         <a data-rel="popup" data-position-to="origin" href="#supporterPlugins">Supporter-Only</a>, and <a data-rel="popup" data-position-to="origin" href="#premiumPlugins">Premium</a>.
                 </p>
                 
-                <div style="display: inline-block;">
+                <fieldset data-role="controlgroup" data-type="horizontal">
-                    <label for="selectTargetSystem">Show</label>
+                    <legend>Display plugins for:</legend>
-                </div>
+                    <input type="radio" name="radioPackageTypes" class="radioPackageTypes" id="radioServer" value="Server" data-mini="true">
+                    <label for="radioServer">Server</label>
+                    <input type="radio" name="radioPackageTypes" class="radioPackageTypes" id="radioClassic" value="MBClassic" data-mini="true">
+                    <label for="radioClassic">MB Classic</label>
+                    <input type="radio" name="radioPackageTypes" class="radioPackageTypes" id="radopTheater" value="MBTheater" data-mini="true">
+                    <label for="radopTheater">MB Theater</label>
+                    <input type="radio" name="radioPackageTypes" class="radioPackageTypes" id="radioOthers" value="Apps" data-mini="true">
+                    <label for="radioOthers">Others</label>
+                </fieldset>
 
-                <div style="display: inline-block;">
+                <p style="display: inline-block;">
-                    <select id="selectTargetSystem" data-mini="true" data-inline="true" style="margin-left: .5em;">
+                    <input class="chkPremiumFilter" type="checkbox" data-mini="true" data-inline="true" name="chkPremium" id="chkPremium" data-filter="IsPremium" />
-                        <option value="Server">MB Server plugins</option>
-                        <option value="MBTheater">MB Theater plugins</option>
-                        <option value="MBClassic">MB Classic plugins</option>
-                        <option value="Apps">Apps</option>
-                    </select>
-                </div>
-
-                <div style="display: inline-block; vertical-align: bottom; margin-left: 1em;">
-                    <input class="chkPremiumFilter" type="checkbox" data-mini="true" data-inline="true" name="chkPremium" id="chkPremium" data-filter="IsPremium">
                     <label for="chkPremium">Free Only</label>
-                </div>
+                </p>
 
                 <div id="noPlugins" class="hide">
                     <div style="text-align: center; margin: 10px;">No available plugins</div>

dashboard-ui/scripts/addpluginpage.js

@@ -208,6 +208,10 @@
 
             if (pluginSecurityInfo.IsMBSupporter) {
                 $('#regInfo', page).html(pkg.regInfo || "");
+
+                $('.premiumDescription', page).hide();
+                $('.supporterDescription', page).hide();
+
                 if (pkg.price > 0) {
                     // Fill in PayPal info
                     $('.premiumHasPrice', page).show();
@@ -231,9 +235,17 @@
                 }
             } else {
 
-                var pluginTypeHtml = pkg.price ? 'This is a <a data-rel="popup" data-position-to="window" href="#premiumPlugins">premium</a> plugin.' : 'This is a <a data-rel="popup" data-position-to="window" href="#supporterPlugins">supporter-only</a> plugin.';
+                if (pkg.price) {
+                    $('.premiumDescription', page).show();
+                    $('.supporterDescription', page).hide();
+                    $('#regInfo', page).html("");
+
+                } else {
+                    $('.premiumDescription', page).hide();
+                    $('.supporterDescription', page).show();
+                    $('#regInfo', page).html("");
+                }
 
-                $('#regInfo', page).html(pluginTypeHtml + '<br/><br/>It will require a <a href="supporter.html">supporter key</a> in order to register after the <strong>14-day free trial</strong>.').trigger('create');
                 $('#ppButton', page).hide();
             }
 

dashboard-ui/scripts/dashboardpage.js

@@ -323,21 +323,6 @@
         $('#divRunningTasks', page).html(html).trigger('create');
     },
 
-    bookmarkPageIfSupported: function (url) {
-
-        if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
-            window.sidebar.addPanel("Media Browser", url, '');
-
-        } else if (window.external && window.external.AddFavorite) { // IE Favorite
-            window.external.AddFavorite(url, "Media Browser");
-
-        } else { // webkit - safari/chrome
-            return false;
-        }
-
-        return true;
-    },
-
     renderSystemInfo: function (page, dashboardInfo) {
 
         Dashboard.updateSystemInfo(dashboardInfo.SystemInfo);
@@ -378,6 +363,15 @@
             $('.btnRestartContainer', page).addClass('hide');
         }
 
+        if (dashboardInfo.SystemInfo.WanAddress) {
+
+            var externalUrl = dashboardInfo.SystemInfo.WanAddress + "/mediabrowser";
+
+            $('.externalUrl', page).html('External url: <a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>').show().trigger('create');
+        } else {
+            $('.externalUrl', page).hide();
+        }
+
         DashboardPage.renderApplicationUpdateInfo(dashboardInfo);
         DashboardPage.renderPluginUpdateInfo(dashboardInfo);
         DashboardPage.renderPendingInstallations(dashboardInfo.SystemInfo);

dashboard-ui/scripts/gamegenrepage.js

@@ -28,9 +28,13 @@
             var checkSortOption = $('.radioSortBy:checked', page);
             $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
 
-            html += LibraryBrowser.getPosterDetailViewHtml({
+            html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                context: "games"
+                shape: "backdrop",
+                preferThumb: true,
+                context: 'games',
+                showItemCounts: true,
+                centerText: true
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

dashboard-ui/scripts/gamestudiospage.js

@@ -29,9 +29,13 @@
             var checkSortOption = $('.radioSortBy:checked', page);
             $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
 
-            html += LibraryBrowser.getPosterDetailViewHtml({
+            html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                context: "games"
+                shape: "backdrop",
+                preferThumb: true,
+                context: 'games',
+                showItemCounts: true,
+                centerText: true
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

dashboard-ui/scripts/gamesystemspage.js

@@ -1,4 +1,3 @@
-
 (function ($, document) {
 
     // The base query options
@@ -23,17 +22,14 @@
 
             var html = '';
 
-            $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
-
             updateFilterControls(page);
 
-            var checkSortOption = $('.radioSortBy:checked', page);
+            html = LibraryBrowser.getPosterViewHtml({
-            $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
-
-            html += LibraryBrowser.getPosterDetailViewHtml({
                 items: result.Items,
-                context: "games",
+                shape: "backdrop",
-                shape: "backdrop"
+                context: 'games',
+                showTitle: true,
+                overlayText: true
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@@ -70,60 +66,9 @@
     function updateFilterControls(page) {
 
         // 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');
     }
 
-    $(document).on('pageinit', "#gamesystemsPage", function () {
+    $(document).on('pagebeforeshow', "#gamesystemsPage", function () {
-
-        var page = this;
-
-        $('.radioSortBy', this).on('click', function () {
-            query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
-        });
-
-        $('.radioSortOrder', this).on('click', function () {
-            query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
-        });
-
-        $('.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.StartIndex = 0;
-            query.Filters = filters;
-
-            reloadItems(page);
-        });
-
-    }).on('pagebeforeshow', "#gamesystemsPage", function () {
 
         var limit = LibraryBrowser.getDefaultPageSize();
 

dashboard-ui/scripts/librarybrowser.js

@@ -397,7 +397,6 @@
 
             html += LibraryBrowser.getSongHeaderCellHtml('Runtime', 'tabletColumn', options.enableColumnSorting, 'Runtime,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
             html += LibraryBrowser.getSongHeaderCellHtml('Plays', 'desktopColumn', options.enableColumnSorting, 'PlayCount,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
-            html += LibraryBrowser.getSongHeaderCellHtml('', 'desktopColumn userDataCell', options.enableColumnSorting);
 
             html += '</tr></thead>';
 
@@ -409,7 +408,7 @@
 
                 html += '<tr>';
 
-                html += '<td><button class="btnPlay" type="button" data-role="none" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');"><img src="css/images/media/playCircle.png" style="height: 20px;"></button></td>';
+                html += '<td><button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');">Play</button></td>';
 
                 var num = item.IndexNumber;
 
@@ -458,8 +457,6 @@
 
                 html += '<td class="desktopColumn">' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
 
-                html += '<td class="desktopColumn userDataCell">' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
-
                 html += '</tr>';
             }
 
@@ -697,6 +694,15 @@
                         currentIndexValue = val;
                     }
                 }
+                else if (options.timeline) {
+                    var year = item.ProductionYear || "Unknown Year";
+
+                    if (year != currentIndexValue) {
+
+                        html += '<h2 class="timelineHeader detailSectionHeader">' + year + '</h2>';
+                        currentIndexValue = year;
+                    }
+                }
 
                 var imgUrl = null;
                 var background = null;

dashboard-ui/scripts/livetvchannel.js

@@ -157,6 +157,12 @@
 
             });
 
+            if (item.CurrentProgram) {
+                $('.currentProgram', page).html('Now playing:&nbsp;&nbsp;&nbsp;<a href="livetvprogram.html?id=' + item.CurrentProgram.Id + '">' + item.CurrentProgram.Name + '</a>').trigger('create');
+            } else {
+                $('.currentProgram', page).html('');
+            }
+
             loadPrograms(page);
 
         });

dashboard-ui/scripts/livetvtimer.js

@@ -28,7 +28,7 @@
 
         var programInfo = item.ProgramInfo || {};
 
-        $('.itemName', page).html(programInfo.Name);
+        $('.itemName', page).html(item.Name);
         
         $('.itemEpisodeName', page).html(programInfo.EpisodeTitle || '');
 

dashboard-ui/scripts/movies.js

@@ -51,10 +51,12 @@
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
             else if (view == "Timeline") {
-                html += LibraryBrowser.getPosterDetailViewHtml({
+                html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
-                    context: "movies",
+                    shape: "portrait",
-                    shape: "poster",
+                    context: 'movies',
+                    useAverageAspectRatio: true,
+                    showTitle: true,
                     timeline: true
                 });
                 $('.itemsContainer', page).addClass('timelineItemsContainer');
@@ -202,6 +204,7 @@
             if (view == "Timeline") {
 
                 query.SortBy = "PremiereDate";
+                query.SortOrder = "Descending";
                 query.StartIndex = 0;
                 $('#radioPremiereDate', page)[0].click();
 

dashboard-ui/scripts/musicalbumartists.js

@@ -29,11 +29,12 @@
             var checkSortOption = $('.radioSortBy:checked', page);
             $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
 
-            html += LibraryBrowser.getPosterDetailViewHtml({
+            html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                preferBackdrop: false,
+                shape: "square",
-                context: "music",
+                context: 'music',
-                shape: "square"
+                showTitle: true,
+                overlayText: true
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

dashboard-ui/scripts/musicalbums.js

@@ -43,10 +43,13 @@
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
             else if (view == "Timeline") {
-                html += LibraryBrowser.getPosterDetailViewHtml({
+                html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
-                    context: "music",
                     shape: "square",
+                    context: 'music',
+                    useAverageAspectRatio: true,
+                    showTitle: true,
+                    showParentTitle: true,
                     timeline: true
                 });
                 $('.itemsContainer', page).addClass('timelineItemsContainer');
@@ -155,6 +158,7 @@
             if (view == "Timeline") {
 
                 query.SortBy = "PremiereDate";
+                query.SortOrder = "Descending";
                 query.StartIndex = 0;
                 $('#radioPremiereDate', page)[0].click();
 

dashboard-ui/scripts/musicartists.js

@@ -28,11 +28,12 @@
             var checkSortOption = $('.radioSortBy:checked', page);
             $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
 
-            html += LibraryBrowser.getPosterDetailViewHtml({
+            html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                preferBackdrop: false,
+                shape: "square",
-                context: "music",
+                context: 'music',
-                shape: "square"
+                showTitle: true,
+                overlayText: true
             });
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

dashboard-ui/scripts/playlist.js

@@ -23,12 +23,12 @@
             var parentName = item.SeriesName || item.Album || item.ProductionYear || '';
 
             html += '<tr>';
-            html += '<td><a href="#" data-index="' + i + '" class="lnkPlay"><img src="css/images/media/playcircle.png" style="height: 20px;" /></a></td>';
+            html += '<td><button type="button" data-index="' + i + '" class="lnkPlay" data-icon="play" data-iconpos="notext">Play</button></td>';
             html += '<td>' + name + '</td>';
             html += '<td>' + parentName + '</td>';
             html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
             html += '<td>' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
-            html += '<td><a href="#" data-index="' + i + '" class="lnkRemove"><img src="css/images/media/remove.png" style="height: 20px;" /></a></td>';
+            html += '<td><button type="button" data-index="' + i + '" class="lnkRemove" data-icon="delete" data-iconpos="notext">Remove</button></td>';
             html += '</tr>';
         });
 

dashboard-ui/scripts/plugincatalogpage.js

@@ -148,9 +148,11 @@
             reloadList(page);
         });
 
-        $('#selectTargetSystem', page).on('change', function () {
+        $('.radioPackageTypes', page).on('change', function () {
 
-            query.TargetSystems = this.value;
+            var val = $('.radioPackageTypes:checked', page).val();
+
+            query.TargetSystems = val;
             reloadList(page);
         });
 
@@ -158,7 +160,11 @@
 
         var page = this;
 
-        $('#selectTargetSystem', page).val(query.TargetSystems).selectmenu('refresh');
+        $(".radioPackageTypes", page).each(function() {
+
+            this.checked = this.value == query.TargetSystems;
+
+        }).checkboxradio('refresh');
 
         // Reset form values using the last used query
         $('.chkPremiumFilter', page).each(function () {

dashboard-ui/scripts/supporterkeypage.js

@@ -1,25 +1,18 @@
 var SupporterKeyPage = {
 
     onPageShow: function () {
-        SupporterKeyPage.load();
+        SupporterKeyPage.load(this);
     },
 
-    onPageHide: function () {
+    load: function (page) {
         
-    },
-
-    load: function() {
         Dashboard.showLoadingMsg();
-        var page = $.mobile.activePage;
 
         ApiClient.getPluginSecurityInfo().done(function (info) {
+            
             $('#txtSupporterKey', page).val(info.SupporterKey);
             $('#txtLegacyKey', page).val(info.LegacyKey);
-            if (info.IsMBSupporter) {
+
-                $('.supporterOnly', page).show();
-            } else {
-                $('.supporterOnly', page).hide();
-            }
             if ((info.LegacyKey || info.SupporterKey) && !info.IsMBSupporter) {
                 $('#txtSupporterKey', page).addClass("invalidEntry");
                 $('.notSupporter', page).show();
@@ -27,6 +20,7 @@
                 $('#txtSupporterKey', page).removeClass("invalidEntry");
                 $('.notSupporter', page).hide();
             }
+            
             Dashboard.hideLoadingMsg();
         });
     },
@@ -34,10 +28,10 @@
     updateSupporterKey: function () {
 
         Dashboard.showLoadingMsg();
-        var page = $.mobile.activePage;
+        var form = this;
         
-        var key = $('#txtSupporterKey', page).val();
+        var key = $('#txtSupporterKey', form).val();
-        var legacyKey = $('#txtLegacyKey', page).val();
+        var legacyKey = $('#txtLegacyKey', form).val();
 
             var info = {
                 SupporterKey: key,
@@ -49,7 +43,23 @@
                 Dashboard.resetPluginSecurityInfo();
                 Dashboard.hideLoadingMsg();
                 
-                SupporterKeyPage.load();
+                if (key) {
+
+                    Dashboard.alert({                        
+                        message: "Thank you. Your supporter key has been updated.",
+                        title: "Confirmation"
+                    });
+
+                } else {
+                    Dashboard.alert({
+                        message: "Thank you. Your supporter key has been removed.",
+                        title: "Confirmation"
+                    });
+                }
+
+                var page = $(form).parents('.page');
+
+                SupporterKeyPage.load(page);
             });
 
         return false;
@@ -58,11 +68,11 @@
     linkSupporterKeys: function () {
 
         Dashboard.showLoadingMsg();
-        var page = $.mobile.activePage;
+        var form = this;
 
-        var email = $('#txtNewEmail', page).val();
+        var email = $('#txtNewEmail', form).val();
-        var newkey = $('#txtNewKey', page).val();
+        var newkey = $('#txtNewKey', form).val();
-        var oldkey = $('#txtOldKey', page).val();
+        var oldkey = $('#txtOldKey', form).val();
 
         var info = {
             email: email,
@@ -90,9 +100,9 @@
     retrieveSupporterKey: function () {
 
         Dashboard.showLoadingMsg();
-        var page = $.mobile.activePage;
+        var form = this;
 
-        var email = $('#txtEmail', page).val();
+        var email = $('#txtEmail', form).val();
 
         var url = "http://mb3admin.com/admin/service/supporter/retrievekey?email="+email;
         console.log(url);
@@ -113,5 +123,4 @@
 
 };
 
-$(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow)
+$(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
-    .on('pagehide', "#supporterKeyPage", SupporterKeyPage.onPageHide);

dashboard-ui/scripts/tvshows.js

@@ -48,16 +48,20 @@
                     items: result.Items,
                     shape: "portrait",
                     context: 'tv',
-                    useAverageAspectRatio: true
+                    useAverageAspectRatio: true,
+                    showTitle: true
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
             else if (view == "Timeline") {
                 
-                html += LibraryBrowser.getPosterDetailViewHtml({
+                html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,
-                    context: "tv",
+                    shape: "portrait",
-                    timeline: true
+                    context: 'tv',
+                    useAverageAspectRatio: true,
+                    timeline: true,
+                    showTitle: true
                 });
 
                 $('.itemsContainer', page).addClass('timelineItemsContainer');
@@ -222,6 +226,7 @@
             if (view == "Timeline") {
 
                 query.SortBy = "PremiereDate";
+                query.SortOrder = "Descending";
                 query.StartIndex = 0;
                 $('#radioPremiereDate', page)[0].click();
 

dashboard-ui/supporterkey.html

@@ -96,7 +96,7 @@
                 </div>
             </div>
         </div>
-    </div>
+
         <script type="text/javascript">
             $('#supporterKeyForm').on('submit', SupporterKeyPage.updateSupporterKey);
             $('#lostKeyForm').on('submit', SupporterKeyPage.retrieveSupporterKey);