Fix mobile/dektop layout modes using legacy in apps

src/apps/modern/features/preferences/components/DisplayPreferences.tsx

@@ -47,8 +47,8 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         value={values.layout}
                     >
                         <MenuItem value={LayoutMode.Auto}>{globalize.translate('Auto')}</MenuItem>
-                        <MenuItem value={LayoutMode.Desktop}>{globalize.translate('Desktop')}</MenuItem>
-                        <MenuItem value={LayoutMode.Mobile}>{globalize.translate('Mobile')}</MenuItem>
+                        <MenuItem value={LayoutMode.DesktopLegacy}>{globalize.translate('Desktop')}</MenuItem>
+                        <MenuItem value={LayoutMode.MobileLegacy}>{globalize.translate('Mobile')}</MenuItem>
                         <MenuItem value={LayoutMode.Tv}>{globalize.translate('TV')}</MenuItem>
                     </Select>
                     <FormHelperText component={Stack} id='display-settings-layout-description'>

src/components/displaySettings/displaySettings.template.html

@@ -169,8 +169,8 @@
     <div class="selectContainer fldDisplayMode hide">
         <select is="emby-select" class="selectLayout" label="${LabelDisplayMode}">
             <option value="">${Auto}</option>
-            <option value="desktop">${Desktop}</option>
-            <option value="mobile">${Mobile}</option>
+            <option value="desktop-legacy">${Desktop}</option>
+            <option value="mobile-legacy">${Mobile}</option>
             <option value="tv">${TV}</option>
         </select>
         <div class="fieldDescription">${DisplayModeHelp}</div>

src/components/layoutManager.js

@@ -1,4 +1,4 @@
-import { LayoutMode } from 'constants/layoutMode';
+import { LayoutMode, LegacyLayoutModes } from 'constants/layoutMode';
 
 import { appHost } from './apphost';
 import browser from '../scripts/browser';
@@ -23,28 +23,23 @@ class LayoutManager {
     desktop = false;
     modern = false;
 
-    get layout() {
-        if (this.tv) return LayoutMode.Tv;
-        if (this.modern) return LayoutMode.Modern;
-        if (this.mobile) return LayoutMode.Mobile;
-        if (this.desktop) return LayoutMode.Desktop;
-        return LayoutMode.Modern;
-    }
-
     setLayout(layout = '', save = true) {
         const layoutValue = (!layout || layout === LayoutMode.Auto) ? '' : layout;
+        const isLegacyLayout = LegacyLayoutModes.has(layoutValue);
+        // Normalize layout mode to the base mode (e.g. 'mobile-legacy' -> 'mobile')
+        const normalizedLayout = layoutValue.split('-')[0];
 
         if (!layoutValue) {
             this.autoLayout();
         } else {
-            setLayout(this, LayoutMode.Mobile, layoutValue);
-            setLayout(this, LayoutMode.Tv, layoutValue);
-            setLayout(this, LayoutMode.Desktop, layoutValue);
+            setLayout(this, LayoutMode.Mobile, normalizedLayout);
+            setLayout(this, LayoutMode.Tv, normalizedLayout);
+            setLayout(this, LayoutMode.Desktop, normalizedLayout);
         }
 
-        console.debug('[LayoutManager] using layout mode', layoutValue);
-        this.modern = layoutValue === LayoutMode.Modern;
-        if (this.modern) {
+        console.debug('[LayoutManager] using layout mode', normalizedLayout);
+        this.modern = !isLegacyLayout;
+        if (layoutValue === LayoutMode.Modern) {
             const legacyLayoutMode = browser.mobile ? LayoutMode.Mobile : LayoutMode.Desktop;
             console.debug('[LayoutManager] using legacy layout mode', legacyLayoutMode);
             setLayout(this, legacyLayoutMode, legacyLayoutMode);

src/constants/layoutMode.ts

@@ -1,13 +1,24 @@
 /** The different layout modes supported by the web app. */
-export enum LayoutMode {
+export const enum LayoutMode {
     /** Automatic layout - the app chose the best layout for the detected device. */
     Auto = 'auto',
-    /** The legacy desktop layout. */
+    /** The desktop layout. */
     Desktop = 'desktop',
+    /** The legacy desktop layout. */
+    DesktopLegacy = 'desktop-legacy',
     /** The modern responsive layout. */
     Modern = 'modern',
-    /** The legacy mobile layout. */
+    /** The mobile layout. */
     Mobile = 'mobile',
+    /** The legacy mobile layout. */
+    MobileLegacy = 'mobile-legacy',
     /** The TV layout. */
     Tv = 'tv'
 };
+
+/** The layout modes that use the legacy app. */
+export const LegacyLayoutModes = new Set([
+    LayoutMode.DesktopLegacy,
+    LayoutMode.MobileLegacy,
+    LayoutMode.Tv
+]);