Move player UI settings and make them site-dependent. Fix SiteSettings always overriding ExtensionStatus.Default with actual default value

2025-01-27 02:59:30 +01:00 · 2025-01-27 02:59:30 +01:00 · 32f4d99c98
commit 32f4d99c98
parent 2d08a2f339
8 changed files with 187 additions and 49 deletions
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@ -312,6 +312,7 @@ export interface SiteSettingsInterface {
  enable: ExtensionEnvironmentSettingsInterface;
  enableAard: ExtensionEnvironmentSettingsInterface;
  enableKeyboard: ExtensionEnvironmentSettingsInterface;
+  enableUI: ExtensionEnvironmentSettingsInterface;  // Lies! enableUI doesn't use 'theater' property (but uses the other two)

  type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
  defaultType: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@ -86,6 +86,7 @@
          <PlayerUiSettings
            v-if="selectedTab === 'playerUiSettings'"
            :settings="settings"
+            :siteSettings="siteSettings"
            :eventBus="eventBus"
          >
          </PlayerUiSettings>
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@ -24,7 +24,7 @@
          </template>
          <template v-else>
            <option value="default">
-              Use default ()
+              Use default ({{simpleDefaultSettings.enable}})
            </option>
            <option value="disabled">
              Never
@ -69,7 +69,7 @@
            </template>
            <template v-else>
              <option value="default">
-                Use default ()
+                Use default ({{simpleDefaultSettings.enableAard}})
              </option>
              <option value="disabled">
                Never
@ -112,7 +112,7 @@
            </template>
            <template v-else>
              <option value="default">
-                Use default ()
+                Use default ({{simpleDefaultSettings.enableKeyboard}})
              </option>
              <option value="disabled">
                Never
@ -131,7 +131,7 @@
        </div>
      </div>

-      <!-- Enable keyboard -->
+      <!-- Enable UI -->
      <div class="field">
        <div class="label">
          Enable <span class="color-emphasis">in-player UI</span>
@ -149,7 +149,7 @@
            </template>
            <template v-else>
              <option value="default">
-                Use default ()
+                Use default ({{simpleDefaultSettings.enableUI}})
              </option>
              <option value="disabled">
                Never
@ -267,9 +267,9 @@
 </template>

 <script>
-import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
-import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
-import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
+import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
+import CropModePersistence from '@src/common/enums/CropModePersistence.enum';

 export default {
  data() {
@ -305,8 +305,17 @@ export default {
        enable: this.compileSimpleSettings('enable'),
        enableAard: this.compileSimpleSettings('enableAard'),
        enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
+        enableUI: this.compileSimpleSettings('enableUI')
      }
    },
+    simpleDefaultSettings() {
+      return {
+        enable: this.getDefaultOptionLabel('enable'),
+        enableAard: this.getDefaultOptionLabel('enableAard'),
+        enableKeyboard: this.getDefaultOptionLabel('enableKeyboard'),
+        enableUI: this.getDefaultOptionLabel('enableUI')
+      };
+    },
    siteDefaultCrop() {
      return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
    },
@ -338,40 +347,41 @@ export default {
    /**
     * Compiles our extension settings into more user-friendly options
     */
-    compileSimpleSettings(component) {
+    compileSimpleSettings(component, getDefaults) {
+      const settingsData = getDefaults ? this.settings.active.sites['@global'] : this.siteSettings?.raw;
      try {
        if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
+          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Disabled
        ) {
          return 'disabled';
        }
        if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Default
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Default
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
+          (  settingsData?.[component]?.normal     === ExtensionMode.Default || component === 'enableUI')
+          && settingsData?.[component]?.theater    === ExtensionMode.Default
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Default
        ) {
          return 'default';
        }
        if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
+          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
        ) {
          return 'fs';
        }
        if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled  || component === 'enableUI')
+          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
        ) {
          return 'theater';
        }
        if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Enabled
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Enabled || component === 'enableUI')
+          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
        ) {
          return 'enabled';
        }
@ -382,6 +392,36 @@ export default {
      }
    },

