Add api key functions

dashboard-ui/autoorganizelog.html

@@ -21,7 +21,7 @@
                     <button style="display: none;" class="btnClearLog" type="button" data-inline="true" data-icon="forbidden" data-mini="true">Clear</button>
                     <div style="clear: both;"></div>
                 </div>
-                <table data-role="table" data-mode="reflow" class="tblOrganizationResults stripedTable ui-responsive table-stroke" style="display: table;">
+                <table data-role="table" data-mode="reflow" class="tblOrganizationResults stripedTable ui-responsive table-stroke">
                     <thead>
                         <tr>
                             <th data-priority="1"></th>

dashboard-ui/channelslatest.html

@@ -12,7 +12,7 @@
         </div>
 
         <div data-role="content">
-            <table class="ehsContent homeEhsContent">
+            <table class="ehsContent">
                 <tr>
                     <td>
                         <div class="items"></div>

dashboard-ui/css/librarybrowser.css

@@ -13,7 +13,7 @@
 }
 
 .backdropPage {
-    background-color: rgba(15, 15,15, .92)!important;
+    background-color: rgba(15, 15,15, .94)!important;
 }
 
 .backdropContainer {
@@ -73,25 +73,32 @@
     top: 8px;
 }
 
+@media all and (max-width: 800px) {
+
+    .hiddenSectionOnMobile {
+        display: none;
+    }
+}
+
 .firstListHeader + .sectionHeaderButton {
     top: 3px;
 }
 
-@media all and (min-width: 900px) {
+@media all and (min-width: 800px) {
 
     .ehsContent {
-        width: 880px;
+        width: 770px;
     }
 
     .squareEhsContent {
-        width: 750px;
+        width: 760px;
     }
 }
 
 @media all and (min-width: 1000px) {
 
     .ehsContent {
-        width: 905px;
+        width: 900px;
     }
 
     .squareEhsContent {
@@ -102,33 +109,11 @@
 @media all and (min-width: 1200px) {
 
     .ehsContent {
-        width: 925px;
+        width: 1000px;
     }
 
     .squareEhsContent {
-        width: 900px;
+        width: 1000px;
-    }
-}
-
-@media all and (min-width: 1400px) {
-
-    .ehsContent {
-        width: 1080px;
-    }
-
-    .squareEhsContent {
-        width: 1220px;
-    }
-}
-
-@media all and (min-width: 1600px) {
-
-    .homeEhsContent {
-        width: 1440px;
-    }
-
-    .squareEhsContent {
-        width: 1420px;
     }
 }
 

dashboard-ui/css/posteritem.css

@@ -332,11 +332,11 @@
 @media all and (min-width: 540px) {
 
     .backdropPosterItem {
-        width: 266px;
+        width: 246px;
     }
 
         .backdropPosterItem .posterItemImage {
-            height: 149.625px;
+            height: 138.375px;
         }
 
     .smallBackdropPosterItem {
@@ -362,14 +362,6 @@
 
 @media all and (min-width: 650px) {
 
-    .backdropPosterItem {
-        width: 282px;
-    }
-
-        .backdropPosterItem .posterItemImage {
-            height: 158.625px;
-        }
-
     .smallBackdropPosterItem {
         width: 190px;
     }
@@ -415,12 +407,28 @@
         min-width: 220px;
     }
 
+    .backdropPosterItem {
+        width: 290px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 163.125px;
+        }
+
     .smallBackdropPosterItem {
-        width: 208px;
+        width: 290px;
     }
 
         .smallBackdropPosterItem .posterItemImage {
-            height: 117px;
+            height: 163.125px;
+        }
+
+    .miniBackdropPosterItem {
+        width: 190px;
+    }
+
+        .miniBackdropPosterItem .posterItemImage {
+            height: 106.875px;
         }
 }
 
@@ -445,6 +453,30 @@
         .bannerPosterItem .posterItemImage {
             height: 92.5px;
         }
+
+    .backdropPosterItem {
+        width: 320px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 180px;
+        }
+
+    .portraitPosterItem {
+        width: 156px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 234px;
+        }
+
+    .squarePosterItem {
+        width: 190px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 190px;
+        }
 }
 
 @media all and (min-width: 1440px) {
@@ -454,41 +486,6 @@
         /* Specify a min width just in case the container doesn't have a width */
         min-width: 220px;
     }
-
-    .backdropPosterItem {
-        width: 350px;
-    }
-
-        .backdropPosterItem .posterItemImage {
-            height: 196.875px;
-        }
-
-    .miniBackdropPosterItem {
-        width: 180px;
-    }
-
-        .miniBackdropPosterItem .posterItemImage {
-            height: 101.25px;
-        }
-
-    .squarePosterItem {
-        width: 192px;
-    }
-
-        .squarePosterItem .posterItemImage {
-            height: 192px;
-        }
-
-    .portraitPosterItem {
-        width: 170px;
-    }
-
-        .portraitPosterItem .posterItemImage {
-            height: 255px;
-        }
-
-    .posterItemText {
-    }
 }
 
 

dashboard-ui/index.html

@@ -24,7 +24,7 @@
                 </p>
             </div>
 
-            <table class="ehsContent homeEhsContent">
+            <table class="ehsContent">
                 <tr>
                     <td>
                         <div class="sections"></div>

dashboard-ui/livetvsuggested.html

@@ -14,7 +14,7 @@
             <a href="livetvseriestimers.html">${TabSeries}</a>
         </div>
         <div data-role="content">
-            <table class="ehsContent squareEhsContent">
+            <table class="ehsContent">
                 <tr>
                     <td>
                         <div id="activePrograms">

dashboard-ui/scripts/backdrops.js

@@ -99,16 +99,12 @@
             return false;
         }
 
-        // For bandwidth
-        if ($.browser.mobile) {
-            return false;
-        }
-
         var userId = Dashboard.getCurrentUserId();
 
         var val = LocalSettings.val('enableBackdrops', userId);
 
-        return val != '0';
+        // For bandwidth
+        return val == '1' || (val != '0' && !$.browser.mobile);
     }
 
     $(document).on('pagebeforeshow', ".page", function () {

dashboard-ui/scripts/favorites.js

@@ -22,7 +22,7 @@
             SortOrder: "Ascending",
             IncludeItemTypes: section.types,
             Filters: "IsFavorite",
-            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6),
+            Limit: screenWidth >= 1920 ? 9 : (screenWidth >= 1440 ? 8 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             CollapseBoxSetItems: false,

dashboard-ui/scripts/indexpage.js

@@ -192,7 +192,13 @@
         });
     }
 
