add some web client settings

dashboard-ui/index.html

@@ -12,19 +12,7 @@
                 <tr>
                     <td>
                         <br />
-                        <div class="myLibrary">
+                        <div class="sections"></div>
-                        </div>
-                        <div id="resumableSection" style="display: none;">
-                            <h1 class="listHeader">${HeaderResume}</h1>
-
-                            <div id="resumableItems">
-                            </div>
-                        </div>
-
-                        <h1 class="listHeader">${HeaderLatestMedia}</h1>
-
-                        <div id="recentlyAddedItems">
-                        </div>
                     </td>
                 </tr>
             </table>

dashboard-ui/mypreferenceswebclient.html

@@ -21,6 +21,38 @@
             </div>
 
             <br />
+            <ul data-role="listview" class="ulForm">
+                <li>
+                    <label for="selectHomeSection1">${LabelHomePageSection1}</label>
+                    <select id="selectHomeSection1" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="librarybuttons">${OptionLibraryButtons}</option>
+                        <option value="librarytiles">${OptionLibraryTiles}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                    </select>
+                </li>
+                <li>
+                    <label for="selectHomeSection2">${LabelHomePageSection2}</label>
+                    <select id="selectHomeSection2" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="librarybuttons">${OptionLibraryButtons}</option>
+                        <option value="librarytiles">${OptionLibraryTiles}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                    </select>
+                </li>
+                <li>
+                    <label for="selectHomeSection3">${LabelHomePageSection3}</label>
+                    <select id="selectHomeSection3" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="librarybuttons">${OptionLibraryButtons}</option>
+                        <option value="librarytiles">${OptionLibraryTiles}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                    </select>
+                </li>
+            </ul>
 
             <div class="detailSectionHeader" style="margin: 0 .5em;">
                 ${HeaderThisDevice}

dashboard-ui/scripts/indexpage.js

@@ -82,7 +82,23 @@
         return html;
     }
 
-    function refreshMediaLibrary(page) {
+    function getDefaultSection(index) {
+
+        switch (index) {
+
+            case 0:
+                return 'librarybuttons';
+            case 1:
+                return 'resume';
+            case 2:
+                return 'latestmedia';
+            default:
+                return '';
+        }
+
+    }
+
+    function loadlibraryButtons(elem, userId, index) {
 
         var options = {
 
@@ -90,10 +106,8 @@
             Fields: "PrimaryImageAspectRatio"
         };
 
-        var userId = Dashboard.getCurrentUserId();
-
         var promise1 = ApiClient.getItems(userId, options);
-        
+
         var promise2 = ApiClient.getLiveTvInfo();
 
         var promise3 = $.getJSON(ApiClient.getUrl("Channels", {
@@ -103,7 +117,7 @@
             limit: 0
         }));
 
-        $.when(promise1, promise2, promise3).done(function(r1, r2, r3) {
+        $.when(promise1, promise2, promise3).done(function (r1, r2, r3) {
 
             var result = r1[0];
             var liveTvInfo = r2[0];
@@ -122,7 +136,7 @@
             var showLiveTv = liveTvInfo.EnabledUsers.indexOf(userId) != -1;
 
             if (showLiveTv) {
-                
+
                 result.Items.push({
                     Name: 'Live TV',
                     CollectionType: 'livetv',
@@ -131,59 +145,31 @@
                 });
             }
 
-            $('.myLibrary', page).html(createMediaLinks({
+            var html = '';
+
+            if (index) {
+                html += '<h1 class="listHeader">My Library</h1>';
+            }
+            html += '<div>';
+            html += createMediaLinks({
                 items: result.Items,
                 shape: 'myLibrary',
                 showTitle: true,
                 centerText: true
 
-            }));
+            });
+            html += '</div>';
+
+            $(elem).html(html);
         });
     }
 
-    $(document).on('pagebeforeshow', "#indexPage", function () {
+    function loadRecentlyAdded(elem, userId) {
 
         var screenWidth = $(window).width();
 
-        var page = this;
-
-        refreshMediaLibrary(page);
-
         var options = {
 
-            SortBy: "DatePlayed",
-            SortOrder: "Descending",
-            MediaTypes: "Video",
-            Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1440 ? 4 : 3),
-            Recursive: true,
-            Fields: "PrimaryImageAspectRatio",
-            CollapseBoxSetItems: false,
-            ExcludeLocationTypes: "Virtual"
-        };
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
-
-            if (result.Items.length) {
-                $('#resumableSection', page).show();
-            } else {
-                $('#resumableSection', page).hide();
-            }
-
-            $('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
-                items: result.Items,
-                preferBackdrop: true,
-                shape: 'backdrop',
-                overlayText: screenWidth >= 600,
-                showTitle: true,
-                showParentTitle: true
-
-            })).createPosterItemMenus();
-
-        });
-
-        options = {
-
             SortBy: "DateCreated",
             SortOrder: "Descending",
             Limit: screenWidth >= 2400 ? 30 : (screenWidth >= 1920 ? 20 : (screenWidth >= 1440 ? 12 : (screenWidth >= 800 ? 12 : 8))),
@@ -194,18 +180,139 @@
             ExcludeLocationTypes: "Virtual,Remote"
         };
 
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+        ApiClient.getItems(userId, options).done(function (result) {
 
-            $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({
+            var html = '';
 
+            html += '<h1 class="listHeader">Latest Media</h1>';
+            html += '<div>';
+            html += LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 preferThumb: true,
                 shape: 'backdrop',
                 showTitle: true,
                 centerText: true
+            });
+            html += '</div>';
 
-            })).createPosterItemMenus();
+            $(elem).html(html).createPosterItemMenus();
         });
