disable settings if extension is disabled

src/csui/Popup.vue

@@ -19,6 +19,13 @@
           <h1>
             <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
           </h1>
+          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row">
+            <div>site: {{site.host}}</div>
+            <SupportLevelIndicator
+              :siteSupportLevel="siteSupportLevel"
+            >
+            </SupportLevelIndicator>
+          </div>
         </div>
         <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
           Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
@@ -113,6 +120,7 @@ import Settings from '../ext/lib/Settings';
 import Logger from '../ext/lib/Logger';
 import EventBus from '../ext/lib/EventBus';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
+import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
 
 export default {
   components: {
@@ -122,6 +130,7 @@ export default {
     PlayerDetectionPanel,
     BaseExtensionSettings,
     InPlayerUIAdvertisement,
+    SupportLevelIndicator,
     AboutPanel
   },
   data () {
@@ -146,6 +155,11 @@ export default {
       ],
     }
   },
+  computed: {
+    siteSupportLevel() {
+      return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
+    }
+  },
   async created() {
     this.logger = new Logger();
     await this.logger.init({

src/csui/res/css/common.scss

@@ -103,7 +103,6 @@ body {
 }
 
 .label {
-  padding-top: 1.5rem;
   font-size: 1.5rem;
   font-variant: small-caps;
   font-weight: 600;

src/csui/src/PlayerUIWindow.vue

@@ -138,8 +138,7 @@ import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
 import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
 import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
 import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
-
+import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
-import SupportLevelIndicator from './components/SupportLevelIndicator.vue'
 
 export default {
   components: {

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -3,7 +3,8 @@
     <!-- Enable extension -->
     <div class="field">
       <div class="label">
-        Enable extension under the following conditions:
+        Enable <span class="color-emphasis">extension</span>
+        <span class="sub-label"><br/>under the following conditions:</span>
       </div>
       <div class="select">
         <select
@@ -18,7 +19,7 @@
           </option>
           <template v-if="isDefaultConfiguration">
             <option value="disabled">
-              Disabled (unless enabled for specific site)
+              Disabled by default
             </option>
           </template>
           <template v-else>
@@ -42,185 +43,224 @@
       </div>
     </div>
 
-    <!-- Enable AARD -->
+    <!-- The rest of the menu is disabled when extension is disabled -->
-    <div class="field">
+    <div :class="{disabled: simpleExtensionSettings.enable === 'disabled' }">
-      <div class="label">
+      <!-- Enable AARD -->
-        Enable automatic aspect ratio detection under the following conditions:
+      <div class="field">
-      </div>
+        <div class="label">
-      <div class="select">
+          Enable <span class="color-emphasis">automatic aspect ratio detection</span>
-        <select
+          <span class="sub-label"><br/>under the following conditions:</span>
-          v-model="simpleExtensionSettings.enableAard"
+        </div>
-          @click="setExtensionMode('enableAard', $event)"
+        <div class="select">
-        >
+          <select
-          <option
+            v-model="simpleExtensionSettings.enableAard"
-            v-if="simpleExtensionSettings.enable === 'complex'"
+            @click="setExtensionMode('enableAard', $event)"
-            value="complex"
           >
-            (Site uses advanced settings)
+            <option
-          </option>
+              v-if="simpleExtensionSettings.enable === 'complex'"
-          <template v-if="isDefaultConfiguration">
+              value="complex"
-            <option value="disabled">
+            >
-              Disabled (unless enabled for specific site)
+              (Site uses advanced settings)
             </option>
-          </template>
+            <template v-if="isDefaultConfiguration">
-          <template v-else>
+              <option value="disabled">
-            <option value="default">
+                Disabled by default
-              Use default ()
+              </option>
+            </template>
+            <template v-else>
+              <option value="default">
+                Use default ()
+              </option>
+              <option value="disabled">
+                Never
+              </option>
+            </template>
+            <option value="fs">
+              Fullscreen only
             </option>
-            <option value="disabled">
+            <option value="theater">
-              Never
+              Fullscreen and theater mode
             </option>
-          </template>
+            <option value="enabled">
-          <option value="fs">
+              Always
-            Fullscreen only
+            </option>
-          </option>
+          </select>
-          <option value="theater">
+        </div>
-            Fullscreen and theater mode
-          </option>
-          <option value="enabled">
-            Always
-          </option>
-        </select>
       </div>
-    </div>
 
-    <!-- Enable keyboard -->
+      <!-- Enable keyboard -->
-    <div class="field">
+      <div class="field">
-      <div class="label">
+        <div class="label">
-        Enable keyboard shortcuts under the following conditions
+          Enable <span class="color-emphasis">keyboard shortcuts</span>
-      </div>
+          <span class="sub-label"><br/>under the following conditions:</span>
-      <div class="select">
+        </div>
-        <select
+        <div class="select">
-          v-model="simpleExtensionSettings.enableKeyboard"
+          <select
-          @click="setExtensionMode('enableKeyboard', $event)"
+            v-model="simpleExtensionSettings.enableKeyboard"
-        >
+            @click="setExtensionMode('enableKeyboard', $event)"
-          <option
-            v-if="simpleExtensionSettings.enable === 'complex'"
-            value="complex"
           >
-            (Site uses advanced settings)
+            <option
-          </option>
+              v-if="simpleExtensionSettings.enable === 'complex'"
-          <template v-if="isDefaultConfiguration">
+              value="complex"
-            <option value="disabled">
+            >
-              Disabled (unless enabled for specific site)
+              (Site uses advanced settings)
             </option>
-          </template>
+            <template v-if="isDefaultConfiguration">
-          <template v-else>
+              <option value="disabled">
-            <option value="default">
+                Disabled by default
-              Use default ()
+              </option>
+            </template>
+            <template v-else>
+              <option value="default">
+                Use default ()
+              </option>
+              <option value="disabled">
+                Never
+              </option>
+            </template>
+            <option value="fs">
+              Fullscreen only
             </option>
-            <option value="disabled">
+            <option value="theater">
-              Never
+              Fullscreen and theater mode
             </option>
-          </template>
+            <option value="enabled">
-          <option value="fs">
+              Always
-            Fullscreen only
+            </option>
-          </option>
+          </select>
-          <option value="theater">
+        </div>
-            Fullscreen and theater mode
-          </option>
-          <option value="enabled">
-            Always
-          </option>
-        </select>
       </div>
-    </div>
 
-    <!-- Default crop -->
+      <!-- Enable keyboard -->
-    <div class="field">
+      <div class="field">
-      <div class="label">Default crop:</div>
+        <div class="label">
-      <div class="select">
+          Enable <span class="color-emphasis">in-player UI</span>
-        <select
+          <span class="sub-label"><br/>under the following conditions:</span>
-          v-model="siteDefaultCrop"
+        </div>
-          @change="setOption('defaults.crop', $event)"
+        <div class="select">
-        >
+          <select
-          <option
+            v-model="simpleExtensionSettings.enableUI"
-            v-if="!isDefaultConfiguration"
+            @click="setExtensionMode('enableUI', $event)"
-            :value="JSON.stringify({useDefault: true})"
           >
-            Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
+            <template v-if="isDefaultConfiguration">
-          </option>
+              <option value="disabled">
-          <option
+                Disabled by default
-            v-for="(command, index) of settings?.active.commands.crop"
+              </option>
-            :key="index"
+            </template>
-            :value="JSON.stringify(command.arguments)"
+            <template v-else>
+              <option value="default">
+                Use default ()
+              </option>
+              <option value="disabled">
+                Never
+              </option>
+            </template>
+            <option value="fs">
+              Fullscreen only
+            </option>
+            <option value="theater">
+              Always where possible
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Default crop -->
+      <div class="field">
+        <div class="label">Default crop:</div>
+        <div class="select">
+          <select
+            v-model="siteDefaultCrop"
+            @change="setOption('defaults.crop', $event)"
           >
-            {{command.label}}
+            <option
-          </option>
+              v-if="!isDefaultConfiguration"
-        </select>
+              :value="JSON.stringify({useDefault: true})"
+            >
+              Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
+            </option>
+            <option
+              v-for="(command, index) of settings?.active.commands.crop"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
       </div>
       <div class="hint">This is how extension will crop video if/when autodetection is disabled. Pick 'Reset' option to keep aspect ratio as-is by default.</div>
-    </div>
 
-    <!-- Default stretch -->
+      <!-- Default stretch -->
-    <div class="field">
+      <div class="field">
-      <div class="label">Default stretch:</div>
+        <div class="label">Default stretch:</div>
-      <div class="select">
+        <div class="select">
-        <select
+          <select
-          v-model="siteDefaultStretch"
+            v-model="siteDefaultStretch"
-          @change="setOption('defaults.stretch', $event)"
+            @change="setOption('defaults.stretch', $event)"
-        >
-          <option
-            v-if="!isDefaultConfiguration"
-            :value="JSON.stringify({useDefault: true})"
           >
-            Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
+            <option
-          </option>
+              v-if="!isDefaultConfiguration"
-          <option
+              :value="JSON.stringify({useDefault: true})"
-            v-for="(command, index) of settings?.active.commands.stretch"
+            >
-            :key="index"
+              Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
-            :value="JSON.stringify(command.arguments)"
+            </option>
-          >
+            <option
-            {{command.label}}
+              v-for="(command, index) of settings?.active.commands.stretch"
-          </option>
+              :key="index"
-        </select>
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
       </div>
-    </div>
 
-    <!-- Default alignment -->
+      <!-- Default alignment -->
-    <div class="field">
+      <div class="field">
-      <div class="label">Default alignment:</div>
+        <div class="label">Default alignment:</div>
-      <div class="select">
+        <div class="select">
-        <select
+          <select
-          v-model="siteDefaultAlignment"
+            v-model="siteDefaultAlignment"
-          @change="setOption('defaults.alignment', $event)"
+            @change="setOption('defaults.alignment', $event)"
-        >
-          <option
-            v-if="!isDefaultConfiguration"
-            :value="JSON.stringify({useDefault: true})"
           >
-            Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
+            <option
-          </option>
+              v-if="!isDefaultConfiguration"
-          <option
+              :value="JSON.stringify({useDefault: true})"
-            v-for="(command, index) of alignmentOptions"
+            >
-            :key="index"
+              Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
-            :value="JSON.stringify(command.arguments)"
+            </option>
-          >
+            <option
-            {{command.label}}
+              v-for="(command, index) of alignmentOptions"
-          </option>
+              :key="index"
-        </select>
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
       </div>
-    </div>
 
-    <!-- Crop, et. al. Persistence -->
+      <!-- Crop, et. al. Persistence -->
-    <div class="field">
+      <div class="field">
-      <div class="label">Persist crop, stretch, and alignment between videos</div>
+        <div class="label">Persist crop, stretch, and alignment between videos</div>
-      <div class="select">
+        <div class="select">
-        <select
+          <select
-          v-model="siteDefaultCropPersistence"
+            v-model="siteDefaultCropPersistence"
-          @click="setOption('persistCSA', $event)"
+            @click="setOption('persistCSA', $event)"
-        >
-          <option
-            v-if="!isDefaultConfiguration"
-            :value="CropModePersistence.Default"
           >
-            Use default ({{defaultPersistanceLabel}})
+            <option
-          </option>
+              v-if="!isDefaultConfiguration"
-          <option :value="CropModePersistence.Disabled">Disabled</option>
+              :value="CropModePersistence.Default"
-          <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
+            >
-          <option :value="CropModePersistence.CurrentSession">Current session</option>
+              Use default ({{defaultPersistanceLabel}})
-          <option :value="CropModePersistence.Forever">Always persist</option>
+            </option>
-        </select>
+            <option :value="CropModePersistence.Disabled">Disabled</option>
+            <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
+            <option :value="CropModePersistence.CurrentSession">Current session</option>
+            <option :value="CropModePersistence.Forever">Always persist</option>
+          </select>
+        </div>
       </div>
     </div>
   </div>
@@ -401,13 +441,20 @@ export default {
         commandArguments = undefined;
       }
 
+      console.log('saving settings ...');
       await this.siteSettings.set(option, commandArguments, {reload: false});
+      console.log('settings saved.');
 
-      // changing alignment options doesn't trigger re-compute, so we need to do it ourselves.
+      // we also need to force re-compute all watchers, otherwise UI will lag behind
-      // note that this re-computes siteDefaultAlignment even when setting other options, but
+      // actual state of settings until reload
-      // it's _too late AM_ and hit to performance probably isn't bad enough to warrant
+      this._computedWatchers?.simpleExtensionSettings?.run();
-      // spending time on a more correct solution tomorrow
+      this._computedWatchers?.siteDefaultCrop?.run();
-      this._computedWatchers.siteDefaultAlignment.run();
+      this._computedWatchers?.siteDefaultStretch?.run();
+      this._computedWatchers?.siteDefaultAlignment?.run();
+      this._computedWatchers?.siteDefaultCropPersistence?.run();
+      this._computedWatchers?.defaultPersistanceLabel?.run();
+
+      console.log('watchers recomputed');
 
       this.$nextTick( () => this.$forceUpdate());
     },

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -16,7 +16,7 @@
     <ShortcutButton
       v-if="editMode"
       class="button b3"
-     :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
+      :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
       label="Add new"
       @click="editAction(
         {action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
@@ -54,12 +54,13 @@
               @blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
             >
           </div>
-          <div class="hint">
-            You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
-            (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
-            your numbers without quote marks. Number will be converted to factor form on save.
-          </div>
         </div>
+        <div class="hint">
+          You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
+          (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
+          your numbers without quote marks. Number will be converted to factor form on save.
+        </div>
+
         <div class="field">
           <div class="label">
             Label:
@@ -67,9 +68,9 @@
           <div class="input">
             <input v-model="editModeOptions.crop.selected.label">
           </div>
-          <div class="hint">
+        </div>
-            Label for the button. You can make it say something other than ratio.
+        <div class="hint">
-          </div>
+          Label for the button. You can make it say something other than ratio.
         </div>
       </template>
 
@@ -83,11 +84,11 @@
           >
           </EditShortcutButton>
         </div>
-        <div class="hint">
+      </div>
-          <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+      <div class="hint">
-          The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+        <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
-          any keyboard shortcuts defined by the site itself.
+        The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
-        </div>
+        any keyboard shortcuts defined by the site itself.
       </div>
 
       <div class="flex flex-row flex-end">
@@ -111,7 +112,7 @@
     </div>
   </div>
 
-  <div v-if="siteSettings" class="edit-action-area">
+  <div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
     <div class="field">
       <div class="label">Default for this site</div>
       <div class="select">
@@ -165,7 +166,8 @@ export default {
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
     'eventBus',
-    'isEditing'
+    'isEditing',
+    'allowSettingSiteDefault'
   ],
   components: {
     ShortcutButton,

src/csui/src/components/TriggerZoneEditor.vue

@@ -73,10 +73,11 @@
               @change="(event) => updateSettings(true)"
             >
           </div>
-          <div class="hint">
-            Width of the trigger zone (% of player area).
-          </div>
         </div>
+        <div class="hint">
+          Width of the trigger zone (% of player area).
+        </div>
+
         <div class="field">
           <div class="label">Trigger zone height:</div>
           <div class="input range-input">
@@ -95,10 +96,11 @@
               @change="(event) => updateSettings(true)"
             >
           </div>
-          <div class="hint">
-            Height of the trigger zone (% of player area).
-          </div>
         </div>
+        <div class="hint">
+          Height of the trigger zone (% of player area).
+        </div>
+
         <div class="field">
           <div class="label">Trigger zone horizontal offset:</div>
           <div class="input range-input">
@@ -116,10 +118,11 @@
               @change="(event) => updateSettings(true)"
             >
           </div>
-          <div class="hint">
-            By default, trigger zone is centered around the button. This option moves trigger zone left and right.
-          </div>
         </div>
+        <div class="hint">
+          By default, trigger zone is centered around the button. This option moves trigger zone left and right.
+        </div>
+
         <div class="field">
           <div class="label">Trigger zone vertical offset:</div>
           <div class="input range-input">
@@ -137,9 +140,9 @@
               @change="(event) => updateSettings(true)"
             >
           </div>
-          <div class="hint">
+        </div>
-            By default, trigger zone is centered around the button. This option moves trigger zone up and down.
+        <div class="hint">
-          </div>
+          By default, trigger zone is centered around the button. This option moves trigger zone up and down.
         </div>
 
         <div class="action-row">

src/csui/src/popup/panels/PopupVideoSettings.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="flex flex-col" style="padding-bottom: 20px">
+
+    <!--
+      Extension is disabled for a given site when it's disabled in full screen, since
+      current settings do not allow the extension to only be disabled while in full screen
+     -->
+    <template v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled">
+      <div class="info">
+        Extension is not enabled for this site.
+      </div>
+    </template>
+
     <div class="flex flex-row">
       <mdicon name="crop" :size="24" />&nbsp;&nbsp;
       <h1>Crop video:</h1>
@@ -40,11 +51,13 @@
 import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
 import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
 import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
+import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
 
 export default {
   data() {
     return {
       exec: null,
+      ExtensionMode: ExtensionMode,
     };
   },
   mixins: [

src/csui/src/res-common/common.scss

@@ -115,7 +115,9 @@ button, .button {
 .field {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
 
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -129,28 +131,39 @@ button, .button {
 
   .label {
     flex: 0 0 25%;
+    min-width: 16rem;
     text-align: right;
     padding-right: 1rem;
+
+    .color-emphasis {
+      color: #fa6;
+    }
+    .sub-label {
+      font-size: 0.9em;
+      opacity: 0.69;
+    }
   }
 
   .input, .range-input {
-    flex: 0 0 70%;
+    flex-grow: 1;
+    flex-shrink: 1;
     max-width: 24rem;
   }
 
-  .hint {
+  .has-hint {
-    padding-left: calc(25% + 1rem);
+    display: flex;
-    font-size: 0.8rem;
+    flex-direction: column;
-    opacity: 0.7;
-    margin-top: 0.25rem;
-    width: 100%;
   }
+
   .select {
+    flex-grow: 1;
+    flex-shrink: 1;
 
     select {
       background: rgba($blackBg, $hoverTransparentOpacity);
       color: #fff;
-      border: 0px solid transparent;
+      // border: 0px solid transparent;
+      border: 1px solid rgba(255, 171, 102, 0.42);
 
       padding: 0.5rem 1rem 0.25rem;
       outline: none;
@@ -160,6 +173,15 @@ button, .button {
     }
   }
 }
+.hint {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin-top: 0.25rem;
+  margin-bottom: 0.75rem;
+  margin-left: 5rem;
+  // width: 100%;
+  box-sizing:border-box;
+}
 
 .options-bar {
   position: absolute;

src/ext/conf/ExtensionConf.ts

@@ -1419,8 +1419,8 @@ const ExtensionConf: SettingsInterface = {
                                             //      #g — only available in @global
                                             //      #s   — only available for specific site
       enable: {                             //  How should extension work:
-        fullscreen: ExtensionMode.Enabled,  //       'enabled'   - work everywhere except blacklist
+        fullscreen: ExtensionMode.Disabled,  //       'enabled'   - work everywhere except blacklist
-        theater: ExtensionMode.Enabled,     //       'whitelist' - only work on whitelisted sites (#g)
+        theater: ExtensionMode.Disabled,     //       'whitelist' - only work on whitelisted sites (#g)
         normal: ExtensionMode.Disabled,     //       'disabled'  - work nowhere
       },                                    //       'default'   - follow global rules (#s)
       enableAard: {                         //  Should we try to automatically detect aspect ratio?

src/ext/lib/settings/SiteSettings.ts

@@ -224,7 +224,7 @@ export class SiteSettings {
    * @param isFullscreen
    * @returns ExtensionMode
    */
-  isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
+  isEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
     const env = this._getEnvironment(isTheater, isFullscreen);
     return this.data.enable[env];
   }
@@ -235,7 +235,7 @@ export class SiteSettings {
    * @param isFullscreen
    * @returns
    */
-  isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
+  isAardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
     const env = this._getEnvironment(isTheater, isFullscreen);
     return this.data.enableAard[env];
   }
@@ -246,7 +246,7 @@ export class SiteSettings {
    * @param isFullscreen
    * @returns
    */
-  isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean) {
+  isKeyboardEnabledForEnvironment(isTheater: boolean, isFullscreen: boolean): ExtensionMode {
     const env = this._getEnvironment(isTheater, isFullscreen);
     return this.data.enableKeyboard[env];
   }