Compare commits

..

No commits in common. "ad1e73d0cc15d8c24f48dea73114a15aa9d92ebb" and "33e3bec3373ebe2ce43c0d1bd7d6770be3e17df8" have entirely different histories.

9 changed files with 37 additions and 157 deletions

View File

@ -329,7 +329,6 @@ export interface SiteSettingsInterface {
stretchModePersistence?: CropModePersistence; stretchModePersistence?: CropModePersistence;
alignmentPersistence?: CropModePersistence; alignmentPersistence?: CropModePersistence;
playerAutoConfig?: PlayerAutoConfigInterface;
activeDOMConfig?: string; activeDOMConfig?: string;
DOMConfig?: { [x: string]: SiteDOMSettingsInterface }; DOMConfig?: { [x: string]: SiteDOMSettingsInterface };
@ -342,12 +341,6 @@ export interface SiteSettingsInterface {
override?: boolean; // whether settings for this site will be overwritten by extension upgrade script override?: boolean; // whether settings for this site will be overwritten by extension upgrade script
} }
export interface PlayerAutoConfigInterface {
modified: boolean;
initialIndex: number;
currentIndex: number;
}
export interface SiteDOMSettingsInterface { export interface SiteDOMSettingsInterface {
type: 'official' | 'community' | 'user-defined' | 'modified' | undefined; type: 'official' | 'community' | 'user-defined' | 'modified' | undefined;
elements?: { elements?: {

View File

@ -24,17 +24,7 @@
@mouseleave="allowContextMenuHide()" @mouseleave="allowContextMenuHide()"
> >
<template v-slot:activator> <template v-slot:activator>
<div class="context-item uw-clickable uw-menu-trigger relative"> <div class="context-item uw-clickable uw-menu-trigger">
<div v-if="hoverStats.isOverTriggerMenu && !hoverStats.hasMouse" class="absolute ui-warning">
<b>Video player is not being detected correctly</b><br/>
<p>
That's why this menu doesn't work correctly.
</p>
<p>
It may start working if you move your mouse over the button a few times. If it doesn't, open the UI from the extension popup.
</p>
</div>
Ultrawidify Ultrawidify
</div> </div>
</template> </template>
@ -137,7 +127,7 @@
</SupportLevelIndicator> </SupportLevelIndicator>
<div v-if="statusFlags.hasDrm" class="aard-blocked"> <div v-if="statusFlags.hasDrm" class="aard-blocked">
Autodetection potentially<br/> Autodetection potentially<br/>
unavailable due to <a style="color: #fff" href="https://en.wikipedia.org/wiki/Digital_rights_management" target="_blank">DRM</a>. unavailable due to <a href="https://en.wikipedia.org/wiki/Digital_rights_management">DRM</a>.
</div> </div>
<div v-else-if="statusFlags.aardErrors?.cors" class="aard-blocked"> <div v-else-if="statusFlags.aardErrors?.cors" class="aard-blocked">
Autodetection blocked<br/> Autodetection blocked<br/>
@ -503,9 +493,6 @@ export default {
preventContextMenuHide() { preventContextMenuHide() {
this.contextMenuActive = true; this.contextMenuActive = true;
// refresh DRM status
this.eventBus.sendToTunnel('get-drm-status');
}, },
allowContextMenuHide() { allowContextMenuHide() {
this.contextMenuActive = false; this.contextMenuActive = false;
@ -524,7 +511,7 @@ export default {
this.allowContextMenuHide(); this.allowContextMenuHide();
// refresh DRM status // refresh DRM status
this.eventBus.sendToTunnel('get-drm-status'); this.eventBus.send('get-drm-status');
// if (this.isGlobal) { // if (this.isGlobal) {
// this.sendToParentLowLevel('uwui-clickable', undefined, {clickable: true}); // this.sendToParentLowLevel('uwui-clickable', undefined, {clickable: true});
@ -628,22 +615,6 @@ export default {
block-size: fit-content; block-size: fit-content;
} }
.ui-warning {
position: absolute;
top: 0;
transform: translateY(-100%);
max-width: 16rem;
width: 16rem;
overflow: hidden;
overflow-wrap: break-word;
white-space: normal;
word-break: break-word;
word-wrap: break-word;
}
.context-spawn { .context-spawn {
position: absolute; position: absolute;

View File

@ -26,12 +26,6 @@ export default {
width: '50dvw', width: '50dvw',
transform: 'translateX(-50%)' transform: 'translateX(-50%)'
}, },
hoverStats: {
isOverTriggerZone: false,
isOverMenuTrigger: false,
isOverUIArea: false,
hasMouse: false,
}
} }
}, },
methods: { methods: {
@ -81,10 +75,6 @@ export default {
let isOverMenuTrigger = false; let isOverMenuTrigger = false;
const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y); const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y);
if (!elements.length) {
return;
}
for (const element of elements) { for (const element of elements) {
if (element.classList?.contains('uw-clickable')) { if (element.classList?.contains('uw-clickable')) {
isClickable = true; isClickable = true;
@ -100,7 +90,6 @@ export default {
} }
} }
this.triggerZoneActive = isOverTriggerZone; this.triggerZoneActive = isOverTriggerZone;
// show ultrawidify trigger zone and set it to vanish after 250ms // show ultrawidify trigger zone and set it to vanish after 250ms
@ -123,22 +112,15 @@ export default {
// this.uwTriggerZoneVisible = false; // this.uwTriggerZoneVisible = false;
} }
const hasMouse = !!document.querySelector(':hover');
this.hoverStats.isOverTriggerZone = isOverTriggerZone;
this.hoverStats.isOverMenuTrigger = isOverMenuTrigger;
this.hoverStats.isOverUIArea = isOverUIArea;
this.hoverStats.hasMouse = hasMouse
window.parent.postMessage( window.parent.postMessage(
{ {
action: 'uwui-clickable', action: 'uwui-clickable',
clickable: isClickable, clickable: isClickable,
hoverStats: { hoverStats: {
isOverTriggerZone: isOverTriggerZone, isOverTriggerZone,
isOverMenuTrigger: isOverMenuTrigger, isOverMenuTrigger,
isOverUIArea: isOverUIArea, isOverUIArea,
hasMouse: hasMouse hasMouse: !!document.querySelector(':hover'),
}, },
ts: +new Date() ts: +new Date()
}, },

View File

@ -206,7 +206,6 @@ class Settings {
index++; index++;
} }
} catch (e) { } catch (e) {
console.error('Failed to upgrade settings.', e);
this.setActive(this.getDefaultSettings()); this.setActive(this.getDefaultSettings());
this.save(); this.save();
} }

View File

@ -1,5 +1,5 @@
/** /**
* Checks whether video we're trying to play is protected by DRM. * Checks whether video we're trying to play is protected by DRM.
* @param {*} video video we're trying to check * @param {*} video video we're trying to check
*/ */
export function hasDrm(video) { export function hasDrm(video) {
@ -9,4 +9,4 @@ export function hasDrm(video) {
} }
return video.mediaKeys instanceof MediaKeys; return video.mediaKeys instanceof MediaKeys;
} }

View File

@ -184,9 +184,7 @@ export class SiteSettings {
* @returns parent element index if possible, undefined otherwise * @returns parent element index if possible, undefined otherwise
*/ */
getPlayerIndex(): number | undefined { getPlayerIndex(): number | undefined {
return this.data.currentDOMConfig?.elements?.player?.manual && this.data.currentDOMConfig?.elements?.player?.index return this.data.currentDOMConfig?.elements?.player?.manual && this.data.currentDOMConfig?.elements?.player?.index || undefined;
|| this.data.playerAutoConfig?.modified && this.data.playerAutoConfig?.currentIndex
|| undefined;
} }
/** /**

View File

@ -47,7 +47,6 @@ class UI {
this.iframeErrorCount = 0; this.iframeErrorCount = 0;
this.iframeConfirmed = false; this.iframeConfirmed = false;
this.iframeRejected = false;
} }
async init() { async init() {
@ -306,17 +305,15 @@ class UI {
this.uiIframe.style.pointerEvents === 'auto' this.uiIframe.style.pointerEvents === 'auto'
) { ) {
if ( if (
event.data.hoverStats.isOverMenuTrigger event.data.hoverStats.isOverTriggerZone
&& !event.data.hoverStats.hasMouse && !event.data.hoverStats.hasMouse
) { ) {
if (!this.iframeConfirmed) { if (!this.iframeConfirmed) {
if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT && !this.iframeRejected) { if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT) {
this.iframeRejected = true; // this.
this.eventBus.send('change-player-element');
return;
} }
} }
} else if (event.data.hoverStats.isOverMenuTrigger && event.data.hoverStats.hasMouse) { } else {
this.iframeConfirmed = true; this.iframeConfirmed = true;
} }
} }

View File

@ -24,16 +24,6 @@ interface PlayerDimensions {
fullscreen?: boolean; fullscreen?: boolean;
} }
interface ElementData {
element: HTMLElement,
type: string,
tagName?: string,
classList?: any,
id?: string
}
type ElementStack = ElementData[];
/** /**
* accepts <video> tag (element) and list of names that can appear in id or class * accepts <video> tag (element) and list of names that can appear in id or class
* returns player dimensions (width, height) * returns player dimensions (width, height)
@ -77,8 +67,9 @@ class PlayerData {
//#endregion //#endregion
//#region HTML objects //#region HTML objects
videoElement: HTMLVideoElement; videoElement: any;
element: HTMLElement; element: any;
overlayNode: any;
//#endregion //#endregion
//#region flags //#region flags
@ -102,7 +93,7 @@ class PlayerData {
private ui: UI; private ui: UI;
elementStack: ElementStack = [] as ElementStack; elementStack: any[] = [];
//#endregion //#endregion
//#region event bus configuration //#region event bus configuration
@ -112,7 +103,7 @@ class PlayerData {
}], }],
'get-player-dimensions': [{ 'get-player-dimensions': [{
function: () => { function: () => {
this.eventBus.send('uw-config-broadcast', { this.eventBus.send('—————————————————————————— uw-config-broadcast', {
type: 'player-dimensions', type: 'player-dimensions',
data: this.dimensions data: this.dimensions
}); });
@ -126,10 +117,6 @@ class PlayerData {
}], }],
'set-run-level': [{ 'set-run-level': [{
function: (runLevel) => this.setRunLevel(runLevel) function: (runLevel) => this.setRunLevel(runLevel)
}],
'change-player-element': [{
function: () => {
this.nextPlayerElement();
}] }]
} }
//#endregion //#endregion
@ -182,6 +169,7 @@ class PlayerData {
// this happens in trackDimensionChanges! // this happens in trackDimensionChanges!
this.dimensions = undefined; this.dimensions = undefined;
this.overlayNode = undefined;
this.periodicallyRefreshPlayerElement = false; this.periodicallyRefreshPlayerElement = false;
try { try {
@ -516,7 +504,16 @@ class PlayerData {
} }
//#endregion //#endregion
private getElementStack(): ElementStack { /**
* Finds and returns HTML element of the player
*/
getPlayer(options?: {verbose?: boolean}) {
const host = window.location.hostname;
let element = this.videoElement.parentNode;
const videoWidth = this.videoElement.offsetWidth;
const videoHeight = this.videoElement.offsetHeight;
let playerCandidate;
const elementStack: any[] = [{ const elementStack: any[] = [{
element: this.videoElement, element: this.videoElement,
type: 'video', type: 'video',
@ -524,7 +521,6 @@ class PlayerData {
classList: this.videoElement.classList, classList: this.videoElement.classList,
id: this.videoElement.id, id: this.videoElement.id,
}]; }];
let element = this.videoElement.parentNode as HTMLElement;
// first pass to generate the element stack and translate it into array // first pass to generate the element stack and translate it into array
while (element) { while (element) {
@ -539,23 +535,8 @@ class PlayerData {
}); });
element = element.parentElement; element = element.parentElement;
} }
this.elementStack = elementStack; this.elementStack = elementStack;
return this.elementStack;
}
/**
* Finds and returns HTML element of the player
*/
getPlayer(options?: {verbose?: boolean}): HTMLElement {
const host = window.location.hostname;
let element = this.videoElement.parentNode;
const videoWidth = this.videoElement.offsetWidth;
const videoHeight = this.videoElement.offsetHeight;
let playerCandidate;
const elementStack = this.getElementStack();
const playerQs = this.siteSettings.getCustomDOMQuerySelector('player'); const playerQs = this.siteSettings.getCustomDOMQuerySelector('player');
const playerIndex = this.siteSettings.getPlayerIndex(); const playerIndex = this.siteSettings.getPlayerIndex();
@ -602,35 +583,6 @@ class PlayerData {
} }
} }
private nextPlayerElement() {
const currentIndex = this.siteSettings.data.playerAutoConfig?.currentIndex ?? this.siteSettings.data.playerAutoConfig?.initialIndex;
if (!currentIndex) {
// console.warn('Player Element not valid.');
return;
}
const nextIndex = currentIndex + 1;
const elementStack = this.getElementStack();
if (
this.equalish(elementStack[currentIndex].element.offsetWidth, elementStack[nextIndex].element.offsetWidth, 2)
&& this.equalish(elementStack[currentIndex].element.offsetHeight, elementStack[nextIndex].element.offsetHeight, 2)
) {
this.siteSettings.set('playerAutoConfig.initialIndex', this.siteSettings.data.playerAutoConfig.initialIndex + 1, {noSave: true});
this.siteSettings.set('playerAutoConfig.modified', true);
console.log('updated site settings:', this.siteSettings.data.playerAutoConfig);
this.videoData.settings.saveWithoutReload();
this.ui?.destroy();
this.ui = undefined;
this.element = elementStack[nextIndex].element;
this.trackDimensionChanges();
}
}
/** /**
* Gets player based on some assumptions, without us defining shit. * Gets player based on some assumptions, without us defining shit.
* @param elementStack * @param elementStack
@ -643,8 +595,7 @@ class PlayerData {
const sizePenaltyMultiplier = 0.1; const sizePenaltyMultiplier = 0.1;
const perLevelScorePenalty = 10; const perLevelScorePenalty = 10;
for (const [index, element] of elementStack.entries()) { for (const element of elementStack) {
element.index = index;
// ignore weird elements, those would break our stuff // ignore weird elements, those would break our stuff
if (element.width == 0 || element.height == 0) { if (element.width == 0 || element.height == 0) {
@ -715,9 +666,6 @@ class PlayerData {
bestCandidate = null; bestCandidate = null;
} else { } else {
bestCandidate.heuristics['autoMatch'] = true; bestCandidate.heuristics['autoMatch'] = true;
if (this.siteSettings.data.playerAutoConfig?.initialIndex !== bestCandidate.index) {
this.siteSettings.set('playerAutoConfig.initialIndex', bestCandidate.index, {reload: false});
}
} }
return bestCandidate; return bestCandidate;
@ -828,8 +776,6 @@ class PlayerData {
} }
forceRefreshPlayerElement() { forceRefreshPlayerElement() {
this.ui?.destroy();
this.ui = undefined;
this.element = this.getPlayer(); this.element = this.getPlayer();
// this.notificationService?.replace(this.element); // this.notificationService?.replace(this.element);
this.trackDimensionChanges(); this.trackDimensionChanges();

View File

@ -146,6 +146,7 @@ class VideoData {
async onVideoLoaded() { async onVideoLoaded() {
if (!this.videoLoaded) { if (!this.videoLoaded) {
/** /**
* video.readyState 101: * video.readyState 101:
* 0 no info. Can't play. * 0 no info. Can't play.
@ -159,12 +160,6 @@ class VideoData {
} }
this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9'); this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
this.hasDrm = hasDrm(this.video);
this.eventBus.send(
'uw-config-broadcast', {
type: 'drm-status',
hasDrm: this.hasDrm
});
this.videoLoaded = true; this.videoLoaded = true;
this.videoDimensionsLoaded = true; this.videoDimensionsLoaded = true;
try { try {
@ -683,12 +678,11 @@ class VideoData {
} }
try { try {
this.hasDrm = !!hasDrm(this.video); if (hasDrm(this.video)) {
this.eventBus.send( this.hasDrm = true;
'uw-config-broadcast', { } else {
type: 'drm-status', this.hasDrm = false;
hasDrm: this.hasDrm }
});
if (!this.aard) { if (!this.aard) {
this.initArDetection(); this.initArDetection();