Merge pull request #7393 from thornbill/experimental-default

src/components/apphost.js

@@ -6,6 +6,7 @@ import * as webSettings from '../scripts/settings/webSettings';
 import globalize from '../lib/globalize';
 import profileBuilder from '../scripts/browserDeviceProfile';
 import { AppFeature } from 'constants/appFeature';
+import { LayoutMode } from 'constants/layoutMode';
 
 const appName = 'Jellyfin Web';
 
@@ -181,7 +182,7 @@ function supportsFullscreen() {
 }
 
 function getDefaultLayout() {
-    return 'desktop';
+    return LayoutMode.Experimental;
 }
 
 function supportsHtmlMediaAutoplay() {
@@ -371,7 +372,7 @@ export const appHost = {
 
         return getDefaultLayout();
     },
-    getDeviceProfile: getDeviceProfile,
+    getDeviceProfile,
     init: function () {
         if (window.NativeShell) {
             return window.NativeShell.AppHost.init();

src/components/displaySettings/displaySettings.template.html

@@ -172,7 +172,6 @@
             <option value="desktop">${Desktop}</option>
             <option value="mobile">${Mobile}</option>
             <option value="tv">${TV}</option>
-            <option value="experimental">${Experimental}</option>
         </select>
         <div class="fieldDescription">${DisplayModeHelp}</div>
         <div class="fieldDescription">${LabelPleaseRestart}</div>

src/components/layoutManager.js

@@ -1,3 +1,4 @@
+import { LayoutMode } from 'constants/layoutMode';
 
 import { appHost } from './apphost';
 import browser from '../scripts/browser';
@@ -14,51 +15,47 @@ function setLayout(instance, layout, selectedLayout) {
     }
 }
 
+export const SETTING_KEY = 'layout';
+
 class LayoutManager {
     tv = false;
     mobile = false;
     desktop = false;
     experimental = false;
 
-    setLayout(layout, save) {
-        if (!layout || layout === 'auto') {
+    setLayout(layout = '', save = true) {
+        const layoutValue = (!layout || layout === LayoutMode.Auto) ? '' : layout;
+
+        if (!layoutValue) {
             this.autoLayout();
-
-            if (save !== false) {
-                appSettings.set('layout', '');
-            }
         } else {
-            setLayout(this, 'mobile', layout);
-            setLayout(this, 'tv', layout);
-            setLayout(this, 'desktop', layout);
-
-            this.experimental = layout === 'experimental';
-            if (this.experimental) {
-                const legacyLayoutMode = browser.mobile ? 'mobile' : this.defaultLayout || 'desktop';
-                setLayout(this, legacyLayoutMode, legacyLayoutMode);
-            }
-
-            if (save !== false) {
-                appSettings.set('layout', layout);
-            }
+            setLayout(this, LayoutMode.Mobile, layoutValue);
+            setLayout(this, LayoutMode.Tv, layoutValue);
+            setLayout(this, LayoutMode.Desktop, layoutValue);
         }
 
+        console.debug('[LayoutManager] using layout mode', layoutValue);
+        this.experimental = layoutValue === LayoutMode.Experimental;
+        if (this.experimental) {
+            const legacyLayoutMode = browser.mobile ? LayoutMode.Mobile : LayoutMode.Desktop;
+            console.debug('[LayoutManager] using legacy layout mode', legacyLayoutMode);
+            setLayout(this, legacyLayoutMode, legacyLayoutMode);
+        }
+
+        if (save) appSettings.set(SETTING_KEY, layoutValue);
+
         Events.trigger(this, 'modechange');
     }
 
     getSavedLayout() {
-        return appSettings.get('layout');
+        return appSettings.get(SETTING_KEY);
     }
 
     autoLayout() {
-        // Take a guess at initial layout. The consuming app can override
-        if (browser.mobile) {
-            this.setLayout('mobile', false);
-        } else if (browser.tv || browser.xboxOne || browser.ps4) {
-            this.setLayout('tv', false);
-        } else {
-            this.setLayout(this.defaultLayout || 'tv', false);
-        }
+        // Take a guess at initial layout. The consuming app can override.
+        // NOTE: The fallback to TV mode seems like an outdated choice. TVs should be detected properly or override the
+        // default layout.
+        this.setLayout(browser.tv ? LayoutMode.Tv : this.defaultLayout || LayoutMode.Tv, false);
     }
 
     init() {

src/components/router/appRouter.js

@@ -6,6 +6,7 @@ import itemHelper from '../itemHelper';
 import loading from '../loading/loading';
 import alert from '../alert';
 
+import { LayoutMode } from 'constants/layoutMode';
 import { getItemQuery } from 'hooks/useItem';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
@@ -434,7 +435,7 @@ class AppRouter {
 
             const layoutMode = localStorage.getItem('layout');
 
-            if (layoutMode === 'experimental' && item.CollectionType == CollectionType.Homevideos) {
+            if (layoutMode === LayoutMode.Experimental && item.CollectionType == CollectionType.Homevideos) {
                 url = '#/homevideos?topParentId=' + item.Id;
 
                 return url;