-    function loadLibraryTiles(elem, userId, shape, index) {
+    function loadLibraryTiles(elem, userId, shape, index, autoHideOnMobile) {
+
+        if (autoHideOnMobile) {
+            $(elem).addClass('hiddenSectionOnMobile');
+        } else {
+            $(elem).removeClass('hiddenSectionOnMobile');
+        }
         
         getUserViews(userId).done(function (items) {
 
@@ -273,7 +279,7 @@
             SortOrder: "Descending",
             MediaTypes: "Video",
             Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6),
+            Limit: (screenWidth >= 1200 ? 9 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             CollapseBoxSetItems: false,
@@ -350,7 +356,7 @@
 
         var options = {
 
-            Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
+            Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
             Fields: "PrimaryImageAspectRatio",
             Filters: "IsUnplayed",
             UserId: Dashboard.getCurrentUserId(),
@@ -373,7 +379,7 @@
             }
             html += LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                shape: 'autosmall',
+                shape: 'auto',
                 defaultShape: 'square',
                 showTitle: true,
                 centerText: true,
@@ -390,7 +396,7 @@
         ApiClient.getLiveTvRecordings({
 
             userId: userId,
-            limit: 9,
+            limit: 5,
             IsInProgress: false
 
         }).done(function (result) {
@@ -444,11 +450,11 @@
         switch (index) {
 
             case 0:
-                return 'smalllibrarytiles';
+                return 'smalllibrarytiles-automobile';
             case 1:
                 return 'resume';
             case 2:
-                return '';
+                return 'latestmedia';
             case 3:
                 return '';
             default:
@@ -470,7 +476,10 @@
             Sections.loadLibraryTiles(elem, userId, 'backdrop', index);
         }
         else if (section == 'smalllibrarytiles') {
-            Sections.loadLibraryTiles(elem, userId, 'smallBackdrop', index);
+            Sections.loadLibraryTiles(elem, userId, 'miniBackdrop', index);
+        }
+        else if (section == 'smalllibrarytiles-automobile') {
+            Sections.loadLibraryTiles(elem, userId, 'miniBackdrop', index, true);
         }
         else if (section == 'librarybuttons') {
             Sections.loadlibraryButtons(elem, userId, index);
@@ -484,7 +493,7 @@
         }
 
         else if (section == 'folders') {
-            Sections.loadLibraryFolders(elem, userId, 'smallBackdrop', index);
+            Sections.loadLibraryFolders(elem, userId, 'backdrop', index);
 
         } else if (section == 'latestchannelmedia') {
             Sections.loadLatestChannelMedia(elem, userId);

dashboard-ui/scripts/itemdetailpage.js

@@ -311,7 +311,7 @@
             $('#scenesCollapsible', page).hide();
         } else {
             $('#scenesCollapsible', page).show();
-            renderScenes(page, item, user, 4);
+            renderScenes(page, item, user, 3);
         }
 
         if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0 || item.Type == "Series") {

dashboard-ui/scripts/librarylist.js

@@ -305,6 +305,12 @@
 
     function onGroupedPosterItemClick(e) {
 
+        if ($(e.target).is('.posterItemOverlayTarget') ||
+            $(e.target).parents('.posterItemOverlayTarget').length) {
+            e.preventDefault();
+            return;
+        }
+
         var posterItem = this;
         var itemId = posterItem.getAttribute('data-itemid');
         

dashboard-ui/scripts/livetvsuggested.js

@@ -9,7 +9,7 @@
 
             userId: Dashboard.getCurrentUserId(),
             IsAiring: true,
-            limit: 12
+            limit: 10
 
         }).done(function (result) {
 
@@ -32,7 +32,7 @@
             userId: Dashboard.getCurrentUserId(),
             IsAiring: false,
             HasAired: false,
-            limit: 12
+            limit: 10
 
         }).done(function (result) {
 

dashboard-ui/scripts/moviesrecommended.js

@@ -50,7 +50,7 @@
             SortOrder: "Descending",
             IncludeItemTypes: "Movie",
             Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 6 : (screenWidth >= 1440 ? 6 : 3),
+            Limit: (screenWidth >= 1200 ? 6 : 3),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio",
             CollapseBoxSetItems: false,
@@ -81,7 +81,7 @@
 
             userId: Dashboard.getCurrentUserId(),
             categoryLimit: screenWidth >= 1200 ? 4 : 3,
-            itemLimit: screenWidth >= 1920 ? 6 : (screenWidth >= 1440 ? 6 : 7),
+            ItemLimit: (screenWidth >= 1200 ? 6 : 5),
             Fields: "PrimaryImageAspectRatio"
         });
 

dashboard-ui/scripts/musicrecommended.js

@@ -11,7 +11,7 @@
 
         var options = {
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 12),
+            Limit: screenWidth >= 1920 ? 15 : (screenWidth >= 1200 ? 10 : 12),
             Fields: "PrimaryImageAspectRatio",
             ParentId: parentId
         };
@@ -34,7 +34,7 @@
             SortBy: "DatePlayed",
             SortOrder: "Descending",
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 6),
+            Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1200 ? 5 : 6),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",
@@ -64,7 +64,7 @@
             SortBy: "PlayCount",
             SortOrder: "Descending",
             IncludeItemTypes: "Audio",
-            Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 12),
+            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1200 ? 10 : 12),
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,AudioInfo",
             Filters: "IsPlayed",

