Move debug data into a separate component/panel

src/csui/PlayerUiComponent.vue

@@ -1,86 +1,22 @@
 <template>
   <div class="uw-hover uv-hover-trigger-region">
     TEST CONTENT
-
+  </div>
-    <div class="uw-debug-info flex flex-row">
+  <div class="uw-debug-info">
-
+    <ResizerDebugPanel :debugData="debugData">
-      <!-- Player info -->
+    </ResizerDebugPanel>
-      <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>
 
 <script>
 import { mapState } from 'vuex';
 import Icon from '../common/components/Icon';
+import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
 
 export default {
   components: {
     Icon,
+    ResizerDebugPanel
   },
   data() {
     return {
@@ -138,10 +74,16 @@ export default {
 @import '../res/css/common.scss';
 
 .uw-ultrawidify-container-root {
+  // .relative-wrapper {
+  //   position: relative;
+  //   width: 100%;
+  //   height: 100%;
+  // }
+
   .uw-hover {
     position: absolute;
-    top: 20%;
+    top: 10%;
-    left: 20%;
+    left: 10%;
     width: 100px;
     height: 100px;
     color: #fff;
@@ -154,8 +96,17 @@ export default {
   }
 
   .uw-debug-info {
-    width: 1200px;
+    position: absolute;
-    height: 600px;
+
+    top: 10%;
+    left: 10%;
+    
+    z-index: 999999999999999999;
+
+    width: 2500px;
+    height: 1200px;
+    max-width: 80%;
+    max-height: 80%;
 
     pointer-events: all !important;
 

src/csui/PlayerUiPanels/ResizerDebugPanelComponent.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="panel-root">
+    <h1>Resizer debug data</h1>
+    <div class="flex flex-row flex-wrap">
+      <div class="panel">
+        <h3 class="panel-title">
+          Player info
+        </h3>
+        <div class="data-item">
+          <div class="data-title">Window size:
+            <small>(Inner size)</small>
+          </div>
+          <div class="data">{{windowWidth}} x {{windowHeight}}</div>
+          <div class="button" @click="refreshWindowSize()"><Icon icon="arrow-clockwise"></Icon> Refresh</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Player dimensions:</div>
+          <div class="data">{{debugData?.resizer?.playerData?.dimensions?.width ?? 'not detected'}} x {{debugData?.resizer?.playerData?.dimensions?.height ?? 'not detected'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Is fullscreen?</div>
+          <div class="data">{{debugData?.resizer?.playerData?.dimensions?.fullscreen ?? 'unknown'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Player id | classlist</div>
+          <div class="data">{{debugData?.resizer?.playerData?.elementId || '<no ID>'}} | {{debugData?.resizer?.playerData?.classList || '<no classes>'}}</div>
+        </div>
+      </div>
+
+        <!-- Stream info -->
+      <div class="panel">
+        <h3 class="panel-title">
+          Stream info
+        </h3>
+        <div class="data-item">
+          <div class="data-title">
+            Stream dimensions: <small>(Native size of the video)</small>
+          </div>
+          <div class="data">
+            {{debugData?.resizer?.videoRawData?.streamDimensions.x}} x {{debugData?.resizer?.videoRawData?.streamDimensions?.y}}
+          </div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">
+            Stream displayed dimensions: <small>(Video file is being upscaled to this size)</small>
+          </div>
+          <div class="data">
+            {{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed()}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed()}}
+          </div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Video element native size: <small>(Size of the html element. Should be same as above most of the time!)</small></div>
+          <div class="data">{{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed(1)}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed(1)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Size difference to player (raw): <small>(positive numbers: video element is bigger than player element)</small></div>
+          <div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.wdiff.toFixed(1)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.hdiff.toFixed(1)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Video element size (post zoom): <small>(Size of the html element after transform:scale is applied. Or at least, that's what Resizer::computeOffsets() thinks the final size is.)</small></div>
+          <div class="data">{{debugData?.resizer?.transformedSize?.x.toFixed(2)}} x {{debugData?.resizer?.transformedSize?.y.toFixed(2)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title"><b>Size difference to player (post-zoom):</b> <small>(same as above, except after cropping, stretching, panning and zoom are applied)</small></div>
+          <div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.wdiff.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.hdiff.toFixed(2)}}</div>
+        </div>
+      </div>
+
+      <!-- Transform info -->
+      <div class="panel">
+        <h3 class="panel-title">
+          Transformations
+        </h3>
+        <div class="data-item">
+          <div class="data-title">Alignment: <small>(I agree that 'left' and 'right' are both evil, but that's not the kind of alignments we're thinking of)</small></div>
+          <div class="data">{{debugData?.resizer?.videoTransform?.alignment || '<unknown>'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Scale factor</div>
+          <div class="data">x: {{debugData?.resizer?.videoTransform?.scale.x.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.videoTransform?.scale.y.toFixed(2)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Translation</div>
+          <div class="data">x: {{debugData?.resizer?.videoTransform?.translate.x.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.videoTransform?.translate.y.toFixed(2)}}</div>
+        </div>
+      </div>
+    </div>
+      <!-- <div class="uw-debug-info flex"> -->
+        <!-- <pre> -->
+          <!-- {{debugDataPrettified}} -->
+        <!-- </pre> -->
+      <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import Icon from '../../common/components/Icon';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    debugData: Object
+  },
+  data() {
+    return {
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight
+    };
+  },
+  methods: {
+    refreshWindowSize() {
+      this.windowWidth = window.innerWidth;
+      this.windowHeight = window.innerHeight;
+    },
+  }
+}
+</script>
+
+<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';
+
+// increase specificy with this one trick (webdevs hate him!)
+.uw-ultrawidify-container-root {
+  .panel-root {
+    display: block;
+    padding: 16px;
+  }
+
+  .panel {
+    display: inline-block;
+    width: 420px;
+    max-width: 100%;
+    padding: 12px 6px;
+  }
+
+  .data-item {
+    display: block;
+    margin-bottom: 0.69rem;
+  }
+
+  .data-title {
+
+    small {
+      display: block;
+      opacity: 0.69;
+    }
+  }
+  .data {
+    color: $primary-color;
+  }
+
+}
+</style>