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

whitespace

Browse Source
This commit is contained in:
Tamius Han 2021-11-13 00:55:17 +01:00
parent 484db037c0
commit fb7a168d31
11 changed files with 64 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ext/lib/ar-detect/ArDetector.ts
View File

@ -390,6 +390,7 @@ class ArDetector {
}
private getVideoPlaybackState(): VideoPlaybackState {
try {
if (this.video.ended) {
return VideoPlaybackState.Ended;

30
src/ext/lib/video-transform/Resizer.ts
View File

@ -559,6 +559,36 @@ class Resizer {
}
}
computeCroppedAreas(stretchFactors) {
// PSA: offsetWidth and offsetHeight DO NOT INCLUDE
// ZOOM APPLIED THROUGH THE MAGIC OF CSS TRANSFORMS
const sourceWidth = this.conf.video.offsetWidth;
const sourceHeight = this.conf.video.offsetHeight;
// this is the size of the video AFTER zooming was applied but does
// not account for cropping. It may be bigger than the player in
// both dimensions. It may be smaller than player in both dimensions
const postZoomWidth = sourceWidth * stretchFactors.xFactor;
const postZoomHeight = sourceHeight * stretchFactors.yFactor;
// this is the size of the video after crop is applied
const displayedWidth = Math.min(this.conf.player.dimensions.width, postZoomWidth);
const displayedHeight = Math.min(this.conf.player.dimensions.height, postZoomHeight);
// these two are cropped areas. Negative values mean additional
// letterboxing or pillarboxing. We assume center alignment for
// the time being - we will correct that later if need be
const croppedX = (postZoomWidth - displayedWidth) * 0.5;
const croppedY = (postZoomHeight - displayedHeight) * 0.5;
return {
sourceVideoDimensions: {width: sourceWidth, height: sourceHeight},
postZoomVideoDimensions: {width: postZoomWidth, height: postZoomHeight},
displayedVideoDimensions: {width: displayedWidth, height: displayedHeight},
crop: {left: croppedX, top: croppedY},
};
}
/**
* Sometimes, sites (e.g. new reddit) will guarantee that video fits width of its container
* and let the browser figure out the height through the magic of height:auto. This is bad,

28
src/options/AutodetectionSettings.vue
View File

@ -28,7 +28,7 @@
How sensitive should aspect ratio detection be?
</div>
<div class="description">
Sensitive preset will allow the extension to correct aspect ratio even when letterbox isn't clearly defined. This
Sensitive preset will allow the extension to correct aspect ratio even when letterbox isn't clearly defined. This
can result in aspect ratio detection correcting aspect ratio when it shouldn't.
Accurate preset will take a more conservative approach to determining aspect ratio, correcting aspect ratio only when
it's absolutely sure that the aspect ratio needs changing. This option results in fewer incorrect aspect ratio corrections,
@ -56,7 +56,7 @@
<Button label="Custom (changed below)"
:selected="getSensitivity() === 'user-defined'"
/>
</div>
</div>
<h2 style="padding-top: 150px">Autodetection settings in detail</h2>
<!-- <div>
@ -75,11 +75,11 @@
</div>
<div class="info">Note that tick rate must be smaller than check frequency.
<!-- <a v-if="!showAdvancedOptions"
<!-- <a v-if="!showAdvancedOptions"
href="#"
@click="showAdvancedOptions = true"
>Show advanced options</a> -->
</div>
</div>
<div class="indent">
<div class="flex flex-row row-padding">
@ -127,7 +127,7 @@
</div>
</div>
<div class="label">Fallback mode</div>
<div class="description">
@ -344,7 +344,7 @@
us from wasting precious time trying to detect aspect ratio on frames that are too dark for reliable aspect ratio detection.<br/>
<b>Sample width, height:</b> Sample size. Since we're checking <i>every</i> pixel in this sample, dimensions should be kept small.<br/>
<b>Color variance treshold:</b> In videos (such as movie trailers), any text that appears on the black background is usually of
a roughly the same color, while dark movie footage is not. This allows us to trigger autodetection on dark movie footage and
a roughly the same color, while dark movie footage is not. This allows us to trigger autodetection on dark movie footage and
to not trigger autodetection when movie trailer flashes some text on black background. If color variance is greater than this value,
blackframe detection will use 'lax' (lower) cummulative threshold to determine whether the frame is black or not. If color variance
is less than this value, 'strict' (higher) cummulative threshold will be used to determine whether the frame is black or not instead.<br/>
@ -419,7 +419,7 @@
<div class="label">Edge detection</div>
<div class="description">
Options in this section govern edge detection.<br/>
<b>Sample width</b> — In a bid to detect "false" edges, we take two samples this many pixels wide near the point of our potential edge. One sample must be completely black, the other must contain a set
<b>Sample width</b> — In a bid to detect "false" edges, we take two samples this many pixels wide near the point of our potential edge. One sample must be completely black, the other must contain a set
amount of non-black pixels.<br/>
<b>Detection threshold</b> — non-black sample mentioned above needs to contain at least this many non-black pixels.<br/>
<b>Thickness quorum (per edge)</b> — amount of samples that agree on the thincknes of the blackbar that we need in order to establish aspect ratio. Every edge needs to have at least this many. Values higher than {{~~(settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold / 2)}} (quorum (total)/2) are pointless.<br/>
@ -454,7 +454,7 @@
Thickness quorum (per edge):
</div>
<div class="flex flex-input">
<input
<input
v-model="settings.active.arDetect.edgeDetection.confirmationThreshold"
/>
</div>
@ -464,7 +464,7 @@
Thicnkess quorum (total):
</div>
<div class="flex flex-input">
<input
<input
v-model="settings.active.arDetect.edgeDetection.singleSideConfirmationThreshold"
/>
</div>
@ -474,7 +474,7 @@
Logo threshold:
</div>
<div class="flex flex-input">
<input
<input
v-model="settings.active.arDetect.edgeDetection.logoThreshold"
/>
</div>
@ -484,7 +484,7 @@
Ignore middle area:
</div>
<div class="flex flex-input">
<input
<input
v-model="settings.active.arDetect.edgeDetection.middleIgnoredArea"
/>
</div>
@ -494,7 +494,7 @@
Detect limit:
</div>
<div class="flex flex-input">
<input
<input
v-model="settings.active.arDetect.edgeDetection.minColsForSearch"
/>
</div>
@ -503,7 +503,7 @@
<div class="label">Guard line</div>
<div class="description">
Quick test to determine whether aspect ratio hasn't changed. Test is performed by taking two samples on each edge of the image —
Quick test to determine whether aspect ratio hasn't changed. Test is performed by taking two samples on each edge of the image —
one in the last row of the letterbox (blackbar), and one in the first row of the video (image).<br/>
<b>Ignore edge margin:</b> We don't take blackbar and image samples {width * this} many pixels from left and right edge.<br/>
<b>Image threshold:</b> If all pixels in blackbar are black and this fraction (0-1) of pixels in image are non-black, we presume that aspect ratio hasn't changed.<br/>
@ -655,7 +655,7 @@ export default {
// this.lastSettings = JSON.parse(JSON.stringify(this.settings.active));
const ths = this;
this.$nextTick( () => {
ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2)
ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2)
ths.lastSettings = JSON.parse(JSON.stringify(ths.settings.active))
});
},

10
src/options/GeneralSettings.vue
View File

@ -210,7 +210,7 @@ export default {
const blob = new Blob([JSON.stringify(this.settings.active)], {type: 'application/json'});
const fileUrl = URL.createObjectURL(blob);
try {
if (BrowserDetect.firefox) {
// reminder — webextension-polyfill doesn't seem to work in vue!
@ -218,7 +218,7 @@ export default {
browser.downloads.download({saveAs: true, filename: 'ultrawidify-settings.json', url: fileUrl});
} else if (BrowserDetect.anyChromium) {
const ths = this;
chrome.permissions.request(
{permissions: ['downloads']},
(granted) => {
@ -227,7 +227,7 @@ export default {
} else {
ths.downloadPermissionError = true
}
}
}
)
}
} catch (e) {
@ -240,7 +240,7 @@ export default {
async importSettings($event) {
let file, text, settingsObj;
this.corruptedSettingsError = false;
try {
file = $event.target.files[0];
} catch (e) {
@ -258,7 +258,7 @@ export default {
return;
}
// validate settings
// validate settings
for (const key in this.settings.default) {
if (!settingsObj[key]) {
console.error("corrupted settings!")

4
src/options/SuperAdvancedSettings.vue
View File

@ -54,7 +54,7 @@ export default {
},
computed: {
// parsedSettings() {
// return
// return
// }
},
methods: {
@ -75,7 +75,7 @@ export default {
// this.lastSettings = JSON.parse(JSON.stringify(this.settings.active));
const ths = this;
this.$nextTick( () => {
ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2)
ths.parsedSettings = JSON.stringify(ths.lastSettings, null, 2)
ths.lastSettings = JSON.parse(JSON.stringify(ths.settings.active))
});
},

2
src/options/common/ConfirmationPopup.vue
View File

@ -21,7 +21,7 @@
</template>
<script>
import ShortcutButton from '../../common/components/ShortcutButton.vue'
import ShortcutButton from '../../common/components/ShortcutButton.vue'
export default {
props: {

2
src/options/controls-settings/ControlsSettings.vue
View File

@ -71,7 +71,7 @@
<ActionAlt v-if="action.cmd.length === 1 && (
action.cmd[0].action === 'change-zoom' ||
action.cmd[0].action === 'set-zoom' ||
action.cmd[0].action === 'set-pan' ||
action.cmd[0].action === 'set-pan' ||
action.cmd[0].action === 'pan' ||
action.cmd[0].action === 'set-pan'
)"

2
src/options/controls-settings/command-builder/CommandAddEdit.vue
View File

@ -112,7 +112,7 @@ export default {
}
},
mounted() {
},
props: {
action: Object,

2
src/options/controls-settings/command-builder/CommandBlock.vue
View File

@ -32,7 +32,7 @@
</div>
</div>
</div>
</template>

6
src/options/options.scss
View File

@ -6,7 +6,7 @@
body {
background-image: url('/res/img/settings/bg_random2.png');
background-size: 25em;
text-align: center;
z-index: -1000;
}
@ -163,7 +163,7 @@ body {
color: #fff;
font-size: 1.1em;
height: 13em !important;
}
.site_details {
font-size: 0.8em;
@ -179,7 +179,7 @@ body {
.details_ebox {
width: 12em !important;
background-color: rgba(0,0,0,0) !important;
border: 0px !important;
border: 0px !important;
color: #ffc !important;
margin-left: 0em !important;
}

10
src/popup/panels/VideoPanel.vue
View File

@ -31,10 +31,10 @@
<div class="row"
>
<!--
min, max and value need to be implemented in js as this slider
min, max and value need to be implemented in js as this slider
should use logarithmic scale
-->
<input id="_input_zoom_slider"
<input id="_input_zoom_slider"
class="input-slider"
type="range"
step="any"
@ -49,12 +49,12 @@
</div>
<div class="flex flex-nogrow flex-noshrink medium-small">
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
</div>
</div>
</div>
<div class="m-t-0-33em display-block">
<input id="_input_zoom_site_allow_pan"
type="checkbox"
type="checkbox"
/>
Pan with mouse
</div>
@ -178,7 +178,7 @@ export default {
},
changeZoom(nz) {
nz = Math.pow(2, nz);
this.$emit('zoom-change', nz);
this.$emit('zoom-change', nz);
this.exec.exec(
{cmd: [{action: 'set-zoom', arg: nz}]},
'page',