From 27b0609d34282eed7858b02f351763242423d422 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 25 Nov 2021 00:31:38 +0100 Subject: [PATCH] Let's try to avoid injecting ultrawidify-specific CSS before we actually need it. Part 1/? --- src/ext/lib/ar-detect/ArDetector.ts | 32 ++++----- src/ext/lib/video-data/VideoData.ts | 93 +++++++++++++------------- src/ext/lib/video-transform/Resizer.ts | 18 ++++- 3 files changed, 75 insertions(+), 68 deletions(-) diff --git a/src/ext/lib/ar-detect/ArDetector.ts b/src/ext/lib/ar-detect/ArDetector.ts index ad5b3a7..b2de60d 100644 --- a/src/ext/lib/ar-detect/ArDetector.ts +++ b/src/ext/lib/ar-detect/ArDetector.ts @@ -42,6 +42,7 @@ class ArDetector { arid: string; // ar detector starts in this state. running main() sets both to false + _ready: boolean = false; _paused: boolean; _halted: boolean = true; _exited: boolean = true; @@ -159,16 +160,7 @@ class ArDetector { init(){ this.logger.log('info', 'init', `[ArDetect::init] <@${this.arid}> Initializing autodetection.`); - - try { - if (this.settings.canStartAutoAr()) { - this.setup(); - } else { - throw "Settings prevent autoar from starting" - } - } catch (e) { - this.logger.log('error', 'init', `%c[ArDetect::init] <@${this.arid}> Initialization failed.`, _ard_console_stop, e); - } + this.setup(); } setup(cwidth?: number, cheight?: number){ @@ -290,10 +282,8 @@ class ArDetector { this.canvasImageDataRowLength = cwidth << 2; this.noLetterboxCanvasReset = false; - if (this.settings.canStartAutoAr() ) { - // this.main(); - this.start(); - } + this._ready = true; + this.start(); if(Debug.debugCanvas.enabled){ // this.debugCanvas.init({width: cwidth, height: cheight}); @@ -312,11 +302,15 @@ class ArDetector { //#region AARD control start() { - if (this.settings.canStartAutoAr()) { - this.logger.log('info', 'debug', `"%c[ArDetect::start] <@${this.arid}> Starting automatic aspect ratio detection`, _ard_console_start); - } else { - this.logger.log('warn', 'debug', `"%c[ArDetect::start] <@${this.arid}> Wanted to start automatic aspect ratio detection, but settings don't allow that. Aard won't be started.`, _ard_console_change); - return; + // if (this.settings.canStartAutoAr()) { + // this.logger.log('info', 'debug', `"%c[ArDetect::start] <@${this.arid}> Starting automatic aspect ratio detection`, _ard_console_start); + // } else { + // this.logger.log('warn', 'debug', `"%c[ArDetect::start] <@${this.arid}> Wanted to start automatic aspect ratio detection, but settings don't allow that. Aard won't be started.`, _ard_console_change); + // return; + // } + if (!this._ready) { + this.init(); + return; // we will return to this function once initialization is complete } if (this.conf.resizer.lastAr.type === AspectRatioType.AutomaticUpdate) { diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts index 85f221c..5884669 100644 --- a/src/ext/lib/video-data/VideoData.ts +++ b/src/ext/lib/video-data/VideoData.ts @@ -3,6 +3,7 @@ import PlayerData from './PlayerData'; import Resizer from '../video-transform/Resizer'; import ArDetector from '../ar-detect/ArDetector'; import AspectRatioType from '../../../common/enums/AspectRatioType.enum'; +import CropModePersistence from '../../../common/enums/CropModePersistence.enum'; import * as _ from 'lodash'; import BrowserDetect from '../../conf/BrowserDetect'; import Logger from '../Logger'; @@ -175,8 +176,6 @@ class VideoData { */ async setupStageOne() { this.logger.log('info', 'init', '%c[VideoData::setupStageOne] ——————————— Starting setup stage one! ———————————', 'color: #0f9'); - // ensure base css is loaded before doing anything - this.injectBaseCss(); // this is in case extension loads before the video this.video.addEventListener('loadeddata', this.onLoadedData.bind(this)); @@ -195,14 +194,55 @@ class VideoData { async setupStageTwo() { // NOTE: ORDERING OF OBJ INITIALIZATIONS IS IMPORTANT (arDetect needs to go last) this.player = new PlayerData(this); + if (this.player.invalid) { this.invalid = true; return; } - this.resizer = new Resizer(this); + this.arDetector = new ArDetector(this); // this starts Ar detection. needs optional parameter that prevents ArDetector from starting - // INIT OBSERVERS + this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode) + + + // Everything is set up at this point. However, we are still purely "read-only" at this point. Player CSS should not be changed until + // after we receive a "please crop" or "please stretch". + + // Time to apply any crop from address of crop mode persistence + const defaultCrop = this.settings.getDefaultCrop(); + const defaultStretch = this.settings.getDefaultStretchMode(); + + // Crop mode persistence is intended to avoid resetting video aspect ratio to site or extension default + // when going from one video to another. As such, crop persistence takes priority over site defaults. + // This option should only trigger if we have modified the aspect ratio manually. + if ( + this.settings.getDefaultCropPersistenceMode(window.location.hostname) !== CropModePersistence.Disabled + && this.pageInfo.defaultCrop + ) { + this.resizer.setAr(this.pageInfo.defaultCrop); + } else { + this.resizer.setAr(defaultCrop); + this.resizer.setStretchMode(defaultStretch); + } + } + + /** + * Must be triggered on first action. TODO + */ + preparePage() { + this.injectBaseCss(); + + this.pageInfo.initMouseActionHandler(this); + + // aspect ratio autodetection cannot be properly initialized at this time, + // so we'll avoid doing that + this.enable(); + + // start fallback video/player size detection + this.fallbackChangeDetection(); + } + + initializeObservers() { try { if (BrowserDetect.firefox) { this.observer = new ResizeObserver( @@ -235,45 +275,6 @@ class VideoData { console.error('[VideoData] Observer setup failed:', e); } this.observer.observe(this.video); - - // INIT AARD - this.arDetector = new ArDetector(this); // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting - // player dimensions need to be in: - // this.player.dimensions - - // apply default align and stretch - this.logger.log('info', 'debug', "%c[VideoData::ctor] Initial resizer reset!", "background: #afd, color: #132"); - this.resizer.reset(); - - this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode) - - this.pageInfo.initMouseActionHandler(this); - - // aspect ratio autodetection cannot be properly initialized at this time, - // so we'll avoid doing that - this.enable({withoutAard: true}); - - // start fallback video/player size detection - this.fallbackChangeDetection(); - - // force reload last aspect ratio (if default crop ratio exists), but only after the video is - if (this.pageInfo.defaultCrop) { - this.resizer.setAr(this.pageInfo.defaultCrop); - } - - try { - if (!this.pageInfo.defaultCrop) { - if (!this.invalid) { - this.initArDetection(); - } else { - this.logger.log('error', 'debug', '[VideoData::secondStageSetup] Video is invalid. Aard not started.', this.video); - } - } else { - this.logger.log('info', 'debug', '[VideoData::secondStageSetup] Default crop is specified for this site. Not starting aard.'); - } - } catch (e) { - this.logger.log('error', 'init', `[VideoData::secondStageSetup] Error with aard initialization (or error with default aspect ratio application)`, e) - } } setupMutationObserver() { @@ -352,7 +353,7 @@ class VideoData { * Enables ultrawidify in general. * @param options */ - enable(options?: {fromPlayer?: boolean, withoutAard?: boolean}) { + enable(options?: {fromPlayer?: boolean}) { this.enabled = true; // NOTE — since base class for our