Open in-player settings window, get player selection to somewhat work

src/ext/module/settings/SiteSettings.ts

@@ -451,6 +451,18 @@ export class SiteSettings {
     return this.site;
   }
 
+  /**
+   * Ensures current site has its own separate copy of settings.
+   */
+  async ensureSettings()  {
+    if (!this.settings.active.sites[this._site]) {
+      this.settings.active.sites[this._site] = _cp(this.data);
+      this.settings.active.sites[this._site].type = SiteSupportLevel.UserDefined;
+      await this.settings.saveWithoutReload();
+      this.raw = this.settings.active.sites[this._site];
+    }
+  }
+
   /**
    * Sets option value.
    * @param optionPath path to value in object notation (dot separated)

src/ext/module/uwui/ClientMenu.ts

@@ -321,8 +321,6 @@ export class ClientMenu {
           recalculateActivator();
         }
         const d = Math.hypot(e.clientX - cx, e.clientY - cy);
-
-        console.log('activator radius:', activationRadius, 'mouse distance:', d);
         this.isWithinActivation = d <= activationRadius;
 
       } else {

src/ext/module/uwui/UI.ts

@@ -84,6 +84,13 @@ class UI {
               this.extensionMenu.show({forceShow: false});
             }
           }
+        },
+
+        'uw-show-settings-window': {
+          function: (commandData, context) => {
+            console.warn('received show settings window:', commandData, context, 'is global?', this.isGlobal);
+            this.createSettingsWindow(commandData?.initialState);
+          }
         }
       });
     }

src/ui/components/PopupHead.vue

@@ -86,7 +86,7 @@ export default defineComponent({
   },
   methods: {
     showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+      this.eventBus.send('uw-show-settings-window', {initialState: '', allFrames: true}, {comms: {forwardTo: 'active'}});
     },
     openSettingsInTab() {
       chrome.runtime.openOptionsPage();

src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSimple.vue

@@ -7,11 +7,11 @@
       <p>Select the first box that highlights the video player on the page.</p>
     </div>
 
-    <div class="">
+    <!-- <div class="">
       <div class="flex flex-row gap-4">
         <button>How to use</button>
       </div>
-    </div>
+    </div> -->
 
     <!-- PLAYER ELEMENT SELECTOR FOR DUMMIES -->
     <div class="flex flex-col-reverse gap-2">
@@ -30,7 +30,7 @@
 
         @mouseover="markElement(elementStack.length - index - 1, true)"
         @mouseleave="markElement(elementStack.length - index - 1, false)"
-        @click="setPlayer(elementStack.length - index - 1)"
+        @click="setPlayer(element, elementStack.length - index - 1)"
       >
         <div
           v-if="element.heuristics?.autoMatch"
@@ -81,6 +81,10 @@
 </template>
 
 <script lang="ts">
+import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
+import { SiteSupportLevel } from '@src/common/enums/SiteSupportLevel.enum';
+import { SiteDOMSettingsInterface } from '@src/common/interfaces/SettingsInterface';
+import { _cp } from '@src/common/utils/_cp';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -137,25 +141,35 @@ export default defineComponent({
     markElement(parentIndex, enable) {
       this.eventBus.send('set-mark-element', {parentIndex, enable});
     },
-    async setPlayer(index) {
+    /**
-      // yup.
+     * Designates new element as player element. Currently, we only need
-      // this.siteSettings.getDOMConfig('modified', 'original');
+     * 'index', however at some point we might also set mode according
-      // await this.siteSettings.setUpdateFlags(['PlayerData']);
+     * to element flags.
-      // await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
+     */
-      // await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
+    async setPlayer(element, index) {
+      await this.siteSettings.ensureSettings();
 
-      // // if user agrees with ultrawidify on what element player should be,
+      let domConfig: SiteDOMSettingsInterface = this.siteSettings.data.currentDOMConfig;
-      // // we just unset our settings for this site
+      let domConfigName = this.siteSettings.data.activeDOMConfig.startsWith('@') ? 'custom' : this.siteSettings.data.activeDOMConfig;
-      // if (this.elementStack[index].heuristics?.autoMatch) {
+
-      //   await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
+      switch (domConfig?.type) {
-      //   this.getPlayerTree();
+        case SiteSupportLevel.UserModified:
-      // } else {
+        case SiteSupportLevel.UserDefined:
-      //   // ensure settings exist:
+          break;
-      //   await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
+        default:
-      //   await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
+          domConfig = _cp(domConfig ?? this.settings.sites['@empty'].DOMConfig['@empty']);
-      //   await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
+          domConfig.type = SiteSupportLevel.UserModified;
-      //   this.getPlayerTree();
+          break;
-      // }
+      }
+
+      domConfig.elements.player.detectionMode = index !== undefined ? PlayerDetectionMode.AncestorIndex : PlayerDetectionMode.Auto;
+      domConfig.elements.player.ancestorIndex = index;
+
+      await this.siteSettings.setUpdateFlags(['PlayerData']);
+      await this.siteSettings.set(`DOMConfig.${domConfigName}`, domConfig, {noSave: true});
+      await this.siteSettings.set('activeDOMConfig', domConfigName);
+
+      this.getPlayerTree();
     },
     /**
      * Toggles active CSS for element of certain parent index.

src/ui/pages/settings/App.vue

@@ -186,7 +186,7 @@ export default defineComponent({
                   this.site.host = config.site.host;
                 }
               }
-              this.site = config.site;
+              this.site = {...config.site, from: 'set-current-site, via setupPopup'};
               // this.selectedSite = this.selectedSite || config.site.host;
               this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
 
@@ -280,7 +280,7 @@ export default defineComponent({
         /**
          * Subscribe to event bus commands.
          * Note that showing and hiding of the settings window is no longer handled by iframe
-         * Instead, uw-show-ui should be handled by the content-script.
+         * Instead, uw-show-settings-window should be handled by the content-script.
          */
         this.eventBus.subscribeMulti({
           'set-current-site': {
@@ -294,8 +294,7 @@ export default defineComponent({
                   this.site.host = config.site.host;
                 }
               }
-              this.site = config.site;
+              this.site = {...config.site, from: 'set-current-site, via setup iframe'};
-
               this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
 
               console.log('set-site received:', this.site, this.siteSettings, 'current path:', this.initialPath);
@@ -336,6 +335,7 @@ export default defineComponent({
                   host: config.site,
                   frames: [],
                   hostnames: [],
+                  from: 'has-video, via setup iframe. Settings: ' + !!this.settings + '; site settings: ' + !!this.settings.getSiteSettings({site: config.site.host}),
                 };
 
                 this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
@@ -350,7 +350,7 @@ export default defineComponent({
         console.log('—————————————————————— polling from iframe window!!!!')
         this.startSitePolling();
         // this.eventBus.subscribe(
-        //   'uw-show-ui',
+        //   'uw-show-settings-window',
         //   {
         //     source: this,
         //     function: () => {
@@ -376,7 +376,7 @@ export default defineComponent({
     //#region EXTENSION POPUP
 
     showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+      this.eventBus.send('uw-show-settings-window', {initialState: undefined, allFrames: true}, {comms: {forwardTo: 'active'}});
     },
     async sleep(t) {
       return new Promise<void>( (resolve,reject) => {