From 13a2268043a3dadff1758155d0953584aff3c84c Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 3 Jul 2015 13:55:29 -0400
Subject: [PATCH] re-organize user preferences

---
 dashboard-ui/mypreferencesdisplay.html        | 113 +++---
 dashboard-ui/mypreferenceshome.html           | 192 +++++++++++
 dashboard-ui/mypreferenceslanguages.html      |  92 ++++-
 dashboard-ui/mypreferenceswebclient.html      | 239 -------------
 dashboard-ui/myprofile.html                   |   2 +-
 dashboard-ui/scripts/appsettings.js           |   9 +-
 dashboard-ui/scripts/indexpage.js             |  13 +-
 dashboard-ui/scripts/mypreferencescommon.js   |   2 +-
 dashboard-ui/scripts/mypreferencesdisplay.js  | 280 +++------------
 dashboard-ui/scripts/mypreferenceshome.js     | 322 ++++++++++++++++++
 .../scripts/mypreferenceslanguages.js         |  18 +
 .../scripts/mypreferenceswebclient.js         | 136 --------
 12 files changed, 723 insertions(+), 695 deletions(-)
 create mode 100644 dashboard-ui/mypreferenceshome.html
 delete mode 100644 dashboard-ui/mypreferenceswebclient.html
 create mode 100644 dashboard-ui/scripts/mypreferenceshome.js
 delete mode 100644 dashboard-ui/scripts/mypreferenceswebclient.js

diff --git a/dashboard-ui/mypreferencesdisplay.html b/dashboard-ui/mypreferencesdisplay.html
index 342d789b32..54fb586d93 100644
--- a/dashboard-ui/mypreferencesdisplay.html
+++ b/dashboard-ui/mypreferencesdisplay.html
@@ -8,10 +8,10 @@
     <div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferencesdisplay,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
 
         <div class="libraryViewNav">
-            <a href="#" class="ui-btn-active lnkDisplayPreferences">${TabDisplay}</a>
+            <a href="#" class="ui-btn-active lnkDisplayPreferences">${TabGeneral}</a>
+            <a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
             <a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
             <a href="#" class="lnkMyProfile">${TabProfile}</a>
-            <a href="#" class="lnkWebClientPreferences">${TabAppSettings}</a>
         </div>
 
         <div data-role="content">
@@ -20,90 +20,76 @@
 
                 <div class="detailSection">
                     <div class="detailSectionHeader">
-                        ${HeaderMyViews}
+                        ${HeaderNavigation}
                     </div>
                     <div class="detailSectionContent">
+                        <br />
                         <div>
-                            <p>${LabelSelectFolderGroups}</p>
-                            <div class="folderGroupList"></div>
-                            <div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div>
+                            <label for="selectThemeSong">${LabelEnableThemeSongs}</label>
+                            <select id="selectThemeSong" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="1">${OptionYes}</option>
+                                <option value="0">${OptionNo}</option>
+                            </select>
+                            <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
                         </div>
                         <br />
+                        <div class="fldEnableBackdrops" style="display:none;">
+                            <label for="selectBackdrop">${LabelEnableBackdrops}</label>
+                            <select id="selectBackdrop" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="1">${OptionYes}</option>
+                                <option value="0">${OptionNo}</option>
+                            </select>
+                            <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
+                        </div>
 
+                        <br />
                         <div>
-                            <div data-role="controlgroup">
-                                <label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label>
-                                <input id="chkDisplayCollectionView" type="checkbox" />
-                            </div>
-                            <div class="fieldDescription">${LabelDisplayCollectionsViewHelp}</div>
+                            <label for="selectEnableItemPreviews">${LabelEnableItemPreviews}</label>
+                            <select id="selectEnableItemPreviews" data-mini="true">
+                                <option value="true">${OptionYes}</option>
+                                <option value="false">${OptionNo}</option>
+                            </select>
+                            <div>${LabelEnableItemPreviewsHelp}</div>
                         </div>
 
-                        <br />
-                        <div data-role="controlgroup">
-                            <label for="chkDisplayFolderView">${LabelDisplayFoldersView}</label>
-                            <input id="chkDisplayFolderView" type="checkbox" />
-                        </div>
-
-                        <br />
-                        <div data-role="collapsible">
-                            <h2>${HeaderChannels}</h2>
+                        <div class="fldFullscreen">
+                            <br />
                             <div>
-                                <p>${LabelGroupChannelsIntoViews}</p>
-                                <div class="channelGroupList"></div>
-                                <div class="fieldDescription">${LabelGroupChannelsIntoViewsHelp}</div>
+                                <div data-role="controlgroup">
+                                    <label for="chkEnableFullScreen">${LabelEnableFullScreen}</label>
+                                    <input type="checkbox" id="chkEnableFullScreen" />
+                                </div>
                             </div>
                         </div>
+
                     </div>
                 </div>
 
-                <div class="detailSection viewStylesSection" style="display:none;">
+                <div class="detailSection syncSettingsSection">
                     <div class="detailSectionHeader">
-                        ${HeaderViewStyles}
+                        ${HeaderSync}
                     </div>
                     <div class="detailSectionContent">
-                        <p>${LabelSelectViewStyles}</p>
-                        <div class="viewStylesList">
-
-                        </div>
-                        <div class="fieldDescription">${LabelSelectViewStylesHelp}</div>
-                    </div>
-                </div>
-
-                <div class="detailSection">
-                    <div class="detailSectionHeader">
-                        ${HeaderViewOrder}
-                    </div>
-                    <div class="detailSectionContent">
-                        <p>${LabelSelectUserViewOrder}</p>
-                        <div class="viewOrderList">
-
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="detailSection">
-                    <div class="detailSectionHeader">
-                        ${HeaderLatestItems}
-                    </div>
-                    <div class="detailSectionContent">
-                        <p>${LabelSelectLastestItemsFolders}</p>
-                        <div class="latestItemsList">
-
-                        </div>
-
                         <br />
-                        <div data-role="controlgroup">
-                            <label for="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</label>
-                            <input id="chkHidePlayedFromLatest" type="checkbox" />
+                        <div>
+                            <br />
+                            <div>
+                                <label for="txtSyncPath">${LabelSyncPath}</label>
+                                <div style="display: inline-block; width: 85%;">
+                                    <input type="text" id="txtSyncPath" readonly />
+                                </div>
+                                <button class="btnSelectSyncPath" type="button" data-icon="search" data-iconpos="notext" data-inline="true"></button>
+                            </div>
                         </div>
-                    </div>
 
+                    </div>
                 </div>
 
-                <div class="detailSection">
+                <div class="detailSection requiresUserPreferences">
                     <div class="detailSectionHeader">
-                        ${HeaderOtherDisplaySettings}
+                        ${HeaderDisplay}<span style="color:#52B54B;margin-left:.5em;">*</span>
                     </div>
                     <div class="detailSectionContent">
                         <br />
@@ -144,6 +130,9 @@
 
                     <paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                 </div>
+                <p>
+                    <span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
+                </p>
             </form>
         </div>
     </div>
