From 32f4d99c98c807b5df4a0d9902f139ceded9a790 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 27 Jan 2025 02:59:30 +0100
Subject: [PATCH] Move player UI settings and make them site-dependent. Fix
 SiteSettings always overriding ExtensionStatus.Default with actual default
 value

---
 src/common/interfaces/SettingsInterface.ts    |  1 +
 src/csui/src/PlayerUIWindow.vue               |  1 +
 .../SiteExtensionSettings.vue                 | 93 +++++++++++++------
 .../src/PlayerUiPanels/PlayerUiSettings.vue   | 18 +---
 src/ext/conf/ExtConfPatches.ts                | 22 +++++
 src/ext/conf/ExtensionConf.ts                 | 90 +++++++++++++++++-
 src/ext/lib/settings/SiteSettings.ts          |  6 +-
 src/ext/lib/video-data/PlayerData.ts          |  5 +-
 8 files changed, 187 insertions(+), 49 deletions(-)

diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 7d21eef..cf5e4c4 100644
--- 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';
diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index 19f04f7..650d8f6 100644
--- 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>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
index 06b189a..2be5294 100644
--- 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) {
diff --git a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
index f38902c..38535bb 100644
--- 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 v-if="!siteSettings.data.enableUI.fullscreen">
+          UI is disabled for this site.
         </div>
+
         <div
           class="flex flex-col field-group compact-form"
-          :class="{disabled: !settings.active.ui.inPlayer.enabled}"
+          :class="{disabled: !siteSettings.data.enableUI.fullscreen}"
         >
-          <div class="field">
-            <div class="label">Enable only in full screen</div>
-            <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
-          </div>
-
           <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() {
diff --git a/src/ext/conf/ExtConfPatches.ts b/src/ext/conf/ExtConfPatches.ts
index 3f7b689..bf89d61 100644
--- 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,
+      }
+    }
   }
 ];
 
diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts
index 2d70808..3746cf0 100644
--- 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',
diff --git a/src/ext/lib/settings/SiteSettings.ts b/src/ext/lib/settings/SiteSettings.ts
index 2ac1cf5..f596f7d 100644
--- 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] = {};
       }
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index d47f45a..84dbc06 100644
--- 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
       )
     ) {