Allow users to set player element from the popup

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -75,6 +75,8 @@
 
                   @mouseover="markElement(index, true)"
                   @mouseleave="markElement(index, false)"
+
+                  @click="setPlayer(index)"
                 >
                   <div class="tag">
                     <b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i>  @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
@@ -124,7 +126,7 @@ export default({
     this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleElementStack(config)});
   },
   mounted() {
-    this.eventBus.sendToTunnel('get-player-tree');  // TODO: implement this in PlayerData
+    this.eventBus.sendToTunnel('get-player-tree');
   },
   computed: {},
   methods: {
@@ -135,8 +137,23 @@ export default({
       }
     },
     markElement(parentIndex, enable) {
-      console.log('will mark element:', parentIndex, enable);
       this.eventBus.sendToTunnel('set-mark-element', {parentIndex, enable});
+    },
+    async setPlayer(index) {
+      // if user agrees with ultrawidify on what element player should be,
+      // we just unset our settings for this site
+      if (this.elementStack[index].heuristics?.autoMatch) {
+        this.settings.setSiteOption(['DOM', 'player', 'manual'], false, this.site);
+        await this.settings.save();
+        this.eventBus.sendToTunnel('get-player-tree');
+      } else {
+        // ensure settings exist:
+        this.settings.setSiteOption(['DOM', 'player', 'manual'], true, this.site);
+        this.settings.setSiteOption(['DOM', 'player', 'useRelativeAncestor'], true, this.site);
+        this.settings.setSiteOption(['DOM', 'player', 'videoAncestor'], index, this.site);
+        await this.settings.save();
+        this.eventBus.sendToTunnel('get-player-tree');
+      }
     }
   }
 })
@@ -169,6 +186,8 @@ export default({
         border: 1px solid rgba(255,255,255,0.5);
         padding: 0.5rem 1rem;
 
+        max-width: 30rem;
+
         display: flex;
         flex-direction: column;
 
@@ -187,6 +206,13 @@ export default({
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
+
+          > div {
+            background-color: rgba(255,255,255,0.5);
+            border-radius: 0.25rem;
+            padding: 0.125rem 0.5rem;
+            margin: 0.125rem 0.25rem;
+          }
         }
         .dimensions {
           color: #473c85;

src/ext/lib/Settings.ts

@@ -622,6 +622,30 @@ class Settings {
   getDefaultStretchMode(site?: string) {
     return this.active.sites[site ?? window.location.hostname]?.defaultStretch ?? this.active.stretch.default ?? {type: StretchType.NoStretch};
   }
+
+  /**
+   * Sets a site option and initializes values if empty.
+   * Does not save settings.
+   * @param path
+   * @param value
+   * @param site
+   */
+  setSiteOption(path: string[], value: any, site?: string) {
+    site = site ?? window.location.hostname;
+
+    if (!this.active.sites[site]) {
+      this.active.sites[site] = {};
+    }
+
+    let object = this.active.sites[site];
+    for (let i = 0; i < path.length - 1; i++) {
+      if (!object[path[i]]) {
+        object[path[i]] = {};
+      }
+      object = object[path[i]];
+    }
+    object[path[path.length - 1]] = value;
+  }
 }
 
 export default Settings;

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

@@ -69,6 +69,20 @@ class PlayerData {
   elementStack: any[] = [];
   //#endregion
 
+  //#region event bus configuration
+  private eventBusCommands = {
+    'get-player-tree': [{
+      function: () => this.handlePlayerTreeRequest()
+    }],
+    'set-mark-element': [{      // NOTE: is this still used?
+      function: (data) => this.markElement(data)
+    }],
+    'update-player': [{
+      function: () => this.getPlayer();
+    }]
+  }
+  //#endregion
+
   /**
    * Gets player aspect ratio. If in full screen, it returns screen aspect ratio unless settings say otherwise.
    */
@@ -95,9 +109,7 @@ class PlayerData {
       this.extensionMode = videoData.extensionMode;
       this.invalid = false;
       this.element = this.getPlayer();
-
-      this.eventBus.subscribe('get-player-tree', {function: () => this.handlePlayerTreeRequest()});
-      this.eventBus.subscribe('set-mark-element', {function: (data) => this.markElement(data)});
+      this.initEventBus();
 
       // this.notificationService = new PlayerNotificationUi(this.element, this.settings, this.eventBus);
       this.ui = new UI('ultrawidifyUi', {parentElement: this.element, eventBus: this.eventBus});
@@ -128,7 +140,14 @@ class PlayerData {
       console.error('[Ultrawidify::PlayerData::ctor] There was an error setting up player data. You should be never seeing this message. Error:', e);
       this.invalid = true;
     }
+  }
 
+  private initEventBus() {
+    for (const action in this.eventBusCommands) {
+      for (const command of this.eventBusCommands[action]) {
+        this.eventBus.subscribe(action, command);
+      }
+    }
   }
 
   /**