From 67f848a9ee9d3a4a7e57c4c5309e6e7518e0fe33 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Fri, 27 Dec 2024 23:12:41 +0100
Subject: [PATCH] Unbreak showing popup on hover

---
 src/csui/PlayerOverlay.vue         | 52 +++++++++++++++++++++---------
 src/csui/src/PlayerUIWindow.vue    |  6 ++--
 src/csui/src/utils/UIProbeMixin.js | 32 ++++++++++++------
 src/ext/lib/uwui/UI.js             | 20 +++---------
 4 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue
index e7b0197..a0dd4f9 100644
--- a/src/csui/PlayerOverlay.vue
+++ b/src/csui/PlayerOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="context-spawn"
+    class="context-spawn uw-ui-area"
     style="z-index: 1000;"
     v-if="!triggerZoneEditorVisible"
   >
@@ -14,14 +14,14 @@
 
   <div
     v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
-    class="context-spawn uw-clickable"
+    class="context-spawn uw-clickable uw-ui-area"
     style="z-index: 1001"
-    @mouseenter="preventContextMenuHide()"
-    @mouseleave="allowContextMenuHide()"
+
   >
     <GhettoContextMenu
       alignment="right" class="uw-menu"
-      @mouseenter="newFeatureViewUpdate('uw6.ui-popup')"
+      @mouseenter="() => {preventContextMenuHide(); newFeatureViewUpdate('uw6.ui-popup')}"
+      @mouseleave="allowContextMenuHide()"
     >
       <template v-slot:activator>
         <div class="context-item">
@@ -151,7 +151,7 @@
 
   <div
     v-if="settingsInitialized && uwWindowVisible"
-    class="uw-window flex flex-col uw-clickable"
+    class="uw-window flex flex-col uw-clickable uw-ui-area"
     :class="{'fade-out': uwWindowFadeOut}"
   >
     <PlayerUIWindow
@@ -168,17 +168,16 @@
 
   <div
     v-if="triggerZoneEditorVisible"
-    class="context-spawn"
+    class="context-spawn uw-ui-area"
     style="z-index: 1000; border: 2px dashed red; overflow: hidden;"
   >
     <TriggerZoneEditor
-      class="uw-clickable"
       :settings="settings"
+      :eventBus="eventBus"
       :playerDimensions="playerDimensions"
     >
     </TriggerZoneEditor>
   </div>
-
 </template>
 
 <script>
@@ -393,13 +392,22 @@ export default {
       'start-trigger-zone-edit',
       {
         function: () => {
-          console.log('Showing trigger zone editor!');
           this.triggerZoneEditorVisible = true;
           this.uwWindowVisible = false;
         }
       }
     );
 
+     this.eventBus.subscribe(
+      'finish-trigger-zone-edit',
+      {
+        function: () => {
+          this.triggerZoneEditorVisible = false;
+          this.showUwWindow('playerUiSettings');
+        }
+      }
+    );
+
     this.sendToParentLowLevel('uwui-get-role', null);
     this.sendToParentLowLevel('uwui-get-theme', null);
 
@@ -544,13 +552,11 @@ export default {
   background-color: rgba(0,0,0,0.85) !important;
 }
 </style>
+
+<style lang="scss" src="./src/res-common/panels.scss" scoped module></style>
+<style lang="scss" src="./src/res-common/common.scss" scoped module></style>
+
 <style lang="scss" scoped>
