Add window resize event

Author: binarykitchen

src/types/events/index.ts

@@ -142,4 +142,6 @@ export interface VideomailEvents {
   VALIDATING: (params?: ValidatingParams) => void;
   // document just became visible
   VISIBLE: () => void;
+  // when window's inner width has changed
+  WINDOW_RESIZE: () => void;
 }

src/util/html/dimensions/useFullWidth.ts

@@ -1,6 +1,5 @@
 import { Dimension } from "../../../types/dimension";
 
-// TODO Implement event listener when viewport width has changed to reconfigure dimensions
 function useFullWidth(mobileBreakPoint?: number) {
   if (mobileBreakPoint === undefined) {
     return undefined;

src/wrappers/container.ts

@@ -236,6 +236,10 @@ class Container extends Despot {
   private initEvents(playerOnly = false) {
     this.options.logger.debug(`Container: initEvents (playerOnly = ${playerOnly})`);
 
+    window.addEventListener("resize", () => {
+      this.emit("WINDOW_RESIZE");
+    });
+
     if (this.options.enableAutoUnload) {
       window.addEventListener(
         "beforeunload",
@@ -319,6 +323,10 @@ class Container extends Despot {
       }
     });
 
+    this.on("WINDOW_RESIZE", () => {
+      this.correctDimensions();
+    });
+
     if (!playerOnly) {
       this.on("LOADED_META_DATA", () => {
         this.correctDimensions();

src/wrappers/visuals.ts

@@ -108,6 +108,10 @@ class Visuals extends Despot {
           this.removeDimensions();
         }
       });
+
+      this.on("WINDOW_RESIZE", () => {
+        this.correctDimensions();
+      });
     }
   }
 

src/wrappers/visuals/notifier.ts

@@ -148,6 +148,10 @@ class Notifier extends Despot {
         this.hide();
       }
     });
+
+    this.on("WINDOW_RESIZE", () => {
+      this.correctNotifierDimensions();
+    });
   }
 
   private correctNotifierDimensions() {

src/wrappers/visuals/recorder.ts

@@ -1414,6 +1414,10 @@ class Recorder extends Despot {
     this.on("SWITCH_FACING_MODE", () => {
       this.switchFacingMode();
     });
+
+    this.on("WINDOW_RESIZE", () => {
+      this.correctDimensions();
+    });
   }
 
   private buildElement() {