display some data

src/csui/PlayerUiComponent.vue

@@ -2,8 +2,74 @@
   <div class="uw-hover uv-hover-trigger-region">
     TEST CONTENT
 
-    <div>
+    <div class="uw-debug-info flex flex-row">
-      {{debugData}}
+
+      <!-- Player info -->
+      <div class="">
+        <h3>Player info</h3>
+        <p>
+          <b>Window size:</b><br/>
+          {{windowWidth}} x {{windowHeight}}
+        </p>
+        <p>
+          <b>Player dimensions</b><br/>
+          {{debugData?.resizer?.playerData?.dimensions?.width ?? 'not detected'}} x {{debugData?.resizer?.playerData?.dimensions?.height ?? 'not detected'}}
+        </p>
+        <p>
+          <b>Player id:</b> {{debugData?.resizer?.playerData?.elementId || '<no ID>'}}
+        </p>
+        <p>
+          <b>Player classes:</b><br/>
+          {{debugData?.resizer?.playerData?.classList || '<no classes>'}}
+        </p>
+        <p>
+          <b>Is full screen?</b> {{debugData?.resizer?.playerData?.dimensions?.fullscreen ?? 'unknown'}}
+        </p>
+        
+      </div>
+
+      <!-- Stream info -->
+      <div class="">
+        <h3>Stream info</h3>
+        <p>
+          <b>Stream dimensions:</b> <small>(Native size of the video)</small><br/>
+          {{debugData?.resizer?.videoRawData?.streamDimensions.x}} x {{debugData?.resizer?.videoRawData?.streamDimensions?.y}}
+        </p>
+        <p>
+          <b>Stream displayed dimensions:</b> <small>(Video file is being upscaled to this size)</small><br/>
+          {{debugData?.resizer?.videoRawData?.displayedSize?.x}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y}}
+        </p>
+        <p>
+          <b>Video element size:</b> <small>(Size of the html element)</small><br/>
+          {{debugData?.resizer?.videoRawData?.displayedSize?.x}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y}}
+        </p>
+        <p>
+          <b>Size difference to player (raw):</b> <small>(positive numbers: video element is bigger than player element)</small><br/>
+          x: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.wdiff}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.hdiff}}
+        </p>
+        <p>
+          <b>Size difference to player (raw):</b> <small>(same as above, except after cropping, stretching, panning and zoom are applied)</small><br/>
+          x: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.wdiff}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.hdiff}}
+        </p>
+      </div>
+
+      <!-- Transform info -->
+      <div class="">
+        <h3>Transformations</h3>
+        <p>
+          <b>Alignment:</b> <small>(I agree that 'left' and 'right' are both evil, but that's not the kind of alignments we're thinking of)</small><br/>
+          {{debugData?.resizer?.videoTranslation?.alignment || '<unknown>'}}
+        </p>
+        <p>
+          <b>Translation</b><br/>
+          x: {{debugData?.resizer?.videoTranslation?.x}}; &nbsp; &nbsp; y: {{debugData?.resizer?.videoTranslation?.y}}
+        </p>
+      </div>
+    </div>
+    <div class="uw-debug-info flex">
+      <pre>
+        {{debugDataPrettified}}
+      </pre>
     </div>
   </div>
 </template>
@@ -22,7 +88,8 @@ export default {
       debugData: {
         resizer: {},
         player: {},
-      }
+      },
+      debugDataPrettified: ''
     };
   },
   computed: {
@@ -31,6 +98,12 @@ export default {
       'resizerDebugData',
       'playerDebugData'
     ]),
+    windowWidth: () => {
+      return window.innerWidth;
+    },
+    windowHeight: () => {
+      return window.innerHeight;
+    },
   },
   watch: {
     showUi(visible) {
@@ -40,9 +113,11 @@ export default {
     },
     resizerDebugData(newData) {
       this.debugData.resizer = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
     },
     playerDebugData(newData) {
       this.debugData.player = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
     }
   },
   created() {
@@ -54,7 +129,7 @@ export default {
 }
 </script>
 
-<style lang="scss" src="../res/css/uwui-base.scss"></style>
+<style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
 <style lang="scss" scoped>
 @import '../res/css/uwui-base.scss';
 @import '../res/css/colors.scss';
@@ -71,10 +146,28 @@ export default {
     height: 100px;
     color: #fff;
     background-color: #000;
+
+    z-index: 999999999999999999;
   }
   .uw-hover:hover {
     background-color: #f00;
   }
+
+  .uw-debug-info {
+    width: 1200px;
+    height: 600px;
+
+    pointer-events: all !important;
+
+    background-color: rgba(0,0,0,0.69);
+    color: #fff;
+
+    overflow-y: scroll;
+  }
+
+  pre {
+    white-space: pre-wrap;
+  }
 }
 
 

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

@@ -232,10 +232,14 @@ class PlayerData {
       // NOTE: it's possible that notificationService hasn't been initialized yet at this point.
       //       no biggie if it wasn't, we just won't replace the notification UI
       this.notificationService?.replace(this.element);
-      this.ui?.updateDebugInfo('player', {dimensions: this.dimensions, elementId: element.id, elementClasses: element.classList});
+      this.reportPlayerDimensionForDebugging();
     }
   }
 
+  reportPlayerDimensionForDebugging() {
+    this.ui?.updateDebugInfo('player', {dimensions: this.dimensions, elementId: this.element.id, elementClasses: this.element.classList});
+  }
+
   getPlayer() {
     const host = window.location.hostname;
     let element = this.video.parentNode;

src/ext/lib/video-transform/Resizer.js

@@ -530,6 +530,11 @@ class Resizer {
 
     const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions();
 
+    debugObject['playerData'] = {
+      'dimensions': this.conf.player.dimensions,
+      'id': this.conf.player.element.id,
+      'classList': this.conf.player.element.classList
+    };
     debugObject['videoRawData'] = {
       streamDimensions: {
         x: this.conf.video.videoWidth,
@@ -543,7 +548,7 @@ class Resizer {
         x: this.conf.video.offsetWidth,
         y: this.conf.video.offsetHeight
       }
-    }
+    };
 
     const wdiff = this.conf.player.dimensions.width - realVideoWidth;
     const hdiff = this.conf.player.dimensions.height - realVideoHeight;
@@ -593,6 +598,7 @@ class Resizer {
       y: translate.y,
     }
 
+    this.conf.player.reportPlayerDimensionForDebugging();
     this.conf.player.ui?.updateDebugInfo('resizer', debugObject);
   
     this.logger.log('info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",