diff --git a/dashboard-ui/mypreferenceshome.html b/dashboard-ui/mypreferenceshome.html
new file mode 100644
index 0000000000..d7e4a0f210
--- /dev/null
+++ b/dashboard-ui/mypreferenceshome.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Emby</title>
+</head>
+<body>
+    <div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferenceshome,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
+
+        <div class="libraryViewNav">
+            <a href="#" class="lnkDisplayPreferences">${TabGeneral}</a>
+            <a href="#" class="ui-btn-active lnkHomeScreenPreferences">${TabHomeScreen}</a>
+            <a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
+            <a href="#" class="lnkMyProfile">${TabProfile}</a>
+        </div>
+
+        <div data-role="content">
+            <br />
+            <form class="homeScreenPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
+
+                <div class="detailSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderHomePage}
+                    </div>
+
+                    <div class="detailSectionContent">
+                        <br />
+                        <div>
+                            <label for="selectHomeSection1">${LabelHomePageSection1}</label>
+                            <select id="selectHomeSection1" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="latestmedia">${OptionLatestMedia}</option>
+                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                                <option value="librarytiles">${OptionMyMedia}</option>
+                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                                <option value="resume">${OptionResumablemedia}</option>
+                            </select>
+                        </div>
+                        <br />
+                        <div>
+                            <label for="selectHomeSection2">${LabelHomePageSection2}</label>
+                            <select id="selectHomeSection2" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="latestmedia">${OptionLatestMedia}</option>
+                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                                <option value="librarytiles">${OptionMyMedia}</option>
+                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                                <option value="resume">${OptionResumablemedia}</option>
+                                <option value="none">${OptionNone}</option>
+                            </select>
+                        </div>
+                        <br />
+                        <div>
+                            <label for="selectHomeSection3">${LabelHomePageSection3}</label>
+                            <select id="selectHomeSection3" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="latestmedia">${OptionLatestMedia}</option>
+                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                                <option value="librarytiles">${OptionMyMedia}</option>
+                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                                <option value="resume">${OptionResumablemedia}</option>
+                                <option value="none">${OptionNone}</option>
+                            </select>
+                        </div>
+                        <br />
+                        <div>
+                            <label for="selectHomeSection4">${LabelHomePageSection4}</label>
+                            <select id="selectHomeSection4" data-mini="true">
+                                <option value="">${OptionAuto}</option>
+                                <option value="latestmedia">${OptionLatestMedia}</option>
+                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                                <option value="librarytiles">${OptionMyMedia}</option>
+                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                                <option value="resume">${OptionResumablemedia}</option>
+                                <option value="none">${OptionNone}</option>
+                            </select>
+                        </div>
+                        <br />
+                        <div>
+                            <label for="chkEnableLibraryTileNames">${LabelShowLibraryTileNames}</label>
+                            <input type="checkbox" id="chkEnableLibraryTileNames" data-mini="true">
+                            <div class="fieldDescription">${LabelShowLibraryTileNamesHelp}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderMyViews}<span style="color:#52B54B;margin-left:.5em;">*</span>
+                    </div>
+                    <div class="detailSectionContent">
+                        <div>
+                            <p>${LabelSelectFolderGroups}</p>
+                            <div class="folderGroupList"></div>
+                            <div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div>
+                        </div>
+                        <br />
+
+                        <div>
+                            <div data-role="controlgroup">
+                                <label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label>
+                                <input id="chkDisplayCollectionView" type="checkbox" />
+                            </div>
+                            <div class="fieldDescription">${LabelDisplayCollectionsViewHelp}</div>
+                        </div>
+
+                        <br />
+                        <div data-role="controlgroup">
+                            <label for="chkDisplayFolderView">${LabelDisplayFoldersView}</label>
+                            <input id="chkDisplayFolderView" type="checkbox" />
+                        </div>
+
+                        <br />
+                        <div data-role="collapsible">
+                            <h2>${HeaderChannels}</h2>
+                            <div>
+                                <p>${LabelGroupChannelsIntoViews}</p>
+                                <div class="channelGroupList"></div>
+                                <div class="fieldDescription">${LabelGroupChannelsIntoViewsHelp}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailSection viewStylesSection" style="display:none;">
+                    <div class="detailSectionHeader">
+                        ${HeaderViewStyles}<span style="color:#52B54B;margin-left:.5em;">*</span>
+                    </div>
+                    <div class="detailSectionContent">
+                        <p>${LabelSelectViewStyles}</p>
+                        <div class="viewStylesList">
+
+                        </div>
+                        <div class="fieldDescription">${LabelSelectViewStylesHelp}</div>
+                    </div>
+                </div>
+
+                <div class="detailSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderViewOrder}<span style="color:#52B54B;margin-left:.5em;">*</span>
+                    </div>
+                    <div class="detailSectionContent">
+                        <p>${LabelSelectUserViewOrder}</p>
+                        <div class="viewOrderList">
+
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="detailSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderLatestItems}<span style="color:#52B54B;margin-left:.5em;">*</span>
+                    </div>
+                    <div class="detailSectionContent">
+                        <p>${LabelSelectLastestItemsFolders}</p>
+                        <div class="latestItemsList">
+
+                        </div>
+
+                        <br />
+                        <div data-role="controlgroup">
+                            <label for="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</label>
+                            <input id="chkHidePlayedFromLatest" type="checkbox" />
+                        </div>
+                    </div>
+
+                </div>
+
+                <div>
+                    <button type="submit" data-role="none" class="clearButton">
+                        <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
+                    </button>
+
+                    <paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
+                </div>
+                <p>
+                    <span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
+                </p>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/dashboard-ui/mypreferenceslanguages.html b/dashboard-ui/mypreferenceslanguages.html
index 760e3f27b2..d4732bff97 100644
--- a/dashboard-ui/mypreferenceslanguages.html
+++ b/dashboard-ui/mypreferenceslanguages.html
@@ -8,10 +8,10 @@
     <div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferenceslanguages,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
 
         <div class="libraryViewNav">
-            <a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
+            <a href="#" class="lnkDisplayPreferences">${TabGeneral}</a>
+            <a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
             <a href="#" class="ui-btn-active lnkLanguagePreferences">${TabPlayback}</a>
             <a href="#" class="lnkMyProfile">${TabProfile}</a>
-            <a href="#" class="lnkWebClientPreferences">${TabAppSettings}</a>
         </div>
         <div data-role="content">
 
@@ -21,7 +21,7 @@
 
                 <div class="detailSection">
                     <div class="detailSectionHeader">
-                        ${HeaderLanguagePreferences}
+                        ${HeaderLanguagePreferences}<span style="color:#52B54B;margin-left:.5em;">*</span>
                     </div>
                     <div class="detailSectionContent">
                         <br />
@@ -58,7 +58,7 @@
                 </div>
                 <div class="detailSection cinemaModeOptions" style="display:none;">
                     <div class="detailSectionHeader">
-                        ${HeaderCinemaMode}
+                        ${HeaderCinemaMode}<span style="color:#52B54B;margin-left:.5em;">*</span>
                     </div>
                     <div class="detailSectionContent">
                         <br />
@@ -72,6 +72,87 @@
 
                 </div>
 