dashboard-ui/scripts/serversecurity.js

@@ -1 +1,145 @@
-
+(function ($, document, apiClient) {
+
+    function revoke(page, key) {
+
+        Dashboard.confirm(Globalize.translate('MessageConfirmRevokeApiKey'), Globalize.translate('HeaderConfirmRevokeApiKey'), function (result) {
+
+            if (result) {
+
+                Dashboard.showLoadingMsg();
+
+                ApiClient.ajax({
+                    type: "DELETE",
+                    url: apiClient.getUrl('Auth/Keys/' + key)
+                    
+                }).done(function () {
+
+                    loadData(page);
+                });
+            }
+
+        });
+    }
+
+    function renderKeys(page, keys, users) {
+
+        var rows = keys.map(function (item) {
+
+            var html = '';
+
+            html += '<tr>';
+
+            html += '<td>';
+            html += '<button data-token="' + item.AccessToken + '" class="btnRevoke" data-mini="true" title="' + Globalize.translate('ButtonRevoke') + '" style="margin:0;">' + Globalize.translate('ButtonRevoke') + '</button>';
+            html += '</td>';
+
+            html += '<td style="vertical-align:middle;">';
+            html += (item.AccessToken);
+            html += '</td>';
+
+            html += '<td style="vertical-align:middle;">';
+            html += (item.AppName || '');
+            html += '</td>';
+
+            html += '<td style="vertical-align:middle;">';
+            html += (item.DeviceName || '');
+            html += '</td>';
+
+            html += '<td style="vertical-align:middle;">';
+
+            var user = users.filter(function (u) {
+
+                return u.Id == item.UserId;
+            })[0];
+
+            if (user) {
+                html += user.Name;
+            }
+
+            html += '</td>';
+
+            html += '<td style="vertical-align:middle;">';
+
+            var date = parseISO8601Date(item.DateCreated, { toLocal: true });
+
+            html += date.toLocaleDateString() + ' ' + LiveTvHelpers.getDisplayTime(date);
+
+            html += '</td>';
+
+            html += '</tr>';
+
+            return html;
+
+        }).join('');
+
+        var elem = $('.resultBody', page).html(rows).parents('.tblApiKeys').table("refresh").trigger('create');
+
+        $('.btnRevoke', elem).on('click', function () {
+
+            revoke(page, this.getAttribute('data-token'));
+        });
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function loadData(page) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getUsers().done(function (users) {
+
+            ApiClient.getJSON(ApiClient.getUrl('Auth/Keys')).done(function (result) {
+
+                renderKeys(page, result.Items, users);
+            });
+        });
+    }
+
+    $(document).on('pageinit', "#serverSecurityPage", function () {
+
+        var page = this;
+
+        $('.btnNewKey', page).on('click', function () {
+
+            $('.newKeyPanel', page).panel('toggle');
+
+            $('#txtAppName', page).val('').focus();
+
+        });
+
+    }).on('pageshow', "#serverSecurityPage", function () {
+
+        var page = this;
+
+        loadData(page);
+    });
+
+    window.ServerSecurityPage = {        
+      
+        onSubmit: function(e) {
+
+            var form = this;
+            var page = $(form).parents('.page');
+            
+            Dashboard.showLoadingMsg();
+
+            ApiClient.ajax({
+                type: "POST",
+                url: apiClient.getUrl('Auth/Keys/', {
+                    
+                    App: $('#txtAppName', form).val()
+
+                })
+
+            }).done(function () {
+
+                $('.newKeyPanel', page).panel('close');
+
+                loadData(page);
+            });
+
+            return false;
+        }
+    };
+
+})(jQuery, document, ApiClient);

