tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace old logger with new logger

Browse Source
This commit is contained in:
Tamius Han 2025-05-04 02:18:58 +02:00
parent 4000d0e027
commit e20508956a
15 changed files with 191 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ext/UWServer.ts
View File

@ -6,7 +6,7 @@ import Settings from './lib/Settings';
import Logger, { baseLoggingOptions } from './lib/Logger'; import Logger, { baseLoggingOptions } from './lib/Logger';
import { sleep } from '../common/js/utils'; import { sleep } from '../common/js/utils';
import EventBus, { EventBusCommand } from './lib/EventBus'; import EventBus, { EventBusCommand } from './lib/EventBus';
import { ComponentLogger } from './lib/logging/ComponentLogger.js'; import { ComponentLogger } from './lib/logging/ComponentLogger';
const BASE_LOGGING_STYLES = { const BASE_LOGGING_STYLES = {

13
src/ext/lib/aard/Aard.ts
View File

@ -19,6 +19,7 @@ import { AardDetectionSample, generateSampleArray, resetSamples } from './interf
import { AardStatus, initAardStatus } from './interfaces/aard-status.interface'; import { AardStatus, initAardStatus } from './interfaces/aard-status.interface';
import { AardTestResults, initAardTestResults, resetAardTestResults, resetGuardLine } from './interfaces/aard-test-results.interface'; import { AardTestResults, initAardTestResults, resetAardTestResults, resetGuardLine } from './interfaces/aard-test-results.interface';
import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface'; import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface';
import { ComponentLogger } from '../logging/ComponentLogger';
/** /**
@ -221,7 +222,7 @@ import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface';
*/ */
export class Aard { export class Aard {
//#region configuration parameters //#region configuration parameters
private logger: Logger; private logger: ComponentLogger;
private videoData: VideoData; private videoData: VideoData;
private settings: Settings; private settings: Settings;
private siteSettings: SiteSettings; private siteSettings: SiteSettings;
@ -292,7 +293,7 @@ export class Aard {
//#region lifecycle //#region lifecycle
constructor(videoData: VideoData){ constructor(videoData: VideoData){
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'Aard', {});
this.videoData = videoData; this.videoData = videoData;
this.video = videoData.video; this.video = videoData.video;
this.settings = videoData.settings; this.settings = videoData.settings;
@ -304,7 +305,7 @@ export class Aard {
this.arid = (Math.random()*100).toFixed(); this.arid = (Math.random()*100).toFixed();
// we can tick manually, for debugging // we can tick manually, for debugging
this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`); this.logger.log('ctor', `creating new ArDetector. arid: ${this.arid}`);
this.timer = new AardTimer(); this.timer = new AardTimer();
this.init(); this.init();
@ -372,14 +373,14 @@ export class Aard {
if (this.settings.active.arDetect.aardType !== 'webgl') { if (this.settings.active.arDetect.aardType !== 'webgl') {
return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'}); return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
} }
console.error('[ultrawidify|Aard::createCanvas] could not create webgl canvas:', e); this.logger.error('createCanvas', 'could not create webgl canvas:', e);
this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}}); this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}});
throw e; throw e;
} }
} else if (this.settings.active.arDetect.aardType === 'legacy') { } else if (this.settings.active.arDetect.aardType === 'legacy') {
return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'}); return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
} else { } else {
console.error('[ultrawidify|Aard::createCanvas] invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType); this.logger.error('createCanvas', 'invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}}); this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}});
throw 'AARD_INVALID_SETTINGS'; throw 'AARD_INVALID_SETTINGS';
} }
@ -725,7 +726,7 @@ export class Aard {
return VideoPlaybackState.Playing; return VideoPlaybackState.Playing;
} }
} catch (e) { } catch (e) {
this.logger.log('warn', 'debug', `[ArDetect::getVideoPlaybackState] There was an error while determining video playback state.`, e); this.logger.warn('getVideoPlaybackState]', `There was an error while determining video playback state.`, e);
return VideoPlaybackState.Error; return VideoPlaybackState.Error;
} }
} }

37
src/ext/lib/comms/CommsServer.ts
View File

@ -1,3 +1,4 @@
import { ComponentLogger } from './../logging/ComponentLogger';
import { EventBusContext } from './../EventBus'; import { EventBusContext } from './../EventBus';
import Debug from '../../conf/Debug'; import Debug from '../../conf/Debug';
import BrowserDetect from '../../conf/BrowserDetect'; import BrowserDetect from '../../conf/BrowserDetect';
@ -8,9 +9,13 @@ import EventBus from '../EventBus';
import { CommsOrigin } from './CommsClient'; import { CommsOrigin } from './CommsClient';
const BASE_LOGGING_STYLES = {
log: "background-color: #11D; color: #aad",
};
class CommsServer { class CommsServer {
server: any; server: any;
logger: Logger; logger: ComponentLogger;
settings: Settings; settings: Settings;
eventBus: EventBus; eventBus: EventBus;
@ -61,7 +66,7 @@ class CommsServer {
//#region lifecycle //#region lifecycle
constructor(server) { constructor(server) {
this.server = server; this.server = server;
this.logger = server.logger; this.logger = new ComponentLogger(server.logAggregator, 'CommsServer', {styles: BASE_LOGGING_STYLES});
this.settings = server.settings; this.settings = server.settings;
this.eventBus = server.eventBus; this.eventBus = server.eventBus;
@ -106,6 +111,7 @@ class CommsServer {
//#endregion //#endregion
sendMessage(message, context?) { sendMessage(message, context?) {
this.logger.debug('sendMessage', `preparing to send message ${message.command ?? ''} ...`, {message, context});
// stop messages from returning where they came from, and prevent // stop messages from returning where they came from, and prevent
// cross-pollination between content scripts running in different // cross-pollination between content scripts running in different
// tabs. // tabs.
@ -129,11 +135,16 @@ class CommsServer {
// okay I lied! Messages originating from content script can be forwarded to // okay I lied! Messages originating from content script can be forwarded to
// content scripts running in _other_ frames of the tab // content scripts running in _other_ frames of the tab
let forwarded = false;
if (context?.origin === CommsOrigin.ContentScript) { if (context?.origin === CommsOrigin.ContentScript) {
if (context?.comms.forwardTo === 'all-frames') { if (context?.comms.forwardTo === 'all-frames') {
forwarded = true;
this.sendToOtherFrames(message, context); this.sendToOtherFrames(message, context);
} }
} }
if (!forwarded) {
this.logger.warn('sendMessage', `message ${message.command ?? ''} was not forwarded to any destination!`, {message, context});
}
} }
/** /**
@ -148,10 +159,13 @@ class CommsServer {
* Does NOT send a message to popup. * Does NOT send a message to popup.
**/ **/
private sendToAll(message){ private sendToAll(message){
this.logger.info('sendToAll', "sending message to all content scripts", message);
for(const tid in this.ports){ for(const tid in this.ports){
const tab = this.ports[tid]; const tab = this.ports[tid];
for(const frame in tab){ for(const frame in tab){
for (const port in tab[frame]) { for (const port in tab[frame]) {
this.logger.info('sendToAll', ` <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}, port ${port}`, message);
tab[frame][port].postMessage(message); tab[frame][port].postMessage(message);
} }
} }
@ -168,9 +182,11 @@ class CommsServer {
private async sendToFrameContentScripts(message, tab, frame, port?) { private async sendToFrameContentScripts(message, tab, frame, port?) {
if (port !== undefined) { if (port !== undefined) {
this.ports[tab][frame][port].postMessage(message); this.ports[tab][frame][port].postMessage(message);
this.logger.info('sendToOtherFrames', ` <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}, port ${port}`, message);
return; return;
} }
for (const framePort in this.ports[tab][frame]) { for (const framePort in this.ports[tab][frame]) {
this.logger.info('sendToOtherFrames', ` <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
this.ports[tab][frame][framePort].postMessage(JSON.parse(JSON.stringify(message))); this.ports[tab][frame][framePort].postMessage(JSON.parse(JSON.stringify(message)));
} }
} }
@ -198,7 +214,7 @@ class CommsServer {
} }
private async sendToFrame(message, tab, frame, port?) { private async sendToFrame(message, tab, frame, port?) {
this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message); this.logger.info('sendToFrame', ` <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
if (isNaN(tab)) { if (isNaN(tab)) {
if (frame === '__playing') { if (frame === '__playing') {
@ -212,33 +228,32 @@ class CommsServer {
[tab, frame] = frame.split('-'); [tab, frame] = frame.split('-');
} }
this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message); this.logger.info('sendToFrame', ` <——— attempting to send message ${message.command ?? ''} to tab ${tab}, frame ${frame}`, message);
try { try {
this.sendToFrameContentScripts(message, tab, frame, port); this.sendToFrameContentScripts(message, tab, frame, port);
} catch (e) { } catch (e) {
this.logger.log('error', 'comms', `%c[CommsServer::sendToFrame] Sending message failed. Reason:`, "background: #dda; color: #11D", e); this.logger.error('sendToFrame', ` Sending message failed. Reason:`, e);
} }
} }
private async sendToActive(message) { private async sendToActive(message) {
this.logger.log('info', 'comms', "%c[CommsServer::sendToActive] trying to send a message to active tab. Message:", "background: #dda; color: #11D", message); this.logger.info('sendToActive', ` <——— trying to send a message ${message.command ?? ''} to active tab. Message:`, message);
const tabs = await this.activeTab; const tabs = await this.activeTab;
this.logger.log('info', 'comms', "[CommsServer::_sendToActive] currently active tab(s)?", tabs); this.logger.info('sendToActive', "currently active tab(s)?", tabs);
for (const frame in this.ports[tabs[0].id]) {
this.logger.log('info', 'comms', "key?", frame, this.ports[tabs[0].id]);
}
for (const frame in this.ports[tabs[0].id]) { for (const frame in this.ports[tabs[0].id]) {
this.logger.info('sendToActive', "sending message to frame:", frame, this.ports[tabs[0].id][frame], '; message:', message);
this.sendToFrameContentScripts(message, tabs[0].id, frame); this.sendToFrameContentScripts(message, tabs[0].id, frame);
} }
} }
private async processReceivedMessage(message, port, sender?: {frameId: string, tabId: string}){ private async processReceivedMessage(message, port, sender?: {frameId: string, tabId: string}){
this.logger.info('processMessage', ` ==> Received message ${message.command ?? ''} from content script or port`, "background-color: #11D; color: #aad", message, port, sender);
// this triggers events // this triggers events
this.eventBus.send( this.eventBus.send(
message.command, message.command,
@ -259,7 +274,7 @@ class CommsServer {
} }
private processReceivedMessage_nonpersistent(message, sender){ private processReceivedMessage_nonpersistent(message, sender){
this.logger.log('info', 'comms', "%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender); this.logger.info('processMessage_nonpersistent', ` ==> Received message from background script!`, "background-color: #11D; color: #aad", message, sender);
this.eventBus.send( this.eventBus.send(
message.command, message.command,

5
src/ext/lib/kbm/KbmBase.ts
View File

@ -1,11 +1,12 @@
import EventBus, { EventBusCommand } from '../EventBus'; import EventBus, { EventBusCommand } from '../EventBus';
import Logger from '../Logger'; import Logger from '../Logger';
import { ComponentLogger } from '../logging/ComponentLogger';
import Settings from '../Settings'; import Settings from '../Settings';
import { SiteSettings } from '../settings/SiteSettings'; import { SiteSettings } from '../settings/SiteSettings';
export class KbmBase { export class KbmBase {
listenFor: string[] = []; listenFor: string[] = [];
logger: Logger; logger: ComponentLogger;
settings: Settings; settings: Settings;
siteSettings: SiteSettings; siteSettings: SiteSettings;
eventBus: EventBus; eventBus: EventBus;
@ -28,7 +29,7 @@ export class KbmBase {
}, },
} }
constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) { constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: ComponentLogger) {
this.logger = logger; this.logger = logger;
this.settings = settings; this.settings = settings;
this.eventBus = eventBus; this.eventBus = eventBus;

69
src/ext/lib/kbm/KeyboardHandler.ts
View File

@ -8,11 +8,17 @@ import VideoData from '../video-data/VideoData';
import EventBus, { EventBusCommand } from '../EventBus'; import EventBus, { EventBusCommand } from '../EventBus';
import KbmBase from './KbmBase'; import KbmBase from './KbmBase';
import { SiteSettings } from '../settings/SiteSettings'; import { SiteSettings } from '../settings/SiteSettings';
import { LogAggregator } from '../logging/LogAggregator';
import { ComponentLogger } from '../logging/ComponentLogger';
if(process.env.CHANNEL !== 'stable'){ if(process.env.CHANNEL !== 'stable'){
console.info("Loading KeyboardHandler"); console.info("Loading KeyboardHandler");
} }
const BASE_LOGGING_STYLES = {
log: "color: #ff0"
};
/** /**
* Handles keypresses and mouse movement. * Handles keypresses and mouse movement.
* *
@ -23,7 +29,6 @@ if(process.env.CHANNEL !== 'stable'){
*/ */
export class KeyboardHandler extends KbmBase { export class KeyboardHandler extends KbmBase {
listenFor: string[] = ['keyup']; listenFor: string[] = ['keyup'];
logger: Logger;
settings: Settings; settings: Settings;
siteSettings: SiteSettings; siteSettings: SiteSettings;
eventBus: EventBus; eventBus: EventBus;
@ -45,14 +50,14 @@ export class KeyboardHandler extends KbmBase {
} }
//#region lifecycle //#region lifecycle
constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) { constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logAggregator: LogAggregator) {
super(eventBus, siteSettings, settings, logger); const tmpLogger = new ComponentLogger(logAggregator, 'KeyboardHandler', {styles: BASE_LOGGING_STYLES});
super(eventBus, siteSettings, settings, tmpLogger);
this.init(); this.init();
} }
init() { init() {
this.logger.log('info', 'debug', "[KeyboardHandler::init] starting init"); this.logger.debug("init", "starting init");
// reset keypressActions when re-initializing, otherwise keypressActions will // reset keypressActions when re-initializing, otherwise keypressActions will
// multiply in an unwanted way // multiply in an unwanted way
@ -119,28 +124,28 @@ export class KeyboardHandler extends KbmBase {
preventAction(event) { preventAction(event) {
var activeElement = document.activeElement; var activeElement = document.activeElement;
if (this.logger.canLog('keyboard')) { // if (this.logger.canLog('keyboard')) {
this.logger.pause(); // temp disable to avoid recursing; // this.logger.pause(); // temp disable to avoid recursing;
const preventAction = this.preventAction(event); // const preventAction = this.preventAction(event);
this.logger.resume(); // undisable // this.logger.resume(); // undisable
this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" + // this.logger.log('info', 'keyboard', "[KeyboardHandler::preventAction] Testing whether we're in a textbox or something. Detailed rundown of conditions:\n" +
"\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1, // "\nis tag one of defined inputs? (yes->prevent):", this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1,
"\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox", // "\nis role = textbox? (yes -> prevent):", activeElement.getAttribute("role") === "textbox",
"\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text", // "\nis type === 'text'? (yes -> prevent):", activeElement.getAttribute("type") === "text",
"\nevent.target.isContentEditable? (yes -> prevent):", event.target.isContentEditable, // "\nevent.target.isContentEditable? (yes -> prevent):", event.target.isContentEditable,
"\nis keyboard local disabled? (yes -> prevent):", this.keyboardLocalDisabled, // "\nis keyboard local disabled? (yes -> prevent):", this.keyboardLocalDisabled,
// "\nis keyboard enabled in settings? (no -> prevent)", this.settings.keyboardShortcutsEnabled(window.location.hostname), // // "\nis keyboard enabled in settings? (no -> prevent)", this.settings.keyboardShortcutsEnabled(window.location.hostname),
"\nwill the action be prevented? (yes -> prevent)", preventAction, // "\nwill the action be prevented? (yes -> prevent)", preventAction,
"\n-----------------{ extra debug info }-------------------", // "\n-----------------{ extra debug info }-------------------",
"\ntag name? (lowercase):", activeElement.tagName, activeElement.tagName.toLocaleLowerCase(), // "\ntag name? (lowercase):", activeElement.tagName, activeElement.tagName.toLocaleLowerCase(),
"\nrole:", activeElement.getAttribute('role'), // "\nrole:", activeElement.getAttribute('role'),
"\ntype:", activeElement.getAttribute('type'), // "\ntype:", activeElement.getAttribute('type'),
"\ninsta-fail inputs:", this.inputs, // "\ninsta-fail inputs:", this.inputs,
"\nevent:", event, // "\nevent:", event,
"\nevent.target:", event.target // "\nevent.target:", event.target
); // );
} // }
if (this.keyboardLocalDisabled) { if (this.keyboardLocalDisabled) {
return true; return true;
@ -213,19 +218,15 @@ export class KeyboardHandler extends KbmBase {
handleKeyup(event) { handleKeyup(event) {
// if (!this.keyboardEnabled) { this.logger.info('handleKeyup', "we pressed a key: ", event.key , " | keyup: ", event.keyup, "event:", event);
// this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] kbmHandler.keyboardEnabled is set to false. Doing nothing.");
// return;
// }
this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keyup: ", event.keyup, "event:", event);
try { try {
if (this.preventAction(event)) { if (this.preventAction(event)) {
this.logger.log('info', 'keyboard', "[KeyboardHandler::handleKeyup] we are in a text box or something. Doing nothing."); this.logger.info('handleKeyup', "we are in a text box or something. Doing nothing.");
return; return;
} }
this.logger.log('info', 'keyboard', "%c[KeyboardHandler::handleKeyup] Trying to find and execute action for event. Actions/event: ", "color: #ff0", this.keypressActions, event); this.logger.info('handleKeyup', "Trying to find and execute action for event. Actions/event:", this.keypressActions, event);
const isLatin = this.isLatin(event.key); const isLatin = this.isLatin(event.key);
for (const command of this.keypressActions) { for (const command of this.keypressActions) {
@ -234,7 +235,7 @@ export class KeyboardHandler extends KbmBase {
} }
} }
} catch (e) { } catch (e) {
this.logger.log('info', 'debug', '[KeyboardHandler::handleKeyup] Failed to handle keyup!', e); this.logger.debug('handleKeyup', 'Failed to handle keyup!', e);
} }
} }

16
src/ext/lib/kbm/PlayerMouseHandler.ts
View File

@ -1,5 +1,7 @@
import { LogAggregator } from './../logging/LogAggregator';
import EventBus, { EventBusCommand } from '../EventBus'; import EventBus, { EventBusCommand } from '../EventBus';
import Logger from '../Logger'; import Logger from '../Logger';
import { ComponentLogger } from '../logging/ComponentLogger';
import Settings from '../Settings'; import Settings from '../Settings';
import { SiteSettings } from '../settings/SiteSettings'; import { SiteSettings } from '../settings/SiteSettings';
import KbmBase from './KbmBase'; import KbmBase from './KbmBase';
@ -9,6 +11,10 @@ if(process.env.CHANNEL !== 'stable'){
} }
const BASE_LOGGING_STYLES = {
log: "color: #ff0"
};
/** /**
* Handles keypress * Handles keypress
*/ */
@ -36,21 +42,21 @@ export class MouseHandler extends KbmBase {
} }
//#region lifecycle //#region lifecycle
constructor(playerElement: HTMLElement, eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger) { constructor(playerElement: HTMLElement, eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logAggregator: LogAggregator) {
super(eventBus, siteSettings, settings, logger); const tmpLogger = new ComponentLogger(logAggregator, 'MouseHandler', {styles: BASE_LOGGING_STYLES});
super(eventBus, siteSettings, settings, tmpLogger);
this.logger = logger;
this.settings = settings; this.settings = settings;
this.siteSettings = siteSettings; this.siteSettings = siteSettings;
this.eventBus = eventBus; this.eventBus = eventBus;
this.playerElement = playerElement; this.playerElement = playerElement;
this.init(); this.init();
} }
init() { init() {
this.logger.log('info', 'debug', '[MouseHandler::init] starting init'); // this.logger.debug('init', 'starting init');
} }
load() { load() {

9
src/ext/lib/video-data/PlayerData.ts
View File

@ -14,6 +14,7 @@ import { SiteSettings } from '../settings/SiteSettings';
import PageInfo from './PageInfo'; import PageInfo from './PageInfo';
import { RunLevel } from '../../enum/run-level.enum'; import { RunLevel } from '../../enum/run-level.enum';
import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface'; import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
import { ComponentLogger } from '../logging/ComponentLogger';
if (process.env.CHANNEL !== 'stable'){ if (process.env.CHANNEL !== 'stable'){
console.info("Loading: PlayerData.js"); console.info("Loading: PlayerData.js");
@ -69,7 +70,7 @@ class PlayerData {
private playerCssClass = 'uw-ultrawidify-player-css'; private playerCssClass = 'uw-ultrawidify-player-css';
//#region helper objects //#region helper objects
logger: Logger; logger: ComponentLogger;
videoData: VideoData; videoData: VideoData;
pageInfo: PageInfo; pageInfo: PageInfo;
siteSettings: SiteSettings; siteSettings: SiteSettings;
@ -193,7 +194,7 @@ class PlayerData {
constructor(videoData) { constructor(videoData) {
try { try {
// set all our helper objects // set all our helper objects
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'PlayerData', {styles: Debug.getLoggingStyles()});
this.videoData = videoData; this.videoData = videoData;
this.videoElement = videoData.video; this.videoElement = videoData.video;
this.pageInfo = videoData.pageInfo; this.pageInfo = videoData.pageInfo;
@ -457,13 +458,13 @@ class PlayerData {
private handleDimensionChanges(newDimensions: PlayerDimensions, oldDimensions: PlayerDimensions) { private handleDimensionChanges(newDimensions: PlayerDimensions, oldDimensions: PlayerDimensions) {
if (this.runLevel === RunLevel.Off ) { if (this.runLevel === RunLevel.Off ) {
this.logger.log('info', 'debug', "[PlayerDetect] player size changed, but PlayerDetect is in disabled state. The player element is probably too small."); this.logger.info('handleDimensionChanges', "player size changed, but PlayerDetect is in disabled state. The player element is probably too small.");
return; return;
} }
// this 'if' is just here for debugging — real code starts later. It's safe to collapse and // this 'if' is just here for debugging — real code starts later. It's safe to collapse and
// ignore the contents of this if (unless we need to change how logging works) // ignore the contents of this if (unless we need to change how logging works)
this.logger.log('info', 'debug', "[PlayerDetect] player size potentially changed.\n\nold dimensions:", oldDimensions, '\nnew dimensions:', newDimensions); this.logger.info('handleDimensionChanges', "player size potentially changed.\n\nold dimensions:", oldDimensions, '\nnew dimensions:', newDimensions);
// if size doesn't match, trigger onPlayerDimensionChange // if size doesn't match, trigger onPlayerDimensionChange
if ( if (

65
src/ext/lib/video-data/VideoData.ts
View File

@ -19,6 +19,8 @@ import { Aard } from '../aard/Aard';
import { Stretch } from '../../../common/interfaces/StretchInterface'; import { Stretch } from '../../../common/interfaces/StretchInterface';
import ExtensionMode from '../../../common/enums/ExtensionMode.enum'; import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface'; import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
import { LogAggregator } from '../logging/LogAggregator';
import { ComponentLogger } from '../logging/ComponentLogger';
/** /**
* VideoData — handles CSS for the video element. * VideoData — handles CSS for the video element.
@ -67,7 +69,8 @@ class VideoData {
//#endregion //#endregion
//#region helper objects //#region helper objects
logger: Logger; logger: ComponentLogger;
logAggregator: LogAggregator
settings: Settings; // AARD needs it settings: Settings; // AARD needs it
siteSettings: SiteSettings; siteSettings: SiteSettings;
pageInfo: PageInfo; pageInfo: PageInfo;
@ -117,7 +120,9 @@ class VideoData {
* @param pageInfo * @param pageInfo
*/ */
constructor(video, settings: Settings, siteSettings: SiteSettings, pageInfo: PageInfo){ constructor(video, settings: Settings, siteSettings: SiteSettings, pageInfo: PageInfo){
this.logger = pageInfo.logger; this.logAggregator = pageInfo.logAggregator;
this.logger = new ComponentLogger(this.logAggregator, 'VideoData', {});
this.arSetupComplete = false; this.arSetupComplete = false;
this.video = video; this.video = video;
this.destroyed = false; this.destroyed = false;
@ -167,7 +172,7 @@ class VideoData {
if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) { if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) {
return; // onVideoLoaded is a lie in this case return; // onVideoLoaded is a lie in this case
} }
this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9'); this.logger.info('onVideoLoaded', '%c ——————————— Initiating phase two of videoData setup ———————————', 'color: #0f9');
this.hasDrm = hasDrm(this.video); this.hasDrm = hasDrm(this.video);
this.eventBus.send( this.eventBus.send(
@ -179,12 +184,12 @@ class VideoData {
this.videoDimensionsLoaded = true; this.videoDimensionsLoaded = true;
try { try {
await this.setupStageTwo(); await this.setupStageTwo();
this.logger.log('info', 'init', '%c[VideoData::onVideoLoaded] ——————————— videoData setup stage two complete ———————————', 'color: #0f9'); this.logger.info('onVideoLoaded', '%c——————————— videoData setup stage two complete ———————————', 'color: #0f9');
} catch (e) { } catch (e) {
this.logger.log('error', 'init', '%c[VideoData::onVideoLoaded] ——————————— Setup stage two failed. ———————————\n', 'color: #f00', e); this.logger.error('onVideoLoaded', '%c ——————————— Setup stage two failed. ———————————\n', 'color: #f00', e);
} }
} else if (!this.videoDimensionsLoaded) { } else if (!this.videoDimensionsLoaded) {
this.logger.log('info', 'debug', "%c[VideoData::restoreCrop] Recovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132"); this.logger.debug('onVideoLoaded', "%cRecovering from illegal video dimensions. Resetting aspect ratio.", "background: #afd, color: #132");
this.restoreCrop(); this.restoreCrop();
this.videoDimensionsLoaded = true; this.videoDimensionsLoaded = true;
@ -213,11 +218,11 @@ class VideoData {
//#region <video> event handlers //#region <video> event handlers
onLoadedData() { onLoadedData() {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadeddata] Video fired event "loaded data!"'); this.logger.info('onLoadedData', 'Video fired event "loaded data!"');
this.onVideoLoaded(); this.onVideoLoaded();
} }
onLoadedMetadata() { onLoadedMetadata() {
this.logger.log('info', 'init', '[VideoData::ctor->video.onloadedmetadata] Video fired event "loaded metadata!"'); this.logger.log('onLoadedData', 'Video fired event "loaded metadata!"');
this.onVideoLoaded(); this.onVideoLoaded();
} }
onTimeUpdate() { onTimeUpdate() {
@ -231,7 +236,7 @@ class VideoData {
* Sets up event listeners for this video * Sets up event listeners for this video
*/ */
async setupEventListeners() { async setupEventListeners() {
this.logger.log('info', 'init', '%c[VideoData::setupEventListeners] ——————————— Starting event listener setup! ———————————', 'color: #0f9'); this.logger.info('setupEventListeners', '%c——————————— Starting event listener setup! ———————————', 'color: #0f9');
// this is in case extension loads before the video // this is in case extension loads before the video
this.video.addEventListener('loadeddata', this.onLoadedData.bind(this)); this.video.addEventListener('loadeddata', this.onLoadedData.bind(this));
@ -240,7 +245,7 @@ class VideoData {
// this one is in case extension loads after the video is loaded // this one is in case extension loads after the video is loaded
this.video.addEventListener('timeupdate', this.onTimeUpdate.bind(this)); this.video.addEventListener('timeupdate', this.onTimeUpdate.bind(this));
this.logger.log('info', 'init', '%c[VideoData::setupEventListeners] ——————————— Event listeners setup complete! ———————————', 'color: #0f9'); this.logger.info('setupEventListeners', '%c——————————— Event listeners setup complete! ———————————', 'color: #0f9');
} }
/** /**
@ -264,7 +269,7 @@ class VideoData {
} }
this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid); this.logger.info('setupStageTwo', 'Created videoData with vdid', this.vdid);
// Everything is set up at this point. However, we are still purely "read-only" at this point. Player CSS should not be changed until // Everything is set up at this point. However, we are still purely "read-only" at this point. Player CSS should not be changed until
@ -363,7 +368,7 @@ class VideoData {
* cleans up handlers and stuff when the show is over * cleans up handlers and stuff when the show is over
*/ */
destroy() { destroy() {
this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`); this.logger.info('destroy', `<vdid:${this.vdid}> received destroy command`);
if (this.video) { if (this.video) {
this.video.classList.remove(this.userCssClassName); this.video.classList.remove(this.userCssClassName);
@ -403,7 +408,8 @@ class VideoData {
return; return;
} }
if (this.currentEnvironment !== this.player.environment) { if (this.currentEnvironment !== this.player.environment) {
console.warn('environment changed to:', this.player.environment); this.logger.warn('onEnvironmentChanged', 'environment changed from:', this.currentEnvironment, 'to:', this.player.environment);
this.currentEnvironment = this.player.environment; this.currentEnvironment = this.player.environment;
if (this.siteSettings.data.enable[this.player.environment] === ExtensionMode.Disabled) { if (this.siteSettings.data.enable[this.player.environment] === ExtensionMode.Disabled) {
this.setRunLevel(RunLevel.Off); this.setRunLevel(RunLevel.Off);
@ -473,10 +479,10 @@ class VideoData {
restoreCrop() { restoreCrop() {
if (!this.resizer) { if (!this.resizer) {
this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Resizer has not been initialized yet. Crop will not be restored.'); this.logger.warn('restoreCrop', 'Resizer has not been initialized yet. Crop will not be restored.');
return; return;
} }
this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.') this.logger.info('restoreCrop', 'Attempting to reset aspect ratio.');
// if we have default crop set for this page, apply this. // if we have default crop set for this page, apply this.
// otherwise, reset crop // otherwise, reset crop
@ -489,7 +495,7 @@ class VideoData {
this.stopArDetection(); this.stopArDetection();
this.startArDetection(); this.startArDetection();
} catch (e) { } catch (e) {
this.logger.log('warn', 'debug', '[VideoData::restoreCrop] Autodetection not resumed. Reason:', e); this.logger.warn('restoreCrop', 'Autodetection not resumed. Reason:', e);
} }
} }
} }
@ -516,13 +522,13 @@ class VideoData {
let confirmAspectRatioRestore = false; let confirmAspectRatioRestore = false;
if (!this.video) { if (!this.video) {
this.logger.log('error', 'debug', '[VideoData::onVideoMutation] mutation was triggered, but video element is missing. Something is fishy. Terminating this uw instance.'); this.logger.error('onVideoMutation', 'mutation was triggered, but video element is missing. Something is fishy. Terminating this uw instance.');
this.destroy(); this.destroy();
return; return;
} }
if (!this.enabled) { if (!this.enabled) {
this.logger.log('info', 'info', '[VideoData::onVideoMutation] mutation was triggered, but the extension is disabled. Is the player window too small?'); this.logger.info('onVideoMutation', 'mutation was triggered, but the extension is disabled. Is the player window too small?');
return; return;
} }
@ -552,8 +558,8 @@ class VideoData {
onVideoDimensionsChanged(mutationList, observer) { onVideoDimensionsChanged(mutationList, observer) {
if (!mutationList || this.video === undefined) { // something's wrong if (!mutationList || this.video === undefined) { // something's wrong
if (observer && this.video) { if (observer && this.video) {
this.logger.log( this.logger.warn(
'warn', 'debug', 'onVideoDimensionChanged',
'onVideoDimensionChanged encountered a weird state. video and observer exist, but mutationlist does not.\n\nmutationList:', mutationList, 'onVideoDimensionChanged encountered a weird state. video and observer exist, but mutationlist does not.\n\nmutationList:', mutationList,
'\nobserver:', observer, '\nobserver:', observer,
'\nvideo:', this.video, '\nvideo:', this.video,
@ -573,7 +579,7 @@ class VideoData {
*/ */
private _processDimensionsChanged() { private _processDimensionsChanged() {
if (!this.player) { if (!this.player) {
this.logger.log('warn', 'debug', `[VideoData::_processDimensionsChanged] Player is not defined. This is super haram.`, this.player); this.logger.warn('_processDimensionsChanged', `Player is not defined. This is super haram.`, this.player);
return; return;
} }
// adding player observer taught us that if element size gets triggered by a class, then // adding player observer taught us that if element size gets triggered by a class, then
@ -706,7 +712,7 @@ class VideoData {
startArDetection() { startArDetection() {
this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection") this.logger.info('startArDetection', 'starting AR detection');
if(this.destroyed || this.invalid) { if(this.destroyed || this.invalid) {
// throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
return; return;
@ -725,7 +731,7 @@ class VideoData {
} }
this.aard.startCheck(); this.aard.startCheck();
} catch (e) { } catch (e) {
this.logger.log('warn', 'debug', '[VideoData::startArDetection()] Could not start aard for some reason. Was the function was called too early?', e); this.logger.warn('startArDetection', 'Could not start aard for some reason. Was the function was called too early?', e);
} }
} }
@ -754,17 +760,16 @@ class VideoData {
checkVideoSizeChange(){ checkVideoSizeChange(){
const videoWidth = this.video.offsetWidth; const videoWidth = this.video.offsetWidth;
const videoHeight = this.video.offsetHeight; const videoHeight = this.video.offsetHeight;
// this 'if' is just here for debugging — real code starts later. It's safe to collapse and
// ignore the contents of this if (unless we need to change how logging works) {
if (this.logger.canLog('debug')){
if(! this.video) { if(! this.video) {
this.logger.log('info', 'videoDetect', "[VideoDetect] player element isn't defined"); this.logger.warn('checkVideoSizeChange', "player element isn't defined");
} }
if ( this.video && if ( this.video &&
( this.dimensions?.width != videoWidth || ( this.dimensions?.width != videoWidth ||
this.dimensions?.height != videoHeight ) this.dimensions?.height != videoHeight )
) { ) {
this.logger.log('info', 'debug', "[VideoDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.video.offsetWidth, this.video.offsetHeight); this.logger.debug('checkVideoSizeChange', "player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.video.offsetWidth, this.video.offsetHeight);
} }
} }

58
src/ext/lib/video-transform/Resizer.ts
View File

@ -21,6 +21,7 @@ import { RunLevel } from '../../enum/run-level.enum';
import * as _ from 'lodash'; import * as _ from 'lodash';
import getElementStyles from '../../util/getElementStyles'; import getElementStyles from '../../util/getElementStyles';
import { Stretch } from '../../../common/interfaces/StretchInterface'; import { Stretch } from '../../../common/interfaces/StretchInterface';
import { ComponentLogger } from '../logging/ComponentLogger';
if(Debug.debug) { if(Debug.debug) {
console.log("Loading: Resizer.js"); console.log("Loading: Resizer.js");
@ -46,7 +47,7 @@ class Resizer {
//#endregion //#endregion
//#region helper objects //#region helper objects
logger: Logger; logger: ComponentLogger;
settings: Settings; settings: Settings;
siteSettings: SiteSettings; siteSettings: SiteSettings;
scaler: Scaler; scaler: Scaler;
@ -180,7 +181,7 @@ class Resizer {
constructor(videoData) { constructor(videoData) {
this.resizerId = (Math.random()*100).toFixed(0); this.resizerId = (Math.random()*100).toFixed(0);
this.videoData = videoData; this.videoData = videoData;
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'Resizer');
this.video = videoData.video; this.video = videoData.video;
this.settings = videoData.settings; this.settings = videoData.settings;
this.siteSettings = videoData.siteSettings; this.siteSettings = videoData.siteSettings;
@ -234,7 +235,7 @@ class Resizer {
} }
destroy(){ destroy(){
this.logger.log('info', ['debug', 'init'], `[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`); this.logger.info('destroy', `<rid:${this.resizerId}> received destroy command.`);
this.destroyed = true; this.destroyed = true;
} }
@ -251,7 +252,7 @@ class Resizer {
let ratioOut; let ratioOut;
if (!this.videoData.video) { if (!this.videoData.video) {
this.logger.log('info', 'debug', "[Scaler.js::modeToAr] No video??",this.videoData.video, "killing videoData"); this.logger.info('calculateRatioForLegacyOptions', "No video??", this.videoData.video, "— killing videoData");
this.videoData.destroy(); this.videoData.destroy();
return null; return null;
} }
@ -260,7 +261,7 @@ class Resizer {
if (! this.videoData.player.dimensions) { if (! this.videoData.player.dimensions) {
ratioOut = screen.width / screen.height; ratioOut = screen.width / screen.height;
} else { } else {
this.logger.log('info', 'debug', `[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.videoData.player.dimensions.width ,'x', this.videoData.player.dimensions.height,'aspect ratio:', this.videoData.player.dimensions.width / this.videoData.player.dimensions.height) this.logger.info('calculateRatioForLegacyOptions', `<rid:${this.resizerId}> Player dimensions:`, this.videoData.player.dimensions.width ,'x', this.videoData.player.dimensions.height,'aspect ratio:', this.videoData.player.dimensions.width / this.videoData.player.dimensions.height)
ratioOut = this.videoData.player.dimensions.width / this.videoData.player.dimensions.height; ratioOut = this.videoData.player.dimensions.width / this.videoData.player.dimensions.height;
} }
@ -276,7 +277,7 @@ class Resizer {
ar.ratio = ratioOut < fileAr ? ratioOut : fileAr; ar.ratio = ratioOut < fileAr ? ratioOut : fileAr;
} }
else if(ar.type === AspectRatioType.Reset){ else if(ar.type === AspectRatioType.Reset){
this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr); this.logger.info('modeToAr', "Using original aspect ratio -", fileAr);
ar.ratio = fileAr; ar.ratio = fileAr;
} else { } else {
return null; return null;
@ -350,11 +351,11 @@ class Resizer {
} }
if (!this.video.videoWidth || !this.video.videoHeight) { if (!this.video.videoWidth || !this.video.videoHeight) {
this.logger.log('warning', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.'); this.logger.warn('setAr', `<rid:${this.resizerId}> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.`);
this.videoData.videoUnloaded(); this.videoData.videoUnloaded();
} }
this.logger.log('info', 'debug', '%c[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', 'background-color: #4c3a2f, color: #ffa349', ar); this.logger.info('setAr', `<rid:${this.resizerId}> trying to set ar. New ar:`, ar);
let stretchFactors: VideoDimensions | any; let stretchFactors: VideoDimensions | any;
@ -391,7 +392,7 @@ class Resizer {
// I'm not sure whether they do. Check that. // I'm not sure whether they do. Check that.
ar = this.calculateRatioForLegacyOptions(ar); ar = this.calculateRatioForLegacyOptions(ar);
if (! ar) { if (! ar) {
this.logger.log('info', 'resizer', `[Resizer::setAr] <${this.resizerId}> Something wrong with ar or the player. Doing nothing.`); this.logger.info('setAr', `<rid:${this.resizerId}> Something wrong with ar or the player. Doing nothing.`);
return; return;
} }
this.lastAr = {type: ar.type, ratio: ar.ratio}; this.lastAr = {type: ar.type, ratio: ar.ratio};
@ -406,7 +407,7 @@ class Resizer {
stretchFactors = this.scaler.calculateCrop(ar); stretchFactors = this.scaler.calculateCrop(ar);
if (!stretchFactors || stretchFactors.error){ if (!stretchFactors || stretchFactors.error){
this.logger.log('error', 'debug', `[Resizer::setAr] <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error); this.logger.error('setAr', ` <rid:${this.resizerId}> failed to set AR due to problem with calculating crop. Error:`, stretchFactors?.error);
if (stretchFactors?.error === 'no_video'){ if (stretchFactors?.error === 'no_video'){
this.videoData.destroy(); this.videoData.destroy();
return; return;
@ -427,24 +428,24 @@ class Resizer {
} else if (this.stretcher.stretch.type === StretchType.FixedSource) { } else if (this.stretcher.stretch.type === StretchType.FixedSource) {
this.stretcher.applyStretchFixedSource(stretchFactors); this.stretcher.applyStretchFixedSource(stretchFactors);
} }
this.logger.log('info', 'debug', "[Resizer::setAr] Processed stretch factors for ", this.logger.info('setAr', "Processed stretch factors for ",
this.stretcher.stretch.type === StretchType.NoStretch ? 'stretch-free crop.' : this.stretcher.stretch.type === StretchType.NoStretch ? 'stretch-free crop.' :
this.stretcher.stretch.type === StretchType.Conditional ? 'crop with conditional StretchType.' : 'crop with fixed stretch', this.stretcher.stretch.type === StretchType.Conditional ? 'crop with conditional StretchType.' : 'crop with fixed stretch',
'Stretch factors are:', stretchFactors 'Stretch factors are:', stretchFactors
); );
} else if (this.stretcher.stretch.type === StretchType.Hybrid) { } else if (this.stretcher.stretch.type === StretchType.Hybrid) {
stretchFactors = this.stretcher.calculateStretch(ar.ratio); stretchFactors = this.stretcher.calculateStretch(ar.ratio);
this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors); this.logger.info('setAr', 'Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
} else if (this.stretcher.stretch.type === StretchType.Fixed) { } else if (this.stretcher.stretch.type === StretchType.Fixed) {
stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio); stretchFactors = this.stretcher.calculateStretchFixed(ar.ratio);
} else if (this.stretcher.stretch.type === StretchType.Basic) { } else if (this.stretcher.stretch.type === StretchType.Basic) {
stretchFactors = this.stretcher.calculateBasicStretch(); stretchFactors = this.stretcher.calculateBasicStretch();
this.logger.log('info', 'debug', '[Resizer::setAr] Processed stretch factors for basic StretchType. Stretch factors are:', stretchFactors); this.logger.log('setAr', 'Processed stretch factors for basic StretchType. Stretch factors are:', stretchFactors);
} else { } else {
stretchFactors = this.scaler.calculateCrop(ar); stretchFactors = this.scaler.calculateCrop(ar);
this.logger.log( this.logger.error(
'error', 'debug', 'setAr',
'[Resizer::setAr] Okay wtf happened? If you see this, something has gone wrong. Pretending stretchMode is set tu NoStretch. Stretch factors are:', stretchFactors, 'Okay wtf happened? If you see this, something has gone wrong. Pretending stretchMode is set tu NoStretch. Stretch factors are:', stretchFactors,
"\n------[ i n f o d u m p ]------\nstretcher:", this.stretcher, "\n------[ i n f o d u m p ]------\nstretcher:", this.stretcher,
'\nargs: ar (corrected for legacy):', ar, 'last ar (optional argument):', lastAr '\nargs: ar (corrected for legacy):', ar, 'last ar (optional argument):', lastAr
); );
@ -501,7 +502,7 @@ class Resizer {
const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth; const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth;
const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight; const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight;
this.logger.log('info', 'mousemove', "[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY) this.logger.info({src: 'panHandler', origin: 'mousemove'}, "mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY);
this.setPan(relativeX, relativeY); this.setPan(relativeX, relativeY);
} }
@ -564,7 +565,7 @@ class Resizer {
*/ */
restore() { restore() {
if (!this.manualZoom) { if (!this.manualZoom) {
this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} ); this.logger.info('restore', `<rid:${this.resizerId}> attempting to restore aspect ratio`, {'lastAr': this.lastAr} );
// this is true until we verify that css has actually been applied // this is true until we verify that css has actually been applied
if(this.lastAr.type === AspectRatioType.Initial){ if(this.lastAr.type === AspectRatioType.Initial){
@ -749,7 +750,7 @@ class Resizer {
private _computeOffsetsRecursionGuard: boolean = false; private _computeOffsetsRecursionGuard: boolean = false;
computeOffsets(stretchFactors: VideoDimensions, ar?: Ar){ computeOffsets(stretchFactors: VideoDimensions, ar?: Ar){
this.logger.log('info', 'debug', "[Resizer::computeOffsets] <rid:"+this.resizerId+"> video will be aligned to ", this.videoAlignment, '— stretch factors before processing:', stretchFactors); this.logger.info('computeOffsets', `<rid:${this.resizerId}> video will be aligned to `, this.videoAlignment, '— stretch factors before processing:', stretchFactors);
const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions(); const {realVideoWidth, realVideoHeight, marginX, marginY} = this.computeVideoDisplayedDimensions();
@ -817,8 +818,9 @@ class Resizer {
} }
} }
this.logger.log( this.logger.info(
'info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:", 'computeOffsets',
`<rid:${this.resizerId}> calculated offsets:`,
'\n\n---- elements ----', '\n\n---- elements ----',
'\nplayer element: ', this.videoData.player.element, '\nplayer element: ', this.videoData.player.element,
'\nvideo element: ', this.videoData.video, '\nvideo element: ', this.videoData.video,
@ -851,10 +853,10 @@ class Resizer {
(this.videoData.video.offsetWidth < this.videoData.player.dimensions.width && this.videoData.video.offsetHeight < this.videoData.player.dimensions.height) (this.videoData.video.offsetWidth < this.videoData.player.dimensions.width && this.videoData.video.offsetHeight < this.videoData.player.dimensions.height)
) && ar?.variant !== ArVariant.Zoom ) && ar?.variant !== ArVariant.Zoom
) { ) {
this.logger.log('warn', ['debugger', 'resizer'], `[Resizer::_res_computeOffsets] <rid:${this.resizerId}> We are getting some incredibly funny results here.\n\n`, this.logger.warn('computeOffsets', `<rid:${this.resizerId}> We are getting some incredibly funny results here.\n\n`,
`Video seems to be both wider and taller (or shorter and narrower) than player element at the same time. This is super duper not supposed to happen.\n\n`, `Video seems to be both wider and taller (or shorter and narrower) than player element at the same time. This is super duper not supposed to happen.\n\n`,
`Player element needs to be checked.` `Player element needs to be checked.`
) );
// sometimes this appears to randomly recurse. // sometimes this appears to randomly recurse.
// There seems to be no way to reproduce it. // There seems to be no way to reproduce it.
@ -928,13 +930,13 @@ class Resizer {
// apply extra CSS here. In case of duplicated properties, extraCss overrides // apply extra CSS here. In case of duplicated properties, extraCss overrides
// default styleString // default styleString
if (! this.video) { if (! this.video) {
this.logger.log('warn', 'debug', "[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing."); this.logger.warn('applyCss', `<rid:${this.resizerId}> Video went missing, doing nothing.`);
this.videoData.destroy(); this.videoData.destroy();
return; return;
} }
this.logger.log('info', ['debug', 'resizer'], "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate}); this.logger.info('applyCss', `<rid:${this.resizerId}> will apply css.`, {stretchFactors, translate});
// save stuff for quick tests (before we turn numbers into css values): // save stuff for quick tests (before we turn numbers into css values):
this.currentVideoSettings = { this.currentVideoSettings = {
@ -969,18 +971,18 @@ class Resizer {
// inject new CSS or replace existing one // inject new CSS or replace existing one
if (!this.userCss) { if (!this.userCss) {
this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Setting new css: ", newCssString); this.logger.debug('setStyleString', `<rid:${this.resizerId}> Setting new css: `, newCssString);
this.eventBus.send('inject-css', {cssString: newCssString}); this.eventBus.send('inject-css', {cssString: newCssString});
this.userCss = newCssString; this.userCss = newCssString;
} else if (newCssString !== this.userCss) { } else if (newCssString !== this.userCss) {
this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Replacing css.\nOld string:", this.userCss, "\nNew string:", newCssString); this.logger.debug('setStyleString', `<rid:${this.resizerId}}> Replacing css.\nOld string:`, this.userCss, "\nNew string:", newCssString)
// we only replace css if it // we only replace css if it
this.eventBus.send('replace-css', {oldCssString: this.userCss, newCssString}); this.eventBus.send('replace-css', {oldCssString: this.userCss, newCssString});
this.userCss = newCssString; this.userCss = newCssString;
} else { } else {
this.logger.log('info', ['debug', 'resizer'], "[Resizer::setStyleString] <rid:"+this.resizerId+"> Existing css is still valid, doing nothing."); this.logger.debug('setStyleString', `<rid:${this.resizerId}> Existing css is still valid, doing nothing.`);
} }
} }

21
src/ext/lib/video-transform/Scaler.ts
View File

@ -4,6 +4,7 @@ import BrowserDetect from '../../conf/BrowserDetect';
import VideoData from '../video-data/VideoData'; import VideoData from '../video-data/VideoData';
import Logger from '../Logger'; import Logger from '../Logger';
import { Ar, ArVariant } from '../../../common/interfaces/ArInterface'; import { Ar, ArVariant } from '../../../common/interfaces/ArInterface';
import { ComponentLogger } from '../logging/ComponentLogger';
export enum CropStrategy { export enum CropStrategy {
@ -46,13 +47,13 @@ export type VideoDimensions = {
class Scaler { class Scaler {
//#region helper objects //#region helper objects
conf: VideoData; conf: VideoData;
logger: Logger; logger: ComponentLogger;
//#endregion //#endregion
// functions // functions
constructor(videoData) { constructor(videoData) {
this.conf = videoData; this.conf = videoData;
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'Scaler', {});
} }
@ -65,7 +66,7 @@ class Scaler {
let ratioOut; let ratioOut;
if (!this.conf.video) { if (!this.conf.video) {
this.logger.log('error', 'debug', "[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData"); this.logger.error('modeToAr', "No video??",this.conf.video, "killing videoData");
this.conf.destroy(); this.conf.destroy();
return null; return null;
} }
@ -93,7 +94,7 @@ class Scaler {
return ratioOut; return ratioOut;
} }
else if (ar.type === AspectRatioType.Reset) { else if (ar.type === AspectRatioType.Reset) {
this.logger.log('info', 'debug', "[Scaler.js::modeToAr] Using original aspect ratio -", fileAr) this.logger.info('modeToAr', "Using original aspect ratio -", fileAr)
ar.ar = fileAr; ar.ar = fileAr;
return fileAr; return fileAr;
} }
@ -137,7 +138,7 @@ class Scaler {
} }
if(!this.conf.video){ if(!this.conf.video){
this.logger.log('info', 'debug', "[Scaler::calculateCrop] ERROR — no video detected. Conf:", this.conf, "video:", this.conf.video, "video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight); this.logger.info('calculateCrop', "ERROR — no video detected. Conf:", this.conf, "video:", this.conf.video, "video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
this.conf.destroy(); this.conf.destroy();
return {error: "no_video"}; return {error: "no_video"};
@ -145,7 +146,7 @@ class Scaler {
if (this.conf.video.videoWidth == 0 || this.conf.video.videoHeight == 0) { if (this.conf.video.videoWidth == 0 || this.conf.video.videoHeight == 0) {
// that's illegal, but not illegal enough to just blast our shit to high hell // that's illegal, but not illegal enough to just blast our shit to high hell
// mr officer will let you go with a warning this time around // mr officer will let you go with a warning this time around
this.logger.log('error', 'debug', "[Scaler::calculateCrop] Video has illegal dimensions. Video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight); this.logger.error('calculateCrop', "Video has illegal dimensions. Video dimensions:", this.conf.video && this.conf.video.videoWidth, '×', this.conf.video && this.conf.video.videoHeight);
return {error: "illegal_video_dimensions"}; return {error: "illegal_video_dimensions"};
} }
@ -165,16 +166,16 @@ class Scaler {
// handle fuckie-wuckies // handle fuckie-wuckies
if (!ar.ratio){ if (!ar.ratio){
this.logger.log('error', 'scaler', "[Scaler::calculateCrop] no ar?", ar.ratio, " -- we were given this mode:", ar); this.logger.error('calculateCrop', "no ar?", ar.ratio, " -- we were given this mode:", ar);
return {error: "no_ar", ratio: ar.ratio}; return {error: "no_ar", ratio: ar.ratio};
} }
this.logger.log('info', 'scaler', "[Scaler::calculateCrop] trying to set ar. args are: ar->",ar.ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions); this.logger.info('calculateCrop', "trying to set ar. args are: ar->",ar.ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
// If we encounter invalid players, we try to update its dimensions // If we encounter invalid players, we try to update its dimensions
// ONCE before throwing an error // ONCE before throwing an error
if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){ if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
this.logger.log('error', 'scaler', "[Scaler::calculateCrop] ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions); this.logger.error('calculateCrop', "ERROR — no (or invalid) this.conf.player.dimensions:",this.conf.player.dimensions);
this.conf.player.updatePlayer(); this.conf.player.updatePlayer();
if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){ if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
@ -191,7 +192,7 @@ class Scaler {
} }
this.logger.log('info', 'scaler', "[Scaler::calculateCrop] ar is " ,ar.ratio, ", file ar is", streamAr, ",ar variant", ar.variant ,"\nthis.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions, this.conf.player.element); this.logger.info('calculateCrop', "ar is " ,ar.ratio, ", file ar is", streamAr, ",ar variant", ar.variant ,"\nthis.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions, this.conf.player.element);
const videoDimensions: VideoDimensions = { const videoDimensions: VideoDimensions = {
xFactor: 1, xFactor: 1,

9
src/ext/lib/video-transform/Stretcher.ts
View File

@ -6,6 +6,7 @@ import VideoData from '../video-data/VideoData';
import Logger from '../Logger'; import Logger from '../Logger';
import Settings from '../Settings'; import Settings from '../Settings';
import { Stretch } from '../../../common/interfaces/StretchInterface'; import { Stretch } from '../../../common/interfaces/StretchInterface';
import { ComponentLogger } from '../logging/ComponentLogger';
// računa vrednosti za transform-scale (x, y) // računa vrednosti za transform-scale (x, y)
// transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje // transform: scale(x,y) se uporablja za raztegovanje videa, ne pa za približevanje
@ -19,7 +20,7 @@ class Stretcher {
//#region helper objects //#region helper objects
conf: VideoData; conf: VideoData;
logger: Logger; logger: ComponentLogger;
settings: Settings; settings: Settings;
siteSettings: SiteSettings; siteSettings: SiteSettings;
//#endregion //#endregion
@ -29,7 +30,7 @@ class Stretcher {
// functions // functions
constructor(videoData) { constructor(videoData) {
this.conf = videoData; this.conf = videoData;
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'Stretcher', {});;
this.siteSettings = videoData.siteSettings; this.siteSettings = videoData.siteSettings;
this.settings = videoData.settings; this.settings = videoData.settings;
@ -111,7 +112,7 @@ class Stretcher {
// * we squeeze X axis, if target AR is narrower than player size // * we squeeze X axis, if target AR is narrower than player size
// * we squeeze Y axis, if target AR is wider than the player size // * we squeeze Y axis, if target AR is wider than the player size
this.logger.log('info', 'stretcher', `[Stretcher::applyStretchFixedSource] here's what we got: this.logger.info('applyStretchFixedSource', `here's what we got:
postCropStretchFactors: x=${postCropStretchFactors.xFactor} y=${postCropStretchFactors.yFactor} postCropStretchFactors: x=${postCropStretchFactors.xFactor} y=${postCropStretchFactors.yFactor}
fixedStretchRatio: ${this.stretch.ratio} fixedStretchRatio: ${this.stretch.ratio}
videoAr: ${streamAr} videoAr: ${streamAr}
@ -120,7 +121,7 @@ squeezeFactor: ${squeezeFactor}`, '\nvideo', this.conf.video);
postCropStretchFactors.xFactor *= squeezeFactor; postCropStretchFactors.xFactor *= squeezeFactor;
this.logger.log('info', 'stretcher', `[Stretcher::applyStretchFixedSource] here's what we'll apply:\npostCropStretchFactors: x=${postCropStretchFactors.x} y=${postCropStretchFactors.y}`); this.logger.info('applyStretchFixedSource', `here's what we'll apply:\npostCropStretchFactors: x=${postCropStretchFactors.x} y=${postCropStretchFactors.y}`);
return postCropStretchFactors; return postCropStretchFactors;
} }

13
src/ext/lib/video-transform/Zoom.ts
View File

@ -1,5 +1,4 @@
import Debug from '../../conf/Debug'; import { ComponentLogger } from '../logging/ComponentLogger';
import Logger from '../Logger';
import VideoData from '../video-data/VideoData'; import VideoData from '../video-data/VideoData';
// calculates zooming and video offsets/panning // calculates zooming and video offsets/panning
@ -16,7 +15,7 @@ class Zoom {
//#region helper objects //#region helper objects
conf: VideoData; conf: VideoData;
logger: Logger; logger: ComponentLogger;
//#endregion //#endregion
//#region misc data //#region misc data
@ -34,7 +33,7 @@ class Zoom {
constructor(videoData) { constructor(videoData) {
this.conf = videoData; this.conf = videoData;
this.logger = videoData.logger; this.logger = new ComponentLogger(videoData.logAggregator, 'Zoom', {});
} }
reset(){ reset(){
@ -66,7 +65,7 @@ class Zoom {
this.scale = Math.pow(2, this.logScale); this.scale = Math.pow(2, this.logScale);
this.scaleY = Math.pow(2, this.logScaleY); this.scaleY = Math.pow(2, this.logScaleY);
this.logger.log('info', 'debug', "[Zoom::zoomStep] changing zoom by", amount, ". New zoom level:", this.scale); this.logger.info('zoomStep', "changing zoom by", amount, ". New zoom level:", this.scale);
this.processZoom(); this.processZoom();
} }
@ -100,12 +99,12 @@ class Zoom {
if (!stretchFactors) { if (!stretchFactors) {
return; return;
} }
this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale); this.logger.info('setZoom', "Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
stretchFactors.xFactor *= this.scale; stretchFactors.xFactor *= this.scale;
stretchFactors.yFactor *= this.scale; stretchFactors.yFactor *= this.scale;
this.logger.log('info', 'debug', "[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors); this.logger.info('setZoom', "Applying zoom. Stretch factors post:", stretchFactors);
} }
} }

8
src/install/first-time/App.vue
View File

@ -53,9 +53,9 @@
</template> </template>
<script> <script>
import Debug from '../../ext/conf/Debug';
import BrowserDetect from '../../ext/conf/BrowserDetect'; import BrowserDetect from '../../ext/conf/BrowserDetect';
import Logger from '../../ext/lib/Logger'; import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
export default { export default {
data () { data () {
@ -75,6 +75,7 @@ export default {
settings: {}, settings: {},
settingsInitialized: false, settingsInitialized: false,
logger: {}, logger: {},
logAggregator: {},
siteTabDisabled: false, siteTabDisabled: false,
videoTabDisabled: false, videoTabDisabled: false,
canShowVideoTab: {canShow: true, warning: true}, canShowVideoTab: {canShow: true, warning: true},
@ -82,7 +83,8 @@ export default {
} }
}, },
async created() { async created() {
this.logger = new Logger(); this.logAggregator = new LogAggregator('');
this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
await this.logger.init({ await this.logger.init({
allowLogging: true, allowLogging: true,
}); });

9
src/install/updated/App.vue
View File

@ -54,9 +54,9 @@
</template> </template>
<script> <script>
import Debug from '../../ext/conf/Debug';
import BrowserDetect from '../../ext/conf/BrowserDetect'; import BrowserDetect from '../../ext/conf/BrowserDetect';
import Logger from '../../ext/lib/Logger'; import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
export default { export default {
data () { data () {
@ -75,6 +75,7 @@ export default {
currentZoom: 1, currentZoom: 1,
settings: {}, settings: {},
settingsInitialized: false, settingsInitialized: false,
logAggregator: {},
logger: {}, logger: {},
siteTabDisabled: false, siteTabDisabled: false,
videoTabDisabled: false, videoTabDisabled: false,
@ -83,7 +84,9 @@ export default {
} }
}, },
async created() { async created() {
this.logger = new Logger(); this.logAggregator = new LogAggregator('');
this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
await this.logger.init({ await this.logger.init({
allowLogging: true, allowLogging: true,
}); });

7
src/options/App.vue
View File

@ -123,7 +123,8 @@ import ConfirmPopup from './common/ConfirmationPopup';
import About from './about' import About from './about'
import AutodetectionSettings from './AutodetectionSettings'; import AutodetectionSettings from './AutodetectionSettings';
// import SuperAdvancedSettings from './' // import SuperAdvancedSettings from './'
import Logger from '../ext/lib/Logger'; import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
export default { export default {
name: "Ultrawidify", name: "Ultrawidify",
@ -132,6 +133,7 @@ export default {
selectedTab: "general", selectedTab: "general",
selectedTabTitle: "General settings", selectedTabTitle: "General settings",
settings: {}, settings: {},
logAggregator: {},
logger: {}, logger: {},
settingsInitialized: false, settingsInitialized: false,
editActionPopupVisible: false, editActionPopupVisible: false,
@ -145,7 +147,8 @@ export default {
} }
}, },
async created () { async created () {
this.logger = new Logger(); this.logAggregator = new LogAggregator('');
this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
await this.logger.init({ await this.logger.init({
allowLogging: true, allowLogging: true,
}); });