479 lines
16 KiB
Vue
479 lines
16 KiB
Vue
<template>
|
|
<div class="flex flex-col tab-root">
|
|
<div class="flex flex-row flex-wrap">
|
|
|
|
<!-- AARD performance metrics -->
|
|
<div class="sub-panel">
|
|
<div class="flex flex-row">
|
|
<h1><mdicon name="television-play" :size="32" /> Automatic Aspect Ratio Detection</h1>
|
|
</div>
|
|
<div class="sub-panel-content">
|
|
<p>
|
|
<b>Autodetection performance</b>
|
|
</p>
|
|
<p>
|
|
Automatic aspect ratio detection is a resource-hungry feature.
|
|
This page allows you to trade autodetection accuracy and/or frequency for
|
|
better performance.
|
|
</p>
|
|
<p>
|
|
Note that some browsers <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now" target="_blank">limit the accuracy of time measurements</a>, though once the bars go past the blue line those limitations are largely inconsequential.
|
|
</p>
|
|
<div class="performance-graph-container">
|
|
<div class="performance-graph">
|
|
<div class="time-budget hz144"></div>
|
|
<div class="time-budget hz120"></div>
|
|
<div class="time-budget hz60"></div>
|
|
<div class="time-budget hz30"></div>
|
|
<div class="time-budget hz24"></div>
|
|
<div class="time-budget rest"></div>
|
|
|
|
<div class="bar-container">
|
|
<div class="average-case">
|
|
<div class="stats">
|
|
<b>Average: </b>
|
|
<span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="processing">
|
|
processing {{
|
|
Math.max(
|
|
(performanceData?.total?.averageTime ?? 0)
|
|
- (performanceData?.imageDraw?.averageTime ?? 0)
|
|
- (performanceData?.blackFrame?.averageTime ?? 0),
|
|
0
|
|
).toFixed(1)
|
|
}} ms
|
|
</span>
|
|
</div>
|
|
<div class="bar">
|
|
<div
|
|
class="draw"
|
|
:style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="draw-blackframe"
|
|
:style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="processing"
|
|
:style="{
|
|
'width': Math.max(
|
|
(performanceData?.total?.averageTime ?? 0)
|
|
- (performanceData?.imageDraw?.averageTime ?? 0)
|
|
- (performanceData?.blackFrame?.averageTime ?? 0),
|
|
0
|
|
) + '%'
|
|
}"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="worst-case">
|
|
<div class="stats">
|
|
<b>Worst: </b>
|
|
<span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="processing">
|
|
processing {{
|
|
Math.max(
|
|
(performanceData?.total?.worstTime ?? 0)
|
|
- (performanceData?.imageDraw?.worstTime ?? 0)
|
|
- (performanceData?.blackFrame?.worstTime ?? 0),
|
|
0
|
|
).toFixed(1)
|
|
}} ms
|
|
</span>
|
|
</div>
|
|
<div class="bar">
|
|
<div
|
|
class="draw"
|
|
:style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="draw-blackframe"
|
|
:style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="processing"
|
|
:style="{
|
|
'width': Math.max(
|
|
(performanceData?.total?.worstTime ?? 0)
|
|
- (performanceData?.imageDraw?.worstTime ?? 0)
|
|
- (performanceData?.blackFrame?.worstTime ?? 0),
|
|
0
|
|
) + '%'
|
|
}"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="average-case">
|
|
<div class="stats">
|
|
<b>AR change (average): </b>
|
|
<span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="processing">processing {{
|
|
(
|
|
(performanceData?.fastLetterbox?.averageTime ?? 0)
|
|
+ (performanceData?.edgeDetect?.averageTime ?? 0)
|
|
).toFixed(1)
|
|
}} ms</span>
|
|
</div>
|
|
<div class="bar">
|
|
<div
|
|
class="draw"
|
|
:style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="draw-blackframe"
|
|
:style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="processing"
|
|
:style="{
|
|
'width': (
|
|
(performanceData?.fastLetterbox?.averageTime ?? 0)
|
|
+ (performanceData?.edgeDetect?.averageTime ?? 0)
|
|
) + '%'
|
|
}"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="worst-case">
|
|
<div class="stats">
|
|
<b>AR change (worst): </b>
|
|
<span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
|
|
<span class="processing">processing {{
|
|
(
|
|
(performanceData?.fastLetterbox?.worstTime ?? 0)
|
|
+ (performanceData?.edgeDetect?.worstTime ?? 0)
|
|
).toFixed(1)
|
|
}} ms</span>
|
|
</div>
|
|
<div class="bar">
|
|
<div
|
|
class="draw"
|
|
:style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="draw-blackframe"
|
|
:style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
|
|
>
|
|
</div>
|
|
<div
|
|
class="processing"
|
|
:style="{
|
|
'width': (
|
|
(performanceData?.fastLetterbox?.worstTime ?? 0)
|
|
+ (performanceData?.edgeDetect?.worstTime ?? 0)
|
|
) + '%'
|
|
}"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="settings-segment">
|
|
<h2>Basic settings</h2>
|
|
|
|
<div class="option">
|
|
<div class="name">
|
|
Autodetection frequency
|
|
</div>
|
|
<div class="description">
|
|
Shorter intervals (left side of the slider) are more responsive to changes in aspect ratio detections,
|
|
but requires more system resources.
|
|
</div>
|
|
<div class="indent">
|
|
<div class="flex flex-row row-padding">
|
|
<div class="flex flex-input">
|
|
More often <small>(~60/s)</small>
|
|
<input type="range"
|
|
:value="Math.log(settings.active.arDetect.timers.playing)"
|
|
@change="setArCheckFrequency($event.target.value)"
|
|
min="2.3"
|
|
max="9.3"
|
|
step="any"
|
|
/>
|
|
Less often <small>(~1/10s)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option">
|
|
<div class="name">
|
|
Autodetection sensitivity
|
|
</div>
|
|
<div class="description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="label">Maximum allowed vertical video misalignment:</div>
|
|
<div class="input">
|
|
<input v-model="settings.active.arDetect.allowedMisaligned" />
|
|
</div>
|
|
<div class="description">
|
|
Ultrawidify detects letterbox only if video is vertically centered. Some people are bad at vertically
|
|
centering the content, though. This is how off-center the video can be before autodetection will
|
|
refuse to crop it.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option">
|
|
<div class="name">Video sample size</div>
|
|
<div class="input">
|
|
<input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width" /> x <input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="label">Sample columns:</div>
|
|
<div class="input"><input v-model="settings.active.arDetect.sampling.staticCols" /></div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="label">Sample rows:</div>
|
|
<div class="input"><input v-model="settings.active.arDetect.sampling.staticRows" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Button from '../components/Button.vue'
|
|
import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
|
|
import ShortcutButton from '../components/ShortcutButton';
|
|
import EditShortcutButton from '../components/EditShortcutButton';
|
|
import BrowserDetect from '../../../ext/conf/BrowserDetect';
|
|
import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
|
|
import StretchType from '../../../common/enums/StretchType.enum';
|
|
import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
|
|
import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
exec: null,
|
|
performanceData: {},
|
|
graphRefreshInterval: undefined,
|
|
}
|
|
},
|
|
mixins: [
|
|
],
|
|
props: [
|
|
'settings',
|
|
'frame',
|
|
'eventBus',
|
|
'site'
|
|
],
|
|
created() {
|
|
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
|
|
},
|
|
mounted() {
|
|
this.eventBus.sendToTunnel('get-aard-timing');
|
|
this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.graphRefreshInterval);
|
|
},
|
|
components: {
|
|
ShortcutButton,
|
|
EditShortcutButton,
|
|
Button,
|
|
AlignmentOptionsControlComponent
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
async openOptionsPage() {
|
|
BrowserDetect.runtime.openOptionsPage();
|
|
},
|
|
refreshGraph() {
|
|
this.eventBus.sendToTunnel('get-aard-timing');
|
|
},
|
|
handleConfigBroadcast(data) {
|
|
if (data.type === 'aard-performance-data') {
|
|
this.performanceData = data.performanceData;
|
|
this.$nextTick( () => this.$forceUpdate() );
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
|
|
<style lang="scss" src="../res-common/panels.scss" scoped module></style>
|
|
<style lang="scss" src="../res-common/common.scss" scoped module></style>
|
|
|
|
<style lang="scss" scoped module>
|
|
@import '../res-common/variables';
|
|
|
|
.performance-graph-container {
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
height: 8rem;
|
|
padding: 1rem;
|
|
|
|
.performance-graph {
|
|
border: 1px solid #fa6;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// graph is 100 ms wide
|
|
.time-budget {
|
|
height: 100%;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
box-sizing: border-box;
|
|
|
|
z-index: 100;
|
|
|
|
&.hz144 {
|
|
width: 6.9%;
|
|
// background-color: rgba(143, 143, 235, 0.47);
|
|
}
|
|
&.hz120 {
|
|
width: 1.39%;
|
|
// background-color: rgba(108, 108, 211, 0.441);
|
|
}
|
|
&.hz60 {
|
|
width: 8.33%;
|
|
// background-color: rgba(78, 78, 182, 0.327);
|
|
border-right: 2px solid rgb(96, 96, 227);
|
|
&::after {
|
|
content: '60fps';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -2px;
|
|
|
|
border-right: 2px solid rgb(96, 96, 227);
|
|
|
|
transform: translateY(-100%);
|
|
|
|
font-size: 0.6rem;
|
|
padding-right: 0.25rem;
|
|
text-transform: small-caps;
|
|
}
|
|
}
|
|
&.hz30 {
|
|
width: 16.67%;
|
|
// background-color: rgba(56, 56, 151, 0.308);
|
|
border-right: 2px solid #fb772a;
|
|
|
|
&::after {
|
|
content: '30fps';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -2px;
|
|
|
|
border-right: 2px solid #fb772a;
|
|
|
|
transform: translateY(-100%);
|
|
|
|
font-size: 0.6rem;
|
|
padding-right: 0.25rem;
|
|
text-transform: small-caps;
|
|
}
|
|
}
|
|
&.hz24 {
|
|
width: 8.33%;
|
|
// background-color: rgba(37, 37, 118, 0.269);
|
|
}
|
|
}
|
|
|
|
|
|
.bar-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
|
|
> div {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.stats {
|
|
background-color: rgba(0, 0, 0, 0.544);
|
|
font-size: 0.75rem;
|
|
font-family: 'Overpass Mono';
|
|
z-index: 11010;
|
|
|
|
span {
|
|
font-size: 0.75rem;
|
|
z-index: 11011;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
margin-top: 0.25rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
&.draw::before {
|
|
background-color: #fb772a;
|
|
}
|
|
&.draw-blackframe::before {
|
|
background-color: #e70c0c;
|
|
}
|
|
&.processing::before {
|
|
background-color: rgb(176, 167, 239);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
width: 100%;
|
|
height: 0.69rem;
|
|
background-color: #000;
|
|
|
|
overflow: hidden;
|
|
* {
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|
|
|
|
.draw {
|
|
background-color: #fb772a;
|
|
}
|
|
.draw-blackframe {
|
|
background-color: #e70c0c;
|
|
}
|
|
.processing {
|
|
background-color: rgb(176, 167, 239);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|