+    }
+
+    function loadLibraryTiles(elem, userId) {
+
+        var options = {
+
+            SortBy: "SortName",
+            Fields: "PrimaryImageAspectRatio"
+        };
+
+        ApiClient.getItems(userId, options).done(function (result) {
+
+            var html = '';
+
+            html += '<h1 class="listHeader">My Library</h1>';
+            html += '<div>';
+            html += LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                preferThumb: true,
+                shape: 'backdrop',
+                showTitle: true,
+                centerText: true
+            });
+            html += '</div>';
+
+            $(elem).html(html).createPosterItemMenus();
+        });
+    }
+
+    function loadResume(elem, userId) {
+
+        var screenWidth = $(window).width();
+
+        var options = {
+
+            SortBy: "DatePlayed",
+            SortOrder: "Descending",
+            MediaTypes: "Video",
+            Filters: "IsResumable",
+            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6),
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio",
+            CollapseBoxSetItems: false,
+            ExcludeLocationTypes: "Virtual"
+        };
+
+        ApiClient.getItems(userId, options).done(function (result) {
+
+            var html = '';
+
+            html += '<h1 class="listHeader">Resume</h1>';
+            html += '<div>';
+            html += LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                preferBackdrop: true,
+                shape: 'backdrop',
+                overlayText: screenWidth >= 600,
+                showTitle: true,
+                showParentTitle: true
+            });
+            html += '</div>';
+
+            $(elem).html(html).createPosterItemMenus();
+        });
+    }
+
+    function loadSection(page, userId, displayPreferences, index) {
+
+        var section = displayPreferences.CustomPrefs['home' + index] || getDefaultSection(index);
+
+        var elem = $('.section' + index, page);
+
+        if (section == 'latestmedia') {
+            loadRecentlyAdded(elem, userId);
+        }
+        else if (section == 'librarytiles') {
+            loadLibraryTiles(elem, userId);
+        }
+        else if (section == 'resume') {
+            loadResume(elem, userId);
+        }
+        else if (section == 'librarybuttons') {
+            loadlibraryButtons(elem, userId, index);
+        }
+    }
+
+    function loadSections(page, userId, displayPreferences) {
+
+        var i, length;
+        var sectionCount = 3;
+        var html = '';
+
+        for (i = 0, length = sectionCount; i < length; i++) {
+
+            html += '<div class="section' + i + '"></div>';
+        }
+
+        $('.sections', page).html(html);
+
+        for (i = 0, length = sectionCount; i < length; i++) {
+
+            loadSection(page, userId, displayPreferences, i);
+        }
+    }
+
+    $(document).on('pagebeforeshow', "#indexPage", function () {
+
+        var page = this;
+
+        var userId = Dashboard.getCurrentUserId();
+
+        ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
+
+            loadSections(page, userId, result);
+        });
+
     });
 
 })(jQuery, document, ApiClient);

dashboard-ui/scripts/mypreferenceswebclient.js

