From da94dee78049730765bd53c77405d3683c7c7f48 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 30 Jan 2025 01:29:48 +0100
Subject: [PATCH] Make window background darker until chrome doesn't fix
 backdrop-filter bug

---
 src/csui/res/css/common.scss                  |  13 +++
 src/csui/res/img/uw-window-bg-texture-3.webp  | Bin 0 -> 10618 bytes
 src/csui/src/PlayerUIWindow.vue               |   4 +-
 .../src/PlayerUiPanels/ChangelogPanel.vue     |  98 +++---------------
 src/csui/src/components/GhettoContextMenu.vue |   5 +-
 .../src/components/GhettoContextMenuItem.vue  |   5 +-
 src/ext/lib/Settings.ts                       |  22 ++--
 7 files changed, 47 insertions(+), 100 deletions(-)
 create mode 100644 src/csui/res/img/uw-window-bg-texture-3.webp

diff --git a/src/csui/res/css/common.scss b/src/csui/res/css/common.scss
index 4c10c8d..8e79f19 100644
--- a/src/csui/res/css/common.scss
+++ b/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%;
diff --git a/src/csui/res/img/uw-window-bg-texture-3.webp b/src/csui/res/img/uw-window-bg-texture-3.webp
new file mode 100644
index 0000000000000000000000000000000000000000..83cf188efc0477b204c33b879d61a3f040ae6206
GIT binary patch
literal 10618
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
WE2Fu*TibrRPY?g*W4Hf35BwjA2{xVp

literal 0
HcmV?d00001

diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index 650d8f6..d44df6f 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/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;
diff --git a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
index d4f778a..4cad52b 100644
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/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>In-player UI now indicates whether a site is having a problem with automatic aspect ratio detection.</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>
+          <li>Re-implement manual zoom</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>
         </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>
diff --git a/src/csui/src/components/GhettoContextMenu.vue b/src/csui/src/components/GhettoContextMenu.vue
index 8ba1715..52fe0a0 100644
--- a/src/csui/src/components/GhettoContextMenu.vue
+++ b/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 {
diff --git a/src/csui/src/components/GhettoContextMenuItem.vue b/src/csui/src/components/GhettoContextMenuItem.vue
index 88839d0..5612091 100644
--- a/src/csui/src/components/GhettoContextMenuItem.vue
+++ b/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;
   }
 
diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts
index 6dad085..981e52a 100644
--- a/src/ext/lib/Settings.ts
+++ b/src/ext/lib/Settings.ts
@@ -178,26 +178,24 @@ class Settings {
   private applySettingsPatches(oldVersion, patches) {
     let index = this.findFirstNecessaryPatch(oldVersion, patches);
 
-    console.log('ExtConfPatches — last unapplied patch is', index, patches[index]. patches);
-
     if (index === -1) {
       this.logger?.log('info','settings','[Settings::applySettingsPatches] There are no pending conf patches.');
       return;
     }
 
     // apply all remaining patches
-      this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`);
-      while (index < patches.length) {
-        const updateFn = patches[index].updateFn;
-        delete patches[index].forVersion;
-        delete patches[index].updateFn;
+    this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`);
+    while (index < patches.length) {
+      const updateFn = patches[index].updateFn;
+      delete patches[index].forVersion;
+      delete patches[index].updateFn;
 
-        if (Object.keys(patches[index]).length > 0) {
-          ObjectCopy.overwrite(this.active, patches[index]);
-        }
-        if (updateFn) {
+      if (Object.keys(patches[index]).length > 0) {
+        ObjectCopy.overwrite(this.active, patches[index]);
+      }
+      if (updateFn) {
 
-          try {
+        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);