From 388327ec1d83ab496ffae9ecf67ed968a522079d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 10 Sep 2023 19:51:36 +0200
Subject: [PATCH] fix fs handlers

---
 src/ext/lib/video-data/PageInfo.ts   | 25 +++++++++++++++----------
 src/ext/lib/video-data/PlayerData.ts | 13 ++++++++++---
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts
index c4f37c3..1e41da1 100644
--- a/src/ext/lib/video-data/PageInfo.ts
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -73,6 +73,13 @@ class PageInfo {
   fsStatus = {fullscreen: true};  // fsStatus needs to be passed to VideoData, so fullScreen property is shared between videoData instances
   //#endregion
 
+  fsEventListener = {
+    that: this,
+    handleEvent: function(event: Event) {
+      this.that.fullscreenHandler();
+    }
+  };
+
   constructor(eventBus: EventBus, siteSettings: SiteSettings, settings: Settings, logger: Logger, readOnly = false){
     this.logger = logger;
     this.settings = settings;
@@ -84,8 +91,6 @@ class PageInfo {
     this.isFullscreen = !!document.fullscreenElement;
     this.iframeManager = new IframeManager({eventBus});
 
-
-
     if (eventBus){
       this.eventBus = eventBus;
     }
@@ -103,7 +108,7 @@ class PageInfo {
     this.rescan(RescanReason.PERIODIC);
     this.scheduleUrlCheck();
 
-    document.addEventListener('fullscreenchange', this.fullscreenHandler);
+    document.addEventListener('fullscreenchange', this.fsEventListener);
   }
 
   destroy() {
@@ -147,15 +152,15 @@ class PageInfo {
   /**
    * Handler for fullscreenchanged event.
    */
-    fullscreenHandler() {
-      this.isFullscreen = !!document.fullscreenElement;
+  fullscreenHandler() {
+    this.isFullscreen = !!document.fullscreenElement;
 
-      if (this.isFullscreen) {
-        this.enterFullscreen();
-      } else {
-        this.exitFullscreen();
-      }
+    if (this.isFullscreen) {
+      this.enterFullscreen();
+    } else {
+      this.exitFullscreen();
     }
+  }
 
   reset() {
     for(let video of this.videos) {
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index ddb851b..8fec1a1 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -69,7 +69,7 @@ class PlayerData {
   private playerIdElement: any;
   private observer: ResizeObserver;
 
-  private ui: any;
+  private ui: UI;
 
   elementStack: any[] = [];
   //#endregion
@@ -88,6 +88,13 @@ class PlayerData {
   }
   //#endregion
 
+  private dimensionChangeListener = {
+    that: this,
+    handleEvent: function(event: Event) {
+      this.that.trackDimensionChanges()
+    }
+  }
+
   /**
    * Gets player aspect ratio. If in full screen, it returns screen aspect ratio unless settings say otherwise.
    */
@@ -145,7 +152,7 @@ class PlayerData {
       this.trackDimensionChanges();
       this.startChangeDetection();
 
-      document.addEventListener('fullscreenchange', this.trackDimensionChanges);
+      document.addEventListener('fullscreenchange', this.dimensionChangeListener);
 
       // we want to reload on storage changes
       this.siteSettings.subscribeToStorageChange('PlayerData', (siteConfUpdate) => this.reloadPlayerDataConfig(siteConfUpdate));
@@ -183,7 +190,7 @@ class PlayerData {
   }
 
   destroy() {
-    document.removeEventListener('fullscreenchange', this.trackDimensionChanges);
+    document.removeEventListener('fullscreenchange', this.dimensionChangeListener);
     this.stopChangeDetection();
     this.destroyOverlay();
     this.notificationService?.destroy();