@@ -1,22 +1,31 @@
 (function ($, window, document) {
 
-    function loadForm(page, user) {
+    function loadForm(page, userId, displayPreferences) {
 
-        $('#selectThemeSong', page).val(LocalSettings.val('enableThemeSongs', user.Id) || '').selectmenu("refresh");
+        $('#selectThemeSong', page).val(LocalSettings.val('enableThemeSongs', userId) || '').selectmenu("refresh");
-        $('#selectBackdrop', page).val(LocalSettings.val('enableBackdrops', user.Id) || '').selectmenu("refresh");
+        $('#selectBackdrop', page).val(LocalSettings.val('enableBackdrops', userId) || '').selectmenu("refresh");
+
+        $('#selectHomeSection1', page).val(displayPreferences.CustomPrefs.home0 || '').selectmenu("refresh");
+        $('#selectHomeSection2', page).val(displayPreferences.CustomPrefs.home1 || '').selectmenu("refresh");
+        $('#selectHomeSection3', page).val(displayPreferences.CustomPrefs.home2 || '').selectmenu("refresh");
 
         Dashboard.hideLoadingMsg();
     }
 
-    function saveUser(page, user) {
+    function saveUser(page, userId, displayPreferences) {
 
-        LocalSettings.val('enableThemeSongs', user.Id, $('#selectThemeSong', page).val());
+        LocalSettings.val('enableThemeSongs', userId, $('#selectThemeSong', page).val());
-        LocalSettings.val('enableBackdrops', user.Id, $('#selectBackdrop', page).val());
+        LocalSettings.val('enableBackdrops', userId, $('#selectBackdrop', page).val());
 
-        //ApiClient.updateUser(user).done(function () {
+        displayPreferences.CustomPrefs.home0 = $('#selectHomeSection1', page).val();
-            //Dashboard.alert(Globalize.translate("SettingsSaved"));
+        displayPreferences.CustomPrefs.home1 = $('#selectHomeSection2', page).val();
-        //});
+        displayPreferences.CustomPrefs.home2 = $('#selectHomeSection3', page).val();
-        Dashboard.alert(Globalize.translate("SettingsSaved"));
+
+        ApiClient.updateDisplayPreferences('home', displayPreferences, userId, 'webclient').done(function () {
+
+            Dashboard.alert(Globalize.translate("SettingsSaved"));
+            
+        });
     }
 
     function onSubmit() {
@@ -27,9 +36,9 @@
 
         var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
-        ApiClient.getUser(userId).done(function (result) {
+        ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
 
-            saveUser(page, result);
+            saveUser(page, userId, result);
 
         });
 
@@ -49,12 +58,11 @@
 
         var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
-        ApiClient.getUser(userId).done(function (user) {
+        ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
 
-            loadForm(page, user);
+            loadForm(page, userId, result);
 
         });
-
     });
 
     window.WebClientPreferencesPage = {

dashboard-ui/thirdparty/mediabrowser.apiclient.js

@@ -162,7 +162,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
                     self.sendWebSocketMessage("Identity", clientName + "|" + deviceId + "|" + applicationVersion + "|" + deviceName);
 
                     $(self).trigger("websocketopen");
-                    
+
                 }, 500);
             };
             webSocket.onerror = function () {
@@ -186,7 +186,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
         self.sendWebSocketMessage = function (name, data) {
 
             console.log('Sending web socket message: ' + name);
-            
+
             var msg = { MessageType: name };
 
             if (data) {
@@ -873,6 +873,35 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
 
+        self.getDisplayPreferences = function (id, userId, app) {
+
+            var url = self.getUrl("DisplayPreferences/" + id, {
+                userId: userId,
+                client: app
+            });
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
+        self.updateDisplayPreferences = function (id, obj, userId, app) {
+
+            var url = self.getUrl("DisplayPreferences/" + id, {
+                userId: userId,
+                client: app
+            });
+
+            return self.ajax({
+                type: "POST",
+                url: url,
+                data: JSON.stringify(obj),
+                contentType: "application/json"
+            });
+        };
+
         self.getSeasons = function (itemId, options) {
 
             var url = self.getUrl("Shows/" + itemId + "/Seasons", options);
@@ -1761,7 +1790,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
                 throw new Error("File must be an image.");
             }
 
-            var url  = self.getUrl("Items/" + itemId + "/Images");
+            var url = self.getUrl("Items/" + itemId + "/Images");
 
             url += "/" + imageType;
 
@@ -2044,7 +2073,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             if (ratio) {
 
                 if (options.width) {
-                    
+
                     options.width = Math.round(options.width * ratio);
                 }
                 if (options.height) {