Start adding event bus

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);
     }

src/ext/lib/EventBus.ts

@@ -0,0 +1,46 @@
+
+export interface EventBusCommand {
+  isGlobal?: boolean,
+  function: (commandConfig: any) => void | Promise<void>
+}
+
+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) {
+
+  }
+}

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;

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();
   }
 

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;
       }
     }