+    getDefaultOptionLabel(component) {
+      const componentValue = this.compileSimpleSettings(component, true);
+
+      if (componentValue === 'loading') {
+        return componentValue;
+      }
+      if (component === 'enableUI') {
+        switch (componentValue) {
+          case 'fs':
+            return 'fullscreen only';
+          case 'theater':
+            return 'where possible';
+          case 'disabled':
+            return 'disabled';
+        }
+      }
+      switch (componentValue) {
+        case 'fs':
+          return 'Fullscreen only';
+        case 'theater':
+          return 'theater & FS';
+        case 'enabled':
+          return 'always';
+        case 'disabled':
+          return 'disabled';
+        case 'default':
+          return 'complex'
+      }
+    },
+
    getCommandValue(availableCommands, command) {
      for (const cmd of availableCommands) {
        if (JSON.stringify(cmd.arguments) === JSON.stringify(command)) {
@ -441,21 +481,18 @@ export default {
        commandArguments = undefined;
      }

-      console.log('saving settings ...');
      await this.siteSettings.set(option, commandArguments, {reload: false});
-      console.log('settings saved.');

      // we also need to force re-compute all watchers, otherwise UI will lag behind
      // actual state of settings until reload
      this._computedWatchers?.simpleExtensionSettings?.run();
+      this._computedWatchers?.simpleDefaultSettings?.run();
      this._computedWatchers?.siteDefaultCrop?.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());
    },
    setExtensionMode(component, event) {
--- a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
@ -5,23 +5,14 @@
      <h2>Player UI options</h2>

      <div class="flex flex-col compact-form">
-        <div class="field">
-          <div class="label">Enable in-player UI</div>
-          <input
-            type="checkbox"
-            v-model="settings.active.ui.inPlayer.enabled"
-            @change="saveSettings()"
-          />
-        </div>
-        <div
-          class="flex flex-col field-group compact-form"
-          :class="{disabled: !settings.active.ui.inPlayer.enabled}"
-        >
-          <div class="field">
-            <div class="label">Enable only in full screen</div>
-            <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
+        <div v-if="!siteSettings.data.enableUI.fullscreen">
+          UI is disabled for this site.
        </div>

+        <div
+          class="flex flex-col field-group compact-form"
+          :class="{disabled: !siteSettings.data.enableUI.fullscreen}"
+        >
          <div class="field disabled">
            <div class="label">
              Popup activator position:
@ -171,6 +162,7 @@ export default {
  ],
  props: [
    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
    'eventBus',
  ],
  mounted() {
--- a/src/ext/conf/ExtConfPatches.ts
+++ b/src/ext/conf/ExtConfPatches.ts
@ -202,6 +202,28 @@ const ExtensionConfPatch = [
        }
      }
    }
+  }, {
+    forVersion: '6.2.4',
+    updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+      for (const site in userOptions.sites) {
+        userOptions.sites[site].enableUI = {
+          fullscreen: ExtensionMode.Default,
+          theater: ExtensionMode.Default,
+          normal: ExtensionMode.Default,
+        }
+      }
+      const uiEnabled =
+      userOptions.sites['@global'].enableUI = {
+        fullscreen:  userOptions.ui.inPlayer.enabled ? ExtensionMode.Enabled : ExtensionMode.Disabled,
+        theater: ExtensionMode.Enabled,
+        normal: (userOptions.ui.inPlayer.enabled && !userOptions.ui.inPlayer.enabledFullscreenOnly) ? ExtensionMode.Enabled : ExtensionMode.Disabled
+      }
+      userOptions.sites['@empty'].enableUI = {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default,
+      }
+    }
  }
 ];

--- a/src/ext/conf/ExtensionConf.ts
+++ b/src/ext/conf/ExtensionConf.ts
@ -1433,6 +1433,12 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Enabled,
        normal: ExtensionMode.Disabled
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Enabled,
+        theater: ExtensionMode.Enabled,     // Lies! means 'theater-ish'
+        normal: ExtensionMode.Enabled       // Not actually used.
+      },
+
      defaultType: 'unknown',
      persistCSA: CropModePersistence.Disabled,

@ -1458,6 +1464,12 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled
+      },
+
      type: 'user-defined',
      defaultType: 'user-defined',
      persistCSA: CropModePersistence.Default,
@ -1483,6 +1495,12 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
+
      override: false,                  // ignore value localStorage in favour of this
      type: 'official',                 // is officially supported? (Alternatives are 'community' and 'user-defined')
      defaultType: 'official',          // if user mucks around with settings, type changes to 'user-defined'.
@ -1517,6 +1535,12 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Disabled
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
+
      override: false,
      type: 'community',
      defaultType: 'community',
@ -1537,6 +1561,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'community',
      defaultType: 'community',
      activeDOMConfig: 'community-mstefan99',