+                <div class="detailSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderAdvanced}
+                    </div>
+                    <div class="detailSectionContent">
+                        <br />
+                        <div>
+                            <label for="selectMaxBitrate">${LabelMaxStreamingBitrate}</label>
+                            <select id="selectMaxBitrate" data-mini="true">
+                                <option value="30000000">30Mbps</option>
+                                <option value="25000000">25Mbps</option>
+                                <option value="20000000">20Mbps</option>
+                                <option value="15000000">15Mbps</option>
+                                <option value="10000000">10Mbps</option>
+                                <option value="8000000">8Mbps</option>
+                                <option value="6000000">6Mbps</option>
+                                <option value="5000000">5Mbps</option>
+                                <option value="4000000">4Mbps</option>
+                                <option value="3000000">3Mbps</option>
+                                <option value="2500000">2.5Mbps</option>
+                                <option value="2000000">2Mbps</option>
+                                <option value="1500000">1.5Mbps</option>
+                                <option value="1000000">1Mbps</option>
+                                <option value="720000">720kbps</option>
+                                <option value="420000">420kbps</option>
+                                <option value="400000">400kbps</option>
+                                <option value="320000">320kbps</option>
+                                <option value="192000">192kbps</option>
+                            </select>
+                        </div>
+                        <br />
+                        <div>
+                            <label for="selectMaxChromecastBitrate">${LabelMaxChromecastBitrate}</label>
+                            <select id="selectMaxChromecastBitrate" data-mini="true">
+                                <option value="30000000">30Mbps</option>
+                                <option value="25000000">25Mbps</option>
+                                <option value="20000000">20Mbps</option>
+                                <option value="15000000">15Mbps</option>
+                                <option value="12000000">12Mbps</option>
+                                <option value="11000000">11Mbps</option>
+                                <option value="10000000">10Mbps</option>
+                                <option value="9000000">9Mbps</option>
+                                <option value="8000000">8Mbps</option>
+                                <option value="7000000">7Mbps</option>
+                                <option value="6000000">6Mbps</option>
+                                <option value="5000000">5Mbps</option>
+                                <option value="4000000">4Mbps</option>
+                                <option value="3000000">3Mbps</option>
+                                <option value="2500000">2.5Mbps</option>
+                                <option value="2000000">2Mbps</option>
+                                <option value="1500000">1.5Mbps</option>
+                                <option value="1000000">1Mbps</option>
+                                <option value="720000">720kbps</option>
+                                <option value="420000">420kbps</option>
+                                <option value="400000">400kbps</option>
+                                <option value="320000">320kbps</option>
+                                <option value="192000">192kbps</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <br />
+                            <div>
+                                <label for="chkEnableChromecastAc3">${LabelEnableChromecastAc3Passthrough}</label>
+                                <input type="checkbox" id="chkEnableChromecastAc3" data-mini="true" />
+                            </div>
+                        </div>
+
+                        <br />
+                        <div>
+                            <fieldset data-role="controlgroup">
+                                <legend>${LabelExternalPlayers}</legend>
+                                <input type="checkbox" id="chkExternalVideoPlayer" />
+                                <label for="chkExternalVideoPlayer">${OptionEnableExternalVideoPlayers}</label>
+                            </fieldset>
+                            <div style="padding: 0 2px;display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
+                            <div style="padding: 0 2px;display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
+                        </div>
+                    </div>
+                </div>
+
                 <div>
                     <button type="submit" data-role="none" class="clearButton">
                         <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
@@ -79,6 +160,9 @@
 
                     <paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                 </div>
+                <p>
+                    <span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
+                </p>
             </form>
         </div>
     </div>