-@import 'res/css/uwui-base.scss';
-@import 'res/css/colors.scss';
-@import 'res/css/font/overpass.css';
-@import 'res/css/font/overpass-mono.css';
-@import 'res/css/common.scss';
-@import './src/res-common/_variables';
 
 .uw-hover {
   position: absolute;
@@ -670,4 +676,18 @@ export default {
   border: 4px solid #fa4;
 }
 
+.debug-1 {
+  border: 1px solid yellow;
+
+  &:hover {
+    background-color: rbba(255,255,0,0.5);
+  }
+}
+.debug-2 {
+  border: 1px solid blue;
+
+  &:hover {
+    background-color: rbba(0,0,255,.5);
+  }
+}
 </style>
diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index 76a3b2c..9d194d4 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@@ -117,11 +117,11 @@
             v-if="selectedTab === 'about'"
           >
           </AboutPanel>
-          <ResetBackupPanel
+          <!-- <ResetBackupPanel
             v-if="selectedTab === 'resetBackup'"
             :settings="settings"
           >
-          </ResetBackupPanel>
+          </ResetBackupPanel> -->
         </div>
       </div>
     </div>
@@ -171,7 +171,7 @@ export default {
         // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
         {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
         {id: 'about', label: 'About', icon: 'information-outline'},
-        {id: 'resetBackup', label: 'Reset and backup', icon: 'file-restore-outline'},
+        // {id: 'resetBackup', label: 'Reset and backup', icon: 'file-restore-outline'},
       ],
       selectedTab: 'extensionSettings',
       BrowserDetect: BrowserDetect,
diff --git a/src/csui/src/utils/UIProbeMixin.js b/src/csui/src/utils/UIProbeMixin.js
index ba779f1..e508c0e 100644
--- a/src/csui/src/utils/UIProbeMixin.js
+++ b/src/csui/src/utils/UIProbeMixin.js
@@ -6,12 +6,16 @@ export default {
      * the content script.
      */
     document.addEventListener('mousemove', (event) => {
-      this.handleProbe({
-        coords: {
-          x: event.clientX,
-          y: event.clientY
-        }
-      }, this.origin);
+      this.handleProbe(
+        {
+          coords: {
+            x: event.clientX,
+            y: event.clientY
+          },
+          isCompanion: true,
+        },
+        this.origin
+      );
     });
   },
   data() {
@@ -74,6 +78,7 @@ export default {
        */
       let isClickable = false;
       let isOverTriggerZone = false;
+      let isOverUIArea = false;
       const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y);
 
       for (const element of elements) {
@@ -83,6 +88,9 @@ export default {
         if (element.classList?.contains('uw-ui-trigger')) {
           isOverTriggerZone = true;
         }
+        if (element.classList?.contains('uw-ui-area')) {
+          isOverUIArea = true;
+        }
       }
 
       this.triggerZoneActive = isOverTriggerZone;
@@ -91,18 +99,22 @@ export default {
       // but don't show the trigger zone behind an active popup
       if (
         eventData.canShowUI
-        && (this.settings.active.ui.inPlayer.activation !== 'player' || isOverTriggerZone)
+        && (this.settings.active.ui.inPlayer.activation === 'player' ? isOverUIArea : isOverTriggerZone)
       ) {
         if (! this.uwWindowVisible) {
           this.uwTriggerZoneVisible = true;
           clearTimeout(this.uwTriggerZoneTimeout);
           this.uwTriggerZoneTimeout = setTimeout(
-            () => this.uwTriggerZoneVisible = false,
-            250
+            () => {
+              this.uwTriggerZoneVisible = false;
+              // this.$forceRefresh();
+            },
+            750
           );
         }
       } else {
-        this.uwTriggerZoneVisible = false;
+        // console.log('[UI] hiding UI because conditions were not met. canShowUI:', eventData.canShowUI, 'isOverTriggerZone', isOverTriggerZone);
+        // this.uwTriggerZoneVisible = false;
       }
 
       window.parent.postMessage(
diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js
index a036148..34b9987 100644
--- a/src/ext/lib/uwui/UI.js
+++ b/src/ext/lib/uwui/UI.js
@@ -107,12 +107,12 @@ class UI {
       }
 
       const rect = this.uiIframe.getBoundingClientRect();
+
       const offsets = {
         top: window.scrollY + rect.top,
         left: window.scrollX + rect.left
       };
 
-
       const coords = {
         x: event.pageX - offsets.left,
         y: event.pageY - offsets.top,
@@ -231,12 +231,12 @@ class UI {
    *   * player element ()
    *   * uwui-clickable element
    */
-  canShowUI(coords) {
+  canShowUI() {
     const playerCssClass = 'uw-ultrawidify-player-css';
 
     const result = {
       playerDimensions: undefined,
-      canShowUI: false
+      canShowUI: false,
     }
 
     if (this.playerData?.dimensions) {
@@ -251,22 +251,10 @@ class UI {
                                         // fullscreen mode unless watching videos)
       result.playerDimensions.width < window.screen.width * (this.uiSettings.inPlayer.minEnabledWidth ?? 0)
     ) {
-      result.canShowUI = false;
       return result;
     }
 
-    const elements = document.elementsFromPoint(coords.x, coords.y);
-
-    for (const element of elements) {
-      if (
-        element instanceof HTMLVideoElement
-        || element.classList.contains(playerCssClass)
-      ) {
-        result.canShowUI = true;
-        return result;
-      }
-    }
-
+    result.canShowUI = true;
     return result;
   }