expose videoData objects via window.ultrawidify

src/csui/PlayerUiComponent.vue

@@ -9,7 +9,7 @@
         Video options
       </div>
     </div>
-    <div>
+    <div>sudpo 
       <!-- Panel section -->
       <template v-if="settingsInitialized">
         <VideoSettings
@@ -92,10 +92,16 @@ export default {
       await this.settings.init();
       this.settingsInitialized = true;
 
+      console.log("settings inited")
+
       this.execAction.setSettings(this.settings);
 
       console.log("created!");
       console.log("store:", this.$store, this);
+
+      console.log("settings:", this.settings)
+      console.log("windowPD", window.ultrawidify);
+      console.log("this:", this);
     } catch (e) {
       console.error('Failed to initiate ultrawidify player ui.', e);
     }

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -19,6 +19,7 @@
     <div>
       <h1>Streth video:</h1>
       <div class="flex flex-row flex-wrap">
+        <div @click="testAction()">TEST CLICK ME</div>
       </div>
     </div>
     <div>
@@ -96,6 +97,9 @@ export default {
       //   'page',
       //   this.frame
       // );
+    },
+    testAction() {
+      window.ultrawidify.videos[0].setAr({type: AspectRatio.FitWidth});
     }
   }
 }

src/ext/lib/UWGlobals.js

@@ -0,0 +1,33 @@
+export default class UWGlobals {
+  constructor() {
+    this.videos = [];
+  }
+
+  getNewVideoID() {
+    let random;
+
+    while (true) {
+                // 4-digit [a-z0-9] string. Should be unique per page on first try
+      random = (Math.random() * 1679616).toFixed().toString(36);
+      
+      if (this.videos.findIndex(x => x.vdid === random) === -1) {
+        return random;
+      }
+    }
+  }
+
+  addVideo(video) {
+    // get video ID
+    const id = this.getNewVideoID();
+    video.vdid = id;
+    this.videos.push(video);
+  }
+
+  getVideo(id) {
+    return this.videos.find(x => x.vdid === id);
+  }
+
+  destroy() {
+    // todo: implement
+  }
+}

src/ext/lib/uwui/PlayerUI.js

@@ -30,7 +30,6 @@ class PlayerUi extends UI {
     this.settings = settings;
   }
 
-
   //#region constructor helpers
   // we will move some things out of the constructor in order to keep things clean
   static getStoreConfig() {

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

@@ -47,6 +47,7 @@ class PlayerData {
       this.element = this.getPlayer();
 
       this.notificationService = new PlayerNotificationUi(this.element, this.settings);
+
       this.ui = new PlayerUi(this.element, this.settings);
       this.dimensions = undefined;
       this.overlayNode = undefined;

src/ext/lib/video-data/VideoData.js

@@ -8,7 +8,8 @@ class VideoData {
   
 
   constructor(video, settings, pageInfo){
-    this.vdid = (Math.random()*100).toFixed();
+    window.ultrawidify.addVideo(this);
+    
     this.logger = pageInfo.logger;
     this.arSetupComplete = false;
     this.video = video;
@@ -91,6 +92,7 @@ class VideoData {
   }
   //#endregion
 
+
   //#region lifecycle-ish
   /**
    * Injects base CSS and sets up handlers for <video> tag events

src/ext/uw.js

@@ -7,6 +7,7 @@ import Comms from './lib/comms/Comms';
 import CommsClient from './lib/comms/CommsClient';
 import PageInfo from './lib/video-data/PageInfo';
 import Logger from './lib/Logger';
+import UWGlobals from './lib/UWGlobals';
 
 
 if(process.env.CHANNEL !== 'stable'){
@@ -65,6 +66,14 @@ class UW {
     }
   }
 
+  createUWGlobals() {
+    if (window.ultrawidify) {
+      window.ultrawidify.destroy();
+    }
+
+    window.ultrawidify = new UWGlobals();
+  }
+
   reloadSettings() {
     this.logger.log('info', 'debug', 'Things happened in the popup. Will reload extension settings.');
     this.init();
@@ -74,6 +83,8 @@ class UW {
     if (Debug.debug) {
       console.log("[uw::main] loading configuration ...");
     }
+
+    this.createUWGlobals();
   
     // logger init is the first thing that needs to run
     try {
@@ -179,8 +190,6 @@ class UW {
       this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);
     }
   }
-
- 
 }
 
 var main = new UW();