From 209e4221d2170e63348e4fd7e997274407828b5b Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 26 Oct 2021 22:19:41 +0200 Subject: [PATCH] Start adding event bus --- src/csui/PlayerUiComponent.vue | 3 ++ src/ext/lib/EventBus.ts | 46 +++++++++++++++++++++ src/ext/lib/video-data/PlayerData.ts | 5 ++- src/ext/lib/video-data/VideoData.ts | 4 ++ src/ext/lib/video-transform/Resizer.ts | 56 +++++++++++++++++++++----- 5 files changed, 104 insertions(+), 10 deletions(-) create mode 100644 src/ext/lib/EventBus.ts diff --git a/src/csui/PlayerUiComponent.vue b/src/csui/PlayerUiComponent.vue index c501ece..a752e18 100644 --- a/src/csui/PlayerUiComponent.vue +++ b/src/csui/PlayerUiComponent.vue @@ -155,6 +155,9 @@ export default { console.log("settings:", this.settings) console.log("windowPD", window.ultrawidify); console.log("this:", this); + + + console.log('eventBus:', this.eventBus); } catch (e) { console.error('Failed to initiate ultrawidify player ui.', e); } diff --git a/src/ext/lib/EventBus.ts b/src/ext/lib/EventBus.ts new file mode 100644 index 0000000..b1a7456 --- /dev/null +++ b/src/ext/lib/EventBus.ts @@ -0,0 +1,46 @@ + +export interface EventBusCommand { + isGlobal?: boolean, + function: (commandConfig: any) => void | Promise +} + +export default class EventBus { + + private commands: { [x: string]: EventBusCommand[]} = {}; + private downstreamBuses: { [x: string]: EventBus } = {}; + private upstreamBus?: EventBus; + + + subscribe(commandString: string, command: EventBusCommand) { + if (!this.commands[commandString]) { + this.commands[commandString] = [command]; + } else { + this.commands[commandString].push(command); + } + } + + send(command: string, config: any, stopPropagation?: boolean) { + for (const eventBusCommand of this.commands[command]) { + eventBusCommand.function(config); + + if (eventBusCommand.isGlobal && !stopPropagation) { + this.sendUpstream(command, config); + this.sendDownstream(command, config); + } + } + } + + sendGlobal(command: string, config: any) { + for (const eventBusCommand of this.commands[command]) { + this.sendUpstream(command, config); + this.sendDownstream(command, config); + } + } + + sendDownstream(command: string, config: any) { + + } + sendUpstream(command: string, config: any) { + + } +} diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts index 2e0dea1..eadf959 100644 --- a/src/ext/lib/video-data/PlayerData.ts +++ b/src/ext/lib/video-data/PlayerData.ts @@ -9,6 +9,7 @@ import { sleep } from '../../../common/js/utils'; import VideoData from './VideoData'; import Settings from '../Settings'; import Logger from '../Logger'; +import EventBus from '../EventBus'; if (process.env.CHANNEL !== 'stable'){ console.info("Loading: PlayerData.js"); @@ -42,6 +43,7 @@ class PlayerData { videoData: VideoData; settings: Settings; notificationService: PlayerNotificationUi; + eventBus: EventBus; //#endregion //#region HTML objects @@ -87,12 +89,13 @@ class PlayerData { this.videoData = videoData; this.video = videoData.video; this.settings = videoData.settings; + this.eventBus = videoData.eventBus; this.extensionMode = videoData.extensionMode; this.invalid = false; this.element = this.getPlayer(); this.notificationService = new PlayerNotificationUi(this.element, this.settings); - this.ui = new PlayerUi(this.element, this.settings); + this.ui = new PlayerUi(this.element, this.settings, this.eventBus); this.ui.init(); this.dimensions = undefined; diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts index 0d7bae9..85f221c 100644 --- a/src/ext/lib/video-data/VideoData.ts +++ b/src/ext/lib/video-data/VideoData.ts @@ -10,6 +10,7 @@ import Settings from '../Settings'; import PageInfo from './PageInfo'; import { sleep } from '../../../common/js/utils'; import { hasDrm } from '../ar-detect/DrmDetecor'; +import EventBus from '../EventBus'; class VideoData { private baseCssName: string = 'uw-ultrawidify-base-wide-screen'; @@ -49,6 +50,7 @@ class VideoData { player: PlayerData; resizer: Resizer; arDetector: ArDetector; + eventBus: EventBus; //#endregion @@ -85,6 +87,8 @@ class VideoData { height: this.video.offsetHeight, }; + this.eventBus = new EventBus(); + this.setupStageOne(); } diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts index 8b6ddfc..4ec28a9 100644 --- a/src/ext/lib/video-transform/Resizer.ts +++ b/src/ext/lib/video-transform/Resizer.ts @@ -12,6 +12,7 @@ import { sleep } from '../Util'; import Logger from '../Logger'; import Settings from '../Settings'; import VideoData from '../video-data/VideoData'; +import EventBus from '../EventBus'; if(Debug.debug) { console.log("Loading: Resizer.js"); @@ -30,6 +31,7 @@ class Resizer { stretcher: Stretcher; zoom: Zoom; conf: VideoData; + eventBus: EventBus; //#endregion //#region HTML elements @@ -45,12 +47,34 @@ class Resizer { currentVideoSettings: any; lastAr: {type: any, ratio?: number} = {type: AspectRatioType.Initial}; resizerId: any; - videoAlignment: any; + videoAlignment: {x: VideoAlignmentType, y: VideoAlignmentType}; userCss: string; userCssClassName: any; pan: any = null; //#endregion + //#region event bus configuration + private eventBusCommands = { + 'set-ar': [{ + function: (config: any) => this.setAr(config.type, config.ratio) + }], + 'set-alignment': [{ + function: (config: any) => { + this.setVideoAlignment(config.videoAlignmentX, config.videoAlignmentY); + } + }], + 'set-stretch': [{ + function: (config: any) => this.setStretchMode(config.stretchMode, config.fixedAspectRatio) + }], + 'set-zoom': [{ + function: (config: any) => this.setZoom(config.zoomLevel) + }], + 'change-zoom': [{ + function: (config: any) => this.zoomStep(config.step) + }], + } + //#endregion + constructor(videoData) { this.resizerId = (Math.random()*100).toFixed(0); this.conf = videoData; @@ -62,7 +86,7 @@ class Resizer { this.stretcher = new Stretcher(this.conf); this.zoom = new Zoom(this.conf); - this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment + this.videoAlignment.x = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment this.destroyed = false; @@ -73,6 +97,17 @@ class Resizer { } this.userCssClassName = videoData.userCssClassName; + + this.eventBus = videoData.eventBus; + this.initEventBus(); + } + + initEventBus() { + for (const action in this.eventBusCommands) { + for (const command of this.eventBusCommands[action]) { + this.eventBus.subscribe(action, command); + } + } } injectCss(css) { @@ -332,7 +367,7 @@ class Resizer { return; } // dont allow weird floats - this.videoAlignment = VideoAlignmentType.Center; + this.videoAlignment.x = VideoAlignmentType.Center; // because non-fixed aspect ratios reset panning: if (this.lastAr.type !== AspectRatioType.Fixed) { @@ -352,7 +387,7 @@ class Resizer { resetPan() { this.pan = {x: 0, y: 0}; - this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); + this.videoAlignment.x = this.settings.getDefaultVideoAlignment(window.location.hostname); } setPan(relativeMousePosX, relativeMousePosY){ @@ -372,8 +407,11 @@ class Resizer { this.restore(); } - setVideoAlignment(videoAlignment) { - this.videoAlignment = videoAlignment; + setVideoAlignment(videoAlignmentX: VideoAlignmentType, videoAlignmentY?: VideoAlignmentType) { + this.videoAlignment = { + x: videoAlignmentX ?? VideoAlignmentType.Default, + y: videoAlignmentY ?? VideoAlignmentType.Default + }; this.restore(); } @@ -411,7 +449,7 @@ class Resizer { } } - setZoom(zoomLevel, no_announce) { + setZoom(zoomLevel, no_announce?) { this.zoom.setZoom(zoomLevel, no_announce); } @@ -567,10 +605,10 @@ class Resizer { translate.y += hdiffAfterZoom * this.pan.relativeOffsetY * this.zoom.scale; } } else { - if (this.videoAlignment == VideoAlignmentType.Left) { + if (this.videoAlignment.x == VideoAlignmentType.Left) { translate.x += wdiffAfterZoom * 0.5; } - else if (this.videoAlignment == VideoAlignmentType.Right) { + else if (this.videoAlignment.x == VideoAlignmentType.Right) { translate.x -= wdiffAfterZoom * 0.5; } }