Player is in a separate component

src/csui/PlayerOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="uwTriggerZoneVisible"
+    v-if="settingsInitialized && uwTriggerZoneVisible"
     class="uw-hover uv-hover-trigger-region uw-clickable"
     :style="uwTriggerRegionConf"
     @mouseenter="showUwWindow"
@@ -8,134 +8,32 @@
     <h1>Aspect ratio controls</h1>
     <div>Hover to activate</div>
   </div>
+
+
+
+  <!-- sss -->
+
   <div
-    v-if="uwWindowVisible"
+    v-if="settingsInitialized && uwWindowVisible"
-    class="popup-panel flex flex-column uw-clickable"
+    class="uw-window flex flex-column uw-clickable"
     :class="{'fade-out': uwWindowFadeOut}"
     @mouseenter="cancelUwWindowHide"
     @mouseleave="hideUwWindow"
   >
-    <div class="popup-window-header">
+    <PlayerUIWindow
-      <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
-      <div class="site-support-info">
-        <div class="site-support-site">{{site}}</div>
-        <div v-if="siteSupportLevel === 'official'" class="site-support official">
-          <mdicon name="check-decagram" />
-          <div>Verified</div>
-          <div class="tooltip">The extension is being tested and should work on this site.</div>
-        </div>
-        <div v-if="siteSupportLevel === 'community'" class="site-support community">
-          <mdicon name="handshake" />
-          <div>Community</div>
-          <div class="tooltip">
-            People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
-            Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
-            is geoblocked.
-          </div>
-        </div>
-        <div v-if="siteSupportLevel === 'no-support'" class="site-support no-support">
-          <mdicon name="help-circle-outline" />
-          <div>Unknown</div>
-          <div class="tooltip">
-            Not officially supported. Extension will try to fix things, but no promises.<br/><br/>
-            Tamius (the dev) does not test the extension on this site for various reasons
-            (unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
-          </div>
-        </div>
-        <div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
-          <mdicon name="account" />
-          <div>Custom</div>
-          <div class="tooltip">
-            You have manually changed settings for this site. The extension is doing what you told it to do.
-          </div>
-        </div>
-        <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
-      </div>
-      <div><a @click="uwWindowFadeOutDisabled = !uwWindowFadeOutDisabled">{{uwWindowFadeOutDisabled ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
-    </div>
-
-    <div class="tab-main flex flex-row">
-      <div class="tab-row flex flex-column">
-        <div
-          v-for="tab of tabs"
-          :key="tab.id"
-          class="tab"
-          :class="{'active': tab.id === selectedTab}"
-          @click="selectTab(tab.id)"
-        >
-          <div class="icon-container">
-            <mdicon
-              :name="tab.icon"
-              :size="32"
-            />
-          </div>
-          <div class="label">
-            {{tab.label}}
-          </div>
-        </div>
-      </div>
-      <div class="content flex flex-column">
-        <!-- autodetection warning -->
-
-        <div class="warning-area">
-          <div
-            v-if="statusFlags.hasDrm"
-            class="warning-box"
-          >
-            <div class="icon-container">
-              <mdicon name="alert" :size="32" />
-            </div>
-            <div>
-              This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
-              <a>Learn more ...</a>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-row panel-content">
-          <!-- Panel section -->
-          <template v-if="settingsInitialized">
-            <VideoSettings
-              v-if="selectedTab === 'videoSettings'"
       :settings="settings"
       :eventBus="eventBus"
+      :logger="logger"
+      :in-player="true"
       :site="site"
-            ></VideoSettings>
+      @close="uwWindowVisible = false"
-            <PlayerDetectionPanel
+      @preventClose="(event) => uwWindowFadeOutDisabled = event"
-              v-if="selectedTab === 'playerDetection'"
+    ></PlayerUIWindow>
-              :settings="settings"
-              :eventBus="eventBus"
-              :site="site"
-            >
-            </PlayerDetectionPanel>
-            <BaseExtensionSettings
-              v-if="selectedTab === 'extensionSettings'"
-              :settings="settings"
-              :site="site"
-            ></BaseExtensionSettings>
-            <AutodetectionSettingsPanel
-              v-if="selectedTab === 'autodetectionSettings'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :site="site"
-            >
-            </AutodetectionSettingsPanel>
-            <DebugPanel
-              v-if="selectedTab === 'debugging'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :site="site"
-            ></DebugPanel>
-            <!-- <ResizerDebugPanel :debugData="debugData">
-            </ResizerDebugPanel> -->
-          </template>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
+import PlayerUIWindow from './src/PlayerUIWindow.vue'
 import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
 import DebugPanel from './src/PlayerUiPanels/DebugPanel.vue'
 import VideoSettings from './src/PlayerUiPanels/VideoSettings.vue'
@@ -157,7 +55,10 @@ export default {
     ResizerDebugPanel,
     VideoSettings,
     PlayerDetectionPanel,
-    AutodetectionSettingsPanel, DebugPanel, BaseExtensionSettings
+    AutodetectionSettingsPanel,
+    DebugPanel,
+    BaseExtensionSettings,
+    PlayerUIWindow
   },
   mixins: [
     UIProbeMixin
@@ -227,10 +128,6 @@ export default {
     windowHeight() {
       return window.innerHeight;
     },
-    siteSupportLevel() {
-      // console.warn('\n\n\n\n\n\n\n\n\n\n\nsite support level. site:', this, this?.site, this?.settings, this?.settings?.active?.sites[this.site]);
-      return (this.site && this.settings?.active) ? this.settings.active.sites[this.site]?.type || 'no-support' : 'waiting';
-    }
   },
   watch: {
     showUi(visible) {
@@ -356,136 +253,6 @@ export default {
 @import 'res/css/common.scss';
 @import './src/res-common/_variables';
 
-// .relative-wrapper {
-//   position: relative;
-//   width: 100%;
-//   height: 100%;
-// }
-
-.tab-main {
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-}
-
-.site-support-info {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .site-support-site {
-    font-size: 1.5em;
-  }
-
-  .site-support {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-
-    margin-left: 1rem;
-    border-radius: 8px;
-    padding: 0rem 1.5rem 0rem 1rem;
-
-    position: relative;
-
-    .tooltip {
-      padding: 1rem;
-      display: none;
-      position: absolute;
-      bottom: 0;
-      transform: translateY(110%);
-      width: 42em;
-
-      background-color: rgba(0,0,0,0.90);
-      color: #ccc;
-    }
-    &:hover {
-      .tooltip {
-        display: block;
-      }
-    }
-
-    .mdi {
-      margin-right: 1rem;
-    }
-
-    &.official {
-      background-color: #fa6;
-      color: #000;
-
-      .mdi {
-        fill: #000 !important;
-      }
-    }
-
-    &.community {
-      background-color: rgb(47, 47, 97);
-      color: #fff;
-
-      .mdi {
-        fill: #fff !important;
-      }
-    }
-
-    &.no-support {
-      background-color: rgb(138, 65, 126);
-      color: #eee;
-
-      .mdi {
-        fill: #eee !important;
-      }
-    }
-
-    &.user-added {
-      border: 1px solid #ff0;
-
-      color: #ff0;
-
-      .mdi {
-        fill: #ff0 !important;
-      }
-    }
-  }
-}
-
-.content {
-  flex-grow: 1;
-
-  .warning-area {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  .panel-content {
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    overflow-y: auto;
-    padding: 1rem;
-  }
-}
-
-.warning-box {
-  background: rgb(255, 174, 107);
-  color: #000;
-  margin: 1rem;
-  padding: 1rem;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .icon-container {
-    margin-right: 1rem;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-
-  a {
-    color: rgba(0,0,0,0.7);
-    cursor: pointer;
-  }
-}
 
 .uw-hover {
   position: absolute;
@@ -504,7 +271,7 @@ export default {
   backdrop-filter: blur(0.5rem) brightness(0.5);
 }
 
-.popup-panel {
+.uw-window {
   position: absolute;
 
   top: 10%;
@@ -519,70 +286,14 @@ export default {
 
   pointer-events: all !important;
 
-  background-color: rgba(0,0,0,0.50);
+  opacity: 1;
-  color: #fff;
-
-  overflow-y: auto;
-
   backdrop-filter: blur(16px) saturate(120%);
 
-  opacity: 1;
   &.fade-out {
     opacity: 0;
-    transition: opacity 1s;
+    transition: opacity 0.5s;
+    transition-delay: 0.5s;
   }
-
-  .popup-window-header {
-    padding: 1rem;
-    background-color: rgba(5,5,5, 0.75);
-  }
-  .tab-row {
-    background-color: rgba(11,11,11, 0.75);
-
-    .tab {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      padding: 2rem;
-      font-size: 1.5rem;
-      height: 4rem;
-
-      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
-      border-top: 1px solid rgba(128, 128, 128, 0.5);
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-      &.active {
-        opacity: 1.0;
-        background-color: $primaryBg;
-        color: rgb(255, 174, 107);
-        border-bottom: 1px solid rgba(116, 78, 47, 0.5);
-        border-top: 1px solid rgba(116, 78, 47, 0.5);
-      }
-
-      .icon-container {
-        width: 64px;
-        flex-grow: 0;
-        flex-shrink: 0;
-      }
-      .label {
-        flex-grow: 1;
-        flex-shrink: 1;
-        padding: 0 !important;
-      }
-    }
-  }
-
-  .popup-title, .popup-title h1 {
-    font-size: 48px !important;
-  }
-}
-
-pre {
-  white-space: pre-wrap;
 }
 
 </style>

src/csui/src/PlayerUIWindow.vue

@@ -6,6 +6,7 @@
       <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
       <div class="site-support-info">
         <div class="site-support-site">{{site}}</div>
+        <template v-if="inPlayer">
           <div v-if="siteSupportLevel === 'official'" class="site-support official">
             <mdicon name="check-decagram" />
             <div>Verified</div>
@@ -37,8 +38,10 @@
             </div>
           </div>
           <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
+        </template>
       </div>
-      <div><a @click="uwWindowFadeOutDisabled = !uwWindowFadeOutDisabled">{{uwWindowFadeOutDisabled ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
+
+      <div><a @click="setPreventClose(!preventClose)">{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
     </div>
 
     <div class="tab-main flex flex-row">
@@ -81,7 +84,6 @@
 
         <div class="flex flex-row panel-content">
           <!-- Panel section -->
-          <template v-if="settingsInitialized">
           <VideoSettings
             v-if="selectedTab === 'videoSettings'"
             :settings="settings"
@@ -113,7 +115,6 @@
             :eventBus="eventBus"
             :site="site"
           ></DebugPanel>
-          </template>
         </div>
       </div>
     </div>
@@ -152,13 +153,24 @@ export default {
       ],
       selectedTab: 'videoSettings',
       BrowserDetect: BrowserDetect,
+      preventClose: false,
     }
   },
   props: [
     'settings',
     'eventBus',
-    'logger'
+    'logger',
+    'in-player',
+    'site'
   ],
+  computed: {
+    // LPT: NO ARROW FUNCTIONS IN COMPUTED,
+    // IS SUPER HARAM
+    // THINGS WILL NOT WORK IF YOU USE ARROWS
+    siteSupportLevel() {
+      return (this.site && this.settings?.active) ? this.settings.active.sites[this.site]?.type || 'no-support' : 'waiting';
+    }
+  },
   methods: {
     /**
      * Gets URL of the browser settings page (i think?)
@@ -168,6 +180,10 @@ export default {
     },
     selectTab(tab) {
       this.selectedTab = tab;
+    },
+    setPreventClose(bool) {
+      this.preventClose = bool;
+      this.$emit('preventClose', bool);
     }
   }
 }
@@ -311,34 +327,13 @@ export default {
   }
 }
 
+
 .popup-panel {
-  position: absolute;
-
-  top: 10%;
-  left: 10%;
-
-  z-index: 999999999999999999;
-
-  width: 2500px;
-  height: 1200px;
-  max-width: 80%;
-  max-height: 80%;
-
-  pointer-events: all !important;
-
   background-color: rgba(0,0,0,0.50);
   color: #fff;
 
   overflow-y: auto;
 
-  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);
@@ -392,4 +387,5 @@ pre {
   white-space: pre-wrap;
 }
 
+
 </style>