diff --git a/dashboard-ui/mypreferenceswebclient.html b/dashboard-ui/mypreferenceswebclient.html
deleted file mode 100644
index f4222458a6..0000000000
--- a/dashboard-ui/mypreferenceswebclient.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <title>Emby</title>
-</head>
-<body>
-    <div id="webClientPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferenceswebclient,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
-
-        <div class="libraryViewNav">
-            <a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
-            <a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
-            <a href="#" class="lnkMyProfile">${TabProfile}</a>
-            <a href="#" class="ui-btn-active lnkWebClientPreferences">${TabAppSettings}</a>
-        </div>
-
-        <div data-role="content">
-            <br />
-            <form class="webClientPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
-
-                <div class="detailSection homePageConfigurationSection" style="display:none;">
-                    <div class="detailSectionHeader">
-                        ${HeaderHomePage}
-                    </div>
-
-                    <div class="detailSectionContent">
-                        <br />
-                        <div>
-                            <label for="selectHomeSection1">${LabelHomePageSection1}</label>
-                            <select id="selectHomeSection1" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="latestmedia">${OptionLatestMedia}</option>
-                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                                <option value="librarytiles">${OptionMyMedia}</option>
-                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                                <option value="resume">${OptionResumablemedia}</option>
-                            </select>
-                        </div>
-                        <br />
-                        <div>
-                            <label for="selectHomeSection2">${LabelHomePageSection2}</label>
-                            <select id="selectHomeSection2" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="latestmedia">${OptionLatestMedia}</option>
-                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                                <option value="librarytiles">${OptionMyMedia}</option>
-                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                                <option value="resume">${OptionResumablemedia}</option>
-                                <option value="none">${OptionNone}</option>
-                            </select>
-                        </div>
-                        <br />
-                        <div>
-                            <label for="selectHomeSection3">${LabelHomePageSection3}</label>
-                            <select id="selectHomeSection3" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="latestmedia">${OptionLatestMedia}</option>
-                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                                <option value="librarytiles">${OptionMyMedia}</option>
-                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                                <option value="resume">${OptionResumablemedia}</option>
-                                <option value="none">${OptionNone}</option>
-                            </select>
-                        </div>
-                        <br />
-                        <div>
-                            <label for="selectHomeSection4">${LabelHomePageSection4}</label>
-                            <select id="selectHomeSection4" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="latestmedia">${OptionLatestMedia}</option>
-                                <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                                <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                                <option value="librarytiles">${OptionMyMedia}</option>
-                                <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                                <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                                <option value="resume">${OptionResumablemedia}</option>
-                                <option value="none">${OptionNone}</option>
-                            </select>
-                        </div>
-                        <br />
-                        <div>
-                            <label for="chkEnableLibraryTileNames">${LabelShowLibraryTileNames}</label>
-                            <input type="checkbox" id="chkEnableLibraryTileNames" data-mini="true">
-                            <div class="fieldDescription">${LabelShowLibraryTileNamesHelp}</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="detailSection">
-                    <div class="detailSectionHeader">
-                        ${HeaderSettingsForThisDevice}
-                    </div>
-                    <div class="detailSectionContent">
-                        <br />
-                        <div>
-                            <label for="selectMaxBitrate">${LabelMaxStreamingBitrate}</label>
-                            <select id="selectMaxBitrate" data-mini="true">
-                                <option value="30000000">30Mbps</option>
-                                <option value="25000000">25Mbps</option>
-                                <option value="20000000">20Mbps</option>
-                                <option value="15000000">15Mbps</option>
-                                <option value="10000000">10Mbps</option>
-                                <option value="8000000">8Mbps</option>
-                                <option value="6000000">6Mbps</option>
-                                <option value="5000000">5Mbps</option>
-                                <option value="4000000">4Mbps</option>
-                                <option value="3000000">3Mbps</option>
-                                <option value="2500000">2.5Mbps</option>
-                                <option value="2000000">2Mbps</option>
-                                <option value="1500000">1.5Mbps</option>
-                                <option value="1000000">1Mbps</option>
-                                <option value="720000">720kbps</option>
-                                <option value="420000">420kbps</option>
-                                <option value="400000">400kbps</option>
-                                <option value="320000">320kbps</option>
-                                <option value="192000">192kbps</option>
-                            </select>
-                        </div>
-                        <br />
-                        <div>
-                            <label for="selectMaxChromecastBitrate">${LabelMaxChromecastBitrate}</label>
-                            <select id="selectMaxChromecastBitrate" data-mini="true">
-                                <option value="30000000">30Mbps</option>
-                                <option value="25000000">25Mbps</option>
-                                <option value="20000000">20Mbps</option>
-                                <option value="15000000">15Mbps</option>
-                                <option value="12000000">12Mbps</option>
-                                <option value="11000000">11Mbps</option>
-                                <option value="10000000">10Mbps</option>
-                                <option value="9000000">9Mbps</option>
-                                <option value="8000000">8Mbps</option>
-                                <option value="7000000">7Mbps</option>
-                                <option value="6000000">6Mbps</option>
-                                <option value="5000000">5Mbps</option>
-                                <option value="4000000">4Mbps</option>
-                                <option value="3000000">3Mbps</option>
-                                <option value="2500000">2.5Mbps</option>
-                                <option value="2000000">2Mbps</option>
-                                <option value="1500000">1.5Mbps</option>
-                                <option value="1000000">1Mbps</option>
-                                <option value="720000">720kbps</option>
-                                <option value="420000">420kbps</option>
-                                <option value="400000">400kbps</option>
-                                <option value="320000">320kbps</option>
-                                <option value="192000">192kbps</option>
-                            </select>
-                        </div>
-
-                        <div>
-                            <br />
-                            <div>
-                                <label for="chkEnableChromecastAc3">${LabelEnableChromecastAc3Passthrough}</label>
-                                <input type="checkbox" id="chkEnableChromecastAc3" data-mini="true" />
-                            </div>
-                        </div>
-
-                        <br />
-                        <div>
-                            <fieldset data-role="controlgroup">
-                                <legend>${LabelExternalPlayers}</legend>
-                                <input type="checkbox" id="chkExternalVideoPlayer" />
-                                <label for="chkExternalVideoPlayer">${OptionEnableExternalVideoPlayers}</label>
-                            </fieldset>
-                            <div style="padding: 0 2px;display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
-                            <div style="padding: 0 2px;display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
-                        </div>
-                        <br />
-                        <br />
-                        <div>
-                            <label for="selectThemeSong">${LabelEnableThemeSongs}</label>
-                            <select id="selectThemeSong" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="1">${OptionYes}</option>
-                                <option value="0">${OptionNo}</option>
-                            </select>
-                            <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
-                        </div>
-                        <br />
-                        <div class="fldEnableBackdrops" style="display:none;">
-                            <label for="selectBackdrop">${LabelEnableBackdrops}</label>
-                            <select id="selectBackdrop" data-mini="true">
-                                <option value="">${OptionAuto}</option>
-                                <option value="1">${OptionYes}</option>
-                                <option value="0">${OptionNo}</option>
-                            </select>
-                            <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
-                        </div>
-
-                        <br />
-                        <div>
-                            <label for="selectEnableItemPreviews">${LabelEnableItemPreviews}</label>
-                            <select id="selectEnableItemPreviews" data-mini="true">
-                                <option value="true">${OptionYes}</option>
-                                <option value="false">${OptionNo}</option>
-                            </select>
-                            <div>${LabelEnableItemPreviewsHelp}</div>
-                        </div>
-
-                        <div class="fldFullscreen">
-                            <br />
-                            <div>
-                                <div data-role="controlgroup">
-                                    <label for="chkEnableFullScreen">${LabelEnableFullScreen}</label>
-                                    <input type="checkbox" id="chkEnableFullScreen" />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="fldSyncPath">
-                            <br />
-                            <div>
-                                <label for="txtSyncPath">${LabelSyncPath}</label>
-                                <div style="display: inline-block; width: 85%;">
-                                    <input type="text" id="txtSyncPath" readonly />
-                                </div>
-                                <button class="btnSelectSyncPath" type="button" data-icon="search" data-iconpos="notext" data-inline="true"></button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div>
-                    <button type="submit" data-role="none" class="clearButton">
-                        <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
-                    </button>
-
-                    <paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
-                </div>
-            </form>
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/dashboard-ui/myprofile.html b/dashboard-ui/myprofile.html
index 412e4bf5a6..2a3396f5af 100644
--- a/dashboard-ui/myprofile.html
+++ b/dashboard-ui/myprofile.html
@@ -8,9 +8,9 @@
 
         <div class="libraryViewNav">
             <a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
+            <a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
             <a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
             <a href="#" class="ui-btn-active lnkMyProfile">${TabProfile}</a>
-            <a href="#" class="lnkWebClientPreferences">${TabAppSettings}</a>
         </div>
 
         <div data-role="content">
diff --git a/dashboard-ui/scripts/appsettings.js b/dashboard-ui/scripts/appsettings.js
index ce8b2b9425..e132c3d234 100644
--- a/dashboard-ui/scripts/appsettings.js
+++ b/dashboard-ui/scripts/appsettings.js
@@ -63,8 +63,15 @@
             }
 
             return appStorage.getItem('syncPath');
-        }
+        },
 
+        displayPreferencesKey: function() {
+            if (AppInfo.isNativeApp) {
+                return 'Emby Mobile';
+            }
+
+            return 'webclient';
+        }
     };
 
 
diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js
index e1750be5f8..bde67f7f3e 100644
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@@ -107,7 +107,7 @@
         getDisplayPreferences('home', userId).done(function (result) {
 
             result.CustomPrefs[homePageTourKey] = homePageDismissValue;
-            ApiClient.updateDisplayPreferences('home', result, userId, getDisplayPreferencesAppName());
+            ApiClient.updateDisplayPreferences('home', result, userId, AppSettings.displayPreferencesKey());
         });
     }
 
@@ -249,18 +249,9 @@
 
     });
 