dashboard-ui/scripts/thememediaplayer.js

@@ -46,7 +46,8 @@
         
         var val = LocalSettings.val('enableThemeSongs', userId);
 
-        return val == '1';
+        // For bandwidth
+        return val == '1' || (val != '0' && !$.browser.mobile);
     }
 
     function getPlayer() {

dashboard-ui/scripts/tvrecommended.js

@@ -95,7 +95,7 @@
             SortOrder: "Descending",
             IncludeItemTypes: "Episode",
             Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 6 : 4,
+            Limit: screenWidth >= 1200 ? 6 : 4,
             Recursive: true,
             Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData",
             ExcludeLocationTypes: "Virtual",

dashboard-ui/serversecurity.html

@@ -16,9 +16,51 @@
                     <a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a>
                 </div>
 
+                <h2 style="margin-top: -10px;">
+                    <span>${HeaderApiKeys}</span>
+                    <button class="btnNewKey" style="float: right; margin: -4px 0 0; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
+                </h2>
+                <p>${HeaderApiKeysHelp}</p>
+                <br />
+                <table data-role="table" data-mode="reflow" class="tblApiKeys stripedTable ui-responsive table-stroke" style="display: table;">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>${HeaderApiKey}</th>
+                            <th>${HeaderApp}</th>
+                            <th>${HeaderDevice}</th>
+                            <th>${HeaderUser}</th>
+                            <th>${HeaderDateIssued}</th>
+                        </tr>
+                    </thead>
+                    <tbody class="resultBody">
+                    </tbody>
+                </table>
+
             </div>
         </div>
+        <div data-role="panel" class="newKeyPanel" data-position="right" data-display="overlay" data-position-fixed="true">
+            <form class="newKeyForm">
+
+                <h3>${HeaderNewApiKey}</h3>
+
+                <p>${HeaderNewApiKeyHelp}</p>
+                <div>
+                    <label for="txtAppName">${LabelAppName}</label>
+                    <input type="text" id="txtAppName" required="required" />
+                    <div class="fieldDescription">${LabelAppNameExample}</div>
+                </div>
 
+                <br />
+                <p>
+                    <button type="submit" data-icon="plus" data-mini="true" data-theme="b">${ButtonCreate}</button>
+                </p>
+            </form>
+        </div>
+
+        <script type="text/javascript">
+            $('.newKeyForm').off('submit', ServerSecurityPage.onSubmit).on('submit', ServerSecurityPage.onSubmit);
+        </script>
     </div>
 </body>
 </html>