Rework message passing and simplify tunnels

src/common/interfaces/EventBusMessage.interface.ts

@@ -17,11 +17,14 @@ export interface EventBusContext {
   stopPropagation?: boolean;
 
   origin?: CommsOrigin;
+  frameUrl?: string;
 
   // tab?: number;
   // frame?: number;
   // port?: string;
 
+  visitedBusses?: string[];
+
   comms?: {
     forwardTo?: 'all' | 'active' | 'popup' | 'contentScript' | 'all-frames';
     sender?: Runtime.MessageSender;

src/common/interfaces/HostData.interface.ts

@@ -0,0 +1,8 @@
+import { ExtensionEnvironment } from '@src/common/interfaces/SettingsInterface';
+
+export interface HostInfo {
+  host: string,
+  hasVideo: boolean,
+  minEnvironment: ExtensionEnvironment,
+  maxEnvironment: ExtensionEnvironment
+};

src/common/interfaces/IframeTunnelPayload.interface.ts

@@ -0,0 +1,6 @@
+import { EventBusMessage } from '@src/common/interfaces/EventBusMessage.interface';
+
+export interface IframeTunnelPayload {
+  action: string,
+  payload: EventBusMessage,
+}

src/common/utils/ObjectCopy.ts

@@ -1,4 +1,4 @@
-import Debug from '../conf/Debug';
+import Debug from '../../ext/conf/Debug';
 
 class ObjectCopy {
   static addNew(current, newValues){

src/common/utils/_cp.ts

@@ -1,7 +1,3 @@
-export async function sleep(timeout) {
-  return new Promise<void>( (resolve, reject) => setTimeout(() => resolve(), timeout));
-}
-
 /**
  * Creates deep copy of an object
  * @param obj

src/ext/UWContent.ts

@@ -8,7 +8,7 @@ import Settings from '@src/ext/module/settings/Settings';
 import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
 import UI from '@src/ext/module/uwui/UI';
 import PageInfo from '@src/ext/module/video-data/PageInfo';
-import { getIframeParentHost, setupHostnameReporting } from '@src/ext/util/getHost';
+import { getIframeParentHost, setupHostnameReporting } from '@src/common/utils/getHost';
 
 export default class UWContent {
   pageInfo: PageInfo;

src/ext/UWServer.ts

@@ -4,6 +4,9 @@ import Settings from '@src/ext/module/settings/Settings';
 import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
 import { BLANK_LOGGER_CONFIG, LogAggregator } from '@src/ext/module/logging/LogAggregator';
 import CommsServer from '@src/ext/module/comms/CommsServer';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
+import { HostInfo } from '@src/common/interfaces/HostData.interface';
+import { ExtensionEnvironment } from '@src/common/interfaces/SettingsInterface';
 
 
 const BASE_LOGGING_STYLES = {
@@ -263,6 +266,7 @@ export default class UWServer {
 
     const tabHostname = await this.getCurrentTabHostname();
     this.logger.info('getCurrentSite', 'Returning data:', {site, tabHostname});
+    console.info('get-current-site : returning data:', {site, tabHostname});
 
     this.eventBus.send(
       'set-current-site',
@@ -283,6 +287,36 @@ export default class UWServer {
   }
 
 
+  private populateFrameVideoStatus(tabId: number, hostnames: string[]) {
+    const out: HostInfo[] = [];
+
+    for (const host of hostnames) {
+      let video = {hasVideo: false, minEnvironment: ExtensionEnvironment.Normal, maxEnvironment: ExtensionEnvironment.Fullscreen};
+
+      for (const frameKey in this.videoTabs[tabId].frames) {
+        const frame = this.videoTabs[tabId].frames[frameKey];
+
+        if (frame.host === host) {
+          video.hasVideo = true;
+          if (frame.environment > video.maxEnvironment) {
+            video.maxEnvironment = frame.environment;
+          }
+          if (frame.environment < video.minEnvironment) {
+            video.minEnvironment = frame.environment;
+          }
+        }
+      }
+
+      out.push({
+        host,
+        ...video,
+      })
+    }
+
+    return out;
+  }
+
+  private _lastVideoTabData: any | undefined;
   async getVideoTab() {
     // friendly reminder: if current tab doesn't have a video,
     // there won't be anything in this.videoTabs[this.currentTabId]
@@ -299,7 +333,15 @@ export default class UWServer {
 
     const hostnames = await this.comms.listUniqueFrameHosts();
 
-    if (this.videoTabs[ctab.id]) {
+    // this probably means we're inside a problematic page
+    if (!this.videoTabs[ctab.id]) {
+      return this._lastVideoTabData ??  {
+        host: 'INVALID SITE',
+        frames: [],
+        hostnames: [],
+      }
+    }
+
     // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
     // we clean it up from videoTabs[tabId].frames array.
     const ageLimit = Date.now() - this.settings.active.pageInfo.timeouts.rescan - 4000;
@@ -311,29 +353,32 @@ export default class UWServer {
       }
     } catch (e) {
       // something went wrong. There's prolly no frames.
+      // this probably shouldn't ever run.
       return {
         host: this.extractHostname(ctab.url),
+        hostnames: [],
         frames: [],
         selected: this.selectedSubitem
       }
     }
 
-      return {
-        ...this.videoTabs[ctab.id],
+    // Ensure hostnames with videos come before hostnames without videos
+    // Also ensure hostnames are sorted alphabetically
+    const populatedHostnames = this.populateFrameVideoStatus(ctab.id, hostnames);
+    populatedHostnames.sort((a: HostInfo, b: HostInfo) => {
+      return a.hasVideo === b.hasVideo
+        ? a.host === b.host ? 0 : a.host < b.host ? -1 : 1
+        : a.hasVideo < b.hasVideo ? 1 : -1;
+    });
+
+    this._lastVideoTabData = {
       host: this.extractHostname(ctab.url),
-        hostnames,
+      hostnames: populatedHostnames.map(x => x.host), // todo: try eliminating this
+      populatedHostnames: populatedHostnames,
       selected: this.selectedSubitem
     };
-    }
 
-    // return something more or less empty if this tab doesn't have
-    // a video registered for it
-    return {
-      host: this.extractHostname(ctab.url),
-      frames: [],
-      hostnames,
-      selected: this.selectedSubitem,
-    }
+    return this._lastVideoTabData;
   }
 
   async getCurrentTabHostname() {

src/ext/module/EventBus.ts

@@ -1,34 +1,19 @@
-import { IframeData } from './video-data/IframeManager';
-import CommsClient, { CommsOrigin } from './comms/CommsClient';
-import CommsServer from './comms/CommsServer';
-import { EventBusCommand, EventBusContext } from '@src/common/interfaces/EventBusMessage.interface';
+import { EventBusCommand, EventBusContext, EventBusMessage } from '@src/common/interfaces/EventBusMessage.interface';
+import { IframeTunnelPayload } from '@src/common/interfaces/IframeTunnelPayload.interface';
+import Comms from '@src/ext/module/comms/Comms';
+import CommsClient, { CommsOrigin } from '@src/ext/module/comms/CommsClient';
+import CommsServer from '@src/ext/module/comms/CommsServer';
 
 
-
-// export interface EventBusContext {
-//   stopPropagation?: boolean,
-
-//   // Context stuff added by Comms
-//   origin?: CommsOrigin,
-//   comms?: {
-//     sender?: chrome.runtime.MessageSender,
-//     port?: chrome.runtime.Port,
-//     frame?: any,
-//     sourceFrame?: IframeData
-//     forwardTo?: 'all' | 'active' | 'contentScript' | 'server' | 'sameOrigin' | 'popup' | 'all-frames',
-//   };
-//   borderCrossings?: {
-//     commsServer?: boolean,
-//     iframe?: boolean,
-//   }
-// }
-
 export default class EventBus {
 
   private name: string;
+  private uuid = crypto.randomUUID();
 
   private commands: { [x: string]: EventBusCommand[]} = {};
   private comms?: CommsClient | CommsServer;
+  private commsOrigin: CommsOrigin;
+
 
   private disableTunnel: boolean = false;
   private popupContext: any = {};
@@ -37,11 +22,12 @@ export default class EventBus {
 
   // private uiUri = window.location.href;
 
-  constructor(options?: {isUWServer?: boolean, name?: string}) {
+  constructor(options?: {isUWServer?: boolean, name?: string, commsOrigin?: CommsOrigin}) {
     if (!options?.isUWServer) {
       this.setupIframeTunnelling();
     }
-    this.name = options?.name;
+    this.name = options?.name ?? '(unnamed EventBus)';
+    this.commsOrigin = options?.commsOrigin;
   }
 
   setupPopupTunnelWorkaround(context: EventBusContext): void {
@@ -102,8 +88,7 @@ export default class EventBus {
     }
   }
 
-  send(command: string, commandData: any, context?: EventBusContext) {
-    console.info('sending eventBus command:', this.name, 'command:', {command, commandData, context});
+  send(command: string, commandData: any, context: EventBusContext = {}) {
     // execute commands we have subscriptions for
 
     if (this.commands?.[command]) {
@@ -146,7 +131,9 @@ export default class EventBus {
           }
         );
       }
-      this.sendToTunnel(command, commandData);
+      this.sendToTunnel(command, commandData, context);
+    } else {
+      console.warn('message was already sent to iframe, doing nothing ...')
     }
 
     if (context?.stopPropagation) {
@@ -160,12 +147,14 @@ export default class EventBus {
    * @param command
    * @param config
    */
-  sendToTunnel(command: string, config: any) {
-    if (!this.disableTunnel) {
+  sendToTunnel(command: string, config: any, context: EventBusContext = {}) {
+    context.visitedBusses = [...context.visitedBusses ?? [], this.uuid];
+
+    if (!this.disableTunnel && typeof window !== 'undefined') {
       window.parent.postMessage(
         {
           action: 'uw-bus-tunnel',
-          payload: {action: command, config}
+          payload: {command, config, context} as EventBusMessage
         },
         '*'
       );
@@ -175,10 +164,20 @@ export default class EventBus {
       // in the popup
       if (this.comms) {
         try {
-          this.comms.sendMessage({command, config, context: this.popupContext}, this.popupContext);
+          this.comms.sendMessage(
+            {
+              command,
+              config,
+              context: {
+                ...this.popupContext,
+                ...context
+              }
+            },
+            this.popupContext
+          );
         } catch (e) {
           if (command !== 'reload-required') {
-            this.send('reload-required', {});
+            this.send('reload-required', {}, context);
           }
         }
       }
@@ -188,17 +187,34 @@ export default class EventBus {
   //#region iframe tunnelling
   private setupIframeTunnelling() {
     // forward messages coming from iframe tunnels
-    window.addEventListener('message', this.handleIframeMessage);
+    window.addEventListener('message', this);
   }
   private destroyIframeTunnelling() {
-    window.removeEventListener('message', this.handleIframeMessage);
+    window.removeEventListener('message', this);
   }
-  private handleIframeMessage(event: any) {
+  /**
+   * Handles 'message' events (formerly handleIframeMessage)
+   * @param event
+   * @returns
+   */
+  handleEvent(event: any) {
     if (event.data?.action !== 'uw-bus-tunnel') {
       return;
     }
-    console.info(this.name, 'received message from iframe. command:', event.data.payload);
-    this.send(event.data.payload.command, event.data.payload.config);
+
+    const payload = event.data.payload as EventBusMessage;
+
+    console.info(this.name, 'received message from iframe. command:', payload);
+    if (!payload.context) {
+      console.warn('Received iframe message without context. Doing nothing in order to avoid infinite loop. Event:', event);
+      return;
+    }
+
+    if (payload.context?.visitedBusses?.includes(this.uuid)) {
+      return;
+    }
+
+    this.send(payload.command, payload.config, payload.context);
   }
 
   //#endregion

src/ext/module/Interface.js

@@ -1,12 +0,0 @@
-class Interface {
-  constructor(videoData) {
-    this.conf = videoData;
-    this.player = videoData.player;
-  }
-
-  injectUi() {
-    this.detectorDiv = document.createElement('div');
-    this.uiRoot = document.createElement('div');
-    this.detectorDiv.appendChild(this.uiRoot);
-  }
-}

src/ext/module/comms/CommsClient.ts

@@ -65,7 +65,8 @@ if (process.env.CHANNEL !== 'stable'){
 export enum CommsOrigin {
   ContentScript = 1,
   Popup = 2,
-  Server = 3
+  Server = 3,
+  Ui = 4,     // in-player UI
 }
 
 class CommsClient {
@@ -148,7 +149,7 @@ class CommsClient {
 
     // send to server
     if (!context?.borderCrossings?.commsServer) {
-      return chrome.runtime.sendMessage(null, message, null);
+      return chrome?.runtime?.sendMessage(null, message, null);
     }
   }
 

src/ext/module/comms/CommsServer.ts

@@ -1,8 +1,10 @@
+import { ExtensionEnvironment } from './../../../common/interfaces/SettingsInterface';
 import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
 import Settings from '@src/ext/module/settings/Settings';
 import EventBus from '@src/ext/module/EventBus';
 import { CommsOrigin } from './CommsClient';
 import UWServer from '@src/ext/UWServer';
+import { HostInfo } from '@src/common/interfaces/HostData.interface';
 
 const BASE_LOGGING_STYLES = {
   log: "background-color: #11D; color: #aad",
@@ -151,6 +153,15 @@ class CommsServer {
     return hosts;
   }
 
+  async getUniqueFrameHosts() {
+    const aTab = await this.activeTab;
+
+    const tabPort = this.ports[aTab.id];
+    const hosts:  HostInfo[] = [];
+
+
+  }
+
   sendMessage(message, context?) {
     this.logger.debug('sendMessage', `preparing to send message ${message.command ?? ''} ...`, {message, context});
     // stop messages from returning where they came from, and prevent

src/ext/module/settings/Settings.ts

@@ -1,14 +1,13 @@
-import Debug from '../../conf/Debug';
-import ExtensionConf from '../../conf/ExtensionConf';
-import ObjectCopy from '../ObjectCopy';
-import StretchType from '../../../common/enums/StretchType.enum';
-import ExtensionConfPatch from '../../conf/ExtConfPatches';
-import SettingsInterface from '../../../common/interfaces/SettingsInterface';
-import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
-import { GetSiteSettingsOptions, SiteSettings } from './SiteSettings';
-import { SettingsSnapshot, SettingsSnapshotManager } from './SettingsSnapshotManager';
-import { ComponentLogger } from '../logging/ComponentLogger';
-import { LogAggregator } from '../logging/LogAggregator';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
+import StretchType from '@src/common/enums/StretchType.enum';
+import SettingsInterface from '@src/common/interfaces/SettingsInterface';
+import Debug from '@src/ext/conf/Debug';
+import ExtensionConfPatch from '@src/ext/conf/ExtConfPatches';
+import ExtensionConf from '@src/ext/conf/ExtensionConf';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
+import { SettingsSnapshot, SettingsSnapshotManager } from '@src/ext/module/settings/SettingsSnapshotManager';
+import { GetSiteSettingsOptions, SiteSettings } from '@src/ext/module/settings/SiteSettings';
 import { getDiff } from 'json-difference'
 
 if(process.env.CHANNEL !== 'stable'){

src/ext/module/settings/SiteSettings.ts

@@ -1,12 +1,13 @@
-import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
-import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
-import { ExtensionEnvironment, SettingsReloadComponent, SettingsReloadFlags, SiteSettingsInterface } from '../../../common/interfaces/SettingsInterface';
-import { _cp } from '../../../common/js/utils';
-import Settings from './Settings';
-import StretchType from '../../../common/enums/StretchType.enum';
-import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
-import EmbeddedContentSettingsOverridePolicy from '../../../common/enums/EmbeddedContentSettingsOverridePolicy.enum';
-import { SiteSupportLevel } from '../../../common/enums/SiteSupportLevel.enum';
+import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
+import EmbeddedContentSettingsOverridePolicy from '@src/common/enums/EmbeddedContentSettingsOverridePolicy.enum';
+import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
+import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
+import { SiteSupportLevel } from '@src/common/enums/SiteSupportLevel.enum';
+import StretchType from '@src/common/enums/StretchType.enum';
+import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
+import { ExtensionEnvironment, SettingsReloadComponent, SettingsReloadFlags, SiteSettingsInterface } from '@src/common/interfaces/SettingsInterface';
+import { _cp } from '@src/common/utils/_cp';
+import Settings from '@src/ext/module/settings/Settings';
 
 
 export interface GetSiteSettingsOptions {
@@ -322,7 +323,10 @@ export class SiteSettings {
    * @returns querySelector if possible, undefined otherwise
    */
   getCustomDOMQuerySelector(element: 'video' | 'player'): string | undefined {
-    return this.data.currentDOMConfig?.elements?.[element]?.manual && this.data.currentDOMConfig?.elements?.[element]?.querySelectors || undefined;
+    return (
+      this.data.currentDOMConfig?.elements?.[element]?.detectionMode === PlayerDetectionMode.QuerySelectors
+      && this.data.currentDOMConfig?.elements?.[element]?.querySelectors
+     ) ?? undefined;
   }
 
   /**
@@ -331,8 +335,8 @@ export class SiteSettings {
    * @returns parent element index if possible, undefined otherwise
    */
   getPlayerIndex(): number | undefined {
-    return this.data.currentDOMConfig?.elements?.player?.manual && this.data.currentDOMConfig?.elements?.player?.index
-      || this.data.playerAutoConfig?.modified && this.data.playerAutoConfig?.currentIndex
+    return ( this.data.currentDOMConfig?.elements?.player?.detectionMode === PlayerDetectionMode.AncestorIndex && this.data.currentDOMConfig?.elements?.player?.ancestorIndex )
+      || ( this.data.playerAutoConfig?.modified && this.data.playerAutoConfig?.currentIndex )
       || undefined;
   }
 

src/ext/module/uwui/UI.ts

@@ -97,10 +97,13 @@ class UI {
     window.addEventListener('message', (event: MessageEvent) => {
       const data = event.data;
 
-      if (data?.action !== 'uw-bus-tunnel') return;
+      if (data?.action !== 'uw-bus-tunnel') {
+        return;
+      }
 
-      const command = data.payload.command;
-      const config = data.payload.config;
+      const payload = data.payload;
+
+      console.log('forwarding from tunnel to event bus. payload', payload);
 
       // Forward to all iframes except the source
       (UwuiWindow as any).instances?.forEach(win => {
@@ -109,7 +112,7 @@ class UI {
           iframe.contentWindow?.postMessage(
             {
               action: 'uw-bus-tunnel',
-              payload: { command, config }
+              payload,
             },
             '*'
           );
@@ -454,9 +457,9 @@ class UI {
       }
     });
 
-    this.eventBus.forwardToIframe(iframe, (cmd, payload, context) => {
+    this.eventBus.forwardToIframe(iframe, (command, config, context) => {
       iframe.contentWindow?.postMessage(
-        { action: 'uw-bus-tunnel', payload: { command: cmd, config: payload } },
+        { action: 'uw-bus-tunnel', payload: { command, config, context } },
         '*'
       );
     });

src/ext/module/uwui/UwuiWindow.ts

@@ -50,7 +50,11 @@ export class UwuiWindow {
     this.background = options.background ?? 'blur';
     this.extraStyles = options.extraStyles;
 
+    if (document.fullscreenElement) {
+      document.fullscreenElement.appendChild(this.host);
+    } else {
       document.body.appendChild(this.host);
+    }
 
     this.shadow = this.host.attachShadow({ mode: 'closed' });
     this.shadow.innerHTML = this.template(options);

src/ext/module/video-data/PageInfo.ts

@@ -255,7 +255,13 @@ class PageInfo {
       //
       // no but honestly fuck Chrome.
       if (videosDetected || this.hasVideo()) {
-        this.eventBus.send('has-video', null);
+        this.eventBus.send(
+          'has-video',
+          {
+            site: window.location.host,
+            isIframe: window.self !== window.top,
+          }
+        );
       } else {
         this.eventBus.send('noVideo', null);
       }

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

@@ -1,17 +1,15 @@
-import Debug from '../../conf/Debug';
-import ExtensionMode from '../../../common/enums/ExtensionMode.enum'
-import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
+import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
+import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
+import { ExtensionEnvironment } from '@src/common/interfaces/SettingsInterface';
+import { collectionHas, equalish } from '@src/common/utils/comparators';
+import { RunLevel } from '@src/ext/enum/run-level.enum';
+import EventBus from '@src/ext/module/EventBus';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
+import UI from '@src/ext/module/uwui/UI';
+import PageInfo from '@src/ext/module/video-data/PageInfo';
+import VideoData from '@src/ext/module/video-data/VideoData';
 import * as _ from 'lodash';
-import { sleep } from '../../../common/js/utils';
-import VideoData from './VideoData';
-import EventBus from '../EventBus';
-import UI from '../uwui/UI';
-import { SiteSettings } from '../settings/SiteSettings';
-import PageInfo from './PageInfo';
-import { RunLevel } from '../../enum/run-level.enum';
-import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
-import { ComponentLogger } from '../logging/ComponentLogger';
-import { collectionHas, equalish } from '../../util/comparators';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -77,7 +75,7 @@ class PlayerData {
   videoData: VideoData;
   pageInfo: PageInfo;
   siteSettings: SiteSettings;
-  notificationService: PlayerNotificationUi;
+  notificationService: any; // TODO: implement this
   eventBus: EventBus;
   //#endregion
 
@@ -600,6 +598,8 @@ class PlayerData {
    * Finds and returns HTML element of the player
    */
   private getPlayer(options?: {verbose?: boolean}): HTMLElement {
+    const detectionMode = this.siteSettings.data.currentDOMConfig?.elements?.player?.detectionMode;
+
     const videoWidth = this.videoElement.offsetWidth;
     const videoHeight = this.videoElement.offsetHeight;
     let playerCandidate;
@@ -619,31 +619,16 @@ class PlayerData {
       }
     }
 
-    // if mode is given, we follow the preference
-    if (this.siteSettings.data.currentDOMConfig?.elements?.player?.manual && this.siteSettings.data.currentDOMConfig?.elements?.player?.mode) {
-      if (this.siteSettings.data.currentDOMConfig?.elements?.player?.mode === 'qs') {
-        playerCandidate = this.getPlayerQs(playerQs, elementStack, videoWidth, videoHeight);
-      } else {
+    if (detectionMode === PlayerDetectionMode.AncestorIndex) {
       playerCandidate = elementStack[playerIndex];
       playerCandidate.heuristics['manualElementByParentIndex'] = true;
-      }
-    } else {
-      // try to figure it out based on what we have, with playerQs taking priority
-      if (playerQs) {
+    } else if (detectionMode === PlayerDetectionMode.QuerySelectors) {
       playerCandidate = this.getPlayerQs(playerQs, elementStack, videoWidth, videoHeight);
-      } else if (playerIndex) { // btw 0 is not a valid index for player
-        playerCandidate = elementStack[playerIndex];
-        playerCandidate.heuristics['manualElementByParentIndex'] = true;
-      }
     }
 
-    if (playerCandidate) {
-      if (options?.verbose) {
-        this.getPlayerAuto(elementStack, videoWidth, videoHeight);
-        playerCandidate.heuristics['activePlayer'] = true;
-      }
-      return playerCandidate.element;
-    } else {
+    // we fall back to automatic player detection even if detectionMode is
+    // not set to auto.
+    if (detectionMode === PlayerDetectionMode.Auto || !playerCandidate) {
       const playerCandidate = this.getPlayerAuto(elementStack, videoWidth, videoHeight);
       if (playerCandidate === null) {
         console.warn('[uw::getPlayer] getPlayerAuto returned null — no player detected?');
@@ -651,6 +636,12 @@ class PlayerData {
         playerCandidate.heuristics['activePlayer'] = true;
         return playerCandidate.element;
       }
+    } else {
+      if (options?.verbose) {
+        this.getPlayerAuto(elementStack, videoWidth, videoHeight);
+        playerCandidate.heuristics['activePlayer'] = true;
+      }
+      return playerCandidate.element;
     }
   }
 
@@ -703,6 +694,15 @@ class PlayerData {
         continue;
       }
 
+      // when in full screen, we need to worry about top-layer shenanigans
+      if (!!fullscreenElement) {
+        console.log('we are in full screen — checking for top layer shenanigans. Is this element visible from top layer?', fullscreenElement.contains(elementData.element))
+        if (!fullscreenElement.contains(elementData.element)) {
+          elementData.heuristics['notVisibleInTopLayer'] = true;
+          continue;
+        }
+      }
+
       if (elementData.element === fullscreenElement) {
         // reset penalty multiplier if current element is full screen element
         // penaltyMultiplier here must be smaller than initial penalty multiplier,

src/ext/module/video-data/VideoData.ts

@@ -1,23 +1,22 @@
-import PlayerData from './PlayerData';
-import Resizer from '../video-transform/Resizer';
-import * as _ from 'lodash';
-import BrowserDetect from '../../conf/BrowserDetect';
-import Settings from '../settings/Settings';
-import PageInfo from './PageInfo';
-import { sleep } from '../../../common/js/utils';
-import EventBus from '../EventBus';
-import { SiteSettings } from '../settings/SiteSettings';
-import { Ar } from '../../../common/interfaces/ArInterface';
-import { ExtensionStatus } from './ExtensionStatus';
-import { RunLevel } from '../../enum/run-level.enum';
-import { Aard } from '../aard/Aard';
-import { Stretch } from '../../../common/interfaces/StretchInterface';
-import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
-import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
-import { LogAggregator } from '../logging/LogAggregator';
-import { ComponentLogger } from '../logging/ComponentLogger';
-import { AardLegacy } from '../aard/AardLegacy';
+import { Ar } from '@src/common/interfaces/ArInterface';
+import { ExtensionEnvironment } from '@src/common/interfaces/SettingsInterface';
+import { Stretch } from '@src/common/interfaces/StretchInterface';
+import { sleep } from '@src/common/utils/sleep';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
+import { RunLevel } from '@src/ext/enum/run-level.enum';
+import { Aard } from '@src/ext/module/aard/Aard';
+import { AardLegacy } from '@src/ext/module/aard/AardLegacy';
 import { hasDrm } from '@src/ext/module/ar-detect/DrmDetector';
+import EventBus from '@src/ext/module/EventBus';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
+import Settings from '@src/ext/module/settings/Settings';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
+import { ExtensionStatus } from '@src/ext/module/video-data/ExtensionStatus';
+import PageInfo from '@src/ext/module/video-data/PageInfo';
+import PlayerData from '@src/ext/module/video-data/PlayerData';
+import Resizer from '@src/ext/module/video-transform/Resizer';
+import * as _ from 'lodash';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -106,6 +105,11 @@ class VideoData {
       function: () => {
         this.onEnvironmentChanged();
       }
+    },
+    'get-current-site': {
+      function: () => {
+        console.warn('received get current site!');
+      }
     }
   }
 

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

@@ -1,21 +1,20 @@
-import { SiteSettings } from '../settings/SiteSettings';
-import Debug from '../../conf/Debug';
-import Scaler, { CropStrategy, VideoDimensions } from './Scaler';
-import Stretcher from './Stretcher';
-import Zoom from './Zoom';
-import StretchType from '../../../common/enums/StretchType.enum';
-import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
-import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
-import VideoData from '../video-data/VideoData';
-import EventBus from '../EventBus';
-import { _cp } from '../../../common/js/utils';
-import Settings from '../settings/Settings';
-import { Ar, ArVariant } from '../../../common/interfaces/ArInterface';
-import { RunLevel } from '../../enum/run-level.enum';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
+import StretchType from '@src/common/enums/StretchType.enum';
+import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
+import { Ar, ArVariant } from '@src/common/interfaces/ArInterface';
+import { Stretch } from '@src/common/interfaces/StretchInterface';
+import getElementStyles from '@src/common/utils/getElementStyles';
+import Debug from '@src/ext/conf/Debug';
+import { RunLevel } from '@src/ext/enum/run-level.enum';
+import EventBus from '@src/ext/module/EventBus';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
+import Settings from '@src/ext/module/settings/Settings';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
+import VideoData from '@src/ext/module/video-data/VideoData';
+import Scaler, { VideoDimensions } from '@src/ext/module/video-transform/Scaler';
+import Stretcher from '@src/ext/module/video-transform/Stretcher';
+import Zoom from '@src/ext/module/video-transform/Zoom';
 import * as _ from 'lodash';
-import getElementStyles from '../../util/getElementStyles';
-import { Stretch } from '../../../common/interfaces/StretchInterface';
-import { ComponentLogger } from '../logging/ComponentLogger';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");

src/ui/components/segments/Debugging/Debugging.vue

@@ -201,7 +201,7 @@ import UploadJsonFileButton from '@components/common/UploadJsonFileButton.vue';
 import { LogAggregator, BLANK_LOGGER_CONFIG } from '@src/ext/module/logging/LogAggregator';
 import { SettingsSnapshot } from '@src/ext/module/settings/SettingsSnapshotManager';
 import SettingsInterface from '@src/common/interfaces/SettingsInterface';
-import { _cp } from '@src/common/js/utils';
+import { _cp } from '@src/common/utils/_cp';
 
 export default defineComponent({
   components: {

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

@@ -305,7 +305,7 @@ import SupportLevelIndicator from '@components/common/SupportLevelIndicator.vue'
 import ConfirmButton from '@components/common/ConfirmButton.vue';
 
 import Popup from '@components/common/Popup.vue';
-import { _cp } from '@src/common/js/utils';
+import { _cp } from '@src/common/utils/_cp';
 import { SiteDOMSettingsInterface } from '@src/common/interfaces/SettingsInterface';
 import { SiteSupportLevel } from '../../../../../common/enums/SiteSupportLevel.enum';
 

src/ui/pages/settings/App.vue

@@ -263,36 +263,12 @@ export default defineComponent({
           this.selectedTab = this.defaultTab;
         }
 
+        console.log('does event bus exist yet?', this.eventBus);
         if (!this.eventBus) {
+          // inter-frame communication should be set up by eventBus for free
           this.eventBus = new EventBus({name: 'ui-window'});
         }
 
-        /**
-         * SETUP CROSS-FRAME COMMUNICATION
-         *
-         * 1. We need to allow eventBus to send messages to the parent page
-         * 2. We need to plug messages we receive from parent page into the event bus
-         */
-        this.eventBus.sendToTunnel = (command: string, config: any) => {
-          window.parent.postMessage(
-            {
-              action: 'uw-bus-tunnel',
-              payload: { command, config }
-            },
-            '*'
-          );
-        };
-
-        window.addEventListener('message', (event: MessageEvent) => {
-          const data = event.data;
-          if (data?.action === 'uw-bus-tunnel') {
-            // prevent double-crossing by marking borderCrossings
-            this.eventBus.send(data.payload.command, data.payload.config, {
-              borderCrossings: { iframe: true }
-            });
-          }
-        });
-
         /**
          * Subscribe to event bus commands.
          * Note that showing and hiding of the settings window is no longer handled by iframe
@@ -336,8 +312,34 @@ export default defineComponent({
               this.loadFrames();
             }
           },
+          'has-video': {
+            function: (config, context) => {
+
+              console.log('has video received.', config, context);
+              console.log('———————— building site:', !config.isIFrame, this.site?.host, config.site, this.site?.host !== config.site);
+
+              // update site data.
+              // If we're here, then the settings page is being opened from the in-player popup.
+              // This means that config.isIframe can generally be ignored.
+              // However, we absolutely cannot accept iframes as source for this.site when we
+              // open settings window from the extension popup. This needs to be TODO:
+              if (this.site?.host !== config.site) {
+                this.site = {
+                  host: config.site,
+                  frames: [],
+                  hostnames: [],
+                };
+
+                this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
+                this.loadHostnames();
+                this.loadFrames();
+              }
+
+            }
+          },
         });
 
+        console.log('—————————————————————— polling from iframe window!!!!')
         this.startSitePolling();
         // this.eventBus.subscribe(
         //   'uw-show-ui',

src/ui/res/styles/player-window.css

@@ -167,3 +167,13 @@
     }
   }
 }
+
+.warning-box, .info-box {
+  @apply px-4 py-2 flex flex-row gap-4 border;
+}
+.warning-box {
+  @apply border-amber-500 text-amber-300 bg-amber-950/75;
+}
+.info-box {
+  @apply border-blue-500 text-blue-300 bg-blue-950/75;
+}