From 53ed81fa81a934e7d5a26d29cb3ce21e729daa7a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 11 Jun 2022 15:40:36 +0200
Subject: [PATCH] showing and hiding of ultrawidify UI

---
 src/csui/PlayerUiBase.vue | 84 ++++++++++++++++++++++++++++++++++-----
 src/csui/csui.html        |  1 -
 2 files changed, 73 insertions(+), 12 deletions(-)
diff --git a/src/csui/PlayerUiBase.vue b/src/csui/PlayerUiBase.vue
index 306d802..e5f2bac 100644
--- a/src/csui/PlayerUiBase.vue
+++ b/src/csui/PlayerUiBase.vue
@@ -1,8 +1,20 @@
 <template>
-  <div class="uw-hover uv-hover-trigger-region uw-clickable">
-    TEST CONTENT
+  <div
+    v-if="uwTriggerZoneVisible"
+    class="uw-hover uv-hover-trigger-region uw-clickable"
+    :style="uwTriggerRegionConf"
+    @mouseenter="showUwWindow"
+  >
+    <h1>Aspect ratio controls</h1>
+    <div>Hover to activate</div>
   </div>
-  <div class="popup-panel flex flex-column uw-clickable">
+  <div
+    v-if="uwWindowVisible"
+    class="popup-panel flex flex-column uw-clickable"
+    :class="{'fade-out': uwWindowFadeOut}"
+    @mouseenter="cancelUwWindowHide"
+    @mouseleave="hideUwWindow"
+  >
     <div class="popup-window-header">
       <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
       <div class="site-support-info">
@@ -121,6 +133,21 @@ export default {
   },
   data() {
     return {
+      uwTriggerZoneVisible: false,
+      uwTriggerZoneTimeout: undefined,
+      uwTriggerRegionConf: {
+        left: "10%",
+        top: "10%",
+        height: "30%",
+        width: "30%",
+        maxWidth: "24rem",
+        maxHeight: "13.37rem",
+      },
+
+      uwWindowFadeOut: false,
+      uwWindowCloseTimeout: undefined,
+      uwWindowVisible: false,
+
       // component properties
       settings: {},
       BrowserDetect: BrowserDetect,
@@ -258,6 +285,17 @@ export default {
       }
       this.lastProbeTs = eventData.ts;
 
+      // show ultrawidify trigger zone and set it to vanish after 250ms
+      // but don't show the trigger zone behind an active popup
+      if (! this.uwWindowVisible) {
+        this.uwTriggerZoneVisible = true;
+        clearTimeout(this.uwTriggerZoneTimeout);
+        this.uwTriggerZoneTimeout = setTimeout(
+          () => this.uwTriggerZoneVisible = false,
+          250
+        )
+      }
+
       /* we check if our mouse is hovering over an element.
        *
        * gentleman's agreement: elements with uw-clickable inside the iframe will
@@ -290,6 +328,22 @@ export default {
       );
     },
 
+    showUwWindow() {
+      this.uwWindowFadeOut = false;
+      this.uwWindowVisible = true;
+      this.uwTriggerZoneVisible = false;
+    },
+
+    hideUwWindow() {
+      this.uwWindowCloseTimeout = setTimeout(() => this.uwWindowVisible = false, 1100);
+      this.uwWindowFadeOut = true;
+    },
+
+    cancelUwWindowHide() {
+      this.uwWindowFadeOut = false;
+      clearTimeout(this.uwWindowCloseTimeout);
+    },
+
     handleBusTunnelIn(payload) {
       this.eventBus.send(payload.action, payload.config);
     },
@@ -399,17 +453,19 @@ export default {
 
 .uw-hover {
   position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 100px;
-  height: 100px;
-  color: #fff;
-  background-color: #000;
 
   z-index: 999999999999999999;
 }
-.uw-hover:hover {
-  background-color: #f00;
+
+.uv-hover-trigger-region {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border: 0.5rem dashed #fff;
+  color: #fff;
+  backdrop-filter: blur(0.5rem) brightness(0.5);
 }
 
 .popup-panel {
@@ -434,6 +490,12 @@ export default {
 
   backdrop-filter: blur(16px) saturate(120%);
 
+  opacity: 1;
+  &.fade-out {
+    opacity: 0;
+    transition: opacity 1s;
+  }
+
   .popup-window-header {
     padding: 1rem;
     background-color: rgba(5,5,5, 0.75);
diff --git a/src/csui/csui.html b/src/csui/csui.html
index f7ec241..c2711f8 100644
--- a/src/csui/csui.html
+++ b/src/csui/csui.html
@@ -9,7 +9,6 @@
   <% } %>
 </head>
 <body class="uw-ultrawidify-container-root">
-  <div stye="color: #fff; background: #000;">it works!</div>
   <div id="app"></div>
   <script src="csui.js"></script>
 </body>
