Get iframe inheritance to work in the popup

src/csui/PlayerOverlay.vue

@@ -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

@@ -201,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/lib/aard/Aard.ts

@@ -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/settings/SiteSettings.ts

@@ -128,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;
@@ -144,7 +143,11 @@ 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;
       }
     }