tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move debug data into a separate component/panel

Browse Source
This commit is contained in:
Tamius Han 2020-12-17 01:49:28 +01:00
parent 5cf74b4405
commit 93b8049b01
2 changed files with 184 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/csui/PlayerUiComponent.vue
View File

@ -1,86 +1,22 @@
<template>
<div class="uw-hover uv-hover-trigger-region">
TEST CONTENT
<div class="uw-debug-info flex flex-row">
<!-- 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>
<div class="uw-debug-info">
<ResizerDebugPanel :debugData="debugData">
</ResizerDebugPanel>
</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%;
left: 20%;
top: 10%;
left: 10%;
width: 100px;
height: 100px;
color: #fff;
@ -154,8 +96,17 @@ export default {
}
.uw-debug-info {
width: 1200px;
height: 600px;
position: absolute;
top: 10%;
left: 10%;
z-index: 999999999999999999;
width: 2500px;
height: 1200px;
max-width: 80%;
max-height: 80%;
pointer-events: all !important;

159
src/csui/PlayerUiPanels/ResizerDebugPanelComponent.vue Normal file
View File

@ -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>