Compare commits

..

No commits in common. "ca1a375f2d756b2a6c1eb649a95071bf3f5bde9e" and "15133e561f75b3728f4737e8868534d31186e7d5" have entirely different histories.

16 changed files with 116 additions and 292 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "6.0.2",
"version": "6.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,6 +1,6 @@
{
"name": "ultrawidify",
"version": "6.0.2",
"version": "6.0.1",
"description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
"author": "Tamius Han <tamius.han@gmail.com>",
"scripts": {

View File

@ -213,15 +213,7 @@ interface SettingsInterface {
ui: {
inPlayer: {
enabled: boolean,
minEnabledWidth: number, // don't show UI if player is narrower than % of screen width
activation: 'trigger-zone' | 'player', // what needs to be hovered in order for UI to be visible
triggerZoneDimensions: { // how large the trigger zone is (relative to player size)
width: number
height: number,
offsetX: number, // fed to translateX(offsetX + '%'). Valid range [-100, 0]
offsetY: number // fed to translateY(offsetY + '%'). Valid range [-100, 100]
},
enabled: boolean
}
}
@ -319,7 +311,6 @@ interface SettingsInterface {
internal?: CommandInterface[],
},
whatsNewChecked: boolean,
newFeatureTracker: any,
// -----------------------------------------
// ::: SITE CONFIGURATION :::
// -----------------------------------------

View File

@ -1,29 +1,12 @@
<template>
<div
class="context-spawn uw-ui-trigger"
style="z-index: 1000"
@mouseenter="(ev) => setTriggerZoneActive(true, ev)"
@mouseleave="(ev) => setTriggerZoneActive(false, ev)"
>
<div
class="spawn-container uw-trigger"
:style="triggerZoneStyles"
>
&nbsp;
</div>
</div>
<div
v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
class="context-spawn uw-clickable"
style="z-index: 1001"
@mouseenter="preventContextMenuHide()"
@mouseleave="allowContextMenuHide()"
>
<GhettoContextMenu
alignment="right" class="uw-menu"
@mouseenter="newFeatureViewUpdate('uw6.ui-popup')"
>
<GhettoContextMenu alignment="right">
<template v-slot:activator>
<div class="context-item">
Ultrawidify
@ -85,38 +68,12 @@
</GhettoContextMenuItem>
</slot>
</GhettoContextMenu>
<!-- shortcut for configuring UI -->
<GhettoContextMenuOption
v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0"
@click="showUwWindow('ui-config')"
>
<span style="color: #fa6;">I hate this popup<br/></span>
<span style="font-size: 0.8em">
<span style="text-transform: uppercase; font-size: 0.8em">
<a @click="showUwWindow('ui-config')">
Do something about it
</a> × <a @click="acknowledgeNewFeature('uw6.ui-popup')">keep the popup</a>
</span>
<br/>
<span style="opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
Also accessible via <span style="font-variant: small-caps">extension settings</span>.
</span>
</span>
</GhettoContextMenuOption>
<!-- -->
<GhettoContextMenuOption
@click="showUwWindow()"
label="Extension settings"
>
</GhettoContextMenuOption>
<GhettoContextMenuOption
@click="showUwWindow('about')"
label="Not working?"
>
</GhettoContextMenuOption>
<button @click="showUwWindow()">Not working?</button>
</div>
</slot>
</GhettoContextMenu>
@ -203,7 +160,6 @@ export default {
disabled: false,
contextMenuActive: false,
triggerZoneActive: false,
uiVisible: true,
debugData: {
@ -355,34 +311,6 @@ export default {
}
},
/**
* Handles trigger zone
*/
handleTriggerZone(mouseInside) {
console.log('handing trigger zone!', mouseInside);
// this.triggerZoneActive = mouseInside;
},
acknowledgeNewFeature(featureKey) {
delete this.settings.active.newFeatureTracker[featureKey];
this.settings.saveWithoutReload();
},
newFeatureViewUpdate(featureKey) {
if (!this.settings.active.newFeatureTracker[featureKey]) {
return;
}
try {
this.settings.active.newFeatureTracker[featureKey].show--;
this.settings.saveWithoutReload();
if (this.settings.active.newFeatureTracker[featureKey]?.show < 0) {
this.acknowledgeNewFeature(featureKey);
}
} catch (e) {
// do nothing
}
},
/**
* Sends message to parent _without_ using event bus.
*/
@ -396,16 +324,14 @@ export default {
},
preventContextMenuHide() {
console.log('entered context menu ...');
this.contextMenuActive = true;
},
allowContextMenuHide() {
console.log('exited context menu ...');
this.contextMenuActive = false;
},
setTriggerZoneActive(active, event) {
this.triggerZoneActive = active;
},
showUwWindow() {
this.uwWindowFadeOut = false;
this.uwWindowVisible = true;
@ -547,10 +473,6 @@ export default {
// white-space: nowrap;
// }
// .spawn-container {
// border: 1px solid white;
// }
}
</style>

View File

@ -43,8 +43,26 @@
<p class="text-center">
<a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
</p>
<h2>Fun stuff</h2>
<p>
I also have <a href="https://instagram.com/shaman_urkog" target="_blank">instagram with nerdy shit</a> <small>(mini painting + various fantasy events)</small>.
This is probably a bad idea but
</p>
<p>
Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
</p>
<p>
Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
</p>
<p>
If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
</p>
<p>
Tamius
</p>
<p>
</p>
<p>
<small>I am not paid to shill this.</small>
</p>
</div>
</div>

View File

@ -77,7 +77,27 @@
<p class="text-center">
<a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
</p>
<h2>Fun stuff</h2>
<p>
This is probably a bad idea but
</p>
<p>
Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
</p>
<p>
Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
</p>
<p>
If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
</p>
<p>
Tamius
</p>
<p>
</p>
<p>
<small>I am not paid to shill this.</small>
</p>
</div>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div class="context-container" @mouseleave="hideContextMenu()">
<GhettoContextMenuItem
class="activator uw-clickable"
class="activator"
:css="{
'expand-left': alignment === 'left',
'expand-right': alignment === 'right',
@ -13,7 +13,7 @@
</GhettoContextMenuItem>
<div
v-if="contextMenuVisible"
class="context-menu uw-clickable"
class="context-menu"
:class="{
'menu-left': alignment === 'left',
'menu-right': alignment === 'right'

View File

@ -1,12 +1,7 @@
<template>
<div>
<GhettoContextMenuItem>
<template v-if="label">
{{label}} {{shortcut ? `(${shortcut})` : ''}}
</template>
<template v-else>
<slot></slot>
</template>
</GhettoContextMenuItem>
</div>
</template>

View File

@ -14,29 +14,7 @@ export default {
}, this.origin);
});
},
data() {
return {
playerDimensions: undefined,
triggerZoneStyles: {
height: '50dvh',
width: '50dvw',
transform: 'translateX(-50%)'
},
}
},
methods: {
playerDimensionsUpdate(dimensions) {
if (dimensions?.width !== this.playerDimensions?.width || dimensions?.height !== this.playerDimensions?.height) {
this.playerDimensions = dimensions;
this.triggerZoneStyles = {
height: `${this.playerDimensions.height * 0.5}px`,
width: `${this.playerDimensions.width * 0.5}px`,
transform: `translate(${(this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX)}%, ${this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY}%)`,
};
}
},
/**
* Handles 'uwui-probe' events. It checks whether there's a clickable element under
* cursor, and sends a reply to the content scripts that indicates whether pointer-events
@ -48,6 +26,16 @@ export default {
}
this.lastProbeTs = eventData.ts;
// show ultrawidify trigger zone and set it to vanish after 250ms
// but don't show the trigger zone behind an active popup
if (! this.uwWindowVisible) {
this.uwTriggerZoneVisible = true;
clearTimeout(this.uwTriggerZoneTimeout);
this.uwTriggerZoneTimeout = setTimeout(
() => this.uwTriggerZoneVisible = false,
250
);
}
/* we check if our mouse is hovering over an element.
*
@ -59,36 +47,16 @@ export default {
* our top-level element.
*/
let isClickable = false;
let isOverTriggerZone = false;
const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y);
let element = document.elementFromPoint(eventData.coords.x, eventData.coords.y);
for (const element of elements) {
if (element.classList?.contains('uw-clickable')) {
while (element) {
if (element?.classList.contains('uw-clickable')) {
// we could set 'pointerEvents' here and now & simply use return, but that
// might cause us a problem if we ever try to add more shit to this function
isClickable = true;
break;
}
if (element.classList?.contains('uw-ui-trigger')) {
isOverTriggerZone = true;
}
}
this.triggerZoneActive = isOverTriggerZone;
// show ultrawidify trigger zone and set it to vanish after 250ms
// but don't show the trigger zone behind an active popup
if (
eventData.canShowUI
&& (this.settings.active.ui.inPlayer.activation !== 'player' || isOverTriggerZone)
) {
if (! this.uwWindowVisible) {
this.uwTriggerZoneVisible = true;
clearTimeout(this.uwTriggerZoneTimeout);
this.uwTriggerZoneTimeout = setTimeout(
() => this.uwTriggerZoneVisible = false,
250
);
}
} else {
this.uwTriggerZoneVisible = false;
element = element.parentElement;
}
window.parent.postMessage(

View File

@ -159,7 +159,7 @@ const ExtensionConfPatch = [
userOptions.sites['@empty'].defaultType = 'modified';
}
}, {
forVersion: '6.0.2-0',
forVersion: '6.0.1-7',
updateFn: (userOptions: SettingsInterface, defaultOptions) => {
// remove custom CSS, as it is no longer needed
for (const site in userOptions.sites) {
@ -168,18 +168,9 @@ const ExtensionConfPatch = [
}
userOptions.ui = {
inPlayer: {
enabled: true, // enable by default on new installs
minEnabledWidth: 0.75,
activation: 'player',
triggerZoneDimensions: {
width: 0.5,
height: 0.5,
offsetX: -50,
offsetY: 0,
enabled: false, // keep disabled for existing users
}
}
},
userOptions.newFeatureTracker['uw6.ui-popup'] = {show: 10};
}
}
];

View File

@ -160,14 +160,6 @@ const ExtensionConf: SettingsInterface = {
ui: {
inPlayer: {
enabled: true, // enable by default on new installs
minEnabledWidth: 0.75,
activation: 'player',
triggerZoneDimensions: {
width: 0.5,
height: 0.5,
offsetX: -50,
offsetY: 0
}
}
},
@ -1423,9 +1415,6 @@ const ExtensionConf: SettingsInterface = {
}
},
whatsNewChecked: true,
newFeatureTracker: {
'uw6.ui-popup': {show: 10}
},
// -----------------------------------------
// ::: SITE CONFIGURATION :::
// -----------------------------------------

View File

@ -262,7 +262,13 @@ export class Aard {
this.settings = videoData.settings;
this.eventBus = videoData.eventBus;
this.testResults = initAardTestResults(this.settings.active.arDetect)
this.initEventBus();
// this.sampleCols = [];
// this.blackLevel = this.settings.active.arDetect.blackbar.blackLevel;
this.arid = (Math.random()*100).toFixed();
// we can tick manually, for debugging
@ -313,9 +319,6 @@ export class Aard {
this.videoData.resizer.lastAr = {type: AspectRatioType.AutomaticUpdate, ratio: this.defaultAr};
}
// do full reset of test samples
this.testResults = initAardTestResults(this.settings.active.arDetect);
if (this.animationFrame) {
window.cancelAnimationFrame(this.animationFrame);
}
@ -634,6 +637,9 @@ export class Aard {
return;
}
const cornerViolations = [0,0,0,0];
let subpixelViolation = false;
let edgePosition = this.settings.active.arDetect.sampling.edgePosition;
const segmentPixels = width * edgePosition;
const edgeSegmentSize = segmentPixels * 4;
@ -649,12 +655,14 @@ export class Aard {
let i = rowStart;
while (i < firstSegment) {
subpixelViolation = false;
if (
imageData[i] > this.testResults.blackThreshold
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
this.testResults.guardLine.cornerPixelsViolated[Corner.TopLeft]++;
cornerViolations[Corner.TopLeft]++;
}
i += 4;
}
@ -664,10 +672,6 @@ export class Aard {
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
// DONT FORGET TO INVALIDATE GUARDL LINE
this.testResults.guardLine.top = -1;
this.testResults.guardLine.bottom = -1;
this.testResults.guardLine.invalidated = true;
return;
};
i += 4;
@ -678,7 +682,7 @@ export class Aard {
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
this.testResults.guardLine.cornerPixelsViolated[Corner.TopRight]++;
cornerViolations[Corner.TopRight]++;
}
i += 4; // skip over alpha channel
}
@ -700,7 +704,7 @@ export class Aard {
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
this.testResults.guardLine.cornerPixelsViolated[Corner.BottomLeft]++;
cornerViolations[Corner.BottomLeft]++;
}
i += 4; // skip over alpha channel
}
@ -713,10 +717,6 @@ export class Aard {
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
// DONT FORGET TO INVALIDATE GUARDL LINE
this.testResults.guardLine.top = -1;
this.testResults.guardLine.bottom = -1;
this.testResults.guardLine.invalidated = true;
return;
};
i += 4;
@ -730,7 +730,7 @@ export class Aard {
|| imageData[i + 1] > this.testResults.blackThreshold
|| imageData[i + 2] > this.testResults.blackThreshold
) {
this.testResults.guardLine.cornerPixelsViolated[Corner.BottomRight]++;
cornerViolations[Corner.BottomRight]++;
}
i += 4; // skip over alpha channel
}
@ -738,23 +738,21 @@ export class Aard {
const maxViolations = segmentPixels * 0.20; // TODO: move the 0.2 threshold into settings
console.log('Corner violations counts — segment px & max violations,', segmentPixels, maxViolations )
// we won't do a loop for this few elements
// corners with stuff in them will also be skipped in image test
this.testResults.guardLine.cornerViolated[0] = this.testResults.guardLine.cornerPixelsViolated[0] > maxViolations;
this.testResults.guardLine.cornerViolated[1] = this.testResults.guardLine.cornerPixelsViolated[1] > maxViolations;
this.testResults.guardLine.cornerViolated[2] = this.testResults.guardLine.cornerPixelsViolated[2] > maxViolations;
this.testResults.guardLine.cornerViolated[3] = this.testResults.guardLine.cornerPixelsViolated[3] > maxViolations;
this.testResults.guardLine.cornerViolations[0] = cornerViolations[0] > maxViolations;
this.testResults.guardLine.cornerViolations[1] = cornerViolations[1] > maxViolations;
this.testResults.guardLine.cornerViolations[2] = cornerViolations[2] > maxViolations;
this.testResults.guardLine.cornerViolations[3] = cornerViolations[3] > maxViolations;
const maxInvalidCorners = 1; // TODO: move this into settings — by default, we allow one corner to extend past the
// guard line in order to prevent watermarks/logos from preventing cropping the video
// this works because +true converts to 1 and +false converts to 0
const dirtyCount = +this.testResults.guardLine.cornerViolated[0]
+ +this.testResults.guardLine.cornerViolated[1]
+ +this.testResults.guardLine.cornerViolated[2]
+ +this.testResults.guardLine.cornerViolated[3];
const dirtyCount = +this.testResults.guardLine.cornerViolations[0]
+ +this.testResults.guardLine.cornerViolations[1]
+ +this.testResults.guardLine.cornerViolations[2]
+ +this.testResults.guardLine.cornerViolations[3];
if (dirtyCount > maxInvalidCorners) {
this.testResults.guardLine.invalidated = true;
@ -804,7 +802,7 @@ export class Aard {
// we don't run image detection in corners that may contain logos, as such corners
// may not be representative
if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
while (i < firstSegment) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -828,7 +826,7 @@ export class Aard {
};
i++; // skip over alpha channel
}
if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
while (i < rowEnd) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -844,7 +842,7 @@ export class Aard {
// we don't run image detection in corners that may contain logos, as such corners
// may not be representative
if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
while (i < firstSegment) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -868,7 +866,7 @@ export class Aard {
};
i++; // skip over alpha channel
}
if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
while (i < rowEnd) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -894,7 +892,7 @@ export class Aard {
// we don't run image detection in corners that may contain logos, as such corners
// may not be representative
if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
while (i < firstSegment) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -918,7 +916,7 @@ export class Aard {
};
i++; // skip over alpha channel
}
if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
while (i < rowEnd) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -934,7 +932,7 @@ export class Aard {
// we don't run image detection in corners that may contain logos, as such corners
// may not be representative
if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
while (i < firstSegment) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -958,7 +956,7 @@ export class Aard {
};
i++; // skip over alpha channel
}
if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
while (i < rowEnd) {
imagePixel = false;
imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@ -1540,9 +1538,7 @@ export class Aard {
}
}
// BOTTOM
// Note that bottomRows candidates are measured from the top
// Well have to invert our candidate after we're done
// BOTTOM:
if (
this.testResults.aspectRatioCheck.bottomRows[0] === this.testResults.aspectRatioCheck.bottomRows[1]
&& this.testResults.aspectRatioCheck.bottomRows[0] === this.testResults.aspectRatioCheck.bottomRows[2]
@ -1590,9 +1586,6 @@ export class Aard {
}
}
// Convert bottom candidate to letterbox width
this.testResults.aspectRatioCheck.bottomCandidateDistance = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : height - this.testResults.aspectRatioCheck.bottomCandidate;
/**
* Get final results.
* Let candidateA hold better-quality candidate, and let the candidateB hold the lower-quality candidate.
@ -1616,8 +1609,8 @@ export class Aard {
}
const maxOffset = ~~(height * this.settings.active.arDetect.edgeDetection.maxLetterboxOffset)
const diff = this.testResults.aspectRatioCheck.topCandidate - this.testResults.aspectRatioCheck.bottomCandidateDistance;
const candidateAvg = ~~((this.testResults.aspectRatioCheck.topCandidate + this.testResults.aspectRatioCheck.bottomCandidateDistance) / 2);
const diff = this.testResults.aspectRatioCheck.topCandidate - this.testResults.aspectRatioCheck.bottomCandidate;
const candidateAvg = ~~((this.testResults.aspectRatioCheck.topCandidate + this.testResults.aspectRatioCheck.bottomCandidate) / 2);
if (diff > maxOffset) {
this.testResults.aspectRatioUncertain = true;
@ -1627,7 +1620,7 @@ export class Aard {
this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.topCandidate;
this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.bottomCandidate;
this.testResults.guardLine.top = Math.max(this.testResults.imageLine.top - 2, 0);
this.testResults.guardLine.bottom = Math.min(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
this.testResults.guardLine.bottom = Math.max(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
}
this.testResults.aspectRatioUncertain = false;
this.testResults.letterboxWidth = candidateAvg;

View File

@ -10,8 +10,7 @@ export interface AardTestResults {
top: number, // is cumulative
bottom: number, // is cumulative
invalidated: boolean,
cornerViolated: [boolean, boolean, boolean, boolean],
cornerPixelsViolated: [0,0,0,0]
cornerViolations: [boolean, boolean, boolean, boolean],
},
imageLine: {
top: number, // is cumulative
@ -26,7 +25,6 @@ export interface AardTestResults {
topCandidate: number,
topCandidateQuality: number,
bottomCandidate: number,
bottomCandidateDistance: number,
bottomCandidateQuality: number,
},
aspectRatioUncertain: boolean,
@ -47,8 +45,7 @@ export function initAardTestResults(settings: AardSettings): AardTestResults {
top: -1,
bottom: -1,
invalidated: false,
cornerViolated: [false, false, false, false],
cornerPixelsViolated: [0,0,0,0]
cornerViolations: [false, false, false, false],
},
imageLine: {
top: -1,
@ -63,7 +60,6 @@ export function initAardTestResults(settings: AardSettings): AardTestResults {
topCandidate: 0,
topCandidateQuality: 0,
bottomCandidate: 0,
bottomCandidateDistance: 0,
bottomCandidateQuality: 0,
},
aspectRatioUncertain: false,
@ -80,14 +76,10 @@ export function resetAardTestResults(results: AardTestResults): void {
results.notLetterbox = false;
results.imageLine.invalidated = false;
results.guardLine.invalidated = false;
results.guardLine.cornerViolated[0] = false;
results.guardLine.cornerViolated[1] = false;
results.guardLine.cornerViolated[2] = false;
results.guardLine.cornerViolated[3] = false;
results.guardLine.cornerPixelsViolated[0] = 0;
results.guardLine.cornerPixelsViolated[1] = 0;
results.guardLine.cornerPixelsViolated[2] = 0;
results.guardLine.cornerPixelsViolated[3] = 0;
results.guardLine.cornerViolations[0] = false;
results.guardLine.cornerViolations[1] = false;
results.guardLine.cornerViolations[2] = false;
results.guardLine.cornerViolations[3] = false;
results.letterboxWidth = 0;
results.letterboxOffset = 0;
results.aspectRatioUpdated = false;

View File

@ -13,7 +13,7 @@ const csuiVersions = {
class UI {
constructor(
interfaceId,
uiConfig, // {parentElement?, eventBus?, isGlobal?, playerData}
uiConfig, // {parentElement?, eventBus?}
) {
this.interfaceId = interfaceId;
this.uiConfig = uiConfig;
@ -31,9 +31,6 @@ class UI {
this.disablePointerEvents = false;
this.saveState = undefined;
this.playerData = uiConfig.playerData;
this.uiSettings = uiConfig.uiSettings;
}
async init() {
@ -111,16 +108,12 @@ class UI {
y: event.pageY - this.uiIframe.offsetTop
};
const playerData = this.canShowUI(coords);
// ask the iframe to check whether there's a clickable element
this.uiIframe.contentWindow.postMessage(
{
action: 'uwui-probe',
coords,
playerDimensions: playerData.playerDimensions,
canShowUI: playerData.canShowUI,
ts: +new Date() // this should be accurate enough for our purposes,
ts: +new Date() // this should be accurate enough for our purposes
},
uiURI
);
@ -137,7 +130,6 @@ class UI {
rootDiv.appendChild(iframe);
}
initMessaging() {
// subscribe to events coming back to us. Unsubscribe if iframe vanishes.
const messageHandlerFn = (message) => {
@ -217,51 +209,6 @@ class UI {
}
}
/**
* Checks whether mouse is moving over either:
* * <video> element
* * player element ()
* * uwui-clickable element
*/
canShowUI(coords) {
const playerCssClass = 'uw-ultrawidify-player-css';
const result = {
playerDimensions: undefined,
canShowUI: false
}
if (this.playerData?.dimensions) {
result.playerDimensions = this.playerData.dimensions;
}
// if player is not wide enough, we do nothing
if (
!this.isGlobal && // this.isGlobal is basically 'yes, do as I say'
!document.fullscreenElement && // if we are in full screen, we allow it in every case as player detection is not 100% reliable,
result.playerDimensions?.width && // which makes playerDimensions.width unreliable as well (we assume nobody uses browser in
// fullscreen mode unless watching videos)
result.playerDimensions.width < window.screen.width * (this.uiSettings.inPlayer.minEnabledWidth ?? 0)
) {
result.canShowUI = false;
return result;
}
const elements = document.elementsFromPoint(coords.x, coords.y);
for (const element of elements) {
if (
element instanceof HTMLVideoElement
|| element.classList.contains(playerCssClass)
) {
result.canShowUI = true;
return result;
}
}
return result;
}
/**
* Handles events received from the iframe.
* @param {*} event

View File

@ -157,9 +157,7 @@ class PlayerData {
'ultrawidifyUi',
{
parentElement: this.element,
eventBus: this.eventBus,
playerData: this,
uiSettings: this.videoData.settings.active.ui
eventBus: this.eventBus
}
);
}

View File

@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Ultrawidify",
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
"version": "6.0.2",
"version": "6.0.1",
"icons": {
"32":"res/icons/uw-32.png",
"64":"res/icons/uw-64.png"