From ad1e73d0cc15d8c24f48dea73114a15aa9d92ebb Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 6 Jan 2025 03:05:18 +0100 Subject: [PATCH] Try to detect when UI is not clickable --- src/common/interfaces/SettingsInterface.ts | 7 ++ src/csui/PlayerOverlay.vue | 29 ++++++- src/csui/src/utils/UIProbeMixin.js | 26 ++++++- src/ext/lib/settings/SiteSettings.ts | 4 +- src/ext/lib/uwui/UI.js | 11 ++- src/ext/lib/video-data/PlayerData.ts | 88 +++++++++++++++++----- 6 files changed, 137 insertions(+), 28 deletions(-) diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts index 28be02a..ea0ab98 100644 --- a/src/common/interfaces/SettingsInterface.ts +++ b/src/common/interfaces/SettingsInterface.ts @@ -329,6 +329,7 @@ export interface SiteSettingsInterface { stretchModePersistence?: CropModePersistence; alignmentPersistence?: CropModePersistence; + playerAutoConfig?: PlayerAutoConfigInterface; activeDOMConfig?: string; DOMConfig?: { [x: string]: SiteDOMSettingsInterface }; @@ -341,6 +342,12 @@ export interface SiteSettingsInterface { 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 { type: 'official' | 'community' | 'user-defined' | 'modified' | undefined; elements?: { diff --git a/src/csui/PlayerOverlay.vue b/src/csui/PlayerOverlay.vue index 0a26a46..279c1c7 100644 --- a/src/csui/PlayerOverlay.vue +++ b/src/csui/PlayerOverlay.vue @@ -24,7 +24,17 @@ @mouseleave="allowContextMenuHide()" > @@ -327,7 +337,6 @@ export default { (data) => { switch (data.type) { case 'drm-status': - console.log('got DRM status!'); this.statusFlags.hasDrm = data.hasDrm; break; case 'aard-error': @@ -619,6 +628,22 @@ export default { 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 { position: absolute; diff --git a/src/csui/src/utils/UIProbeMixin.js b/src/csui/src/utils/UIProbeMixin.js index cb3b347..35b8653 100644 --- a/src/csui/src/utils/UIProbeMixin.js +++ b/src/csui/src/utils/UIProbeMixin.js @@ -26,6 +26,12 @@ export default { width: '50dvw', transform: 'translateX(-50%)' }, + hoverStats: { + isOverTriggerZone: false, + isOverMenuTrigger: false, + isOverUIArea: false, + hasMouse: false, + } } }, methods: { @@ -75,6 +81,10 @@ export default { let isOverMenuTrigger = false; const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y); + if (!elements.length) { + return; + } + for (const element of elements) { if (element.classList?.contains('uw-clickable')) { isClickable = true; @@ -90,6 +100,7 @@ export default { } } + this.triggerZoneActive = isOverTriggerZone; // show ultrawidify trigger zone and set it to vanish after 250ms @@ -112,15 +123,22 @@ export default { // 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( { action: 'uwui-clickable', clickable: isClickable, hoverStats: { - isOverTriggerZone, - isOverMenuTrigger, - isOverUIArea, - hasMouse: !!document.querySelector(':hover'), + isOverTriggerZone: isOverTriggerZone, + isOverMenuTrigger: isOverMenuTrigger, + isOverUIArea: isOverUIArea, + hasMouse: hasMouse }, ts: +new Date() }, diff --git a/src/ext/lib/settings/SiteSettings.ts b/src/ext/lib/settings/SiteSettings.ts index a74a20a..2272988 100644 --- a/src/ext/lib/settings/SiteSettings.ts +++ b/src/ext/lib/settings/SiteSettings.ts @@ -184,7 +184,9 @@ export class SiteSettings { * @returns parent element index if possible, undefined otherwise */ getPlayerIndex(): number | undefined { - return this.data.currentDOMConfig?.elements?.player?.manual && this.data.currentDOMConfig?.elements?.player?.index || undefined; + return this.data.currentDOMConfig?.elements?.player?.manual && this.data.currentDOMConfig?.elements?.player?.index + || this.data.playerAutoConfig?.modified && this.data.playerAutoConfig?.currentIndex + || undefined; } /** diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index d195fef..a9b41cc 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -47,6 +47,7 @@ class UI { this.iframeErrorCount = 0; this.iframeConfirmed = false; + this.iframeRejected = false; } async init() { @@ -305,15 +306,17 @@ class UI { this.uiIframe.style.pointerEvents === 'auto' ) { if ( - event.data.hoverStats.isOverTriggerZone + event.data.hoverStats.isOverMenuTrigger && !event.data.hoverStats.hasMouse ) { if (!this.iframeConfirmed) { - if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT) { - // this. + if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT && !this.iframeRejected) { + this.iframeRejected = true; + this.eventBus.send('change-player-element'); + return; } } - } else { + } else if (event.data.hoverStats.isOverMenuTrigger && event.data.hoverStats.hasMouse) { this.iframeConfirmed = true; } } diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts index 196a39e..31c1574 100644 --- a/src/ext/lib/video-data/PlayerData.ts +++ b/src/ext/lib/video-data/PlayerData.ts @@ -24,6 +24,16 @@ interface PlayerDimensions { fullscreen?: boolean; } +interface ElementData { + element: HTMLElement, + type: string, + tagName?: string, + classList?: any, + id?: string +} + +type ElementStack = ElementData[]; + /** * accepts