From a4948d3eef4331641e5d4bf15d903dad68c7a095 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 25 Oct 2021 23:11:34 +0200
Subject: [PATCH] Whitespace

---
 src/common/interfaces/SettingsInterface.ts |  53 ++++++----
 src/ext/lib/video-data/PageInfo.ts         |  56 +++++-----
 src/ext/lib/video-data/PlayerData.ts       |  17 ++-
 src/ext/lib/video-data/VideoData.ts        |  38 +++----
 src/ext/lib/video-transform/Resizer.ts     | 116 ++++++++++-----------
 5 files changed, 146 insertions(+), 134 deletions(-)

diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 34be98a..b95b6ed 100644
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -14,7 +14,7 @@ interface ActionScopeInterface {
     code?: string,
     ctrlKey?: boolean,
     metaKey?: boolean,
-    altKey?: boolean, 
+    altKey?: boolean,
     shiftKey?: boolean,
     onKeyUp?: boolean,
     onKeyDown?: boolean,
@@ -22,10 +22,17 @@ interface ActionScopeInterface {
   }[],
 }
 
+interface RestrictionsSettings {
+  disableOnSmallPlayers?: boolean;    // Whether ultrawidify should disable itself when the player is small
+  minAllowedWidth?: number;           // if player is less than this many px wide, ultrawidify will disable itself
+  minAllowedHeight?: number;          // if player is less than this many px tall, ultrawidify will disable itself
+  onlyAllowInFullscreen?: boolean;    // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
+}
+
 interface SettingsInterface {
   arDetect: {
     disabledReason: string,     // if automatic aspect ratio has been disabled, show reason
-    allowedMisaligned: number,  // top and bottom letterbox thickness can differ by this much. 
+    allowedMisaligned: number,  // top and bottom letterbox thickness can differ by this much.
                                 // Any more and we don't adjust ar.
     allowedArVariance: number,  // amount by which old ar can differ from the new (1 = 100%)
     timers: {                   // autodetection frequency
@@ -56,14 +63,14 @@ interface SettingsInterface {
       },
     },
 
-    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1] 
+    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1]
     blackframe: {
       sufficientColorVariance: number,  // calculate difference between average intensity and pixel, for every pixel for every color
                                       // component. Average intensity is normalized to where 0 is black and 1 is biggest value for
                                       // that component. If sum of differences between normalized average intensity and normalized
                                       // component varies more than this % between color components, we can afford to use less strict
                                       // cumulative threshold.
-      cumulativeThresholdLax: number,    
+      cumulativeThresholdLax: number,
       cumulativeThresholdStrict: number,// if we add values of all pixels together and get more than this, the frame is bright enough.
                                  // (note: blackframe is 16x9 px -> 144px total. cumulative threshold can be reached fast)
       blackPixelsCondition: number, // How much pixels must be black (1 all, 0 none) before we consider frame as black. Takes
@@ -103,7 +110,7 @@ interface SettingsInterface {
       randomCols: number,      // we add this many randomly selected columns to the static columns
       staticRows: number,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks
     },
-    guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation 
+    guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation
                               // (if AR fails to be recalculated, we reset AR)
       enabled: boolean,
       ignoreEdgeMargin: number, // we ignore anything that pokes over the black line this close to the edge
@@ -117,14 +124,14 @@ interface SettingsInterface {
       safetyBorderPx: number,        // determines the thickness of safety border in fallback mode
       noTriggerZonePx: number        // if we detect edge less than this many pixels thick, we don't correct.
     },
-    arSwitchLimiter: {          // to be implemented 
+    arSwitchLimiter: {          // to be implemented
       switches: number,              // we can switch this many times
         period: number             // per this period
     },
     edgeDetection: {
       sampleWidth: number,        // we take a sample this wide for edge detection
       detectionThreshold: number,  // sample needs to have this many non-black pixels to be a valid edge
-      confirmationThreshold: number,  // 
+      confirmationThreshold: number,  //
       singleSideConfirmationThreshold: number,    // we need this much edges (out of all samples, not just edges) in order
                                              // to confirm an edge in case there's no edges on top or bottom (other
                                             // than logo, of course)
@@ -138,11 +145,11 @@ interface SettingsInterface {
                                    // are now. (NOTE: keep this less than 1 in case we implement logo detection)
     },
     pillarTest: {
-      ignoreThinPillarsPx: number, // ignore pillars that are less than this many pixels thick. 
+      ignoreThinPillarsPx: number, // ignore pillars that are less than this many pixels thick.
       allowMisaligned: number   // left and right edge can vary this much (%)
     },
     textLineTest: {
-      nonTextPulse: number,     // if a single continuous pulse has this many non-black pixels, we aren't dealing 
+      nonTextPulse: number,     // if a single continuous pulse has this many non-black pixels, we aren't dealing
                               // with text. This value is relative to canvas width (%)
       pulsesToConfirm: number,    // this is a threshold to confirm we're seeing text.
       pulsesToConfirmIfHalfBlack: number, // this is the threshold to confirm we're seeing text if longest black pulse
@@ -150,11 +157,15 @@ interface SettingsInterface {
       testRowOffset: number     // we test this % of height from detected edge
     }
   },
+
+  restrictions?: RestrictionsSettings;
+
   zoom: {
     minLogZoom: number,
     maxLogZoom: number,
     announceDebounce: number     // we wait this long before announcing new zoom
   },
+
   miscSettings: {
     mousePan: {
       enabled: boolean
@@ -197,8 +208,8 @@ interface SettingsInterface {
   //             ::: ACTIONS :::
   // -----------------------------------------
   // Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
-  // 
-  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
+  //
+  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov.
   actions: {
     name?: string,    // name displayed in settings
     label?: string,                     // name displayed in ui (can be overridden in scope/playerUi)
@@ -226,31 +237,31 @@ interface SettingsInterface {
   // -----------------------------------------
   // Nastavitve za posamezno stran
   // Config for a given page:
-  // 
+  //
   // <hostname> : {
   //    status: <option>              // should extension work on this site?
   //    arStatus: <option>            // should we do autodetection on this site?
-  //    
+  //
   //    defaultAr?: <ratio>          // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
   //    stretch? <stretch mode>       // automatically stretch video on this site in this manner
   //    videoAlignment? <left|center|right>
   //
-  //    type: <official|community|user>  // 'official' — blessed by Tam. 
+  //    type: <official|community|user>  // 'official' — blessed by Tam.
   //                                     // 'community' — blessed by reddit.
   //                                     // 'user' — user-defined (not here)
   //    override: <true|false>           // override user settings for this site on update
-  // } 
-  //  
-  // Veljavne vrednosti za možnosti 
+  // }
+  //
+  // Veljavne vrednosti za možnosti
   // Valid values for options:
   //
   //     status, arStatus, statusEmbedded:
-  //    
+  //
   //    * enabled     — always allow, full
   //    * basic       — allow, but only the basic version without playerData
   //    * default     — allow if default is to allow, block if default is to block
   //    * disabled    — never allow
-  // 
+  //
   sites: {
     [x: string]: {
       mode?: ExtensionMode,
@@ -286,8 +297,10 @@ interface SettingsInterface {
       },
       css?: string;
       usePlayerArInFullscreen?: boolean;
+
+      restrictions?: RestrictionsSettings;
     }
   }
 }
 
-export default SettingsInterface;
\ No newline at end of file
+export default SettingsInterface;
diff --git a/src/ext/lib/video-data/PageInfo.ts b/src/ext/lib/video-data/PageInfo.ts
index 52017cc..8c214cb 100644
--- a/src/ext/lib/video-data/PageInfo.ts
+++ b/src/ext/lib/video-data/PageInfo.ts
@@ -39,7 +39,7 @@ class PageInfo {
   currentCrop: any;
   actionHandlerInitQueue: any[] = [];
   currentZoomScale: number = 1;
-  
+
   actionHandler: any;
   //#endregion
 
@@ -51,7 +51,7 @@ class PageInfo {
     this.extensionMode = extensionMode;
     this.readOnly = readOnly;
 
-    if (comms){ 
+    if (comms){
       this.comms = comms;
     }
 
@@ -179,10 +179,10 @@ class PageInfo {
    * of videos. Destroys all videoData objects for all the videos that don't have their
    * own <video> html element on the page.
    * @param rescanReason Why was the rescan triggered. Mostly used for logging.
-   * @returns 
+   * @returns
    */
   rescan(rescanReason?: RescanReason){
-    // is there any video data objects that had their HTML elements removed but not yet 
+    // is there any video data objects that had their HTML elements removed but not yet
     // destroyed? We clean that up here.
     const orphans = this.videos.filter(x => !document.body.contains(x.element));
     for (const orphan of orphans) {
@@ -198,7 +198,7 @@ class PageInfo {
 
       if(!vids || vids.length == 0){
         this.hasVideos = false;
-    
+
         if(rescanReason == RescanReason.PERIODIC){
           this.logger.log('info', 'videoRescan', "[PageInfo::rescan] Scheduling normal rescan.")
           this.scheduleRescan(RescanReason.PERIODIC);
@@ -221,14 +221,14 @@ class PageInfo {
         if(!videoElement.offsetWidth || !videoElement.offsetHeight) {
           continue;
         }
-        
+
         // at this point, we're certain that we found new videos. Let's update some properties:
         this.hasVideos = true;
 
         // if PageInfo is marked as "readOnly", we actually aren't adding any videos to anything because
-        // that's super haram. We're only interested in whether 
+        // that's super haram. We're only interested in whether
         if (this.readOnly) {
-          // in lite mode, we're done. This is all the info we want, but we want to actually start doing 
+          // in lite mode, we're done. This is all the info we want, but we want to actually start doing
           // things that interfere with the website. We still want to be running a rescan, tho.
 
           if(rescanReason == RescanReason.PERIODIC){
@@ -241,11 +241,11 @@ class PageInfo {
 
         try {
           const newVideo = new VideoData(videoElement, this.settings, this);
-          this.videos.push({videoData: newVideo, element: videoElement});      
+          this.videos.push({videoData: newVideo, element: videoElement});
         } catch (e) {
           this.logger.log('error', 'debug', "rescan error: failed to initialize videoData. Skipping this video.",e);
         }
-        
+
         this.logger.log('info', 'videoRescan', "END VIDEO INITIALIZATION\n\n\n-------------------------------------\nvideos[] is now this:", this.videos,"\n\n\n\n\n\n\n\n")
       }
 
@@ -254,24 +254,24 @@ class PageInfo {
       // if we're left without videos on the current page, we unregister the page.
       // if we have videos, we call register.
       if (this.comms) {
-        // We used to send "register video" requests only on the first load, or if the number of 
+        // We used to send "register video" requests only on the first load, or if the number of
         // videos on the page has changed. However, since Chrome Web Store started to require every
         // extension requiring "broad permissions" to undergo manual review
         // ... and since Chrome Web Store is known for taking their sweet ass time reviewing extensions,
         // with review times north of an entire fucking month
-        // ... and since the legacy way of checking whether our frames-with-videos cache in background 
+        // ... and since the legacy way of checking whether our frames-with-videos cache in background
         // script contains any frames that no longer exist required us to use webNavigation.getFrame()/
-        // webNavigation.getAllFrames(), which requires a permission that triggers a review. 
+        // webNavigation.getAllFrames(), which requires a permission that triggers a review.
         //
         // While the extension uses some other permissions that trigger manual review, it's said that
-        // less is better / has a positive effect on your manual review times ... So I guess we'll do 
+        // less is better / has a positive effect on your manual review times ... So I guess we'll do
         // things in the less-than-optimal. more-than-retarded way.
         //
         // no but honestly fuck Chrome.
 
         // if (this.videos.length != oldVideoCount) {
-        // } 
-        
+        // }
+
         if (this.videos.length > 0) {
           // this.comms.registerVideo({host: window.location.hostname, location: window.location});
           this.comms.registerVideo();
@@ -313,7 +313,7 @@ class PageInfo {
       }
 
       let ths = this;
-      
+
       this.rescanTimer = setTimeout(function(rescanReason){
         ths.rescanTimer = null;
         ths.rescan(rescanReason);
@@ -331,7 +331,7 @@ class PageInfo {
     }
 
     let ths = this;
-        
+
     this.urlCheckTimer = setTimeout(function(){
       ths.urlCheckTimer = null;
       ths.ghettoUrlCheck();
@@ -345,7 +345,7 @@ class PageInfo {
   ghettoUrlCheck() {
     if (this.lastUrl != window.location.href){
       this.logger.log('error', 'videoRescan', "[PageInfo::ghettoUrlCheck] URL has changed. Triggering a rescan!");
-      
+
       this.rescan(RescanReason.URL_CHANGE);
       this.lastUrl = window.location.href;
     }
@@ -377,7 +377,7 @@ class PageInfo {
         if (vd.videoData.isPlaying()) {
           vd.videoData.pause();
         }
-      }  
+      }
     } else {
       for(let vd of this.videos){
         vd.videoData.pause();
@@ -426,7 +426,7 @@ class PageInfo {
   stopArDetection(playingOnly){
     if (playingOnly) {
       for(let vd of this.videos){
-        if (vd.videoData.isPlaying()) { 
+        if (vd.videoData.isPlaying()) {
           vd.videoData.stopArDetection();
         }
       }
@@ -474,11 +474,11 @@ class PageInfo {
       }
     }
   }
-  
+
   setVideoAlignment(videoAlignment, playingOnly) {
     if (playingOnly) {
       for(let vd of this.videos) {
-        if (vd.videoData.isPlaying()) { 
+        if (vd.videoData.isPlaying()) {
           vd.videoData.setVideoAlignment(videoAlignment)
         }
       }
@@ -555,7 +555,7 @@ class PageInfo {
     }
   }
 
-  markPlayer(name, color) { 
+  markPlayer(name, color) {
     for (let vd of this.videos) {
       vd.videoData.markPlayer(name,color);
     }
@@ -604,7 +604,7 @@ class PageInfo {
   setArPersistence(persistenceMode) {
     // name of this function is mildly misleading — we don't really _set_ ar persistence. (Ar persistence
     // mode is set and saved via popup or keyboard shortcuts, if user defined them) We just save the current
-    // aspect ratio whenever aspect ratio persistence mode changes. 
+    // aspect ratio whenever aspect ratio persistence mode changes.
     if (persistenceMode === CropModePersistence.CurrentSession) {
       sessionStorage.setItem('uw-crop-mode-session-persistence', JSON.stringify(this.currentCrop));
     } else if (persistenceMode === CropModePersistence.Forever) {
@@ -615,7 +615,7 @@ class PageInfo {
         this.settings.active.sites[window.location.hostname] = this.settings.getDefaultOption();
         this.settings.active.sites[window.location.hostname]['defaultAr'] = this.currentCrop;
       }
-      
+
       this.settings.saveWithoutReload();
     }
   }
@@ -632,7 +632,7 @@ class PageInfo {
     }
 
     this.defaultCrop = ar;
-    
+
     if (cropModePersistence === CropModePersistence.CurrentSession) {
       sessionStorage.setItem('uw-crop-mode-session-persistence', JSON.stringify(ar));
     } else if (cropModePersistence === CropModePersistence.Forever) {
@@ -643,7 +643,7 @@ class PageInfo {
         this.settings.active.sites[window.location.hostname] = this.settings.getDefaultOption();
         this.settings.active.sites[window.location.hostname]['defaultAr'] = ar;
       }
-      
+
       this.settings.saveWithoutReload();
     }
   }
diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index 094b581..c1a17cc 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/src/ext/lib/video-data/PlayerData.ts
@@ -202,7 +202,7 @@ class PlayerData {
         // attributeFilter: ['style', 'class'],
         attributeOldValue: true,
       };
-      
+
       this.observer.observe(this.element);
     } catch (e) {
       console.error("failed to set observer",e )
@@ -361,7 +361,6 @@ class PlayerData {
             element = element.parentNode;
           }
           if (element) {
-            this.updatePlayerDimensions(element);
             return element;
           }
         } else if (this.settings.active.sites[host]?.DOM?.player?.querySelectors) {
@@ -372,7 +371,7 @@ class PlayerData {
             // Let's see how this works
             if (this.collectionHas(allSelectors, element)) {
               score = 100; // every matching element gets a baseline 100 points
-              
+
               // elements that match the size get a hefty bonus
               if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
                 || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
@@ -414,12 +413,12 @@ class PlayerData {
           element = element.parentNode;
           continue;
         }
-    
+
         // element is player, if at least one of the sides is as long as the video
         // note that we can't make any additional assumptions with regards to player
         // size, since there are both cases where the other side is bigger _and_ cases
         // where other side is smaller than the video.
-        // 
+        //
         // Don't bother thinking about this too much, as any "thinking" was quickly
         // corrected by bugs caused by various edge cases.
         if (
@@ -439,7 +438,7 @@ class PlayerData {
           score -= scorePenalty * penaltyMultiplier++;
 
           // the bigger the size difference between the video and the player,
-          // the more penalty we'll incur. Since we did some grace ith 
+          // the more penalty we'll incur. Since we did some grace ith
           let playerSizePenalty = 1;
           if ( element.offsetHeight > (videoHeight + 5)) {
             playerSizePenalty = (element.offsetWidth - videoHeight) * sizePenaltyMultiplier;
@@ -455,7 +454,7 @@ class PlayerData {
             score: score,
           });
         }
-        
+
         element = element.parentNode;
       }
 
@@ -465,7 +464,7 @@ class PlayerData {
       if (elementQ.length) {
         // return element with biggest score
         const playerElement = elementQ.sort( (a,b) => b.score - a.score)[0].element;
-        
+
         this.updatePlayerDimensions(playerElement);
         return playerElement;
       }
@@ -487,7 +486,7 @@ class PlayerData {
   forceDetectPlayerElementChange() {
     // Player dimension changes get calculated every time updatePlayerDimensions is called (which happens
     // every time getPlayer() detects an element). If updatePlayerDimension detects dimensions were changed,
-    // it will always re-apply current crop, rendering this function little more than a fancy alias for 
+    // it will always re-apply current crop, rendering this function little more than a fancy alias for
     // getPlayer().
     this.getPlayer();
   }
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index cf8e4ad..c950714 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/src/ext/lib/video-data/VideoData.ts
@@ -57,10 +57,10 @@ class VideoData {
       return 1;
     }
   }
-  
+
   constructor(video, settings, pageInfo){
     (window as any).ultrawidify.addVideo(this);
-    
+
     this.logger = pageInfo.logger;
     this.arSetupComplete = false;
     this.video = video;
@@ -87,15 +87,15 @@ class VideoData {
 
   async onVideoLoaded() {
     if (!this.videoLoaded) {
-      
+
       /**
        * video.readyState 101:
-       * 0 — no info. Can't play. 
+       * 0 — no info. Can't play.
        * 1 — we have metadata but nothing else
        * 2 — we have data for current playback position, but not future      <--- meaning current frame, meaning Aard can work here or higher
        * 3 — we have a lil bit for the future
        * 4 — we'll survive to the end
-       */ 
+       */
       if (!this.video?.videoWidth || !this.video?.videoHeight || this.video.readyState < 2) {
         return; // onVideoLoaded is a lie in this case
       }
@@ -199,7 +199,7 @@ class VideoData {
     // INIT OBSERVERS
     try {
       if (BrowserDetect.firefox) {
-        this.observer = new ResizeObserver( 
+        this.observer = new ResizeObserver(
           _.debounce(
             this.onVideoDimensionsChanged,
             250,
@@ -212,11 +212,11 @@ class VideoData {
       } else {
         // Chrome for some reason insists that this.onPlayerDimensionsChanged is not a function
         // when it's not wrapped into an anonymous function
-        this.observer = new ResizeObserver( 
+        this.observer = new ResizeObserver(
           _.debounce(
             (m, o) => {
               this.onVideoDimensionsChanged(m, o)
-            }, 
+            },
             250,
             {
               leading: true,
@@ -252,7 +252,7 @@ class VideoData {
     // start fallback video/player size detection
     this.fallbackChangeDetection();
 
-    // force reload last aspect ratio (if default crop ratio exists), but only after the video is 
+    // force reload last aspect ratio (if default crop ratio exists), but only after the video is
     if (this.pageInfo.defaultCrop) {
       this.resizer.setAr(this.pageInfo.defaultCrop);
     }
@@ -315,7 +315,7 @@ class VideoData {
 
     if (this.video) {
       this.video.classList.remove(this.userCssClassName);
-      this.video.classList.remove('uw-ultrawidify-base-wide-screen'); 
+      this.video.classList.remove('uw-ultrawidify-base-wide-screen');
 
       this.video.removeEventListener('onloadeddata', this.onLoadedData);
       this.video.removeEventListener('onloadedmetadata', this.onLoadedMetadata);
@@ -354,14 +354,14 @@ class VideoData {
   }
   //#endregion
 
-  restoreCrop() {  
+  restoreCrop() {
     this.logger.log('info', 'debug', '[VideoData::restoreCrop] Attempting to reset aspect ratio.')
     // if we have default crop set for this page, apply this.
     // otherwise, reset crop
     if (this.pageInfo.defaultCrop) {
       this.resizer.setAr(this.pageInfo.defaultCrop);
     } else {
-    this.resizer.reset();
+      this.resizer.reset();
 
       try {
         this.stopArDetection();
@@ -500,7 +500,7 @@ class VideoData {
         this.player.forceDetectPlayerElementChange();
         this.restoreAr();
       }
-      
+
     } catch(e) {
       console.error('Validating video offsets failed:', e)
     }
@@ -518,7 +518,7 @@ class VideoData {
     // This will _always_ give us an array. Empty string gives an array
     // that contains one element. That element is an empty string.
     const styleArray = (this.video.getAttribute('style') || '').split(';');
-    
+
     const styleObject = {};
 
     for (const style of styleArray) {
@@ -537,10 +537,10 @@ class VideoData {
   }
 
   /**
-   * Some sites try to accomodate ultrawide users by "cropping" videos
+   * Some sites try to accommodate ultrawide users by "cropping" videos
    * by setting 'style' attribute of the video element to 'height: X%',
    * where 'X' is something greater than 100.
-   * 
+   *
    * This function gets that percentage and converts it into a factor.
    */
   getHeightCompensationFactor() {
@@ -579,7 +579,7 @@ class VideoData {
       this.arDetector.init();
     }
   }
-  
+
   startArDetection() {
     this.logger.log('info', 'debug', "[VideoData::startArDetection] starting AR detection")
     if(this.destroyed || this.invalid) {
@@ -670,7 +670,7 @@ class VideoData {
     if (this.invalid) {
       return;
     }
-    
+
     if (ar.type === AspectRatioType.Fixed || ar.type === AspectRatioType.FitHeight || ar.type === AspectRatioType.FitHeight) {
       this.player.forceRefreshPlayerElement();
     }
@@ -788,7 +788,7 @@ class VideoData {
         this.logger.log('info', 'debug', "[VideoDetect] player size changed. reason: dimension change. Old dimensions?", this.dimensions.width, this.dimensions.height, "new dimensions:", this.video.offsetWidth, this.video.offsetHeight);
       }
     }
-    
+
     // if size doesn't match, update & return true
     if (this.dimensions?.width != videoWidth
         || this.dimensions?.height != videoHeight ){
diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts
index b89f90b..11f899d 100644
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/src/ext/lib/video-transform/Resizer.ts
@@ -59,7 +59,7 @@ class Resizer {
     this.settings = videoData.settings;
 
     this.scaler = new Scaler(this.conf);
-    this.stretcher = new Stretcher(this.conf); 
+    this.stretcher = new Stretcher(this.conf);
     this.zoom = new Zoom(this.conf);
 
     this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
@@ -72,17 +72,17 @@ class Resizer {
       this.canPan = false;
     }
 
-    this.userCssClassName = videoData.userCssClassName; 
+    this.userCssClassName = videoData.userCssClassName;
   }
-  
+
   injectCss(css) {
     this.conf.pageInfo.injectCss(css);
   }
-  
+
   ejectCss(css) {
     this.conf.pageInfo.ejectCss(css);
   }
-  
+
   replaceCss(oldCss, newCss) {
     this.conf.pageInfo.replaceCss(oldCss, newCss);
   }
@@ -101,7 +101,7 @@ class Resizer {
     if (ar.type !== AspectRatioType.FitWidth && ar.type !== AspectRatioType.FitHeight && ar.ratio) {
       return ar;
     }
-    // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi". 
+    // Skrbi za "stare" možnosti, kot na primer "na širino zaslona", "na višino zaslona" in "ponastavi".
     // Približevanje opuščeno.
     // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatioType.Reset. No zoom tho
     let ratioOut;
@@ -112,22 +112,22 @@ class Resizer {
       return null;
     }
 
-    
+
     if (! this.conf.player.dimensions) {
       ratioOut = screen.width / screen.height;
     } else {
       this.logger.log('info', 'debug', `[Resizer::calculateRatioForLegacyOptions] <rid:${this.resizerId}> Player dimensions:`, this.conf.player.dimensions.width ,'x', this.conf.player.dimensions.height,'aspect ratio:', this.conf.player.dimensions.width / this.conf.player.dimensions.height)
       ratioOut = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
     }
-    
+
     // POMEMBNO: lastAr je potrebno nastaviti šele po tem, ko kličemo _res_setAr(). _res_setAr() predvideva,
     // da želimo nastaviti statično (type: 'static') razmerje stranic — tudi, če funkcijo kličemo tu oz. v ArDetect.
     //
     // IMPORTANT NOTE: lastAr needs to be set after _res_setAr() is called, as _res_setAr() assumes we're
-    // setting a static aspect ratio (even if the function is called from here or ArDetect). 
-    
+    // setting a static aspect ratio (even if the function is called from here or ArDetect).
+
     let fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
-      
+
     if (ar.type === AspectRatioType.FitWidth){
       ar.ratio = ratioOut > fileAr ? ratioOut : fileAr;
     }
@@ -168,12 +168,12 @@ class Resizer {
     if (this.destroyed) {
       return;
     }
-    
+
     if (!this.video.videoWidth || !this.video.videoHeight) {
       this.logger.log('warning', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> Video has no width or no height. This is not allowed. Aspect ratio will not be set, and videoData will be uninitialized.');
       this.conf.videoUnloaded();
     }
-  
+
     this.logger.log('info', 'debug', '[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', ar);
 
     if (ar == null) {
@@ -198,10 +198,10 @@ class Resizer {
     // this means here's the optimal place to set or forget aspect ratio. Saving of current crop ratio
     // is handled in pageInfo.updateCurrentCrop(), which also makes sure to persist aspect ratio if ar
     // is set to persist between videos / through current session / until manual reset.
-    if (ar.type === AspectRatioType.Automatic || 
+    if (ar.type === AspectRatioType.Automatic ||
         ar.type === AspectRatioType.Reset ||
         ar.type === AspectRatioType.Initial ) {
-      // reset/undo default 
+      // reset/undo default
       this.conf.pageInfo.updateCurrentCrop(undefined);
     } else {
       this.conf.pageInfo.updateCurrentCrop(ar);
@@ -224,7 +224,7 @@ class Resizer {
     // if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar.type !== AspectRatioType.Reset) {
     //   // don't actually apply or calculate css when using basic mode if not in fullscreen
     //   //  ... unless we're resetting the aspect ratio to original
-    //   return; 
+    //   return;
     // }
 
     if (! this.video) {
@@ -234,7 +234,7 @@ class Resizer {
     // pause AR on:
     // * ar.type NOT automatic
     // * ar.type is auto, but stretch is set to basic basic stretch
-    // 
+    //
     // unpause when using other modes
     if (ar.type !== AspectRatioType.Automatic || this.stretcher.mode === StretchType.Basic) {
       this.conf?.arDetector?.pause();
@@ -245,10 +245,10 @@ class Resizer {
     }
 
     // do stretch thingy
-    if (this.stretcher.mode === StretchType.NoStretch 
-        || this.stretcher.mode === StretchType.Conditional 
+    if (this.stretcher.mode === StretchType.NoStretch
+        || this.stretcher.mode === StretchType.Conditional
         || this.stretcher.mode === StretchType.FixedSource){
-     
+
       stretchFactors = this.scaler.calculateCrop(ar);
 
       if(! stretchFactors || stretchFactors.error){
@@ -274,7 +274,7 @@ class Resizer {
         this.stretcher.applyStretchFixedSource(stretchFactors);
       }
       this.logger.log('info', 'debug', "[Resizer::setAr] Processed stretch factors for ",
-                      this.stretcher.mode === StretchType.NoStretch ? 'stretch-free crop.' : 
+                      this.stretcher.mode === StretchType.NoStretch ? 'stretch-free crop.' :
                         this.stretcher.mode === StretchType.Conditional ? 'crop with conditional StretchType.' : 'crop with fixed stretch',
                       'Stretch factors are:', stretchFactors
       );
@@ -343,7 +343,7 @@ class Resizer {
 
       const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth;
       const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight;
-      
+
       this.logger.log('info', 'mousemove', "[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY, "\nrelativeX/Y:", relativeX, relativeY)
 
       this.setPan(relativeX, relativeY);
@@ -356,7 +356,7 @@ class Resizer {
   }
 
   setPan(relativeMousePosX, relativeMousePosY){
-    // relativeMousePos[X|Y] - on scale from 0 to 1, how close is the mouse to player edges. 
+    // relativeMousePos[X|Y] - on scale from 0 to 1, how close is the mouse to player edges.
     // use these values: top, left: 0, bottom, right: 1
     if(! this.pan){
       this.pan = {x: 0, y: 0};
@@ -379,7 +379,7 @@ class Resizer {
 
   restore() {
     this.logger.log('info', 'debug', "[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio", {'lastAr': this.lastAr} );
-    
+
     // this is true until we verify that css has actually been applied
     if(this.lastAr.type === AspectRatioType.Initial){
       this.setAr({type: AspectRatioType.Reset});
@@ -414,7 +414,7 @@ class Resizer {
   setZoom(zoomLevel, no_announce) {
     this.zoom.setZoom(zoomLevel, no_announce);
   }
-  
+
   zoomStep(step){
     this.zoom.zoomStep(step);
   }
@@ -439,23 +439,23 @@ class Resizer {
   /**
    * Returns the size of the video file _as displayed_ on the screen.
    * Consider the following example:
-   * 
+   *
    *   * player dimensions are 2560x1080
    *   * <video> is child of player
    *   * <video> has the following css: {width: 100%, height: 100%}
    *   * video file dimensions are 1280x720
-   * 
+   *
    * CSS will ensure that the dimensions of <video> tag are equal to the dimension of the
-   * player element — that is, 2560x1080px. This is no bueno, because the browser will upscale 
+   * player element — that is, 2560x1080px. This is no bueno, because the browser will upscale
    * the video file to take up as much space as it can (without stretching it). This means
    * we'll get a 1920x1080 video (as displayed) and a letterbox.
-   * 
+   *
    * We can't get that number out of anywhere: video.videoWidth will return 1280 (video file
    * dimensions) and .offsetWidth (and the likes) will return the <video> tag dimension. Neither
-   * will return the actual size of video as displayed, which we need in order to calculate the 
+   * will return the actual size of video as displayed, which we need in order to calculate the
    * extra space to the left and right of the video.
-   * 
-   * We make the assumption of the 
+   *
+   * We make the assumption of the
    */
   computeVideoDisplayedDimensions() {
     const offsetWidth = this.conf.video.offsetWidth;
@@ -464,7 +464,7 @@ class Resizer {
     const scaleX = offsetWidth / this.conf.video.videoWidth;
     const scaleY = offsetHeight / this.conf.video.videoHeight;
 
-    // if differences between the scale factors are minimal, we presume offsetWidth and 
+    // if differences between the scale factors are minimal, we presume offsetWidth and
     // offsetHeight are the accurate enough for our needs
     if (Math.abs(scaleX - scaleY) < 0.02) {
       return {
@@ -505,19 +505,19 @@ class Resizer {
    * and let the browser figure out the height through the magic of height:auto. This is bad,
    * because our addon generally relies of videos always being 100% of the height of the
    * container.
-   * 
-   * This sometimes leads to a situation where realVideoHeight and realVideoWidth — at least 
+   *
+   * This sometimes leads to a situation where realVideoHeight and realVideoWidth — at least
    * one of which should be roughly equal to the player width or hight with the other one being
-   * either smaller or equal — are both smaller than player width or height; and sometimes 
+   * either smaller or equal — are both smaller than player width or height; and sometimes
    * rather substantially. Fortunately for us, realVideo[Width|Height] and player dimensions
    * never lie, which allows us to calculate the extra scale factor we need.
-   * 
+   *
    * Returned factor for this function should do fit:contain, not fit:cover.
    * @param realVideoWidth real video width
    * @param realVideoHeight real video height
    * @param playerWidth player width
    * @param playerHeight player height
-   * @param mode whether to 
+   * @param mode whether to
    */
   computeAutoHeightCompensationFactor(realVideoWidth: number, realVideoHeight: number, playerWidth: number, playerHeight: number, mode: 'height' | 'width'): number {
     const widthFactor = playerWidth / realVideoWidth;
@@ -538,7 +538,7 @@ class Resizer {
     // We also don't compensate for height:auto if height is provided via element style
     let autoHeightCompensationFactor;
     if (
-      stretchFactors.cropStrategy === CropStrategy.CropLetterbox 
+      stretchFactors.cropStrategy === CropStrategy.CropLetterbox
       && (!stretchFactors.styleHeightCompensationFactor || stretchFactors.styleHeightCompensationFactor === 1)
     ) {
       autoHeightCompensationFactor = this.computeAutoHeightCompensationFactor(realVideoWidth, realVideoHeight, this.conf.player.dimensions.width, this.conf.player.dimensions.height, 'height');
@@ -551,14 +551,14 @@ class Resizer {
 
     const wdiffAfterZoom = realVideoWidth * stretchFactors.xFactor - this.conf.player.dimensions.width;
     const hdiffAfterZoom = realVideoHeight * stretchFactors.yFactor - this.conf.player.dimensions.height;
-    
+
     const translate = {
       x: wdiff * 0.5,
       y: hdiff * 0.5,
     };
 
-    
-    
+
+
 
     if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) {
       // don't offset when video is smaller than player
@@ -574,7 +574,7 @@ class Resizer {
         translate.x -= wdiffAfterZoom * 0.5;
       }
     }
-  
+
     this.logger.log(
       'info', ['debug', 'resizer'], "[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:",
       '\n\n---- elements ----',
@@ -588,21 +588,21 @@ class Resizer {
       '\nstretch factors:      ', stretchFactors,
       '\npan & zoom:           ', this.pan, this.zoom.scale,
       '\nwdiff, hdiff:         ', wdiff, 'x', hdiff,
-      '\nwdiff, hdiffAfterZoom:', wdiffAfterZoom, 'x', hdiffAfterZoom, 
+      '\nwdiff, hdiffAfterZoom:', wdiffAfterZoom, 'x', hdiffAfterZoom,
       '\n\n---- data out ----\n',
       'translate:', translate
     );
 
     // by the way, let's do a quick sanity check whether video player is doing any fuckies wuckies
-    // fucky wucky examples: 
+    // fucky wucky examples:
     //
     //       * video width is bigger than player width AND video height is bigger than player height
     //       * video width is smaller than player width AND video height is smaller than player height
     //
-    // In both examples, at most one of the two conditions can be true at the same time. If both 
+    // In both examples, at most one of the two conditions can be true at the same time. If both
     // conditions are true at the same time, we need to go 'chiny reckon' and recheck our player
     // element. Chances are our video is not getting aligned correctly
-    if ( 
+    if (
       (this.conf.video.offsetWidth > this.conf.player.dimensions.width && this.conf.video.offsetHeight > this.conf.player.dimensions.height) ||
       (this.conf.video.offsetWidth < this.conf.player.dimensions.width && this.conf.video.offsetHeight < this.conf.player.dimensions.height)
     ) {
@@ -622,9 +622,9 @@ class Resizer {
       }
     }
 
-    return translate; 
+    return translate;
   }
-  
+
   //#region css handling
   buildStyleArray(existingStyleString, extraStyleString) {
     if (existingStyleString) {
@@ -648,15 +648,15 @@ class Resizer {
           }
         }
       }
-  
+
       for (let i in styleArray) {
-        styleArray[i] = styleArray[i].trim();   
-        // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos. 
+        styleArray[i] = styleArray[i].trim();
+        // some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos.
         // we dont wanna, because we already center videos on our own
         if (styleArray[i].startsWith("transform:")
-            || styleArray[i].startsWith("top:") 
-            || styleArray[i].startsWith("left:") 
-            || styleArray[i].startsWith("right:") 
+            || styleArray[i].startsWith("top:")
+            || styleArray[i].startsWith("left:")
+            || styleArray[i].startsWith("right:")
             || styleArray[i].startsWith("bottom:")
             || styleArray[i].startsWith("margin")
           ){
@@ -682,7 +682,7 @@ class Resizer {
   }
 
   applyCss(stretchFactors, translate){
-    // apply extra CSS here. In case of duplicated properties, extraCss overrides 
+    // apply extra CSS here. In case of duplicated properties, extraCss overrides
     // default styleString
     if (! this.video) {
       this.logger.log('warn', 'debug', "[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
@@ -692,7 +692,7 @@ class Resizer {
     }
 
     this.logger.log('info', ['debug', 'resizer'], "[Resizer::applyCss] <rid:"+this.resizerId+"> will apply css.", {stretchFactors, translate});
-    
+
     // save stuff for quick tests (before we turn numbers into css values):
     this.currentVideoSettings = {
       validFor:  this.conf.player.dimensions,
@@ -716,7 +716,7 @@ class Resizer {
       // important — guarantees video will be properly aligned
       // Note that position:absolute cannot be put here, otherwise old.reddit /w RES breaks — videos embedded
       // from certain hosts will get a height: 0px. This is bad.
-      styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;"); 
+      styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;");
 
       // important — some websites (cough reddit redesign cough) may impose some dumb max-width and max-height
       // restrictions. If site has dumb shit like 'max-width: 100%' and 'max-height: 100vh' in their CSS, that