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

display some data

Browse Source
This commit is contained in:
Tamius Han 2020-12-16 01:40:09 +01:00
parent 9fb9667dba
commit 1cbe74252c
3 changed files with 109 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/csui/PlayerUiComponent.vue
View File

@ -2,8 +2,74 @@
<div class="uw-hover uv-hover-trigger-region">
TEST CONTENT
<div>
{{debugData}}
<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>
</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;
}
}

6
src/ext/lib/video-data/PlayerData.js
View File

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

8
src/ext/lib/video-transform/Resizer.js
View File

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