Update playback settings to use CastReceiverId

src/components/playbackSettings/playbackSettings.js

@@ -10,6 +10,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import template from './playbackSettings.template.html';
+import escapeHTML from 'escape-html';
 
 function fillSkipLengths(select) {
     const options = [5, 10, 15, 20, 25, 30];
@@ -136,7 +137,7 @@ function showHideQualityFields(context, user, apiClient) {
     });
 }
 
-function loadForm(context, user, userSettings, apiClient) {
+function loadForm(context, user, userSettings, systemInfo, apiClient) {
     const loggedInUserId = apiClient.getCurrentUserId();
     const userId = user.Id;
 
@@ -186,7 +187,12 @@ function loadForm(context, user, userSettings, apiClient) {
     fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality'));
 
     const selectChromecastVersion = context.querySelector('.selectChromecastVersion');
-    selectChromecastVersion.value = userSettings.chromecastVersion();
+    let ccAppsHtml = '';
+    for (const app of systemInfo.CastReceiverApplications) {
+        ccAppsHtml += `<option value='${escapeHTML(app.Id)}'>${escapeHTML(app.Name)}</option>`;
+    }
+    selectChromecastVersion.innerHTML = ccAppsHtml;
+    selectChromecastVersion.value = user.Configuration.CastReceiverId;
 
     const selectLabelMaxVideoWidth = context.querySelector('.selectLabelMaxVideoWidth');
     selectLabelMaxVideoWidth.value = appSettings.maxVideoWidth();
@@ -222,7 +228,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.enableNextVideoInfoOverlay(context.querySelector('.chkEnableNextVideoOverlay').checked);
     user.Configuration.RememberAudioSelections = context.querySelector('.chkRememberAudioSelections').checked;
     user.Configuration.RememberSubtitleSelections = context.querySelector('.chkRememberSubtitleSelections').checked;
-    userSettingsInstance.chromecastVersion(context.querySelector('.selectChromecastVersion').value);
+    user.Configuration.CastReceiverId = context.querySelector('.selectChromecastVersion').value;
     userSettingsInstance.skipForwardLength(context.querySelector('.selectSkipForwardLength').value);
     userSettingsInstance.skipBackLength(context.querySelector('.selectSkipBackLength').value);
 
@@ -329,10 +335,12 @@ class PlaybackSettings {
         const userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(user => {
+            apiClient.getSystemInfo().then(systemInfo => {
                 userSettings.setUserInfo(userId, apiClient).then(() => {
                     self.dataLoaded = true;
 
-                loadForm(context, user, userSettings, apiClient);
+                    loadForm(context, user, userSettings, systemInfo, apiClient);
+                });
             });
         });
     }

src/components/playbackSettings/playbackSettings.template.html

@@ -138,10 +138,7 @@
         </div>
 
         <div class="selectContainer">
-            <select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}">
+            <select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}"></select>
-                <option value="stable">${LabelStable}</option>
-                <option value="unstable">${LabelUnstable}</option>
-            </select>
         </div>
 
         <div class="selectContainer">

src/scripts/settings/userSettings.js

@@ -338,19 +338,6 @@ export class UserSettings {
         return this.get('datetimelocale', false);
     }
 
-    /**
-     * Get or set Chromecast version.
-     * @param {string|undefined} val - Chromecast version.
-     * @return {string} Chromecast version.
-     */
-    chromecastVersion(val) {
-        if (val !== undefined) {
-            return this.set('chromecastVersion', val.toString());
-        }
-
-        return this.get('chromecastVersion') || 'stable';
-    }
-
     /**
      * Get or set amount of rewind.
      * @param {number|undefined} val - Amount of rewind.
@@ -648,7 +635,6 @@ export const detailsBanner = currentSettings.detailsBanner.bind(currentSettings)
 export const useEpisodeImagesInNextUpAndResume = currentSettings.useEpisodeImagesInNextUpAndResume.bind(currentSettings);
 export const language = currentSettings.language.bind(currentSettings);
 export const dateTimeLocale = currentSettings.dateTimeLocale.bind(currentSettings);
-export const chromecastVersion = currentSettings.chromecastVersion.bind(currentSettings);
 export const skipBackLength = currentSettings.skipBackLength.bind(currentSettings);
 export const skipForwardLength = currentSettings.skipForwardLength.bind(currentSettings);
 export const dashboardTheme = currentSettings.dashboardTheme.bind(currentSettings);