Feat: Enforce mobile or desktop view #1082

jcorporation · Aug 1, 2023 · c471187 · c471187
1 parent ea64bdf
commit c471187
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/htdocs/index.html b/htdocs/index.html
@@ -1549,6 +1549,7 @@ <h4 data-phrase="Locale"></h4>
               <div id="warnMissingPhrases" class="alert alert-warning d-none mt-2"></div>
               <hr/>
               <h4 data-phrase="Theme"></h4>
+              <div id="themeFrm"></div>
               <div class="row mb-3">
                 <label class="col-sm-4 col-form-label" for="inputHighlightColor">
                   <span data-phrase="Highlight color"></span>
@@ -1567,7 +1568,6 @@ <h4 data-phrase="Theme"></h4>
                   <input class="form-control" type="color" id="inputHighlightColorContrast"/>
                 </div>
               </div>
-              <div id="themeFrm"></div>
               <div class="mb-3 row featMobile">
                 <label class="col-sm-4 col-form-label" for="inputScaleRatio">
                   <span data-phrase="Scale ratio"></span>
@@ -1578,16 +1578,6 @@ <h4 data-phrase="Theme"></h4>
                   <div class="invalid-feedback" data-phrase="Invalid scale ratio"></div>
                 </div>
               </div>
-              <div class="mb-3 row">
-                <label class="col-sm-4 col-form-label" for="btnEnforceMobile">
-                  <span data-phrase="Enforce mobile view"></span>
-                  <small class="mi mi-sm ms-1" data-title-phrase="Browser specific setting">web_asset</small>
-                </label>
-                <div class="col-sm-8 ">
-                  <button data-href='{"cmd": "toggleBtnChk", "options": []}' type="button" class="btn btn-sm btn-secondary mi" id="btnEnforceMobile"></button>
-                  <small class="help" data-phrase="helpSettingsEnforceMobile"></small>
-                </div>
-              </div>
               <div id="appearanceThemeSettingsFrm"></div>
               <hr/>
               <h4 data-phrase="Background"></h4>

diff --git a/htdocs/js/globales.js b/htdocs/js/globales.js
@@ -163,7 +163,7 @@ let phrases = {};
  * This settings are saved in the browsers localStorage
  */
 const localSettings = {
-    "enforceMobile": false,
+    "viewMode": "auto",
     "localPlaybackAutoplay": false,
     "partition": "default",
     "scaleRatio": "1.0"
@@ -206,15 +206,23 @@ function setUserAgentData() {
     if (navigator.userAgentData) {
         navigator.userAgentData.getHighEntropyValues(["platform"]).then(ua => {
             /** @type {boolean} */
-            userAgentData.isMobile = localSettings.enforceMobile === true ? true : ua.mobile;
+            userAgentData.isMobile = localSettings.viewMode === 'mobile'
+                ? true
+                : localSettings.viewMode === 'desktop'
+                    ? false
+                    : ua.mobile;
             //Safari does not support this API
             /** @type {boolean} */
             userAgentData.isSafari = false;
         });
     }
     else {
         /** @type {boolean} */
-        userAgentData.isMobile = localSettings.enforceMobile === true ? true : /iPhone|iPad|iPod|Android|Mobile/i.test(navigator.userAgent);
+        userAgentData.isMobile = localSettings.viewMode === 'mobile'
+            ? true
+            : localSettings.viewMode === 'desktop'
+                ? false
+                : /iPhone|iPad|iPod|Android|Mobile/i.test(navigator.userAgent);
         /** @type {boolean} */
         userAgentData.isSafari = /Safari/i.test(navigator.userAgent);
     }
@@ -576,6 +584,19 @@ const settingFields = {
         "reset": true,
         "invalid": "Must be a number and greater than zero",
         "help": "helpSettingsLastPlayedCount"
+    },
+    "viewMode": {
+        "defaultValue": "auto",
+        "validValues": {
+            "auto": "Autodetect",
+            "mobile": "Mobile",
+            "desktop": "Desktop"
+        },
+        "inputType": "select",
+        "title": "View mode",
+        "form": "appearanceThemeSettingsFrm",
+        "help": "helpSettingsViewMode",
+        "hint": "web_asset"
     }
 };
 
@@ -754,7 +775,7 @@ const webuiSettingsDefault = {
     "uiFooterSettingsPlayback": {
         "defaultValue": true,
         "inputType": "checkbox",
-        "title": "Show playback settings in footer",
+        "title": "Playback settings",
         "form": "footerFrm"
     },
     "uiFooterPlaybackControls": {
@@ -771,13 +792,13 @@ const webuiSettingsDefault = {
     "uiFooterVolumeLevel": {
         "defaultValue": false,
         "inputType": "checkbox",
-        "title": "Show volume level in footer",
+        "title": "Volume level",
         "form": "footerFrm"
     },
     "uiFooterNotifications": {
         "defaultValue": false,
         "inputType": "checkbox",
-        "title": "Show notification icon",
+        "title": "Notification icon",
         "form": "footerFrm"
     },
     "uiMaxElementsPerPage": {
@@ -833,7 +854,7 @@ const webuiSettingsDefault = {
     "uiShowBackButton": {
         "defaultValue": false,
         "inputType": "checkbox",
-        "title": "Show back button",
+        "title": "History back button",
         "form": "navigationBarFrm",
         "help": "helpSettingsBackButton"
     },

diff --git a/htdocs/js/modalSettings.js b/htdocs/js/modalSettings.js
@@ -143,7 +143,7 @@ function populateSettingsFrm() {
     }
 
     document.getElementById('inputScaleRatio').value = localSettings.scaleRatio;
-    toggleBtnChkId('btnEnforceMobile', localSettings.enforceMobile);
+    document.getElementById('inputSettingviewMode').value = localSettings.viewMode;
 
     //media session support
     const btnMediaSession = document.getElementById('inputWebUIsettingmediaSession');
@@ -322,9 +322,16 @@ function _createSettingsFrm(fields, defaults, prefix) {
             );
         }
 
+        const label = defaults[key].hint === undefined
+            ? elCreateTextTn('label', {"class": ["col-sm-4", "col-form-label"], "for": prefix + r(key)}, defaults[key].title)
+            : elCreateNodes('label', {"class": ["col-sm-4", "col-form-label"], "for": prefix + r(key)}, [
+                    elCreateTextTn('span', {}, defaults[key].title),
+                    elCreateText('small', {"class": ["mi", "mi-sm", "ms-1"], "title": tn("Browser specific setting"), "data-title-phrase": "Browser specific setting"}, defaults[key].hint)
+              ]);
+
         advFrm[form].appendChild(
             elCreateNodes('div', {"class": ["mb-3", "row"]}, [
-                elCreateTextTn('label', {"class": ["col-sm-4", "col-form-label"], "for": prefix + r(key)}, defaults[key].title),
+                label,
                 col
             ])
         );
@@ -417,7 +424,7 @@ function saveSettings(closeModal) {
     if (formOK === true) {
         //browser specific settings
         localSettings.localPlaybackAutoplay = getBtnChkValueId('btnEnableLocalPlaybackAutoplay');
-        localSettings.enforceMobile = getBtnChkValueId('btnEnforceMobile');
+        localSettings.viewMode = getSelectValueId('inputSettingviewMode');
         setUserAgentData();
 
         //use scaleRatio only for mobile browsers