@ -1559,9 +1588,9 @@ const ExtensionConf: SettingsInterface = {
    },
    "www.twitch.tv": {
      enable: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
+        theater: ExtensionMode.Enabled,
+        normal: ExtensionMode.Enabled,
      },
      enableAard: {
        fullscreen: ExtensionMode.Default,
@ -1573,6 +1602,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'official',
      defaultType: 'official',
    },
@ -1592,6 +1626,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'official',
      defaultType: 'official',
      activeDOMConfig: 'official',
@ -1624,6 +1663,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Disabled,
        normal: ExtensionMode.Disabled,
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Disabled,
+        theater: ExtensionMode.Disabled,
+        normal: ExtensionMode.Disabled
+      },
      type: 'officially-disabled',
      defaultType: 'officially-disabled',
      activeDOMConfig: 'official',
@ -1656,6 +1700,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Disabled,
        normal: ExtensionMode.Disabled,
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Disabled,
+        theater: ExtensionMode.Disabled,
+        normal: ExtensionMode.Disabled
+      },
      type: 'officially-disabled',
      defaultType: 'officially-disabled',
      activeDOMConfig: 'official',
@ -1688,6 +1737,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Disabled,
        normal: ExtensionMode.Disabled,
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Disabled,
+        theater: ExtensionMode.Disabled,
+        normal: ExtensionMode.Disabled
+      },
      type: 'officially-disabled',
      defaultType: 'officially-disabled',
    },
@ -1707,6 +1761,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Disabled,
        normal: ExtensionMode.Disabled,
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'officially-disabled',
      defaultType: 'officially-disabled',
    },
@ -1726,6 +1785,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Disabled,
        normal: ExtensionMode.Disabled,
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'officially-disabled',
      defaultType: 'officially-disabled',
    },
@ -1745,6 +1809,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'community',
      defaultType: 'community',
      activeDOMConfig: 'community',
@ -1776,6 +1845,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: 'community',
      defaultType: 'community',
      activeDOMConfig: 'community',
@ -1802,6 +1876,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: "community",
      defaultType: "community",
      activeDOMConfig: 'community',
@ -1832,6 +1911,11 @@ const ExtensionConf: SettingsInterface = {
        theater: ExtensionMode.Default,
        normal: ExtensionMode.Default
      },
+      enableUI: {
+        fullscreen: ExtensionMode.Default,
+        theater: ExtensionMode.Default,
+        normal: ExtensionMode.Default
+      },
      type: "community",
      defaultType: "community",
      activeDOMConfig: 'community',
--- a/src/ext/lib/settings/SiteSettings.ts
+++ b/src/ext/lib/settings/SiteSettings.ts
@ -28,7 +28,7 @@ export class SiteSettings {
  //#region lifecycle
  constructor(settings: Settings, site: string) {
    this.settings = settings;
-    this.data = settings.active.sites[site];
+    this.raw = settings.active.sites[site];
    this.site = site;
    this.defaultSettings = settings.default.sites['@global'];

@ -52,7 +52,7 @@ export class SiteSettings {
   * Alan pls ensure default settings object follows the correct structure
   */
  private compileSettingsObject() {
-    this.raw = _cp(this.settings.active.sites[this.site] ?? {})
+    this.data = _cp(this.settings.active.sites[this.site] ?? {})

    if (!this.data) {
      this.data = _cp(this.defaultSettings);
@ -81,7 +81,7 @@ export class SiteSettings {
      }
    }

-    for (const enableSegment of ['enable', 'enableAard', 'enableKeyboard']) {
+    for (const enableSegment of ['enable', 'enableAard', 'enableKeyboard', 'enableUI']) {
      if (!this.data[enableSegment]) {
        this.data[enableSegment] = {};
      }
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@ -248,14 +248,15 @@ class PlayerData {
  //#endregion

  deferredUiInitialization(playerDimensions) {
-    if (this.ui || ! this.videoData.settings.active.ui?.inPlayer?.enabled) {
+    if (this.ui || this.siteSettings.data.enableUI.fullscreen === ExtensionMode.Disabled) {
      return;
    }

    if (
      this.isFullscreen
      || (
-        playerDimensions.width > 1208
+        this.siteSettings.data.enableUI.theater !== ExtensionMode.Disabled
+        && playerDimensions.width > 1208
        && playerDimensions.height > 720
      )
    ) {