Implement crop persistence in content script

.vscode/settings.json

@@ -5,10 +5,12 @@
     "blackbar",
     "blackframe",
     "canvas",
+    "comms",
     "equalish",
     "insta",
     "recursing",
     "reddit",
+    "rescan",
     "resizer",
     "textbox",
     "videodata",

src/common/enums/crop-mode-persistence.enum.js

@@ -0,0 +1,7 @@
+var CropModePersistence = Object.freeze({
+  Disabled: 0,
+  UntilPageReload: 1,
+  Forever: 2,
+});
+
+export default CropModePersistence;

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

@@ -2,6 +2,7 @@ import Debug from '../../conf/Debug';
 import VideoData from './VideoData';
 import RescanReason from './enums/RescanReason';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import CropModePersistence from '../../../common/enums/crop-mode-persistence.enum';
 
 if(Debug.debug)
   console.log("Loading: PageInfo.js");
@@ -20,21 +21,26 @@ class PageInfo {
     this.lastUrl = window.location.href;
     this.extensionMode = extensionMode;
     this.readOnly = readOnly;
-
+    this.defaultCrop = undefined;
 
     if (comms){ 
       this.comms = comms;
     }
 
-    // request inject css immediately
     try {
+      // request inject css immediately
       const playerStyleString = this.settings.active.sites[window.location.host].css.replace('\\n', '');
       this.comms.sendMessage({
         cmd: 'inject-css',
         cssString: playerStyleString
       });
+
+      // try getting default crop immediately.
+      if (this.settings.active.sites[window.location.host].cropPersistence === CropModePersistence.Forever) {
+        this.defaultCrop = this.settings.active.sites[window.location.host].defaultCrop;
+      }
     } catch (e) {
-      // do nothing. It's ok if there's no special settings for the player element
+      // do nothing. It's ok if there's no special settings for the player element or crop persistence
     }
 
     this.rescan(RescanReason.PERIODIC);
@@ -197,11 +203,17 @@ class PageInfo {
           
           try {
             v = new VideoData(video, this.settings, this);
-            if (!v.invalid) {
-              v.initArDetection();
+
+            if (this.defaultCrop) {
+              if (!v.invalid) {
+                v.initArDetection();
+              } else {
+                this.logger.log('error', 'debug', 'Video is invalid. Aard not started.', video);
+              }
             } else {
-              this.logger.log('error', 'debug', 'Video is invalid. Aard not started.', video);
+              this.logger.log('info', 'debug', 'Default crop is specified for this site. Not starting aard.');
             }
+            
             this.videos.push(v);
           } catch (e) {
             this.logger.log('error', 'debug', "rescan error: failed to initialize videoData. Skipping this video.",e);
@@ -216,7 +228,7 @@ class PageInfo {
       // če smo ostali brez videev, potem odregistriraj stran. 
       // če nismo ostali brez videev, potem registriraj stran.
       //
-      // if we're left withotu videos on the current page, we unregister the page.
+      // if we're left without videos on the current page, we unregister the page.
       // if we have videos, we call register.
       if (this.comms) {
         if (this.videos.length != oldVideoCount) { // only if number of videos changed, tho
@@ -551,6 +563,22 @@ class PageInfo {
   setKeyboardShortcutsEnabled(state) {
     this.actionHandler.setKeybordLocal(state);
   }
+
+  setDefaultCrop(ar) {
+    // This means crop persistance is disabled. If crop persistance is enabled, then settings for current
+    // site MUST exist (crop persistence mode is disabled by default)
+    if (!this.settings.active.sites[window.location.host] ||
+         this.settings.active.sites[window.location.host].cropPersistence === CropModePersistence.Disabled) {
+      return;
+    }
+
+    this.defaultCrop = ar;
+    
+    if (this.settings.active.sites[window.location.host].cropPersistence === CropModePersistence.Forever) {
+      this.settings.active.sites[window.location.host].defaultAr = ar;
+      this.settings.saveWithoutReload();
+    }
+  }
 }
 
 export default PageInfo;

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

@@ -44,6 +44,7 @@ class VideoData {
     };
 
     this.resizer = new Resizer(this);
+
     this.arDetector = new ArDetector(this);  // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
     // player dimensions need to be in:
     // this.player.dimensions
@@ -59,6 +60,11 @@ class VideoData {
 
     // start fallback video/player size detection
     this.fallbackChangeDetection();
+
+    // force reload last aspect ratio (if default crop ratio exists)
+    if (this.pageInfo.defaultCrop) {
+      this.resizer.setAr(this.pageInfo.defaultCrop);
+    }
   }
 
   async fallbackChangeDetection() {
@@ -162,7 +168,7 @@ class VideoData {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
-    if(this.arDetector){
+    if (this.arDetector){
       this.arDetector.init();
     }
     else{
@@ -177,8 +183,8 @@ class VideoData {
       // throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
       return;
     }
-    if(!this.arDetector) {
-      this.arDetector.init();
+    if (!this.arDetector) {
+      this.initArDetection();
     }
     this.arDetector.start();
   }

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

@@ -7,6 +7,7 @@ import ExtensionMode from '../../../common/enums/extension-mode.enum';
 import Stretch from '../../../common/enums/stretch.enum';
 import VideoAlignment from '../../../common/enums/video-alignment.enum';
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
+import CropModePersistance from '../../../common/enums/crop-mode-persistence.enum';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");
@@ -119,7 +120,7 @@ class Resizer {
   }
 
 
-  setAr(ar, lastAr){
+  setAr(ar, lastAr) {
     if (this.destroyed) {
       return;
     }
@@ -130,26 +131,39 @@ class Resizer {
       return;
     }
 
+    const siteSettings = this.settings.active.sites[window.location.host];
+
+    // most everything that could go wrong went wrong by this stage, and returns can happen afterwards
+    // this means here's the optimal place to set or forget aspect ratio
+    if (siteSettings && siteSettings.cropModePersistance > CropModePersistance.Disabled) {
+      if (ar.type === AspectRatio.Automatic || 
+          ar.type === AspectRatio.Reset ||
+          ar.type === AspectRatio.Initial ) {
+        // reset/undo default 
+        this.conf.pageInfo.setDefaultCrop(undefined);
+      } else {
+        this.conf.pageInfo.setDefaultCrop(ar);
+      }
+    }
+
     if (ar.type === AspectRatio.Automatic || 
         ar.type === AspectRatio.Reset && this.lastAr.type === AspectRatio.Initial) {
       // some sites do things that interfere with our site (and aspect ratio setting in general)
       // first, we check whether video contains anything we don't like
-
-      const siteSettings = this.settings.active.sites[window.location.host];
       if (siteSettings && siteSettings.autoarPreventConditions) {
         if (siteSettings.autoarPreventConditions.videoStyleString) {
           const styleString = (this.video.getAttribute('style') || '').split(';');
-
+  
           if (siteSettings.autoarPreventConditions.videoStyleString.containsProperty) {
             const bannedProperties = siteSettings.autoarPreventConditions.videoStyleString.containsProperty;
             for (const prop in bannedProperties) {
               for (const s of styleString) {
                 if (s.trim().startsWith(prop)) {
-
+  
                   // check if css property has a list of allowed values:
                   if (bannedProperties[prop].allowedValues) {
                     const styleValue = s.split(':')[1].trim();
-
+  
                     // check if property value is on the list of allowed values
                     // if it's not, we aren't allowed to start aard
                     if (bannedProperties[prop].allowedValues.indexOf(styleValue) === -1) {
@@ -170,6 +184,8 @@ class Resizer {
       }
     }
 
+    
+
     if (lastAr) {
       this.lastAr = this.calculateRatioForLegacyOptions(lastAr);
       ar = this.calculateRatioForLegacyOptions(ar);