Changelog.MD update

CHANGELOG.md

@@ -1,18 +1,38 @@
 # Changelog
 
-
-
-### Plans for the future
-
-* Native builds for Chromium Edge
-* Settings page looks ugly af right now. Maybe fix it some time later
-* other bug fixes
-
-## v7.0 (planned major)
- * WebGL autodetection
-
 ## v6.0 (current major)
 
+### v6.2.4
+* [#264](https://github.com/tamius-han/ultrawidify/issues/264) — fixed issue with white screen that affected some youtube users. Special thanks to [SnowyOwlNugget](https://github.com/SnowyOwlNugget">SnowyOwlNugget), who instead of whining provided the necessary information.
+* Minor updates to the settings
+* Switching between full screen, theater, and normal player now correctly enables and disables the extension according to the settings.
+* Don't reset settings if updating conf patches fails.
+* Darken in-player UI backgrounds until Chrome fixes its backdrop-filter bug
+
+### v6.2.3
+* Fixed default persistent mode
+
+### v6.2.2
+* Fixed the issue where stretching was not applied if no cropping was used
+* Added way to manually enable or disable color scheme detection, as a compromise between #259 and #264
+
+### v6.2.1
+
+* Fixed offset issue on Netflix
+* Fixed issue with overlay iframe not being transparent on twitter
+
+### v6.2.0
+
+* Parts of automatic aspect ratio detection use WebGL now. This should result in improved performance. 
+* In-player UI now indicates whether a site is having a problem with automatic aspect ratio detection.
+* UI improvements
+
+Since automatic aspect ratio detection had to be rewritten completely and since the new version needs to be out 5 days ago, there are some regressions in the automatic aspect ratio detection.
+
+### v6.1.0
+
+Was skipped due to how major the changes were.
+
 ### v6.0.1
 
 * Fixed external links

src/common/interfaces/SettingsInterface.ts

@@ -6,6 +6,12 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
 import StretchType from '../enums/StretchType.enum'
 import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
 
+export enum ExtensionEnvironment {
+  Normal = 'normal',
+  Theater = 'theater',
+  Fullscreen = 'fullscreen',
+}
+
 export interface KeyboardShortcutInterface {
   key?: string,
   code?: string,

src/csui/PlayerOverlay.vue

@@ -24,20 +24,7 @@
       @mouseleave="allowContextMenuHide()"
     >
       <template v-slot:activator>
-        <div class="context-item uw-clickable uw-menu-trigger relative">
-          <div v-if="hoverStats.isOverTriggerMenu && !hoverStats.hasMouse" class="absolute ui-warning">
-            <b>Video player is not being detected correctly</b><br/>
-            <p>
-              That's why this menu doesn't work correctly.
-            </p>
-            <p>
-              It may start working if you move your mouse over the button a few times. If it doesn't, open the UI from the extension popup.
-            </p>
-          </div>
-
           Ultrawidify
-        </div>
-
       </template>
       <slot>
         <!--
@@ -716,8 +703,10 @@ export default {
   flex-direction: column;
   text-align: center;
 
-  width: 112.25%;
+  font-size: 0.9rem;
-  transform: translate(-12.5%, 12.5%) scale(0.75);
+
+  // width: 112.25%;
+  // transform: translate(-12.5%, 12.5%) scale(0.75);
 
   > * {
     margin-top: 0.5rem;

src/csui/res/css/common.scss

@@ -18,6 +18,19 @@ body {
   padding: 0px;
 }
 
+.main-window::before {
+  content: ' backdrop-filter machine broke :(     googlo pls fix';
+  color: #000;
+  position: absolute;
+  left: -0.5rem;
+  top: -0.5rem;
+  z-index: -1;
+  width: calc(100% + 1rem);
+  height: calc(100% + 1rem);
+  background-image: url('/csui/res/img/uw-window-bg-texture-3.webp');
+  opacity: 0.75;
+}
+
 /* STANDARD WIDTHS AND HEIGHTS */
 .w100 {
   width: 100%;

src/csui/src/PlayerUIWindow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="popup-panel flex flex-col uw-clickable h-full"
+    class="popup-panel flex flex-col uw-clickable h-full main-window relative"
   >
     <div class="popup-window-header">
       <div class="header-title">
@@ -248,6 +248,8 @@ export default {
 //   height: 100%;
 // }
 
+
+
 .tab-row {
   width: 22rem;
   flex-grow: 0;

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -3,94 +3,27 @@
     <div class="flex flex-row gap-2 bg-black">
       <div class="w-[1/2]" style="width: 50%">
         <h1>What's new</h1>
-        <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md" target="_blank">is available here</a>.</p>
+        <!-- <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md" target="_blank">is available here</a>.</p> -->
+
+        <h2>6.2.4</h2>
+        <ul>
+          <li>[<a href="https://github.com/tamius-han/ultrawidify/issues/264" target="_blank">#264</a>] Fixed issue with white screen that affected <i>some</i> youtube users.<br/><br/>Special thanks to <a href="https://github.com/SnowyOwlNugget">SnowyOwlNugget</a>, who instead of whining provided the necessary information.</li>
+          <li>Minor updates to the settings</li>
+          <li>Switching between full screen, theater, and normal player now correctly enables and disables the extension according to the settings.</li>
+          <li>Does anyone even read these?</li>
+          <li>By default, extension is now only enabled for sites with 'official' and 'community' support for new installs. Extension will need to be manually enabled for other sites.</li>
+          <li>Gussief1, you owe me 5 bucks. Time to put your money where your mouth is. Paypal is <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">here.</a></li>
+          <li>Added background to in-player UI due to chrome bug affecting <code>backdrop-filter</code> inside transparent iframes.</li>
+        </ul>
 
-        <h2>6.2.0</h2>
         <p>
-          There's been another major change that skips a version.
+          Planned future updates <i>before</i> Tam vanishes due to convention season obligations:
         </p>
         <ul>
-          <li>Parts of automatic aspect ratio detection use WebGL now. This should result in improved performance. Slightly underwhelming blog post about this issue can be found <a href="https://stuff.tamius.net/sacred-texts/2024/10/02/hot-dang-i-shouldnt-have-given-on-webgl/" target="_blank">here</a>.</li>
+          <li>Re-implement manual zoom</li>
-          <li>In-player UI now indicates whether a site is having a problem with automatic aspect ratio detection.</li>
+          <li>It appears that ExtConfPatch for version 6.0.0 keeps getting re-applied due to a bug, but my RAID ran out for this release.</li>
-          <li>UI improvements</li>
-        </ul>
-        <p>
-          Since automatic aspect ratio detection had to be rewritten completely and since the new version needs to be out 5 days ago, there are some regressions in the automatic aspect ratio detection.
-        </p>
-
-        Minor revisions:
-
-        <h3>6.2.1</h3>
-        <ul>
-          <li>Fixed offset issue on Netflix</li>
-          <li>Fixed issue with overlay iframe not being transparent on twitter</li>
         </ul>
 
-        <h3>6.2.2</h3>
-        <ul>
-          <li>Fixed the issue where stretching was not applied if no cropping was used</li>
-          <li>Half-fixed in-player UI on sites where player is not detected correctly</li>
-        </ul>
-
-        <h3>6.2.3</h3>
-        <ul>
-          <li>Fixed default persistent mode</li>
-        </ul>
-
-        <hr/>
-
-        <h2>6.0.0</h2>
-        <p>
-          I don't think I need to write a changelog for this one. I've also been working on this, on and (mostly) off, for ... a long time, so I might have "kinda forgot" some minor things.
-        </p>
-        <ul>
-          <li><b>Manifest v3</b>. Bit late, but still.</li>
-          <li>
-            <b>In-player UI.</b><br/>
-            This one took major effort to pull off. Required some changes under the hood, required me to de-spaghettify some code. The UI will only show
-            if the video takes up sufficient amount of space (currently determined as 960 pixels wide).
-          </li>
-          <li>
-            <b>New alignment options.</b> Video can be aligned vertically as well as horizontally.
-          </li>
-          <!-- <li>
-            By default, Ultrawidify will not kick in on "small videos". You have to be either in full screen or theater mode. Ultrawidify assumes that any
-            video that takes up more than 85% of the window width is being viewed in theater mode. This value may be tweaked later on. This feature can be
-            configured (or turned off entirely) via 'Advanced options' menu on the in-player UI.
-          </li> -->
-          <li>
-            The in-player extension UI will do a better job differentiating between the various level of support: "official" for the sites that Tam can check
-            on his own, "fingers crossed" for sites that Tam can't check because my load-bearing credit card can't support the weight of a dozen subscription
-            services, and "community support" for sites that enjoy support through the helping hand of people willing to help.
-          </li>
-          <li>
-            The in-player UI should now display a warning whenever Ultrawidify detects automatic aspect ratio detection isn't happening because the site uses DRM.
-          </li>
-          <!-- <li>
-            Better zooming. The slider is back, baby.
-          </li> -->
-          <!-- <li>
-            Panning option that's a bit more intuitive.
-          </li> -->
-        </ul>
-        <h3>Regressions</h3>
-        <ul>
-          <li>
-            Due to major changes under the hood, custom settings from older versions were NOT been migrated (probably).
-          </li>
-          <li>
-            It is unclear how extension acts on sites with more than one video.
-          </li>
-          <li>
-            Extension lost the ability to discriminate between iframes. Actions taken through the popup will be affect <b>all</b> iframes.
-          </li>
-          <li>
-            Hope the UI is worth the regressions, because getting UI to work has been a MAJOR pain in the ass.
-          </li>
-        </ul>
-        <p>Minor revisions:</p>
-        <h2>6.0.1</h2>
-        <p>Fixed external links.</p>
       </div>
       <div class="w-[1/2]" style="width: 50%; padding-left: 1rem; padding-top: 5rem;">
         <h2>Thank you monies</h2>
@@ -100,7 +33,6 @@
         <p class="text-center">
           <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
         </p>
-
       </div>
     </div>
   </div>

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

@@ -44,7 +44,7 @@
     </div>
 
     <!-- The rest of the menu is disabled when extension is disabled -->
-    <div :class="{disabled: simpleExtensionSettings.enable === 'disabled' }">
+    <div :class="{disabled: simpleEffectiveSettings.enable === 'disabled'}">
       <!-- Enable AARD -->
       <div class="field">
         <div class="label">
@@ -275,6 +275,7 @@ export default {
   data() {
     return {
       CropModePersistence: CropModePersistence,
+      ExtensionMode,
       alignmentOptions: [
         {label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
         {label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
@@ -308,6 +309,14 @@ export default {
         enableUI: this.compileSimpleSettings('enableUI')
       }
     },
+    simpleEffectiveSettings() {
+      return {
+        enable: this.compileSimpleSettings('enable', 'site-effective'),
+        enableAard: this.compileSimpleSettings('enableAard', 'site-effective'),
+        enableKeyboard: this.compileSimpleSettings('enableKeyboard', 'site-effective'),
+        enableUI: this.compileSimpleSettings('enableUI', 'site-effective')
+      }
+    },
     simpleDefaultSettings() {
       return {
         enable: this.getDefaultOptionLabel('enable'),
@@ -347,8 +356,20 @@ export default {
     /**
      * Compiles our extension settings into more user-friendly options
      */
-    compileSimpleSettings(component, getDefaults) {
+    compileSimpleSettings(component, getFor = 'site') {
-      const settingsData = getDefaults ? this.settings.active.sites['@global'] : this.siteSettings?.raw;
+      let settingsData;
+      switch (getFor) {
+        case 'site':
+          settingsData = this.siteSettings?.raw;
+          break;
+        case 'site-effective':
+          settingsData = this.siteSettings?.data;
+          break;
+        case 'default':
+          settingsData = this.settings.active.sites['@global'];
+          break;
+      }
+
       try {
         if (
           (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
@@ -393,7 +414,7 @@ export default {
     },
 
     getDefaultOptionLabel(component) {
-      const componentValue = this.compileSimpleSettings(component, true);
+      const componentValue = this.compileSimpleSettings(component, 'default');
 
       if (componentValue === 'loading') {
         return componentValue;
@@ -502,6 +523,18 @@ export default {
         return;
       }
 
+      if (component === 'enable') {
+        this.setExtensionMode('enableAard', event);
+        this.setExtensionMode('enableKeyboard', event);
+
+        // in enableUI, 'enabled' is unused and 'theater' uses its place
+        if (option === 'enabled') {
+          this.setExtensionMode('enableUI', {target: {value: 'theater'}});
+        } else {
+          this.setExtensionMode('enableUI', event);
+        }
+      }
+
       if (option === 'default') {
         return this.siteSettings.set(component, {
           normal: ExtensionMode.Default,

src/csui/src/components/GhettoContextMenu.vue

@@ -76,6 +76,7 @@ export default {
   left: 100%;
 }
 </style>
+
 <style lang="scss">
 .activator {
   position: relative;
@@ -83,12 +84,12 @@ export default {
 
   font-size: .95rem;
   padding: 1rem 1.6rem;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(16px) saturate(120%);
 
   white-space: nowrap;
   &:hover {
-    background-color: rgba(255, 128, 64, 0.5);
+    background-color: rgba(255, 128, 64, 0.95);
   }
 
   &.expand-left {

src/csui/src/components/GhettoContextMenuItem.vue

@@ -24,16 +24,17 @@ export default {
 
 <style lang="scss" scoped>
 .item {
+  position: relative;
   font-size: .95rem;
   font-family: 'Overpass';
   padding: 1rem 1.6rem;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(16px) saturate(120%);
 
   white-space: nowrap;
 
   &.can-hover:hover {
-    background-color: rgba(0,0,0,0.8);
+    background-color: rgba(0,0,0,0.98);
     border-bottom: 1px solid #fa6;
   }
 

src/csui/src/utils/UIProbeMixin.js

@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     playerDimensionsUpdate(dimensions) {
-      if (!dimensions.width || !dimensions.height) {
+      if (!dimensions?.width || !dimensions?.height) {
         this.playerDimensions = undefined;
       }
       if (dimensions?.width !== this.playerDimensions?.width || dimensions?.height !== this.playerDimensions?.height) {

src/ext/conf/ExtensionConf.ts

@@ -1419,24 +1419,24 @@ const ExtensionConf: SettingsInterface = {
                                             //      #g — only available in @global
                                             //      #s   — only available for specific site
       enable: {                             //  How should extension work:
-        fullscreen: ExtensionMode.Disabled,  //       'enabled'   - work everywhere except blacklist
+        fullscreen: ExtensionMode.Disabled, //       'enabled'   - work everywhere except blacklist
-        theater: ExtensionMode.Disabled,     //       'whitelist' - only work on whitelisted sites (#g)
+        theater: ExtensionMode.Disabled,    //
         normal: ExtensionMode.Disabled,     //       'disabled'  - work nowhere
       },                                    //       'default'   - follow global rules (#s)
       enableAard: {                         //  Should we try to automatically detect aspect ratio?
-        fullscreen: ExtensionMode.Enabled,  //  Options: 'enabled', 'whitelist' (#g), 'default' (#s), 'disabled'
+        fullscreen: ExtensionMode.Disabled, //  Options: 'enabled', 'default' (#s), 'disabled'
-        theater: ExtensionMode.Enabled,
+        theater: ExtensionMode.Disabled,
         normal: ExtensionMode.Disabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Enabled,
+        fullscreen: ExtensionMode.Disabled,
-        theater: ExtensionMode.Enabled,
+        theater: ExtensionMode.Disabled,
         normal: ExtensionMode.Disabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Enabled,
+        fullscreen: ExtensionMode.Disabled,
-        theater: ExtensionMode.Enabled,     // Lies! means 'theater-ish'
+        theater: ExtensionMode.Disabled,     // Lies! means 'theater-ish'
-        normal: ExtensionMode.Enabled       // Not actually used.
+        normal: ExtensionMode.Disabled       // Not actually used.
       },
 
       defaultType: 'unknown',
@@ -1481,24 +1481,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.youtube.com" : {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Enabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Enabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Enabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
 
       override: false,                  // ignore value localStorage in favour of this
@@ -1521,24 +1521,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.netflix.com" : {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Default,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Disabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Disabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Disabled
+        normal: ExtensionMode.Enabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
 
       override: false,
@@ -1547,23 +1547,23 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.disneyplus.com" : {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Default,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Default,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Default
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Default
       },
       type: 'community',
@@ -1593,60 +1593,23 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Enabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Enabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Enabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Enabled
       },
       type: 'official',
       defaultType: 'official',
     },
-    "vimeo.com": {
-      enable: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
-      },
-      enableAard: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
-      },
-      enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default
-      },
-      enableUI: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default
-      },
-      type: 'official',
-      defaultType: 'official',
-      activeDOMConfig: 'official',
-      DOMConfig: {
-        'official': {
-          type: 'official',
-          // customCss: ".player_outro_area {\n  width: 100% !important;\n  display: flex !important;\n  justify-content: center !important;\n}\n\n.player_container, .player {\n  width: 100% !important; \n}",
-          elements: {
-            player: {
-              manual: true,
-              querySelectors: ".player_outro_area",
-            }
-          }
-        }
-      },
-    },
     "old.reddit.com" : {
       enable: {
         fullscreen: ExtensionMode.Disabled,
@@ -1795,24 +1758,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.wakanim.tv": {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Enabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Enabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Enabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Enabled
       },
       type: 'community',
       defaultType: 'community',
@@ -1831,24 +1794,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "app.plex.tv": {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       type: 'community',
       defaultType: 'community',
@@ -1862,24 +1825,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "metaivi.com": {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       type: "community",
       defaultType: "community",
@@ -1897,24 +1860,24 @@ const ExtensionConf: SettingsInterface = {
     },
     "piped.kavin.rocks": {
       enable: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableAard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default,
+        normal: ExtensionMode.Disabled,
       },
       enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       enableUI: {
-        fullscreen: ExtensionMode.Default,
+        fullscreen: ExtensionMode.Enabled,
-        theater: ExtensionMode.Default,
+        theater: ExtensionMode.Enabled,
-        normal: ExtensionMode.Default
+        normal: ExtensionMode.Disabled
       },
       type: "community",
       defaultType: "community",

src/ext/lib/Settings.ts

@@ -177,38 +177,32 @@ class Settings {
   }
   private applySettingsPatches(oldVersion, patches) {
     let index = this.findFirstNecessaryPatch(oldVersion, patches);
+
     if (index === -1) {
       this.logger?.log('info','settings','[Settings::applySettingsPatches] There are no pending conf patches.');
       return;
     }
 
     // apply all remaining patches
-    try {
+    this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`);
-      this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`);
+    while (index < patches.length) {
-      while (index < patches.length) {
+      const updateFn = patches[index].updateFn;
-        const updateFn = patches[index].updateFn;
+      delete patches[index].forVersion;
-        delete patches[index].forVersion;
+      delete patches[index].updateFn;
-        delete patches[index].updateFn;
 
-        if (Object.keys(patches[index]).length > 0) {
+      if (Object.keys(patches[index]).length > 0) {
-          ObjectCopy.overwrite(this.active, patches[index]);
+        ObjectCopy.overwrite(this.active, patches[index]);
-        }
-        if (updateFn) {
-
-          try {
-            updateFn(this.active, this.getDefaultSettings());
-          } catch (e) {
-            this.logger?.log('error', 'settings', '[Settings::applySettingsPatches] Failed to execute update function. Keeping settings object as-is. Error:', e);
-
-          }
-        }
-
-        index++;
       }
-    } catch (e) {
+      if (updateFn) {
-      console.error('Failed to upgrade settings.', e);
+
-      this.setActive(this.getDefaultSettings());
+        try {
-      this.save();
+          updateFn(this.active, this.getDefaultSettings());
+        } catch (e) {
+          this.logger?.log('error', 'settings', '[Settings::applySettingsPatches] Failed to execute update function. Keeping settings object as-is. Error:', e);
+        }
+      }
+
+      index++;
     }
   }
 

src/ext/lib/aard/Aard.ts

@@ -1,7 +1,10 @@
 import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
 import EventBus from '../EventBus';
 import Logger from '../Logger';
 import Settings from '../Settings';
+import { SiteSettings } from '../settings/SiteSettings';
 import VideoData from '../video-data/VideoData';
 import { Corner } from './enums/corner.enum';
 import { VideoPlaybackState } from './enums/video-playback-state.enum';
@@ -218,10 +221,17 @@ export class Aard {
   private logger: Logger;
   private videoData: VideoData;
   private settings: Settings;
+  private siteSettings: SiteSettings;
   private eventBus: EventBus;
   private arid: string;
 
   private eventBusCommands = {
+    'uw-environment-change': {
+      function: (newEnvironment: ExtensionEnvironment) => {
+        console.log('received extension environment:', newEnvironment, 'player env:', this.videoData?.player?.environment);
+        this.startCheck();
+      }
+    }
     //   'get-aard-timing': {
     //     function: () => this.handlePerformanceDataRequest()
       // }
@@ -267,6 +277,7 @@ export class Aard {
     this.videoData = videoData;
     this.video = videoData.video;
     this.settings = videoData.settings;
+    this.siteSettings = videoData.siteSettings;
     this.eventBus = videoData.eventBus;
 
     this.eventBus.subscribeMulti(this.eventBusCommands, this);
@@ -284,7 +295,6 @@ export class Aard {
    * This method should only ever be called from constructor.
    */
   private init() {
-
     this.canvasStore = {
       main: this.createCanvas('main-gl')
     };
@@ -301,7 +311,7 @@ export class Aard {
       ),
     };
 
-    this.start();
+    this.startCheck();
   }
 
   private createCanvas(canvasId: string, canvasType?: 'webgl' | 'fallback') {
@@ -341,6 +351,20 @@ export class Aard {
   }
   //#endregion
 
+  /**
+   * Checks whether autodetection can run
+   */
+  startCheck() {
+    if (!this.videoData.player) {
+      console.warn('Player not detected!')
+    }
+    if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
+      this.start();
+    } else {
+      this.stop();
+    }
+  }
+
   /**
    * Starts autodetection loop.
    */

src/ext/lib/video-data/PlayerData.ts

@@ -13,6 +13,7 @@ import UI from '../uwui/UI';
 import { SiteSettings } from '../settings/SiteSettings';
 import PageInfo from './PageInfo';
 import { RunLevel } from '../../enum/run-level.enum';
+import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -138,6 +139,7 @@ class PlayerData {
   private dimensionChangeListener = {
     that: this,
     handleEvent: function(event: Event) {
+      this.that.trackEnvironmentChanges(event);
       this.that.trackDimensionChanges()
     }
   }
@@ -152,6 +154,7 @@ class PlayerData {
       }
       if (!this.dimensions) {
         this.trackDimensionChanges();
+        this.trackEnvironmentChanges();
       }
 
       return this.dimensions.width / this.dimensions.height;
@@ -161,6 +164,21 @@ class PlayerData {
     }
   }
 
+  /**
+   * Gets current environment (needed when determining whether extension runs in fulls screen, theater, or normal)
+   */
+  private lastEnvironment: ExtensionEnvironment;
+
+  get environment(): ExtensionEnvironment {
+    if (this.isFullscreen) {
+      return ExtensionEnvironment.Fullscreen;
+    }
+    if (this.isTheaterMode) {
+      return ExtensionEnvironment.Theater;
+    }
+    return ExtensionEnvironment.Normal;
+  }
+
   //#region lifecycle
   constructor(videoData) {
     try {
@@ -198,6 +216,7 @@ class PlayerData {
       }
 
       this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
       this.startChangeDetection();
 
       document.addEventListener('fullscreenchange', this.dimensionChangeListener);
@@ -337,6 +356,13 @@ class PlayerData {
     return newTheaterMode;
   }
 
+  trackEnvironmentChanges() {
+    if (this.environment !== this.lastEnvironment) {
+      this.lastEnvironment = this.environment;
+      this.eventBus.send('uw-environment-change', {newEnvironment: this.environment});
+    }
+  }
+
   /**
    *
    */
@@ -439,6 +465,7 @@ class PlayerData {
 
   onPlayerDimensionsChanged(mutationList?, observer?) {
     this.trackDimensionChanges();
+    this.trackEnvironmentChanges();
   }
 
 
@@ -630,6 +657,7 @@ class PlayerData {
 
       this.element = elementStack[nextIndex].element;
       this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
     }
   }
 
@@ -834,7 +862,9 @@ class PlayerData {
     this.ui = undefined;
     this.element = this.getPlayer();
     // this.notificationService?.replace(this.element);
+
     this.trackDimensionChanges();
+    this.trackEnvironmentChanges();
   }
 }
 

src/ext/lib/video-data/VideoData.ts

@@ -17,6 +17,8 @@ import { ExtensionStatus } from './ExtensionStatus';
 import { RunLevel } from '../../enum/run-level.enum';
 import { Aard } from '../aard/Aard';
 import { Stretch } from '../../../common/interfaces/StretchInterface';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -76,6 +78,8 @@ class VideoData {
 
   eventBus: EventBus;
   extensionStatus: ExtensionStatus;
+
+  private currentEnvironment: ExtensionEnvironment;
   //#endregion
 
 
@@ -97,6 +101,11 @@ class VideoData {
     },
     'set-run-level': {
       function: (runLevel: RunLevel) => this.setRunLevel(runLevel)
+    },
+    'uw-environment-change': {
+      function: () => {
+        this.onEnvironmentChanged();
+      }
     }
   }
 
@@ -191,7 +200,7 @@ class VideoData {
       if (!this.mutationObserver) {
         this.setupMutationObserver();
       }
-      this.eventBus.send('inject-css', this.baseVideoCss);
+      // this.eventBus.send('inject-css', this.baseVideoCss);
     } catch (e) {
       console.error('Failed to inject base css!', e);
     }
@@ -389,8 +398,26 @@ class VideoData {
   }
   //#endregion
 
+  onEnvironmentChanged() {
+    if (!this.player) {
+      return;
+    }
+    if (this.currentEnvironment !== this.player.environment) {
+      console.warn('environment changed to:', this.player.environment);
+      this.currentEnvironment = this.player.environment;
+      if (this.siteSettings.data.enable[this.player.environment] === ExtensionMode.Disabled) {
+        this.setRunLevel(RunLevel.Off);
+      } else {
+        this.restoreAr();
+      }
+    }
+  }
 
   setRunLevel(runLevel: RunLevel, options?: {fromPlayer?: boolean}) {
+    if (this.player && this.siteSettings.data.enable[this.player.environment] !== ExtensionMode.Enabled) {
+      runLevel = RunLevel.Off;
+    }
+
     if (this.runLevel === runLevel) {
       return; // also no need to propagate to the player
     }
@@ -553,6 +580,8 @@ class VideoData {
     // the 'style' attributes don't necessarily trigger. This means we also need to trigger
     // restoreAr here, in case video size was changed this way
     this.player.forceRefreshPlayerElement();
+    this.eventBus.send('uw-environment-change', {newEnvironment: this.player.environment});
+
     this.restoreAr();
 
     // sometimes something fucky wucky happens and mutations aren't detected correctly, so we
@@ -571,7 +600,7 @@ class VideoData {
       this._processDimensionsChanged,
       250,
       {
-        leading: true,
+        // leading: true,
         trailing: true
       }
     );
@@ -694,7 +723,7 @@ class VideoData {
       if (!this.aard) {
         this.initArDetection();
       }
-      this.aard.start();
+      this.aard.startCheck();
     } catch (e) {
       this.logger.log('warn', 'debug', '[VideoData::startArDetection()] Could not start aard for some reason. Was the function was called too early?', e);
     }

src/ext/lib/video-transform/Resizer.ts

@@ -295,7 +295,7 @@ class Resizer {
 
     // handle autodetection stuff
     if (ar.type === AspectRatioType.Automatic) {
-      this.videoData.aard?.start();
+      this.videoData.aard?.startCheck();
       return;
     } else if (ar.type !== AspectRatioType.AutomaticUpdate) {
       this.videoData.aard?.stop();
@@ -429,7 +429,7 @@ class Resizer {
   }
 
   applyScaling(stretchFactors: VideoDimensions, options?: {noAnnounce?: boolean, ar?: Ar}) {
-    this.stretcher.chromeBugMitigation(stretchFactors);
+    // this.stretcher.chromeBugMitigation(stretchFactors);
 
     // let the UI know
     if(!options?.noAnnounce) {
@@ -533,6 +533,10 @@ class Resizer {
     this.restore();
   }
 
+  /**
+   * Restores aspect ratio to last known aspect ratio
+   * @returns
+   */
   restore() {
     if (!this.manualZoom) {
       this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} );