wip

DOCUMENTATION.MD

@@ -0,0 +1,6 @@
+# Implementation details
+
+## Enabling/disabling aspect ratio corrections
+
+* Aspect ratios are changed by proxy. Extension attaches **a custom CSS class** to `video` and `player` elements.
+* To prevent extension from affecting the appearance of a webpage, **it's sufficient to remove our custom CSS classes from `video` and `player` elements.** 

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

@@ -0,0 +1,10 @@
+
+export class CssManager {
+
+  videoElement: HTMLElement;
+  playerElement: HTMLElement;
+
+  private classesApplied: boolean;
+
+  applyScaling() {}
+}

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

@@ -0,0 +1,69 @@
+import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import EventBus from '../EventBus';
+import { SiteSettings } from '../settings/SiteSettings';
+
+/**
+ * Handles changes of extension active status. Changes of fullScreen and theaterMode statuses
+ * should get passed to an instance of this class, and this class will dispatch events as necessary.
+ */
+export class ExtensionStatus {
+  private fsStatus: {fullscreen: boolean}; // fsStatus is super duper private. You should access it with isFullScreen getter.
+  // NOTE: fsStatus.fullscreen in this class will magically update every time videoData.fsStatus.fullscreen changes. This is
+  // some mad exploitation of pass-by-reference.
+
+  private siteSettings: SiteSettings;
+  private eventBus: EventBus;
+
+  private isTheaterMode: boolean = false;
+  private get isFullScreen() { // let's hide our pass-by-reference hacks & ensure isTheaterMode and isFullScreen are consistent with each-other
+    return this.fsStatus.fullscreen;
+  }
+
+  private enabled: ExtensionMode;
+  private aardEnabled: ExtensionMode;
+  private kbdEnabled: ExtensionMode;
+
+  constructor(siteSettings: SiteSettings, eventBus: EventBus, fsStatus: {fullscreen: boolean}){
+    this.siteSettings = siteSettings;
+    this.eventBus = eventBus;
+  }
+
+  refreshExtensionStatus() {
+    const canRun = this.siteSettings.isEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
+    const canAard = this.siteSettings.isAardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
+    const canKbd = this.siteSettings.isKeyboardEnabledForEnvironment(this.isTheaterMode, this.isFullScreen);
+
+    if (canRun !== this.enabled) {
+      if (canRun === ExtensionMode.Enabled) {
+        this.eventBus.send('set-extension-active', {});
+      } else {
+        this.eventBus.send('set-extension-inactive', {});
+      }
+    }
+    if (canAard !== this.aardEnabled) {
+      if (canAard === ExtensionMode.Enabled) {
+        this.eventBus.send('set-aard-active', {});
+      } else {
+        this.eventBus.send('set-aard-inactive', {});
+      }
+    }
+    if (canKbd !== this.kbdEnabled) {
+      if (canKbd === ExtensionMode.Enabled) {
+        this.eventBus.send('set-kbd-active', {});
+      } else {
+        this.eventBus.send('set-kbd-inactive', {});
+      }
+    }
+
+    this.enabled = canRun;
+    this.aardEnabled = canAard;
+    this.kbdEnabled = canKbd;
+  }
+
+  updateTheaterMode(isTheaterMode: boolean) {
+    this.isTheaterMode = isTheaterMode;
+    this.refreshExtensionStatus();
+  }
+
+  updateFullScreen()
+}

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

@@ -69,6 +69,8 @@ class PageInfo {
   currentZoomScale: number = 1;
 
   keyboardHandler: any;
+
+  fsStatus = {fullscreen: true};  // fsStatus needs to be passed to VideoData, so fullScreen property is shared between videoData instances
   //#endregion
 
   constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger, readOnly = false){
@@ -82,6 +84,8 @@ class PageInfo {
     this.isFullscreen = !!document.fullscreenElement;
     this.iframeManager = new IframeManager({eventBus});
 
+
+
     if (eventBus){
       this.eventBus = eventBus;
     }
@@ -128,6 +132,7 @@ class PageInfo {
    * Runs when browser enters full screen.
    */
   enterFullscreen() {
+    this.fsStatus.fullscreen = true;
     this.eventBus.send('page-fs-enter', {});
   }
 
@@ -135,6 +140,7 @@ class PageInfo {
    * Runs when browser exits full screen
    */
   exitFullscreen() {
+    this.fsStatus.fullscreen = false;
     this.eventBus.send('page-fs-exit', {});
   }
 

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

@@ -14,6 +14,7 @@ import { hasDrm } from '../ar-detect/DrmDetecor';
 import EventBus from '../EventBus';
 import { SiteSettings } from '../settings/SiteSettings';
 import { Ar } from '../../../common/interfaces/ArInterface';
+import { ExtensionStatus } from './ExtensionStatus';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -33,7 +34,7 @@ class VideoData {
   videoStatusOk: boolean = false;
   videoLoaded: boolean = false;
   videoDimensionsLoaded: boolean = false;
-  paused: boolean = false;
+  active: boolean = false;
   //#endregion
 
   //#region misc stuff
@@ -61,6 +62,7 @@ class VideoData {
   resizer: Resizer;
   arDetector: ArDetector;
   eventBus: EventBus;
+  extensionStatus: ExtensionStatus;
   //#endregion
 
 
@@ -104,12 +106,15 @@ class VideoData {
 
     this.eventBus = new EventBus();
 
+    this.extensionStatus = new ExtensionStatus(siteSettings, pageInfo.eventBus, pageInfo.fsStatus);
+
     if (pageInfo.eventBus) {
       this.eventBus.setUpstreamBus(pageInfo.eventBus);
       this.eventBus.subscribe('get-drm-status', {function: () => {
         this.hasDrm = hasDrm(this.video);
         this.eventBus.send('uw-config-broadcast', {type: 'drm-status', hasDrm: this.hasDrm});
       }});
+      // this.eventBus.subscribe('')
     }
 
     this.setupEventListeners();

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

@@ -22,6 +22,13 @@ if(Debug.debug) {
   console.log("Loading: Resizer.js");
 }
 
+/**
+ * Resizer is the top class and is responsible for figuring out which component needs to crop, which
+ * component needs to zoom, and which component needs to stretch.
+ *
+ * It also kinda does lots of the work that should prolly be moved to Scaler.
+ *
+ */
 class Resizer {
   //#region flags
   canPan: boolean = false;