Provisional version bump

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.3.0",
+  "version": "6.3.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.3.0",
+  "version": "6.3.9",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/common/interfaces/SettingsInterface.ts

@@ -308,6 +308,9 @@ export interface SiteSettingsInterface {
   enableKeyboard: ExtensionEnvironmentSettingsInterface;
   enableUI: ExtensionEnvironmentSettingsInterface;  // Lies! enableUI doesn't use 'theater' property (but uses the other two)
 
+  applyToEmbeddedContent?: boolean; // presumed to be 'true' if not defined
+
+
   autocreated?: boolean;
   type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
   defaultType: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';

src/csui/PlayerOverlay.vue

@@ -205,7 +205,7 @@ import GhettoContextMenuItem from '@csui/src/components/GhettoContextMenuItem.vu
 import GhettoContextMenuOption from '@csui/src/components/GhettoContextMenuOption.vue';
 import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
 import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import Settings from '@src/ext/lib/Settings';
+import Settings from '@src/ext/lib/settings/Settings';
 import EventBus from '@src/ext/lib/EventBus';
 import UIProbeMixin from '@csui/src/utils/UIProbeMixin';
 import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
@@ -463,7 +463,7 @@ export default {
           if (!this.site) {
             this.origin = event.origin;
             this.site = event.origin.split('//')[1];
-            this.siteSettings = this.settings.getSiteSettings(this.site);
+            this.siteSettings = this.settings.getSiteSettings({site: this.site});
           }
           return this.handleProbe(event.data, event.origin); // handleProbe is defined in UIProbeMixin
         case 'uw-bus-tunnel':

src/csui/Popup.vue

@@ -123,7 +123,7 @@ import AboutPanel from '@csui/src/popup/panels/AboutPanel.vue'
 import Debug from '../ext/conf/Debug';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import CommsClient, {CommsOrigin} from '../ext/lib/comms/CommsClient';
-import Settings from '../ext/lib/Settings';
+import Settings from '../ext/lib/settings/Settings';
 import EventBus from '../ext/lib/EventBus';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
@@ -193,8 +193,6 @@ export default {
         {
           source: this,
           function: (config, context) => {
-            console.log('set-current-site | this.site:', this.site, 'config.site:', config.site);
-
             if (this.site) {
               if (!this.site.host) {
                 // dunno why this fix is needed, but sometimes it is
@@ -203,7 +201,7 @@ export default {
             }
             this.site = config.site;
             // this.selectedSite = this.selectedSite || config.site.host;
-            this.siteSettings = this.settings.getSiteSettings(this.site.host);
+            this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
             this.eventBus.setupPopupTunnelWorkaround({
               origin: CommsOrigin.Popup,
               comms: {

src/csui/res/css/common.scss

@@ -376,6 +376,9 @@ button,
   padding-left: 35px;
   float: right;
 }
+.info-color {
+  color: $info-color;
+}
 
 .info::before {
   content: "ⓘ";

src/csui/src/PlayerUIWindow.vue

@@ -205,7 +205,7 @@ export default {
     if (this.defaultTab) {
       this.selectedTab = this.defaultTab;
     }
-    this.siteSettings = this.settings.getSiteSettings(this.site);
+    this.siteSettings = this.settings.getSiteSettings({site: this.site});
     this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
 
     this.eventBus.subscribe(

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -41,6 +41,7 @@
       <template v-if="hosts && tab === 'embeddedSites' && globalSettings">
         <FrameSiteSettings
           v-if="settings"
+          :parentHost="site"
           :hosts="hosts"
           :settings="settings"
         ></FrameSiteSettings>
@@ -196,7 +197,7 @@ export default {
     },
     siteSettings() {
       if (this.site) {
-        return  this.settings?.getSiteSettings(this.site) ?? null;
+        return  this.settings?.getSiteSettings({site: this.site}) ?? null;
       }
       return null;
     },

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -15,6 +15,7 @@
           <li>Subdomains now inherit same settings as their parent domain by default</li>
           <li>Extension attempts to detect embedded content.</li>
         </ul>
+
       </div>
       <div style="width: 1rem; height: 0px;"></div>
       <div class="min-w-[400px] max-w-[520px] grow shrink">

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/FrameSiteSettings.vue

@@ -11,6 +11,7 @@
       </div>
       <div v-for="host of hosts" :key="host" @click="selectedSite = host" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
         <SiteListItem
+          :parentHost="parentHost"
           :host="host"
           :settings="settings"
         ></SiteListItem>
@@ -48,6 +49,7 @@ export default {
   },
   props: [
     'settings',
+    'parentHost',
     'hosts',
   ],
   data() {
@@ -81,7 +83,7 @@ export default {
       }
     },
     selectedSiteSettings() {
-      return this.settings?.getSiteSettings(this.selectedSite) ?? null;
+      return this.settings?.getSiteSettings({site: this.selectedSite}) ?? null;
     }
   },
   methods: {

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue

@@ -121,7 +121,7 @@ export default {
       }
     },
     selectedSiteSettings() {
-      return this.settings?.getSiteSettings(this.selectedSite) ?? null;
+      return this.settings?.getSiteSettings({site: this.selectedSite}) ?? null;
     }
   },
   methods: {
@@ -140,13 +140,13 @@ export default {
       return status === 'disabled' ? 'color: #f00' : 'color: #1f8';
     },
     getSiteEnabledModes(site, component) {
-      if (this.settings?.getSiteSettings(site).data[component]?.normal === ExtensionMode.Enabled) {
+      if (this.settings?.getSiteSettings({site: site}).data[component]?.normal === ExtensionMode.Enabled) {
         return 'always';
       }
-      if (this.settings?.getSiteSettings(site).data[component]?.theater === ExtensionMode.Enabled) {
+      if (this.settings?.getSiteSettings({site: site}).data[component]?.theater === ExtensionMode.Enabled) {
         return 'T + FS';
       }
-      if (this.settings?.getSiteSettings(site).data[component]?.fullscreen === ExtensionMode.Enabled) {
+      if (this.settings?.getSiteSettings({site: site}).data[component]?.fullscreen === ExtensionMode.Enabled) {
         return 'fullscreen';
       }
       return 'disabled';

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteListItem.vue

@@ -11,7 +11,7 @@
     </div>
     <div v-if="this.siteSettings?.usesSettingsFor">
       <div v-if="this.siteSettings.usesSettingsFor === '@global'">Uses default settings</div>
-      <div v-else>Uses settings for: {{this.siteSettings.usesSettingsFor}}</div>
+      <div v-else>Uses settings for: <span class="info-color">{{this.siteSettings.usesSettingsFor}}</span></div>
     </div>
     <div class="flex flex-row">
       <small>
@@ -35,10 +35,11 @@ export default {
   },
   props: [
     'settings',
+    'parentHost',
     'host',
   ],
   created() {
-    this.siteSettings = this.settings.getSiteSettings(this.host);
+    this.siteSettings = this.settings.getSiteSettings({site: this.host, isIframe: this.parentHost && this.host !== this.parentHost, parentHostname: this.parentHost});
   },
   methods: {
     getSiteTypeColor(siteType) {

src/csui/src/popup/panels/PopupVideoSettings.vue

@@ -175,7 +175,7 @@ export default {
       this.enabledHosts = [];
 
       for (const host of val) {
-        const siteSettings = new SiteSettings(this.settings, host);
+        const siteSettings = new SiteSettings(this.settings, {site: host});
 
         if (siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Enabled) {
           this.enabledHosts.push(host);

src/ext/UWContent.ts

@@ -1,5 +1,5 @@
 import Debug from './conf/Debug';
-import Settings from './lib/Settings';
+import Settings from './lib/settings/Settings';
 import CommsClient from './lib/comms/CommsClient';
 import PageInfo from './lib/video-data/PageInfo';
 import EventBus from './lib/EventBus';
@@ -8,6 +8,7 @@ import { SiteSettings } from './lib/settings/SiteSettings';
 import UI from './lib/uwui/UI';
 import { BLANK_LOGGER_CONFIG, LogAggregator } from './lib/logging/LogAggregator';
 import { ComponentLogger } from './lib/logging/ComponentLogger';
+import { getIframeParentHost, setupHostnameReporting } from './util/getHost';
 
 export default class UWContent {
   pageInfo: PageInfo;
@@ -19,6 +20,7 @@ export default class UWContent {
   logger: ComponentLogger;
   eventBus: EventBus;
   isIframe: boolean = false;
+  parentHostname: string;
 
   globalUi: any;
 
@@ -28,7 +30,8 @@ export default class UWContent {
   }
 
   constructor(){
-    this.isIframe = window.self !== window.top
+    setupHostnameReporting();
+    this.isIframe = window.self !== window.top;
   }
 
   reloadSettings() {
@@ -41,6 +44,11 @@ export default class UWContent {
   }
 
   async init(){
+    if (this.isIframe) {
+      this.parentHostname = await getIframeParentHost();
+      console.warn('[uw-content] got iframe parent:', this.parentHostname);
+    }
+
     try {
       if (Debug.debug) {
         console.log("[uw::main] loading configuration ...");
@@ -57,6 +65,7 @@ export default class UWContent {
         console.error("logger init failed!", e)
       }
 
+
       // init() is re-run any time settings change
       if (this.comms) {
         this.comms.destroy();
@@ -70,7 +79,7 @@ export default class UWContent {
           logAggregator: this.logAggregator
         });
         await this.settings.init();
-        this.siteSettings = this.settings.getSiteSettings();
+        this.siteSettings = this.settings.getSiteSettings({site: window.location.hostname, isIframe: this.isIframe, parentHostname: this.parentHostname});
       }
 
       this.eventBus = new EventBus();

src/ext/UWServer.ts

@@ -1,7 +1,7 @@
 import Debug from './conf/Debug.js';
 import BrowserDetect from './conf/BrowserDetect';
 import CommsServer from './lib/comms/CommsServer';
-import Settings from './lib/Settings';
+import Settings from './lib/settings/Settings';
 import { sleep } from '../common/js/utils';
 import EventBus, { EventBusCommand } from './lib/EventBus';
 import { ComponentLogger } from './lib/logging/ComponentLogger';

src/ext/lib/aard/Aard.ts

@@ -3,7 +3,7 @@ import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
 import { ArVariant } from '@src/common/interfaces/ArInterface';
 import { ExtensionEnvironment } from '@src/common/interfaces/SettingsInterface';
 import EventBus from '../EventBus';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 import VideoData from '../video-data/VideoData';
 import { AardDebugUi } from './AardDebugUi';
@@ -2049,7 +2049,7 @@ export class Aard {
    * Calculates video's current aspect ratio based on data in testResults.
    * @returns
    */
-  private getAr() {
+  private getAr(): number {
     const fileAr = this.video.videoWidth / this.video.videoHeight;
     const canvasAr = this.canvasStore.main.width / this.canvasStore.main.height;
 

src/ext/lib/comms/CommsServer.ts

@@ -1,5 +1,5 @@
 import { ComponentLogger } from './../logging/ComponentLogger';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import EventBus from '../EventBus';
 import { CommsOrigin } from './CommsClient';
 
@@ -148,7 +148,6 @@ class CommsServer {
       }
     }
 
-    console.log('uniq hosts:', hosts)
     return hosts;
   }
 

src/ext/lib/kbm/KbmBase.ts

@@ -1,6 +1,6 @@
 import EventBus, { EventBusCommand } from '../EventBus';
 import { ComponentLogger } from '../logging/ComponentLogger';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 
 export class KbmBase {

src/ext/lib/kbm/KeyboardHandler.ts

@@ -1,5 +1,5 @@
 import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import EventBus, { EventBusCommand } from '../EventBus';
 import KbmBase from './KbmBase';
 import { SiteSettings } from '../settings/SiteSettings';

src/ext/lib/kbm/PlayerMouseHandler.ts

@@ -1,7 +1,7 @@
 import { LogAggregator } from './../logging/LogAggregator';
 import EventBus, { EventBusCommand } from '../EventBus';
 import { ComponentLogger } from '../logging/ComponentLogger';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 import KbmBase from './KbmBase';
 

src/ext/lib/settings/Settings.ts

@@ -1,14 +1,14 @@
-import Debug from '../conf/Debug';
+import Debug from '../../conf/Debug';
-import ExtensionConf from '../conf/ExtensionConf';
+import ExtensionConf from '../../conf/ExtensionConf';
-import ObjectCopy from './ObjectCopy';
+import ObjectCopy from '../ObjectCopy';
-import StretchType from '../../common/enums/StretchType.enum';
+import StretchType from '../../../common/enums/StretchType.enum';
-import ExtensionConfPatch from '../conf/ExtConfPatches';
+import ExtensionConfPatch from '../../conf/ExtConfPatches';
-import SettingsInterface from '../../common/interfaces/SettingsInterface';
+import SettingsInterface from '../../../common/interfaces/SettingsInterface';
-import AspectRatioType from '../../common/enums/AspectRatioType.enum';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
-import { SiteSettings } from './settings/SiteSettings';
+import { GetSiteSettingsOptions, SiteSettings } from './SiteSettings';
-import { SettingsSnapshotManager } from './settings/SettingsSnapshotManager';
+import { SettingsSnapshotManager } from './SettingsSnapshotManager';
-import { ComponentLogger } from './logging/ComponentLogger';
+import { ComponentLogger } from '../logging/ComponentLogger';
-import { LogAggregator } from './logging/LogAggregator';
+import { LogAggregator } from '../logging/LogAggregator';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading Settings");
@@ -25,6 +25,7 @@ interface SetSettingsOptions {
   forcePreserveVersion?: boolean,
 }
 
+
 const SETTINGS_LOGGER_STYLES = {
   log: 'color: #81d288',
 }
@@ -413,8 +414,8 @@ class Settings {
     }
   }
 
-  getSiteSettings(site: string = window.location.hostname): SiteSettings {
+  getSiteSettings(options: GetSiteSettingsOptions = {site: window.location.hostname}): SiteSettings {
-    return new SiteSettings(this, site);
+    return new SiteSettings(this, options);
   }
 
   listenOnChange(fn: () => void): void {

src/ext/lib/settings/SiteSettings.ts

@@ -2,10 +2,17 @@ import CropModePersistence from '../../../common/enums/CropModePersistence.enum'
 import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
 import { SettingsReloadComponent, SettingsReloadFlags, SiteSettingsInterface } from '../../../common/interfaces/SettingsInterface';
 import { _cp } from '../../../common/js/utils';
-import Settings from '../Settings';
+import Settings from './Settings';
 import StretchType from '../../../common/enums/StretchType.enum';
 import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
 
+
+export interface GetSiteSettingsOptions {
+  site: string,
+  isIframe?: boolean,
+  parentHostname?: string,
+}
+
 /**
  * Contains settings that are currently in effect for a given site. If a certain option
  * doesn't have a value — or if it has 'default' option, SiteSettings.data will contain
@@ -22,6 +29,7 @@ export class SiteSettings {
   public get site() {
     return this._site;
   }
+  private options: GetSiteSettingsOptions;
 
   raw: SiteSettingsInterface;       // actual settings
   data: SiteSettingsInterface;      // effective settings
@@ -33,10 +41,12 @@ export class SiteSettings {
   storageChangeSubscriptions: {[x: string]: ((newSiteConf, changes, area) => void)[]} = {};
 
   //#region lifecycle
-  constructor(settings: Settings, site: string) {
+  constructor(settings: Settings, options: GetSiteSettingsOptions) {
+    this.options = options;
+    this.site = options.site;
+
     this.settings = settings;
-    this.raw = settings.active.sites[site];
+    this.raw = settings.active.sites[this.site];
-    this.site = site;
     this.defaultSettings = settings.active.sites['@global'];
 
     this.compileSettingsObject();
@@ -56,19 +66,53 @@ export class SiteSettings {
 
   /**
    * Tries to match websites, even if we're on a different subdomain.
+   *
+   * Priority chain:
+   *
+   *  START HERE
+   *     |
+   *  [ exact hostname match ]
+   *     |             |
+   *     no           yes ————————> return settings for hostname
+   *     V
+   *  | matches hostname on  |
+   *  | different subdomain? |
+   *     |             |
+   *     no           yes ————————> return settings for matching subdomain
+   *     V
+   *   [ are we inside of an iframe? ]
+   *     |                  |
+   *     no                yes
+   *     V                  V
+   *  return default     |  exact parent   |
+   *    settings         | hostname match? |
+   *     A                  |           |
+   *     |                 no          yes ————> [ applyToEmbeddedContent set? ]
+   *     |                  V                           |               |
+   *     |        | parent matches hostname |           no             yes
+   *     |        | on different subdomain? |           V               V
+   *     |            |                 |          use default    use parent settings
+   *     +———<——————— no               yes
+   *     |                              |
+   *     +———<—— no ——[ applyToEmbeddedContent set? ]
+   *                                    |
+   *                                   yes
+   *                                    V
+   *    use settings for matching subdomain of parent
+   *
    * @returns
    */
-  private getSettingsForSite() {
+  private getSettingsForSite(options: GetSiteSettingsOptions) {
-    if (!this.site) {
+    if (!options.site) {
       return {
         siteSettings: this.settings.active.sites['@global'],
         usesSettingsFor: '@global'
       };
     }
 
-    if (this.settings.active.sites[this.site]) {
+    if (this.settings.active.sites[options.site]) {
       return {
-        siteSettings: this.settings.active.sites[this.site],
+        siteSettings: this.settings.active.sites[options.site],
         usesSettingsFor: undefined
       };
     }
@@ -84,7 +128,6 @@ export class SiteSettings {
       // `www.example.com`, this will also match `example.com`, `subdomain.example.com`, `nested.subdomain.example.com` ...
       if (configUrlSegments[configUrlSegments.length - 1] === '*' || (configUrlSegments[configUrlSegments.length - 1] === 'www')) {
 
-        console.log('ss: comparing', configUrlSegments, urlSegments);
         for (let i = 0; i < configUrlSegments.length - 1 && i < urlSegments.length; i++) {
           if (configUrlSegments[i] !== urlSegments[i]) {
             continue siteLoop;
@@ -97,6 +140,18 @@ export class SiteSettings {
       }
     }
 
+    // If we're inside of an iframe, let's see whether we can use parent settings
+    if (options.isIframe) {
+      const potentialSettings = this.getSettingsForSite({site: options.parentHostname});
+
+      if (potentialSettings.siteSettings.applyToEmbeddedContent !== false) {
+        if (!potentialSettings.usesSettingsFor) {
+          potentialSettings.usesSettingsFor = options.parentHostname;
+        }
+        return potentialSettings;
+      }
+    }
+
     return {
       siteSettings: this.settings.active.sites['@global'],
       usesSettingsFor: '@global'
@@ -108,7 +163,7 @@ export class SiteSettings {
    * Alan pls ensure default settings object follows the correct structure
    */
   private compileSettingsObject() {
-    const {siteSettings, usesSettingsFor} = this.getSettingsForSite();
+    const {siteSettings, usesSettingsFor} = this.getSettingsForSite(this.options);
     this.data = _cp(siteSettings);
     this.usesSettingsFor = usesSettingsFor;
 

src/ext/lib/uwui/UI.js

@@ -46,7 +46,6 @@ class UI {
     this.extensionBase = chrome.runtime.getURL('').replace(/\/$/, "");
 
     // UI will be initialized when setUiVisibility is called
-    console.log('ui config:', uiConfig);
     this.init();
   }
 

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

@@ -1,6 +1,6 @@
 import VideoData from './VideoData';
 import RescanReason from './enums/RescanReason.enum';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import CommsClient from '../comms/CommsClient';
 import EventBus from '../EventBus';
 import { SiteSettings } from '../settings/SiteSettings';

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

@@ -24,10 +24,16 @@ interface PlayerDimensions {
 
 interface ElementData {
   element: HTMLElement,
-  type: string,
+  type: string,  // kinda forgot what this is being used for
   tagName?: string,
   classList?: any,
   id?: string
+
+  width?: number;
+  height?: number;
+  heuristics?: any;
+  index?: number,
+  autoScore?: number;
 }
 
 type ElementStack = ElementData[];
@@ -272,7 +278,6 @@ class PlayerData {
       return;
     }
 
-
     if (
       this.isFullscreen
       || (
@@ -382,6 +387,8 @@ class PlayerData {
     try {
       // get player dimensions _once_
       let currentPlayerDimensions;
+      let fsChanged = this.isFullscreen !== !!document.fullscreenElement;
+
       this.isFullscreen = !!document.fullscreenElement;
 
       if (this.isFullscreen) {
@@ -424,6 +431,10 @@ class PlayerData {
 
       // Save current dimensions to avoid triggering this function pointlessly
       this.dimensions = currentPlayerDimensions;
+
+      if (fsChanged) {
+        this.updatePlayer();
+      }
     } catch (e) {
 
     }
@@ -562,19 +573,21 @@ class PlayerData {
   //#endregion
 
   private getElementStack(): ElementStack {
-    const elementStack: any[] = [{
+    const elementStack: ElementStack = [{
       element: this.videoElement,
       type: 'video',
       tagName: 'video',
       classList: this.videoElement.classList,
       id: this.videoElement.id,
     }];
+
     let element = this.videoElement.parentNode as HTMLElement;
 
     // first pass to generate the element stack and translate it into array
     while (element) {
       elementStack.push({
         element,
+        type: '',
         tagName: element.tagName,
         classList: element.classList,
         id: element.id,
@@ -705,21 +718,31 @@ class PlayerData {
    * @param videoHeight
    * @returns
    */
-  private getPlayerAuto(elementStack: any[], videoWidth, videoHeight) {
+  private getPlayerAuto(elementStack: ElementStack, videoWidth, videoHeight) {
-    let penaltyMultiplier = 1;
+    let penaltyMultiplier = 2;
     const sizePenaltyMultiplier = 0.1;
     const perLevelScorePenalty = 10;
     let sameSizeBonus = 0;
 
-    for (const [index, element] of elementStack.entries()) {
+    const fullscreenElement = document.fullscreenElement;
-      element.index = index;
+
+    for (const [index, elementData] of elementStack.entries()) {
+      elementData.index = index;
 
       // ignore weird elements, those would break our stuff
-      if (element.width == 0 || element.height == 0) {
+      if (elementData.width == 0 || elementData.height == 0) {
-        element.heuristics['invalidSize'] = true;
+        elementData.heuristics['invalidSize'] = 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,
+        // so that playerElement is not above fullscreenElement. Player element must
+        // be a descendant of fullscreenElement for the UI to show up
+        penaltyMultiplier = 1;
+      }
+
       // element is player, if at least one of the sides is as long as the video
       // note that we can't make any additional assumptions with regards to player
       // size, since there are both cases where the other side is bigger _and_ cases
@@ -728,8 +751,8 @@ class PlayerData {
       // Don't bother thinking about this too much, as any "thinking" was quickly
       // corrected by bugs caused by various edge cases.
       if (
-        this.equalish(element.height, videoHeight, 5)
+        this.equalish(elementData.height, videoHeight, 5)
-        || this.equalish(element.width, videoWidth, 5)
+        || this.equalish(elementData.width, videoWidth, 5)
       ) {
         let score = 1000;
 
@@ -740,8 +763,8 @@ class PlayerData {
         // Our ideal player will be as close to the video element, and it will als
         // be as close to the size of the video.
 
-        const diffX = (element.width - videoWidth);
+        const diffX = (elementData.width - videoWidth);
-        const diffY = (element.height - videoHeight);
+        const diffY = (elementData.height - videoHeight);
 
         // we have a minimal amount of grace before we start dinking scores for
         // mismatched dimensions. The size of the dimension mismatch dink is
@@ -760,14 +783,14 @@ class PlayerData {
         // candidate gets dinked a bit
         // score -= perLevelScorePenalty * penaltyMultiplier;
 
-        if (element.width === elementStack[index - 1].width && element.height === elementStack[index - 1].height) {
+        if (elementData.width === elementStack[index - 1].width && elementData.height === elementStack[index - 1].height) {
           score += ++sameSizeBonus;
         } else {
           sameSizeBonus = 0;
         }
 
-        element.autoScore = score;
+        elementData.autoScore = score;
-        element.heuristics['autoScoreDetails'] = {
+        elementData.heuristics['autoScoreDetails'] = {
           playerSizePenalty,
           diffX,
           diffY,

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

@@ -2,7 +2,7 @@ import PlayerData from './PlayerData';
 import Resizer from '../video-transform/Resizer';
 import * as _ from 'lodash';
 import BrowserDetect from '../../conf/BrowserDetect';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import PageInfo from './PageInfo';
 import { sleep } from '../../../common/js/utils';
 import { hasDrm } from '../ar-detect/DrmDetecor';

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

@@ -9,7 +9,7 @@ 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';
+import Settings from '../settings/Settings';
 import { Ar, ArVariant } from '../../../common/interfaces/ArInterface';
 import { RunLevel } from '../../enum/run-level.enum';
 import * as _ from 'lodash';
@@ -233,7 +233,7 @@ class Resizer {
   }
 
 
-  prepareCss(css) {
+  prepareCss(css: string): string {
     return `.${this.userCssClassName} {${css}}`;
   }
 
@@ -242,11 +242,11 @@ class Resizer {
     this.destroyed = true;
   }
 
-  getFileAr() {
+  getFileAr(): number {
     return this.videoData.video.videoWidth / this.videoData.video.videoHeight;
   }
 
-  calculateRatioForLegacyOptions(ar){
+  calculateRatioForLegacyOptions(ar: Ar): Ar | null {
     // also present as modeToAr in Scaler.js
     if (ar.type !== AspectRatioType.FitWidth && ar.type !== AspectRatioType.FitHeight && ar.ratio) {
       return ar;
@@ -358,7 +358,7 @@ class Resizer {
       this.videoData.videoUnloaded();
     }
 
-    this.logger.info('setAr', `<rid:${this.resizerId}> trying to set ar. New ar:`, ar);
+    this.logger.info('setAr', `<rid:${this.resizerId}> trying to set ar. New ar:`, ar, 'last ar override was', lastAr ? '' : 'NOT', 'provided:', lastAr);
 
     let stretchFactors: VideoDimensions | any;
 

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

@@ -1,7 +1,7 @@
 import { SiteSettings } from './../settings/SiteSettings';
 import BrowserDetect from '../../conf/BrowserDetect';
 import VideoData from '../video-data/VideoData';
-import Settings from '../Settings';
+import Settings from '../settings/Settings';
 import { Stretch } from '../../../common/interfaces/StretchInterface';
 import { ComponentLogger } from '../logging/ComponentLogger';
 

src/ext/util/getHost.ts

@@ -0,0 +1,49 @@
+
+/**
+ * Reqzests iframe parent hostname
+ * @returns
+ */
+export async function getIframeParentHost(): Promise<string> {
+  return new Promise<any>((resolve) => {
+    let resolved = false;
+    let resendInterval;
+
+    function handleMessage(event) {
+      if (event.data.action === 'uw-parent-hostname') {
+        resolved = true;
+        clearInterval(resendInterval);
+
+        window.removeEventListener('message', handleMessage);
+        resolve(event.data.hostname);
+      }
+    }
+
+    window.addEventListener('message', handleMessage);
+    resendInterval = setInterval(
+      () => {
+        if (!resolved) {
+          window.parent.postMessage(
+            { action: 'uw-get-parent-hostname' },
+            '*'
+          );
+        }
+      },
+      500
+    );
+  });
+}
+
+
+function handleMessage(event) {
+  if (event.data.action === 'uw-get-parent-hostname') {
+    event.source.postMessage(
+      {action: 'uw-parent-hostname', hostname: window.location.hostname},
+      '*' as any
+    )
+  }
+}
+
+export async function setupHostnameReporting() {
+  window.removeEventListener('message', handleMessage); // setupHostnameReporting may run more than once
+  window.addEventListener('message', handleMessage);
+}

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.3.0",
+  "version": "6.3.9",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"

src/options/App.vue

@@ -111,7 +111,7 @@
 <script>
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
-import Settings from '../ext/lib/Settings';
+import Settings from '../ext/lib/settings/Settings';
 import GeneralSettings from './GeneralSettings';
 import ControlsSettings from './controls-settings/ControlsSettings';
 import AddEditActionPopup from './controls-settings/AddEditActionPopup';

src/options/about.vue

@@ -33,7 +33,7 @@
 
 <script>
 import BrowserDetect from '../ext/conf/BrowserDetect';
-import Settings from '../ext/lib/Settings';
+import Settings from '../ext/lib/settings/Settings';
 
 export default {
   data() {