src/csui/PlayerOverlay.vue

@@ -5,7 +5,7 @@
     v-if="!triggerZoneEditorVisible"
   >
     <div
-      class="spawn-container uw-ui-trigger"
+      class="spawn-container uw-ui-trigger debug-2"
       :style="triggerZoneStyles"
     >
       &nbsp;
@@ -169,7 +169,7 @@
   <div
     v-if="triggerZoneEditorVisible"
     class="context-spawn uw-ui-area"
-    style="z-index: 1000;"
+    style="z-index: 1000; border: 2px dashed red; overflow: hidden;"
   >
     <TriggerZoneEditor
       :settings="settings"
@@ -335,6 +335,7 @@ export default {
           this.statusFlags.aardErrors = data.aardErrors;
           break;
         case 'player-dimensions':
+          console.log('player dimensions response received.', data);
           this.playerDimensionsUpdate(data.data);
           break;
       }
@@ -450,6 +451,7 @@ export default {
      * Handles trigger zone
      */
     handleTriggerZone(mouseInside) {
+      console.log('handing trigger zone!', mouseInside);
       // this.triggerZoneActive = mouseInside;
     },
 

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -56,21 +56,6 @@
       </OtherSiteSettings>
     </template>
 
-
-
-    <!-- Reset options -->
-    <div class="flex flex-col" style="margin-top: 2rem">
-      <h2>Reset and backup</h2>
-      <p>
-        Pressing the button will reset settings to default without asking.
-      </p>
-      <button
-        class="danger"
-        @click="resetSettings"
-      >
-        Reset settings
-      </button>
-    </div>
   </div>
 </template>
 

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

@@ -268,6 +268,7 @@ export default {
       }
     },
     siteDefaultCrop() {
+      // console.log('Getting default site crop:', this.siteSettings.raw?.defaults?.crop ? 'yay' : '{useDefault}', this.siteSettings.raw?.defaults?.crop)
       return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
     },
     siteDefaultStretch() {
@@ -401,6 +402,7 @@ export default {
         commandArguments = undefined;
       }
 
+      // console.log('setting option', option, 'to cmd:', commandArguments, 'event data in:', value);
       await this.siteSettings.set(option, commandArguments);
       this.$nextTick( () => this.$forceUpdate() );
     },

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -7,11 +7,7 @@
       <div class="flex flex-col compact-form">
         <div class="field">
           <div class="label">Enable in-player UI</div>
-          <input
+          <input type="checkbox" v-model="settings.active.ui.inPlayer.enabled" />
-            type="checkbox"
-            v-model="settings.active.ui.inPlayer.enabled"
-            @change="saveSettings()"
-          />
         </div>
         <div
           class="flex flex-col field-group compact-form"
@@ -30,7 +26,6 @@
               <select
                 v-model="settings.active.ui.inPlayer.alignment"
                 @click="setUiOption('alignment', $event)"
-                @change="saveSettings()"
               >
                 <option value="left">Left</option>
                 <option value="right">Right</option>
@@ -46,7 +41,6 @@
               <select
                 v-model="settings.active.ui.inPlayer.activation"
                 @click="setUiOption('', $event)"
-                @change="saveSettings()"
               >
                 <option value="player">
                   When mouse hovers over player