-    function getDisplayPreferencesAppName() {
-
-        if (AppInfo.isNativeApp) {
-            return 'Emby Mobile';
-        }
-
-        return 'webclient';
-    }
-
     function getDisplayPreferences(key, userId) {
 
-        return ApiClient.getDisplayPreferences(key, userId, getDisplayPreferencesAppName()).done(function (result) {
+        return ApiClient.getDisplayPreferences(key, userId, AppSettings.displayPreferencesKey()).done(function (result) {
 
         });
     }
diff --git a/dashboard-ui/scripts/mypreferencescommon.js b/dashboard-ui/scripts/mypreferencescommon.js
index 15d49f334d..e1927b96d2 100644
--- a/dashboard-ui/scripts/mypreferencescommon.js
+++ b/dashboard-ui/scripts/mypreferencescommon.js
@@ -6,6 +6,6 @@
 
     $('.lnkDisplayPreferences', page).attr('href', 'mypreferencesdisplay.html?userId=' + userId);
     $('.lnkLanguagePreferences', page).attr('href', 'mypreferenceslanguages.html?userId=' + userId);
-    $('.lnkWebClientPreferences', page).attr('href', 'mypreferenceswebclient.html?userId=' + userId);
+    $('.lnkHomeScreenPreferences', page).attr('href', 'mypreferenceshome.html?userId=' + userId);
     $('.lnkMyProfile', page).attr('href', 'myprofile.html?userId=' + userId);
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mypreferencesdisplay.js b/dashboard-ui/scripts/mypreferencesdisplay.js
index 37a5a0c37c..ee02385408 100644
--- a/dashboard-ui/scripts/mypreferencesdisplay.js
+++ b/dashboard-ui/scripts/mypreferencesdisplay.js
@@ -1,163 +1,6 @@
 (function ($, window, document) {
 
-    function renderViews(page, user, result) {
-
-        var folderHtml = '';
-
-        folderHtml += '<div data-role="controlgroup">';
-        folderHtml += result.Items.map(function (i) {
-
-            var currentHtml = '';
-
-            var id = 'chkGroupFolder' + i.Id;
-
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
-            var isChecked = (user.Configuration.ExcludeFoldersFromGrouping != null && user.Configuration.ExcludeFoldersFromGrouping.indexOf(i.Id) == -1) ||
-                user.Configuration.GroupedFolders.indexOf(i.Id) != -1;
-
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
-
-            currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
-
-            return currentHtml;
-
-        }).join('');
-
-        folderHtml += '</div>';
-
-        $('.folderGroupList', page).html(folderHtml).trigger('create');
-    }
-
-    function renderViewStyles(page, user, result) {
-
-        var folderHtml = '';
-
-        folderHtml += '<div data-role="controlgroup">';
-        folderHtml += result.map(function (i) {
-
-            var currentHtml = '';
-
-            var id = 'chkPlainFolder' + i.Id;
-
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
-            var isChecked = user.Configuration.PlainFolderViews.indexOf(i.Id) == -1;
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
-
-            currentHtml += '<input class="chkPlainFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
-
-            return currentHtml;
-
-        }).join('');
-
-        folderHtml += '</div>';
-
-        $('.viewStylesList', page).html(folderHtml).trigger('create');
-
-        if (result.length) {
-            $('.viewStylesSection', page).show();
-        } else {
-            $('.viewStylesSection', page).hide();
-        }
-    }
-
-    function renderLatestItems(page, user, result) {
-
-        var folderHtml = '';
-
-        folderHtml += '<div data-role="controlgroup">';
-        folderHtml += result.Items.map(function (i) {
-
-            var currentHtml = '';
-
-            var id = 'chkIncludeInLatest' + i.Id;
-
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
-            var isChecked = user.Configuration.LatestItemsExcludes.indexOf(i.Id) == -1;
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
-
-            currentHtml += '<input class="chkIncludeInLatest" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
-
-            return currentHtml;
-
-        }).join('');
-
-        folderHtml += '</div>';
-
-        $('.latestItemsList', page).html(folderHtml).trigger('create');
-    }
-
-    function renderChannels(page, user, result) {
-
-        var folderHtml = '';
-
-        folderHtml += '<div data-role="controlgroup">';
-        folderHtml += result.Items.map(function (i) {
-
-            var currentHtml = '';
-
-            var id = 'chkGroupChannel' + i.Id;
-
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
-            var isChecked = user.Configuration.DisplayChannelsWithinViews.indexOf(i.Id) != -1;
-            var checkedHtml = isChecked ? ' checked="checked"' : '';
-
-            currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
-
-            return currentHtml;
-
-        }).join('');
-
-        folderHtml += '</div>';
-
-        $('.channelGroupList', page).html(folderHtml).trigger('create');
-    }
-
-    function renderViewOrder(page, user, result) {
-
-        var html = '';
-
-        html += '<ul data-role="listview" data-inset="true" data-mini="true">';
-        var index = 0;
-
-        html += result.Items.map(function (view) {
-
-            var currentHtml = '';
-
-            currentHtml += '<li data-mini="true" class="viewItem" data-viewid="' + view.Id + '">';
-
-            if (index > 0) {
-                currentHtml += '<a href="#">' + view.Name + '</a>';
-
-                currentHtml += '<a class="btnViewItemUp btnViewItemMove" href="#" data-icon="arrow-u">' + Globalize.translate('ButtonUp') + '</a>';
-            }
-            else if (result.Items.length > 1) {
-
-                currentHtml += '<a href="#">' + view.Name + '</a>';
-
-                currentHtml += '<a class="btnViewItemDown btnViewItemMove" href="#" data-icon="arrow-d">' + Globalize.translate('ButtonDown') + '</a>';
-            }
-            else {
-
-                currentHtml += view.Name;
-
-            }
-            html += '</li>';
-
-            index++;
-            return currentHtml;
-
-        }).join('');
-
-        html += '</ul>';
-
-        $('.viewOrderList', page).html(html).trigger('create');
-    }
-
-    function loadForm(page, user, hideMsg) {
+    function loadForm(page, user) {
 
         $('#chkDisplayMissingEpisodes', page).checked(user.Configuration.DisplayMissingEpisodes || false).checkboxradio("refresh");
         $('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
@@ -165,32 +8,17 @@
         $('#chkDisplayTrailersWithinMovieSuggestions', page).checked(user.Configuration.IncludeTrailersInSuggestions || false).checkboxradio("refresh");
 
         $('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
-        $('#chkDisplayCollectionView', page).checked(user.Configuration.DisplayCollectionsView || false).checkboxradio("refresh");
-        $('#chkDisplayFolderView', page).checked(user.Configuration.DisplayFoldersView || false).checkboxradio("refresh");
 
-        $('#chkHidePlayedFromLatest', page).checked(user.Configuration.HidePlayedInLatest || false).checkboxradio("refresh");
+        $('#selectThemeSong', page).val(appStorage.getItem('enableThemeSongs-' + user.Id) || '').selectmenu("refresh");
+        $('#selectBackdrop', page).val(appStorage.getItem('enableBackdrops-' + user.Id) || '').selectmenu("refresh");
 
-        var promise1 = ApiClient.getItems(user.Id, {
-            sortBy: "SortName"
-        });
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl("Channels", {
-            UserId: user.Id
-        }));
-        var promise3 = ApiClient.getUserViews(user.Id);
-        var promise4 = ApiClient.getJSON(ApiClient.getUrl("Users/" + user.Id + "/SpecialViewOptions"));
+        $('#selectEnableItemPreviews', page).val(AppSettings.enableItemPreviews().toString().toLowerCase()).selectmenu("refresh");
 
-        $.when(promise1, promise2, promise3, promise4).done(function (r1, r2, r3, r4) {
+        $('#chkEnableFullScreen', page).checked(AppSettings.enableFullScreen()).checkboxradio("refresh");
 
-            renderViews(page, user, r1[0]);
-            renderLatestItems(page, user, r1[0]);
-            renderChannels(page, user, r2[0]);
-            renderViewOrder(page, user, r3[0]);
-            renderViewStyles(page, user, r4[0]);
+        $('#txtSyncPath', page).val(AppSettings.syncPath());
 
-            if (hideMsg !== false) {
-                Dashboard.hideLoadingMsg();
-            }
-        });
+        Dashboard.hideLoadingMsg();
     }
 
     function saveUser(page, user) {
@@ -198,40 +26,15 @@
         user.Configuration.DisplayMissingEpisodes = $('#chkDisplayMissingEpisodes', page).checked();
         user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
         user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
-
-        user.Configuration.DisplayCollectionsView = $('#chkDisplayCollectionView', page).checked();
-        user.Configuration.DisplayFoldersView = $('#chkDisplayFolderView', page).checked();
-
-        user.Configuration.HidePlayedInLatest = $('#chkHidePlayedFromLatest', page).checked();
-
         user.Configuration.IncludeTrailersInSuggestions = $('#chkDisplayTrailersWithinMovieSuggestions', page).checked();
 
-        user.Configuration.LatestItemsExcludes = $(".chkIncludeInLatest:not(:checked)", page).get().map(function (i) {
+        AppSettings.enableItemPreviews($('#selectEnableItemPreviews', page).val() == 'true');
+        AppSettings.enableFullScreen($('#chkEnableFullScreen', page).checked());
 
-            return i.getAttribute('data-folderid');
-        });
+        appStorage.setItem('enableThemeSongs-' + user.Id, $('#selectThemeSong', page).val());
+        appStorage.setItem('enableBackdrops-' + user.Id, $('#selectBackdrop', page).val());
 
-        user.Configuration.ExcludeFoldersFromGrouping = null;
-
-        user.Configuration.GroupedFolders = $(".chkGroupFolder:checked", page).get().map(function (i) {
-
-            return i.getAttribute('data-folderid');
-        });
-
-        user.Configuration.PlainFolderViews = $(".chkPlainFolder:not(:checked)", page).get().map(function (i) {
-
-            return i.getAttribute('data-folderid');
-        });
-
-        user.Configuration.DisplayChannelsWithinViews = $(".chkGroupChannel:checked", page).get().map(function (i) {
-
-            return i.getAttribute('data-channelid');
-        });
-
-        user.Configuration.OrderedViews = $(".viewItem", page).get().map(function (i) {
-
-            return i.getAttribute('data-viewid');
-        });
+        AppSettings.syncPath($('#txtSyncPath', page).val());
 
         ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
             Dashboard.alert(Globalize.translate('SettingsSaved'));
@@ -262,39 +65,17 @@
 
         var page = this;
 
-        $('.viewOrderList', page).on('click', '.btnViewItemMove', function () {
-
-            var li = $(this).parents('.viewItem');
-            var ul = li.parents('ul');
-
-            if ($(this).hasClass('btnViewItemDown')) {
-
-                var next = li.next();
-
-                li.remove().insertAfter(next);
-
-            } else {
-
-                var prev = li.prev();
-
-                li.remove().insertBefore(prev);
-            }
-
-            $('.viewItem', ul).each(function () {
-
-                if ($(this).prev('.viewItem').length) {
-                    $('.btnViewItemMove', this).addClass('btnViewItemUp').removeClass('btnViewItemDown').attr('data-icon', 'arrow-u').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
-                } else {
-                    $('.btnViewItemMove', this).addClass('btnViewItemDown').removeClass('btnViewItemUp').attr('data-icon', 'arrow-d').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
-                }
-
-            });
-
-            ul.listview('destroy').listview({});
-        });
-
         $('.displayPreferencesForm').off('submit', onSubmit).on('submit', onSubmit);
 
+        $('.btnSelectSyncPath', page).on('click', function () {
+
+            require(['nativedirectorychooser'], function () {
+                NativeDirectoryChooser.chooseDirectory().done(function (path) {
+                    $('#txtSyncPath', page).val(path);
+                });
+            });
+        });
+
     }).on('pageshowready', "#displayPreferencesPage", function () {
 
         var page = this;
@@ -307,7 +88,26 @@
 
             loadForm(page, user);
 
+            if (user.Policy.EnableUserPreferenceAccess) {
+                $('.requiresUserPreferences', page).show();
+            } else {
+                $('.requiresUserPreferences', page).hide();
+            }
         });
+
+        $('.fldEnableBackdrops', page).show();
+
+        if (AppInfo.supportsFullScreen) {
+            $('.fldFullscreen', page).show();
+        } else {
+            $('.fldFullscreen', page).hide();
+        }
+
+        if (AppInfo.supportsSyncPathSetting) {
+            $('.syncSettingsSection', page).show();
+        } else {
+            $('.syncSettingsSection', page).hide();
+        }
     });
 
 })(jQuery, window, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mypreferenceshome.js b/dashboard-ui/scripts/mypreferenceshome.js
new file mode 100644
index 0000000000..6ed2533dd1
--- /dev/null
+++ b/dashboard-ui/scripts/mypreferenceshome.js
@@ -0,0 +1,322 @@
+(function ($, window, document) {
+
+    function renderViews(page, user, result) {
+
+        var folderHtml = '';
+
+        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += result.Items.map(function (i) {
+
+            var currentHtml = '';
+
+            var id = 'chkGroupFolder' + i.Id;
+
+            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
+
+            var isChecked = (user.Configuration.ExcludeFoldersFromGrouping != null && user.Configuration.ExcludeFoldersFromGrouping.indexOf(i.Id) == -1) ||
+                user.Configuration.GroupedFolders.indexOf(i.Id) != -1;
+
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+
+            return currentHtml;
+
+        }).join('');
+
+        folderHtml += '</div>';
+
+        $('.folderGroupList', page).html(folderHtml).trigger('create');
+    }
+
+    function renderViewStyles(page, user, result) {
+
+        var folderHtml = '';
+
+        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += result.map(function (i) {
+
+            var currentHtml = '';
+
+            var id = 'chkPlainFolder' + i.Id;
+
+            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
+
+            var isChecked = user.Configuration.PlainFolderViews.indexOf(i.Id) == -1;
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            currentHtml += '<input class="chkPlainFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+
+            return currentHtml;
+
+        }).join('');
+
+        folderHtml += '</div>';
+
+        $('.viewStylesList', page).html(folderHtml).trigger('create');
+
+        if (result.length) {
+            $('.viewStylesSection', page).show();
+        } else {
+            $('.viewStylesSection', page).hide();
+        }
+    }
+
+    function renderLatestItems(page, user, result) {
+
+        var folderHtml = '';
+
+        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += result.Items.map(function (i) {
+
+            var currentHtml = '';
+
+            var id = 'chkIncludeInLatest' + i.Id;
+
+            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
+
+            var isChecked = user.Configuration.LatestItemsExcludes.indexOf(i.Id) == -1;
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            currentHtml += '<input class="chkIncludeInLatest" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+
+            return currentHtml;
+
+        }).join('');
+
+        folderHtml += '</div>';
+
+        $('.latestItemsList', page).html(folderHtml).trigger('create');
+    }
+
+    function renderChannels(page, user, result) {
+
+        var folderHtml = '';
+
+        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += result.Items.map(function (i) {
+
+            var currentHtml = '';
+
+            var id = 'chkGroupChannel' + i.Id;
+
+            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
+
+            var isChecked = user.Configuration.DisplayChannelsWithinViews.indexOf(i.Id) != -1;
+            var checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+
+            return currentHtml;
+
+        }).join('');
+
+        folderHtml += '</div>';
+
+        $('.channelGroupList', page).html(folderHtml).trigger('create');
+    }
+
+    function renderViewOrder(page, user, result) {
+
+        var html = '';
+
+        html += '<ul data-role="listview" data-inset="true" data-mini="true">';
+        var index = 0;
+
+        html += result.Items.map(function (view) {
+
+            var currentHtml = '';
+
+            currentHtml += '<li data-mini="true" class="viewItem" data-viewid="' + view.Id + '">';
+
+            if (index > 0) {
+                currentHtml += '<a href="#">' + view.Name + '</a>';
+
+                currentHtml += '<a class="btnViewItemUp btnViewItemMove" href="#" data-icon="arrow-u">' + Globalize.translate('ButtonUp') + '</a>';
+            }
+            else if (result.Items.length > 1) {
+
+                currentHtml += '<a href="#">' + view.Name + '</a>';
+
+                currentHtml += '<a class="btnViewItemDown btnViewItemMove" href="#" data-icon="arrow-d">' + Globalize.translate('ButtonDown') + '</a>';
+            }
+            else {
+
+                currentHtml += view.Name;
+
+            }
+            html += '</li>';
+
+            index++;
+            return currentHtml;
+
+        }).join('');
+
+        html += '</ul>';
+
+        $('.viewOrderList', page).html(html).trigger('create');
+    }
+
+    function loadForm(page, user, displayPreferences) {
+
+        $('#chkDisplayCollectionView', page).checked(user.Configuration.DisplayCollectionsView || false).checkboxradio("refresh");
+        $('#chkDisplayFolderView', page).checked(user.Configuration.DisplayFoldersView || false).checkboxradio("refresh");
+
+        $('#chkHidePlayedFromLatest', page).checked(user.Configuration.HidePlayedInLatest || false).checkboxradio("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");
+        $('#selectHomeSection4', page).val(displayPreferences.CustomPrefs.home3 || '').selectmenu("refresh");
+
+        $('#chkEnableLibraryTileNames', page).checked(displayPreferences.CustomPrefs.enableLibraryTileNames != '0').checkboxradio("refresh");
+
+        var promise1 = ApiClient.getItems(user.Id, {
+            sortBy: "SortName"
+        });
+        var promise2 = ApiClient.getJSON(ApiClient.getUrl("Channels", {
+            UserId: user.Id
+        }));
+        var promise3 = ApiClient.getUserViews(user.Id);
+        var promise4 = ApiClient.getJSON(ApiClient.getUrl("Users/" + user.Id + "/SpecialViewOptions"));
+
+        $.when(promise1, promise2, promise3, promise4).done(function (r1, r2, r3, r4) {
+
+            renderViews(page, user, r1[0]);
+            renderLatestItems(page, user, r1[0]);
+            renderChannels(page, user, r2[0]);
+            renderViewOrder(page, user, r3[0]);
+            renderViewStyles(page, user, r4[0]);
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function saveUser(page, user, displayPreferences) {
+
+        user.Configuration.DisplayCollectionsView = $('#chkDisplayCollectionView', page).checked();
+        user.Configuration.DisplayFoldersView = $('#chkDisplayFolderView', page).checked();
+
+        user.Configuration.HidePlayedInLatest = $('#chkHidePlayedFromLatest', page).checked();
+
+        user.Configuration.LatestItemsExcludes = $(".chkIncludeInLatest:not(:checked)", page).get().map(function (i) {
+
+            return i.getAttribute('data-folderid');
+        });
+
+        user.Configuration.ExcludeFoldersFromGrouping = null;
+
+        user.Configuration.GroupedFolders = $(".chkGroupFolder:checked", page).get().map(function (i) {
+
+            return i.getAttribute('data-folderid');
+        });
+
+        user.Configuration.PlainFolderViews = $(".chkPlainFolder:not(:checked)", page).get().map(function (i) {
+
+            return i.getAttribute('data-folderid');
+        });
+
+        user.Configuration.DisplayChannelsWithinViews = $(".chkGroupChannel:checked", page).get().map(function (i) {
+
+            return i.getAttribute('data-channelid');
+        });
+
+        user.Configuration.OrderedViews = $(".viewItem", page).get().map(function (i) {
+
+            return i.getAttribute('data-viewid');
+        });
+
+        displayPreferences.CustomPrefs.home0 = $('#selectHomeSection1', page).val();
+        displayPreferences.CustomPrefs.home1 = $('#selectHomeSection2', page).val();
+        displayPreferences.CustomPrefs.home2 = $('#selectHomeSection3', page).val();
+        displayPreferences.CustomPrefs.home3 = $('#selectHomeSection4', page).val();
+        displayPreferences.CustomPrefs.enableLibraryTileNames = $('#chkEnableLibraryTileNames', page).checked() ? '1' : '0';
+
+        ApiClient.updateDisplayPreferences('home', displayPreferences, user.Id, AppSettings.displayPreferencesKey()).done(function() {
+            
+            ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
+                Dashboard.alert(Globalize.translate('SettingsSaved'));
+
+                loadForm(page, user, displayPreferences);
+            });
+        });
+    }
+
+    function onSubmit() {
+
+        var page = $(this).parents('.page');
+
+        Dashboard.showLoadingMsg();
+
+        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+
+        ApiClient.getUser(userId).done(function (user) {
+
+            ApiClient.getDisplayPreferences('home', user.Id, AppSettings.displayPreferencesKey()).done(function (displayPreferences) {
+
+                saveUser(page, user, displayPreferences);
+
+            });
+
+        });
+
+        // Disable default form submission
+        return false;
+    }
+
+    $(document).on('pageinitdepends', "#homeScreenPreferencesPage", function () {
+
+        var page = this;
+
+        $('.viewOrderList', page).on('click', '.btnViewItemMove', function () {
+
+            var li = $(this).parents('.viewItem');
+            var ul = li.parents('ul');
+
+            if ($(this).hasClass('btnViewItemDown')) {
+
+                var next = li.next();
+
+                li.remove().insertAfter(next);
+
+            } else {
+
+                var prev = li.prev();
+
+                li.remove().insertBefore(prev);
+            }
+
+            $('.viewItem', ul).each(function () {
+
+                if ($(this).prev('.viewItem').length) {
+                    $('.btnViewItemMove', this).addClass('btnViewItemUp').removeClass('btnViewItemDown').attr('data-icon', 'arrow-u').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
+                } else {
+                    $('.btnViewItemMove', this).addClass('btnViewItemDown').removeClass('btnViewItemUp').attr('data-icon', 'arrow-d').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
+                }
+
+            });
+
+            ul.listview('destroy').listview({});
+        });
+
+        $('.homeScreenPreferencesForm').off('submit', onSubmit).on('submit', onSubmit);
+
+    }).on('pageshowready', "#homeScreenPreferencesPage", function () {
+
+        var page = this;
+
+        Dashboard.showLoadingMsg();
+
+        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+
+        ApiClient.getUser(userId).done(function (user) {
+
+            ApiClient.getDisplayPreferences('home', user.Id, AppSettings.displayPreferencesKey()).done(function (result) {
+
+                loadForm(page, user, result);
+
+            });
+        });
+    });
+
+})(jQuery, window, document);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mypreferenceslanguages.js b/dashboard-ui/scripts/mypreferenceslanguages.js
index 2e0f6d7e86..6fa0492cd8 100644
--- a/dashboard-ui/scripts/mypreferenceslanguages.js
+++ b/dashboard-ui/scripts/mypreferenceslanguages.js
@@ -31,6 +31,11 @@
         $('#chkPlayDefaultAudioTrack', page).checked(user.Configuration.PlayDefaultAudioTrack || false).checkboxradio("refresh");
         $('#chkEnableCinemaMode', page).checked(user.Configuration.EnableCinemaMode || false).checkboxradio("refresh");
 
+        $('#chkEnableChromecastAc3', page).checked(AppSettings.enableChromecastAc3()).checkboxradio("refresh");
+        $('#chkExternalVideoPlayer', page).checked(AppSettings.enableExternalPlayers()).checkboxradio("refresh");
+        $('#selectMaxBitrate', page).val(AppSettings.maxStreamingBitrate()).selectmenu("refresh");
+        $('#selectMaxChromecastBitrate', page).val(AppSettings.maxChromecastBitrate()).selectmenu("refresh");
+
         Dashboard.hideLoadingMsg();
     }
 
@@ -82,6 +87,11 @@
 
         Dashboard.showLoadingMsg();
 
+        AppSettings.enableExternalPlayers($('#chkExternalVideoPlayer', page).checked());
+        AppSettings.maxStreamingBitrate($('#selectMaxBitrate', page).val());
+        AppSettings.maxChromecastBitrate($('#selectMaxChromecastBitrate', page).val());
+        AppSettings.enableChromecastAc3($('#chkEnableChromecastAc3', page).checked());
+
         var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
 
         ApiClient.getUser(userId).done(function (result) {
@@ -111,6 +121,14 @@
 
         var page = this;
 
+        if (AppInfo.hasKnownExternalPlayerSupport) {
+            $('.labelNativeExternalPlayers', page).show();
+            $('.labelGenericExternalPlayers', page).hide();
+        } else {
+            $('.labelGenericExternalPlayers', page).show();
+            $('.labelNativeExternalPlayers', page).hide();
+        }
+
         loadPage(page);
     });
 
diff --git a/dashboard-ui/scripts/mypreferenceswebclient.js b/dashboard-ui/scripts/mypreferenceswebclient.js
deleted file mode 100644
index 48bade203c..0000000000
--- a/dashboard-ui/scripts/mypreferenceswebclient.js
+++ /dev/null
@@ -1,136 +0,0 @@
-(function ($, window, document) {
-
-    function loadForm(page, userId, displayPreferences) {
-
-        $('#selectMaxBitrate', page).val(AppSettings.maxStreamingBitrate()).selectmenu("refresh");
-        $('#selectMaxChromecastBitrate', page).val(AppSettings.maxChromecastBitrate()).selectmenu("refresh");
-
-        $('#chkExternalVideoPlayer', page).checked(AppSettings.enableExternalPlayers()).checkboxradio("refresh");
-
-        $('#selectThemeSong', page).val(appStorage.getItem('enableThemeSongs-' + userId) || '').selectmenu("refresh");
-        $('#selectBackdrop', page).val(appStorage.getItem('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");
-        $('#selectHomeSection4', page).val(displayPreferences.CustomPrefs.home3 || '').selectmenu("refresh");
-
-        $('#selectEnableItemPreviews', page).val(AppSettings.enableItemPreviews().toString().toLowerCase()).selectmenu("refresh");
-
-        $('#chkEnableLibraryTileNames', page).checked(displayPreferences.CustomPrefs.enableLibraryTileNames != '0').checkboxradio("refresh");
-        $('#chkEnableFullScreen', page).checked(AppSettings.enableFullScreen()).checkboxradio("refresh");
-
-        $('#chkEnableChromecastAc3', page).checked(AppSettings.enableChromecastAc3()).checkboxradio("refresh");
-
-        $('#txtSyncPath', page).val(AppSettings.syncPath());
-
-        Dashboard.hideLoadingMsg();
-    }
-
-    function saveUser(page, userId, displayPreferences) {
-
-        appStorage.setItem('enableThemeSongs-' + userId, $('#selectThemeSong', page).val());
-        appStorage.setItem('enableBackdrops-' + userId, $('#selectBackdrop', page).val());
-
-        displayPreferences.CustomPrefs.home0 = $('#selectHomeSection1', page).val();
-        displayPreferences.CustomPrefs.home1 = $('#selectHomeSection2', page).val();
-        displayPreferences.CustomPrefs.home2 = $('#selectHomeSection3', page).val();
-        displayPreferences.CustomPrefs.home3 = $('#selectHomeSection4', page).val();
-        displayPreferences.CustomPrefs.enableLibraryTileNames = $('#chkEnableLibraryTileNames', page).checked() ? '1' : '0';
-
-        ApiClient.updateDisplayPreferences('home', displayPreferences, userId, 'webclient').done(function () {
-
-            Dashboard.alert(Globalize.translate('SettingsSaved'));
-            Dashboard.hideLoadingMsg();
-        });
-    }
-
-    function onSubmit() {
-
-        var page = $(this).parents('.page');
-
-        Dashboard.showLoadingMsg();
-
-        AppSettings.enableExternalPlayers($('#chkExternalVideoPlayer', page).checked());
-
-        AppSettings.maxStreamingBitrate($('#selectMaxBitrate', page).val());
-        AppSettings.maxChromecastBitrate($('#selectMaxChromecastBitrate', page).val());
-
-        AppSettings.enableItemPreviews($('#selectEnableItemPreviews', page).val() == 'true');
-        AppSettings.enableFullScreen($('#chkEnableFullScreen', page).checked());
-
-        AppSettings.enableChromecastAc3($('#chkEnableChromecastAc3', page).checked());
-
-        AppSettings.syncPath($('#txtSyncPath', page).val());
-
-        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
-
-        ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
-
-            saveUser(page, userId, result);
-
-        });
-
-        // Disable default form submission
-        return false;
-    }
-
-    $(document).on('pageinitdepends', "#webClientPreferencesPage", function () {
-
-        var page = this;
-
-        $('.webClientPreferencesForm', page).off('submit', onSubmit).on('submit', onSubmit);
-
-        $('.btnSelectSyncPath', page).on('click', function () {
-
-            require(['nativedirectorychooser'], function () {
-                NativeDirectoryChooser.chooseDirectory().done(function (path) {
-                    $('#txtSyncPath', page).val(path);
-                });
-            });
-        });
-
-    }).on('pageshowready', "#webClientPreferencesPage", function () {
-
-        var page = this;
-
-        Dashboard.showLoadingMsg();
-
-        var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
-
-        ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
-
-            loadForm(page, userId, result);
-
-        });
-
-        $('.fldEnableBackdrops', page).show();
-
-        if (AppInfo.isNativeApp) {
-            $('.homePageConfigurationSection', page).hide();
-        } else {
-            $('.homePageConfigurationSection', page).show();
-        }
-
-        if (AppInfo.hasKnownExternalPlayerSupport) {
-            $('.labelNativeExternalPlayers', page).show();
-            $('.labelGenericExternalPlayers', page).hide();
-        } else {
-            $('.labelGenericExternalPlayers', page).show();
-            $('.labelNativeExternalPlayers', page).hide();
-        }
-
-        if (AppInfo.supportsFullScreen) {
-            $('.fldFullscreen', page).show();
-        } else {
-            $('.fldFullscreen', page).hide();
-        }
-
-        if (AppInfo.supportsSyncPathSetting) {
-            $('.fldSyncPath', page).show();
-        } else {
-            $('.fldSyncPath', page).hide();
-        }
-    });
-
-})(jQuery, window, document);
\ No newline at end of file