From cd391db3027833d0ee280eef23397da91571fb89 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Mon, 10 Jul 2023 18:27:06 +0200 Subject: [PATCH] wip --- DOCUMENTATION.MD | 6 ++ src/ext/lib/video-data/CssManager.ts | 10 ++++ src/ext/lib/video-data/ExtensionStatus.ts | 69 +++++++++++++++++++++++ src/ext/lib/video-data/PageInfo.ts | 6 ++ src/ext/lib/video-data/VideoData.ts | 7 ++- src/ext/lib/video-transform/Resizer.ts | 7 +++ 6 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 DOCUMENTATION.MD create mode 100644 src/ext/lib/video-data/CssManager.ts create mode 100644 src/ext/lib/video-data/ExtensionStatus.ts diff --git a/DOCUMENTATION.MD b/DOCUMENTATION.MD new file mode 100644 index 0000000..4d67bd7 --- /dev/null +++ b/DOCUMENTATION.MD @@ -0,0 +1,6 @@ +# Implementation details + +## Enabling/disabling aspect ratio corrections + +* Aspect ratios are changed by proxy. Extension attaches **a custom CSS class** to `video` and `player` elements. +* To prevent extension from affecting the appearance of a webpage, **it's sufficient to remove our custom CSS classes from `video` and `player` elements.** diff --git a/src/ext/lib/video-data/CssManager.ts b/src/ext/lib/video-data/CssManager.ts new file mode 100644 index 0000000..2a49edd --- /dev/null +++ b/src/ext/lib/video-data/CssManager.ts @@ -0,0 +1,10 @@ + +export class CssManager { + + videoElement: HTMLElement; + playerElement: HTMLElement; + + private classesApplied: boolean; + + applyScaling() {} +} diff --git a/src/ext/lib/video-data/ExtensionStatus.ts b/src/ext/lib/video-data/ExtensionStatus.ts new file mode 100644 index 0000000..d1bcf31 --- /dev/null +++ b/src/ext/lib/video-data/ExtensionStatus.ts @@ -0,0 +1,69 @@ +import ExtensionMode from '../../../common/enums/ExtensionMode.enum'; +import EventBus from '../EventBus'; +import { SiteSettings } from '../settings/SiteSettings'; + +/** + * Handles changes of extension active status. Changes of fullScreen and theaterMode statuses + * should get passed to an instance of this class, and this class will dispatch events as necessary. + */ +export class ExtensionStatus { + private fsStatus: {fullscreen: boolean}; // fsStatus is super duper private. You should access it with isFullScreen getter. + // NOTE: fsStatus.fullscreen in this class will magically update every time videoData.fsStatus.fullscreen changes. This is + // some mad exploitation of pass-by-reference. + + private siteSettings: SiteSettings; + private eventBus: EventBus; + + private isTheaterMode: boolean = false; + private get isFullScreen() { // let's hide our pass-by-reference hacks & ensure isTheaterMode and isFullScreen are consistent with each-other + return this.fsStatus.fullscreen; + } + + private enabled: ExtensionMode; + private aardEnabled: ExtensionMode; + private kbdEnabled: ExtensionMode; + + constructor(siteSettings: SiteSettings, eventBus: EventBus, fsStatus: {fullscreen: boolean}){ + this.siteSettings = siteSettings; + this.eventBus = eventBus; + } + + refreshExtensionStatus() { + const canRun = this.siteSettings.isEnabledForEnvironment(this.isTheaterMode, this.isFullScreen); + const canAard = this.siteSettings.isAardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen); + const canKbd = this.siteSettings.isKeyboardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen); + + if (canRun !== this.enabled) { + if (canRun === ExtensionMode.Enabled) { + this.eventBus.send('set-extension-active', {}); + } else { + this.eventBus.send('set-extension-inactive', {}); + } + } + if (canAard !== this.aardEnabled) { + if (canAard === ExtensionMode.Enabled) { + this.eventBus.send('set-aard-active', {}); + } else { + this.eventBus.send('set-aard-inactive', {}); + } + } + if (canKbd !== this.kbdEnabled) { + if (canKbd === ExtensionMode.Enabled) { + this.eventBus.send('set-kbd-active', {}); + } else { + this.eventBus.send('set-kbd-inactive', {}); + } + } + + this.enabled = canRun; + this.aardEnabled = canAard; + this.kbdEnabled = canKbd; + } + + updateTheaterMode(isTheaterMode: boolean) { + this.isTheaterMode = isTheaterMode; + this.refreshExtensionStatus(); + } + + updateFullScreen() +} diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts index ba83dfb..c4f37c3 100644 --- a/src/ext/lib/video-data/PageInfo.ts +++ b/src/ext/lib/video-data/PageInfo.ts @@ -69,6 +69,8 @@ class PageInfo { currentZoomScale: number = 1; keyboardHandler: any; + + fsStatus = {fullscreen: true}; // fsStatus needs to be passed to VideoData, so fullScreen property is shared between videoData instances //#endregion constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger, readOnly = false){ @@ -82,6 +84,8 @@ class PageInfo { this.isFullscreen = !!document.fullscreenElement; this.iframeManager = new IframeManager({eventBus}); + + if (eventBus){ this.eventBus = eventBus; } @@ -128,6 +132,7 @@ class PageInfo { * Runs when browser enters full screen. */ enterFullscreen() { + this.fsStatus.fullscreen = true; this.eventBus.send('page-fs-enter', {}); } @@ -135,6 +140,7 @@ class PageInfo { * Runs when browser exits full screen */ exitFullscreen() { + this.fsStatus.fullscreen = false; this.eventBus.send('page-fs-exit', {}); } diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts index c3b3477..79e93cb 100644 --- a/src/ext/lib/video-data/VideoData.ts +++ b/src/ext/lib/video-data/VideoData.ts @@ -14,6 +14,7 @@ import { hasDrm } from '../ar-detect/DrmDetecor'; import EventBus from '../EventBus'; import { SiteSettings } from '../settings/SiteSettings'; import { Ar } from '../../../common/interfaces/ArInterface'; +import { ExtensionStatus } from './ExtensionStatus'; /** * VideoData — handles CSS for the video element. @@ -33,7 +34,7 @@ class VideoData { videoStatusOk: boolean = false; videoLoaded: boolean = false; videoDimensionsLoaded: boolean = false; - paused: boolean = false; + active: boolean = false; //#endregion //#region misc stuff @@ -61,6 +62,7 @@ class VideoData { resizer: Resizer; arDetector: ArDetector; eventBus: EventBus; + extensionStatus: ExtensionStatus; //#endregion @@ -104,12 +106,15 @@ class VideoData { this.eventBus = new EventBus(); + this.extensionStatus = new ExtensionStatus(siteSettings, pageInfo.eventBus, pageInfo.fsStatus); + if (pageInfo.eventBus) { this.eventBus.setUpstreamBus(pageInfo.eventBus); this.eventBus.subscribe('get-drm-status', {function: () => { this.hasDrm = hasDrm(this.video); this.eventBus.send('uw-config-broadcast', {type: 'drm-status', hasDrm: this.hasDrm}); }}); + // this.eventBus.subscribe('') } this.setupEventListeners(); diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts index 7fe530c..c12ba38 100644 --- a/src/ext/lib/video-transform/Resizer.ts +++ b/src/ext/lib/video-transform/Resizer.ts @@ -22,6 +22,13 @@ if(Debug.debug) { console.log("Loading: Resizer.js"); } +/** + * Resizer is the top class and is responsible for figuring out which component needs to crop, which + * component needs to zoom, and which component needs to stretch. + * + * It also kinda does lots of the work that should prolly be moved to Scaler. + * + */ class Resizer { //#region flags canPan: boolean = false;