update theme song settings

dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js

@@ -1,4 +1,4 @@
-define(['playbackManager', 'browser'], function (playbackManager, browser) {
+define(['playbackManager', 'userSettings'], function (playbackManager, userSettings) {
 
     var currentOwnerId;
     var currentThemeIds = [];
@@ -40,13 +40,10 @@ define(['playbackManager', 'browser'], function (playbackManager, browser) {
     function enabled(mediaType) {
 
         if (mediaType == 'Video') {
-            // too slow
-            if (browser.slow) {
-                return false;
-            }
+            return userSettings.enableThemeVideos();
         }
 
-        return true;
+        return userSettings.enableThemeSongs();
     }
 
     function loadThemeMedia(item) {

dashboard-ui/bower_components/emby-webcomponents/usersettings/usersettingsbuilder.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'events'], function (appsettings, events) {
+define(['appSettings', 'events', 'browser'], function (appsettings, events, browser) {
 
     return function () {
 
@@ -85,6 +85,36 @@ define(['appSettings', 'events'], function (appsettings, events) {
             return true;
         };
 
+        self.enableThemeSongs = function (val) {
+
+            if (val != null) {
+                self.set('enableThemeSongs', val.toString());
+            }
+
+            val = self.get('enableThemeSongs', false);
+
+            if (val) {
+                return val != 'false';
+            }
+
+            return true;
+        };
+
+        self.enableThemeVideos = function (val) {
+
+            if (val != null) {
+                self.set('enableThemeVideos', val.toString());
+            }
+
+            val = self.get('enableThemeVideos', false);
+
+            if (val) {
+                return val != 'false';
+            }
+
+            return !browser.slow;
+        };
+
         self.language = function (val) {
 
             if (val != null) {

dashboard-ui/mypreferencesdisplay.html

@@ -55,15 +55,6 @@
                     ${HeaderNavigation}
                 </h1>
                 <br />
-                <div class="selectContainer">
-                    <select id="selectThemeSong" is="emby-select" label="${LabelEnableThemeSongs}">
-                        <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 selectContainer">
                     <select id="selectBackdrop" is="emby-select" label="${LabelEnableBackdrops}">
                         <option value="">${OptionAuto}</option>
@@ -72,6 +63,13 @@
                     </select>
                     <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
                 </div>
+                <div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input type="checkbox" is="emby-checkbox" id="chkThemeSong"/>
+                        <span>${LabelEnableThemeSongs}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelEnableThemeSongsHelp}</div>
+                </div>
             </div>
             <div class="detailSection requiresUserPreferences">
                 <h1>

dashboard-ui/scripts/mypreferencesdisplay.js

@@ -13,7 +13,7 @@
                 page.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
                 page.querySelector('.chkDisplayUnairedEpisodes').checked = user.Configuration.DisplayUnairedEpisodes || false;
 
-                page.querySelector('#selectThemeSong').value = appStorage.getItem('enableThemeSongs-' + user.Id) || '';
+                page.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
                 page.querySelector('#selectBackdrop').value = appStorage.getItem('enableBackdrops-' + user.Id) || '';
 
                 page.querySelector('#selectLanguage').value = userSettings.language() || '';
@@ -29,9 +29,9 @@
 
             if (userSettingsLoaded) {
                 userSettings.language(page.querySelector('#selectLanguage').value);
+                userSettings.enableThemeSongs(page.querySelector('#chkThemeSong').checked);
             }
 
-            appStorage.setItem('enableThemeSongs-' + user.Id, page.querySelector('#selectThemeSong').value);
             appStorage.setItem('enableBackdrops-' + user.Id, page.querySelector('#selectBackdrop').value);
 
             return ApiClient.updateUserConfiguration(user.Id, user.Configuration);