Version bump

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.2.3",
+  "version": "6.2.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.2.3",
+  "version": "6.2.4",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

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';

src/csui/PlayerOverlay.vue

@@ -585,6 +585,11 @@ export default {
 
     handleBusTunnelIn(payload) {
       this.eventBus.send(payload.action, payload.config, payload.routingData);
+    },
+
+    updateConfig() {
+      this.settings.init();
+      this.$nextTick( () => this.$forceUpdate());
     }
   }
 }

src/csui/Popup.vue

@@ -334,6 +334,10 @@ export default {
     },
     getRandomColor() {
       return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
+    },
+    updateConfig() {
+      this.settings.init();
+      this.$nextTick( () => this.$forceUpdate());
     }
   }
 }

src/csui/src/PlayerUIWindow.vue

@@ -86,6 +86,7 @@
           <PlayerUiSettings
             v-if="selectedTab === 'playerUiSettings'"
             :settings="settings"
+            :siteSettings="siteSettings"
             :eventBus="eventBus"
           >
           </PlayerUiSettings>

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 ExtensionMode from '@src/common/enums/ExtensionMode.enum';
-import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
+import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
-import CropModePersistence from './../../../../../common/enums/CropModePersistence.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
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Disabled
         ) {
           return 'disabled';
         }
         if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Default
+          (  settingsData?.[component]?.normal     === ExtensionMode.Default || component === 'enableUI')
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Default
+          && settingsData?.[component]?.theater    === ExtensionMode.Default
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Default
         ) {
           return 'default';
         }
         if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
         ) {
           return 'fs';
         }
         if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled  || component === 'enableUI')
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
-          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
         ) {
           return 'theater';
         }
         if (
-          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Enabled
+          (  settingsData?.[component]?.normal     === ExtensionMode.Enabled || component === 'enableUI')
-          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
-          && this.siteSettings?.data?.[component]?.fullscreen === 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) {

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

@@ -127,7 +127,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">
@@ -183,7 +183,8 @@ export default {
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
     'eventBus',
-    'isEditing'
+    'isEditing',
+    'allowSettingSiteDefault'
   ],
   components: {
     ShortcutButton,
@@ -244,6 +245,6 @@ export default {
 }
 </script>
 
-<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="@csui/res/css/flex.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

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 v-if="!siteSettings.data.enableUI.fullscreen">
-          <div class="label">Enable in-player UI</div>
+          UI is disabled for this site.
-          <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>
 
+        <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() {

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

@@ -4,6 +4,12 @@ div, p, span {
   font-size: 16px;
 }
 
+.disabled {
+  pointer-events: none;
+  /* color: #666; */
+  filter: contrast(50%) brightness(40%) grayscale(100%);
+}
+
 .warning-box {
   display: flex;
   flex-direction: row;

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,
+      }
+    }
   }
 ];
 

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,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        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',

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] = {};
       }

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
       )
     ) {

src/install/first-time/App.vue

@@ -94,6 +94,10 @@ export default {
   components: {
   },
   methods: {
+    updateConfig() {
+      this.settings.init();
+      this.$nextTick( () => this.$forceUpdate());
+    }
   }
 }
 </script>

src/install/updated/App.vue

@@ -95,6 +95,10 @@ export default {
   components: {
   },
   methods: {
+    updateConfig() {
+      this.settings.init();
+      this.$nextTick( () => this.$forceUpdate());
+    }
   }
 }
 </script>

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.2.3",
+  "version": "6.2.4",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"