@@ -140,9 +134,7 @@ export default {
     setUiPage(key, event) {
 
     },
-    saveSettings() {
+
-      this.settings.saveWithoutReload();
-    },
     startTriggerZoneEdit() {
       this.eventBus.send('start-trigger-zone-edit');
     },

src/csui/src/components/GhettoContextMenu.vue

@@ -43,6 +43,7 @@ export default {
   },
   methods: {
     showContextMenu() {
+      console.log('will show context menu.')
       this.contextMenuVisible = true;
     },
     hideContextMenu() {

src/csui/src/components/TriggerZoneEditor.vue

@@ -210,6 +210,8 @@ export default {
         y: event.clientY
       };
       this.dragStartConfiguration = JSON.parse(JSON.stringify(this.settings.active.ui.inPlayer.triggerZoneDimensions));
+
+      console.log(`Mousedown on ${corner}`);
     },
     handleMouseUp(event) {
       if (!this.activeCornerDrag) {
@@ -303,6 +305,7 @@ export default {
       return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.\-]/g, '');
     },
     setTriggerZoneSize(key, value, instantUpdate) {
+      console.log('setting trigger zone size:', key, value);
       let size = (+this.forceNumber(value) / 100);
 
       if (isNaN(+size)) {

src/csui/src/popup/panels/SiteDetailsPanel.vue

@@ -287,6 +287,7 @@ export default {
 
       const observer = new IntersectionObserver(
         ([e]) => {
+          // console.log('observer triggered. intersection ratio?', e.intersectionRatio)
           saveButton.classList.toggle('floating', e.intersectionRatio < 0.95);
         },
         {threshold: [0, 0.5, 0.9, 0.95, 1]}

src/csui/src/utils/UIProbeMixin.js

@@ -33,18 +33,25 @@ export default {
       if (!dimensions.width || !dimensions.height) {
         this.playerDimensions = undefined;
       }
+      console.log('player dimensions update received:', dimensions);
       if (dimensions?.width !== this.playerDimensions?.width || dimensions?.height !== this.playerDimensions?.height) {
+        console.log('Player dimensions changed!', dimensions);
+
         this.playerDimensions = dimensions;
         this.updateTriggerZones();
       }
     },
     updateTriggerZones() {
+      console.log('triggered zone style recheck. player dims:', this.playerDimensions, 'in player settings:', this.settings.active.ui);
       if (this.playerDimensions && this.settings) {
         this.triggerZoneStyles = {
           width: `${Math.round(this.playerDimensions.width * this.settings.active.ui.inPlayer.triggerZoneDimensions.width)}px`,
           height: `${Math.round(this.playerDimensions.height * this.settings.active.ui.inPlayer.triggerZoneDimensions.height)}px`,
           transform: `translate(${(this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX)}%, ${this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY}%)`,
         };
+        console.log(
+          'player trigger zone css:', this.triggerZoneStyles
+        );
       }
     },
 
@@ -100,11 +107,13 @@ export default {
           this.uwTriggerZoneTimeout = setTimeout(
             () => {
               this.uwTriggerZoneVisible = false;
+              // this.$forceRefresh();
             },
-            500
+            750
           );
         }
       } else {
+        // console.log('[UI] hiding UI because conditions were not met. canShowUI:', eventData.canShowUI, 'isOverTriggerZone', isOverTriggerZone);
         // this.uwTriggerZoneVisible = false;
       }
 

src/ext/lib/aard/gl/FallbackCanvas.ts

@@ -24,6 +24,7 @@ export class FallbackCanvas extends GlCanvas {
   protected initWebgl() { }
 
   drawVideoFrame(video: HTMLVideoElement) {
+    console.log('context:', this.context, 'canvas:', this.canvas );
     this.context.drawImage(video, this.context.canvas.width, this.context.canvas.height);
   }
 

src/ext/lib/settings/SiteSettings.ts

@@ -122,8 +122,11 @@ export class SiteSettings {
 
     this.compileSettingsObject();
 
+    console.log('changes:', parsedSettings);
+
     // trigger any subscriptions on change
     if (parsedSettings._updateFlags) {
+      console.log('update flags yay!')
       if (parsedSettings._updateFlags?.forSite === this.site) {
         if (parsedSettings._updateFlags?.requireReload === true) {
           for (const key in this.storageChangeSubscriptions) {
@@ -137,9 +140,9 @@ export class SiteSettings {
         }
         else if (parsedSettings._updateFlags?.requireReload) {
           for (const key of parsedSettings._updateFlags?.requireReload) {
-            if (! this.storageChangeSubscriptions[key]) {
+            console.log('reload required for:', key, this.storageChangeSubscriptions);
-              continue;
+
-            }
+            if (! this.storageChangeSubscriptions[key]) continue;
 
             for (const fn of this.storageChangeSubscriptions[key]) {
               fn(this, changes, area);

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

@@ -99,6 +99,8 @@ class PlayerData {
     }],
     'get-player-dimensions': [{
       function: () => {
+        console.log('received get player dimensions! -- returning:', this.dimensions)
+
         this.eventBus.send('uw-config-broadcast', {
           type: 'player-dimensions',
           data: this.dimensions