Get event bus to work (for some values of work)

src/csui/PlayerUiComponent.vue

@@ -64,6 +64,7 @@
           <template v-if="settingsInitialized">
             <VideoSettings
               :settings="settings"
+              :eventBus="eventBus"
             ></VideoSettings>
             <!-- <ResizerDebugPanel :debugData="debugData">
             </ResizerDebugPanel> -->
@@ -155,9 +156,6 @@ 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/csui/PlayerUiPanels/VideoSettings.vue

@@ -11,7 +11,7 @@
                         :key="index"
                         :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                         :shortcut="parseShortcut(action)"
-                        @click.native="execAction(action)"
+                        @click="execAction(action)"
         >
         </ShortcutButton>
       </div>
@@ -27,7 +27,7 @@
                         :key="index"
                         :label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
                         :shortcut="parseShortcut(action)"
-                        @click.native="execAction(action)"
+                        @click="execAction(action)"
         >
         </ShortcutButton>
       </div>
@@ -233,6 +233,7 @@ export default {
     'frame',
     'zoom',
     'cropModePersistence',
+    'eventBus'
   ],
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);
@@ -252,6 +253,17 @@ export default {
       BrowserDetect.runtime.openOptionsPage();
     },
     execAction(action) {
+
+      // TODO: migrate all actions to the new way of doing things
+      if (action.cmd[0].action === 'set-ar') {
+        this.eventBus?.send('set-ar', {
+          type: action.cmd[0].arg,
+          ratio: action.cmd[0].customArg
+        });
+        return;
+      }
+
+
       console.log('execing action:', action, window.ultrawidify);
 
       try {

src/ext/lib/ar-detect/ArDetector.ts

@@ -724,9 +724,9 @@ class ArDetector {
         let newCanvasWidth = window.innerHeight * (this.video.videoWidth / this.video.videoHeight);
         let newCanvasHeight = window.innerHeight;
 
-        if (this.conf.resizer.videoAlignment === VideoAlignmentType.Center) {
+        if (this.conf.resizer.videoAlignment.x === VideoAlignmentType.Center) {
           this.canvasDrawWindowHOffset = Math.round((window.innerWidth - newCanvasWidth) * 0.5);
-        } else if (this.conf.resizer.videoAlignment === VideoAlignmentType.Left) {
+        } else if (this.conf.resizer.videoAlignment.x === VideoAlignmentType.Left) {
           this.canvasDrawWindowHOffset = 0;
         } else {
           this.canvasDrawWindowHOffset = window.innerWidth - newCanvasWidth;

src/ext/lib/uwui/PlayerNotificationUI.js

@@ -16,16 +16,19 @@ class PlayerNotificationUi extends UI {
 
   constructor (
     playerElement,
-    settings
-  ) {    
+    settings,
+    eventBus,
+  ) {
     super(
       'notification',
       PlayerNotificationUi.getStoreConfig(),
       PlayerNotificationUi.getUiConfig(playerElement),
-      PlayerNotificationUi.getCommsConfig()
+      PlayerNotificationUi.getCommsConfig(),
+      eventBus
     );
 
     this.settings = settings;
+    this.eventBus = eventBus;
   }
 
 
@@ -85,9 +88,9 @@ class PlayerNotificationUi extends UI {
 
   /**
    * Show notification on screen.
-   * 
+   *
    * @param notificationConfig notification config (or ID of notification config in /common/data/notifications.js)
-   * 
+   *
    * notificationConfig should resemble this:
    * {
    *    timeout: number  — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
@@ -104,7 +107,7 @@ class PlayerNotificationUi extends UI {
    *      // more of notificationActions but with special case
    *    ]
    * }
-   * 
+   *
    * When notificationConfig is a string, the function will add two additional notifications on the notificationActionsPile
    *    * never show this notification ever again on any site
    *    * never show this notification again on this site
@@ -170,7 +173,7 @@ class PlayerNotificationUi extends UI {
   }
 
   isNotificationMuted(notificationId) {
-    return this.settings.active.mutedNotifications?.[notificationId]?.$global 
+    return this.settings.active.mutedNotifications?.[notificationId]?.$global
       || this.settings.active.mutedNotifications?.[notificationId]?.[window.location.hostname];
   }
 }

src/ext/lib/uwui/PlayerUI.js

@@ -18,13 +18,15 @@ class PlayerUi extends UI {
    */
   constructor (
     playerElement,
-    settings
-  ) {    
+    settings,
+    eventBus,
+  ) {
     super(
       'ultrawidifyUi',
       PlayerUi.getStoreConfig(),
       PlayerUi.getUiConfig(playerElement),
-      PlayerUi.getCommsConfig()
+      PlayerUi.getCommsConfig(),
+      eventBus
     );
 
     this.settings = settings;

src/ext/lib/uwui/UI.js

@@ -14,11 +14,13 @@ class UI {
     storeConfig,
     uiConfig, // {component, parentElement?}
     commsConfig,
+    eventBus
   ) {
     this.interfaceId = interfaceId;
     this.commsConfig = commsConfig;
     this.storeConfig = storeConfig;
     this.uiConfig = uiConfig;
+    this.eventBus = eventBus;
 
     this.init();
   }
@@ -62,10 +64,25 @@ class UI {
 
     this.element = rootDiv;
 
-    const app = createApp(this.uiConfig.component).use(mdiVue, {icons: mdijs});
+    const app = createApp(this.uiConfig.component)
+      .use(mdiVue, {icons: mdijs})
+      .use({   // hand eventBus to the component
+        install: (app, options) => {
+          app.mixin({
+            data() {
+              return {
+                eventBus: options.eventBus
+              }
+            }
+          })
+        }
+      }, {eventBus: this.eventBus});
+
     if (this.vuexStore) {
       app.use(this.vuexStore);
     }
+
+    this.app = app;
     app.mount(`#${uwid}`);
   }
 

src/ext/lib/video-data/PlayerData.ts

@@ -94,7 +94,7 @@ class PlayerData {
       this.invalid = false;
       this.element = this.getPlayer();
 
-      this.notificationService = new PlayerNotificationUi(this.element, this.settings);
+      this.notificationService = new PlayerNotificationUi(this.element, this.settings, this.eventBus);
       this.ui = new PlayerUi(this.element, this.settings, this.eventBus);
       this.ui.init();
 

src/ext/lib/video-transform/Resizer.ts

@@ -56,7 +56,7 @@ class Resizer {
   //#region event bus configuration
   private eventBusCommands = {
     'set-ar': [{
-      function: (config: any) => this.setAr(config.type, config.ratio)
+      function: (config: any) => this.setAr(config)
     }],
     'set-alignment': [{
       function: (config: any) => {
@@ -81,6 +81,8 @@ class Resizer {
     this.logger = videoData.logger;
     this.video = videoData.video;
     this.settings = videoData.settings;
+    this.eventBus = videoData.eventBus;
+    this.initEventBus();
 
     this.scaler = new Scaler(this.conf);
     this.stretcher = new Stretcher(this.conf);
@@ -98,8 +100,7 @@ class Resizer {
 
     this.userCssClassName = videoData.userCssClassName;
 
-    this.eventBus = videoData.eventBus;
-    this.initEventBus();
+
   }
 
   initEventBus() {
@@ -179,7 +180,6 @@ class Resizer {
     return ar;
   }
 
-
   updateAr(ar) {
     if (!ar) {
       return;
@@ -387,7 +387,7 @@ class Resizer {
 
   resetPan() {
     this.pan = {x: 0, y: 0};
-    this.videoAlignment.x = this.settings.getDefaultVideoAlignment(window.location.hostname);
+    this.videoAlignment = {x: this.settings.getDefaultVideoAlignment(window.location.hostname), y: VideoAlignmentType.Center};
   }
 
   setPan(relativeMousePosX, relativeMousePosY){