Fix enabling/disabling extension while switching between environments

src/common/interfaces/SettingsInterface.ts

@@ -6,6 +6,12 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
 import StretchType from '../enums/StretchType.enum'
 import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
 
+export enum ExtensionEnvironment {
+  Normal = 'normal',
+  Theater = 'theater',
+  Fullscreen = 'fullscreen',
+}
+
 export interface KeyboardShortcutInterface {
   key?: string,
   code?: string,

src/csui/src/utils/UIProbeMixin.js

@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     playerDimensionsUpdate(dimensions) {
-      if (!dimensions.width || !dimensions.height) {
+      if (!dimensions?.width || !dimensions?.height) {
         this.playerDimensions = undefined;
       }
       if (dimensions?.width !== this.playerDimensions?.width || dimensions?.height !== this.playerDimensions?.height) {

src/ext/lib/Settings.ts

@@ -177,6 +177,9 @@ class Settings {
   }
   private applySettingsPatches(oldVersion, patches) {
     let index = this.findFirstNecessaryPatch(oldVersion, patches);
+
+    console.log('ExtConfPatches — last unapplied patch is', index, patches[index]. patches);
+
     if (index === -1) {
       this.logger?.log('info','settings','[Settings::applySettingsPatches] There are no pending conf patches.');
       return;

src/ext/lib/aard/Aard.ts

@@ -1,7 +1,10 @@
 import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterface';
 import EventBus from '../EventBus';
 import Logger from '../Logger';
 import Settings from '../Settings';
+import { SiteSettings } from '../settings/SiteSettings';
 import VideoData from '../video-data/VideoData';
 import { Corner } from './enums/corner.enum';
 import { VideoPlaybackState } from './enums/video-playback-state.enum';
@@ -218,10 +221,17 @@ export class Aard {
   private logger: Logger;
   private videoData: VideoData;
   private settings: Settings;
+  private siteSettings: SiteSettings;
   private eventBus: EventBus;
   private arid: string;
 
   private eventBusCommands = {
+    'uw-environment-change': {
+      function: (newEnvironment: ExtensionEnvironment) => {
+        console.log('received extension environment:', newEnvironment, 'player env:', this.videoData?.player?.environment);
+        this.startCheck();
+      }
+    }
     //   'get-aard-timing': {
     //     function: () => this.handlePerformanceDataRequest()
       // }
@@ -267,6 +277,7 @@ export class Aard {
     this.videoData = videoData;
     this.video = videoData.video;
     this.settings = videoData.settings;
+    this.siteSettings = videoData.siteSettings;
     this.eventBus = videoData.eventBus;
 
     this.eventBus.subscribeMulti(this.eventBusCommands, this);
@@ -284,7 +295,6 @@ export class Aard {
    * This method should only ever be called from constructor.
    */
   private init() {
-
     this.canvasStore = {
       main: this.createCanvas('main-gl')
     };
@@ -301,7 +311,7 @@ export class Aard {
       ),
     };
 
-    this.start();
+    this.startCheck();
   }
 
   private createCanvas(canvasId: string, canvasType?: 'webgl' | 'fallback') {
@@ -341,6 +351,20 @@ export class Aard {
   }
   //#endregion
 
+  /**
+   * Checks whether autodetection can run
+   */
+  startCheck() {
+    if (!this.videoData.player) {
+      console.warn('Player not detected!')
+    }
+    if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
+      this.start();
+    } else {
+      this.stop();
+    }
+  }
+
   /**
    * Starts autodetection loop.
    */

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

@@ -13,6 +13,7 @@ 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';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -138,6 +139,7 @@ class PlayerData {
   private dimensionChangeListener = {
     that: this,
     handleEvent: function(event: Event) {
+      this.that.trackEnvironmentChanges(event);
       this.that.trackDimensionChanges()
     }
   }
@@ -152,6 +154,7 @@ class PlayerData {
       }
       if (!this.dimensions) {
         this.trackDimensionChanges();
+        this.trackEnvironmentChanges();
       }
 
       return this.dimensions.width / this.dimensions.height;
@@ -161,6 +164,21 @@ class PlayerData {
     }
   }
 
+  /**
+   * Gets current environment (needed when determining whether extension runs in fulls screen, theater, or normal)
+   */
+  private lastEnvironment: ExtensionEnvironment;
+
+  get environment(): ExtensionEnvironment {
+    if (this.isFullscreen) {
+      return ExtensionEnvironment.Fullscreen;
+    }
+    if (this.isTheaterMode) {
+      return ExtensionEnvironment.Theater;
+    }
+    return ExtensionEnvironment.Normal;
+  }
+
   //#region lifecycle
   constructor(videoData) {
     try {
@@ -198,6 +216,7 @@ class PlayerData {
       }
 
       this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
       this.startChangeDetection();
 
       document.addEventListener('fullscreenchange', this.dimensionChangeListener);
@@ -337,6 +356,13 @@ class PlayerData {
     return newTheaterMode;
   }
 
+  trackEnvironmentChanges() {
+    if (this.environment !== this.lastEnvironment) {
+      this.lastEnvironment = this.environment;
+      this.eventBus.send('uw-environment-change', {newEnvironment: this.environment});
+    }
+  }
+
   /**
    *
    */
@@ -439,6 +465,7 @@ class PlayerData {
 
   onPlayerDimensionsChanged(mutationList?, observer?) {
     this.trackDimensionChanges();
+    this.trackEnvironmentChanges();
   }
 
 
@@ -630,6 +657,7 @@ class PlayerData {
 
       this.element = elementStack[nextIndex].element;
       this.trackDimensionChanges();
+      this.trackEnvironmentChanges();
     }
   }
 
@@ -834,7 +862,9 @@ class PlayerData {
     this.ui = undefined;
     this.element = this.getPlayer();
     // this.notificationService?.replace(this.element);
+
     this.trackDimensionChanges();
+    this.trackEnvironmentChanges();
   }
 }
 

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

@@ -17,6 +17,8 @@ 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';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -76,6 +78,8 @@ class VideoData {
 
   eventBus: EventBus;
   extensionStatus: ExtensionStatus;
+
+  private currentEnvironment: ExtensionEnvironment;
   //#endregion
 
 
@@ -97,6 +101,11 @@ class VideoData {
     },
     'set-run-level': {
       function: (runLevel: RunLevel) => this.setRunLevel(runLevel)
+    },
+    'uw-environment-change': {
+      function: () => {
+        this.onEnvironmentChanged();
+      }
     }
   }
 
@@ -191,7 +200,7 @@ class VideoData {
       if (!this.mutationObserver) {
         this.setupMutationObserver();
       }
-      this.eventBus.send('inject-css', this.baseVideoCss);
+      // this.eventBus.send('inject-css', this.baseVideoCss);
     } catch (e) {
       console.error('Failed to inject base css!', e);
     }
@@ -389,8 +398,26 @@ class VideoData {
   }
   //#endregion
 
+  onEnvironmentChanged() {
+    if (!this.player) {
+      return;
+    }
+    if (this.currentEnvironment !== this.player.environment) {
+      console.warn('environment changed to:', this.player.environment);
+      this.currentEnvironment = this.player.environment;
+      if (this.siteSettings.data.enable[this.player.environment] === ExtensionMode.Disabled) {
+        this.setRunLevel(RunLevel.Off);
+      } else {
+        this.restoreAr();
+      }
+    }
+  }
 
   setRunLevel(runLevel: RunLevel, options?: {fromPlayer?: boolean}) {
+    if (this.player && this.siteSettings.data.enable[this.player.environment] !== ExtensionMode.Enabled) {
+      runLevel = RunLevel.Off;
+    }
+
     if (this.runLevel === runLevel) {
       return; // also no need to propagate to the player
     }
@@ -553,6 +580,8 @@ class VideoData {
     // the 'style' attributes don't necessarily trigger. This means we also need to trigger
     // restoreAr here, in case video size was changed this way
     this.player.forceRefreshPlayerElement();
+    this.eventBus.send('uw-environment-change', {newEnvironment: this.player.environment});
+
     this.restoreAr();
 
     // sometimes something fucky wucky happens and mutations aren't detected correctly, so we
@@ -571,7 +600,7 @@ class VideoData {
       this._processDimensionsChanged,
       250,
       {
-        leading: true,
+        // leading: true,
         trailing: true
       }
     );
@@ -694,7 +723,7 @@ class VideoData {
       if (!this.aard) {
         this.initArDetection();
       }
-      this.aard.start();
+      this.aard.startCheck();
     } catch (e) {
       this.logger.log('warn', 'debug', '[VideoData::startArDetection()] Could not start aard for some reason. Was the function was called too early?', e);
     }

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

@@ -295,7 +295,7 @@ class Resizer {
 
     // handle autodetection stuff
     if (ar.type === AspectRatioType.Automatic) {
-      this.videoData.aard?.start();
+      this.videoData.aard?.startCheck();
       return;
     } else if (ar.type !== AspectRatioType.AutomaticUpdate) {
       this.videoData.aard?.stop();
@@ -429,7 +429,7 @@ class Resizer {
   }
 
   applyScaling(stretchFactors: VideoDimensions, options?: {noAnnounce?: boolean, ar?: Ar}) {
-    this.stretcher.chromeBugMitigation(stretchFactors);
+    // this.stretcher.chromeBugMitigation(stretchFactors);
 
     // let the UI know
     if(!options?.noAnnounce) {
@@ -533,6 +533,10 @@ class Resizer {
     this.restore();
   }
 
+  /**
+   * Restores aspect ratio to last known aspect ratio
+   * @returns
+   */
   restore() {
     if (!this.manualZoom) {
       this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} );