UI: can set default crop, stretch. (TODO: actually get and use those values)

src/common/interfaces/SettingsInterface.ts

@@ -172,6 +172,10 @@ interface SettingsInterface {
 
   restrictions?: RestrictionsSettings;
 
+  crop: {
+    default: any;
+  },
+
   zoom: {
     minLogZoom: number,
     maxLogZoom: number,
@@ -186,6 +190,7 @@ interface SettingsInterface {
     defaultAr?: any
   },
   stretch: {
+    default: any;
     conditionalDifferencePercent: number  // black bars less than this wide will trigger stretch
                                         // if mode is set to '1'. 1.0=100%
   },
@@ -283,10 +288,15 @@ interface SettingsInterface {
   //
   sites: {
     [x: string]: {
-      mode?: ExtensionMode,
+      defaultCrop?: any,                          // v6 new
-      autoar?: ExtensionMode,
+      defaultStretch?: any,                       // v6 new
-      autoarFallback?: ExtensionMode,
+
-      stretch?: StretchType,
+                                                  // everything 'superseded by' needs to be implemented
+                                                  // as well as ported from the old settings
+      mode?: ExtensionMode,                       // v6 — superseded by defaultCrop
+      autoar?: ExtensionMode,                     // v6 — superseded by defaultCrop
+      autoarFallback?: ExtensionMode,             // v6 — deprecated, no replacement
+      stretch?: StretchType,                      // v6 — superseded by defaultStretch
       videoAlignment?: VideoAlignmentType,
       keyboardShortcutsEnabled?: ExtensionMode,
       type?: string,

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
+
+
+    <!-- CROP OPTIONS -->
     <div v-if="settings" class="sub-panel">
       <div class="flex flex-row">
         <mdicon name="crop" :size="32" />
@@ -15,7 +18,45 @@
         >
         </ShortcutButton>
       </div>
+
+      <div class="flex flex-row">
+        <div class="label">Default for this site</div>
+        <div class="select">
+          <select
+            :value="siteDefaultCrop"
+            @click="setDefaultCrop($event, 'site')"
+          >
+            <option
+              v-for="(command, index) of settings?.active.commands.crop"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div class="flex flex-row">
+        <div class="label">Extension default</div>
+        <div class="select">
+          <select
+            :value="extensionDefaultCrop"
+            @click="setDefaultCrop($event, 'global')"
+          >
+            <option
+              v-for="(command, index) of settings?.active.commands.crop"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
+      </div>
     </div>
+
+
+    <!-- STRETCH OPTIONS -->
     <div v-if="settings" class="sub-panel">
       <div class="flex flex-row">
         <mdicon name="stretch-to-page-outline" :size="32" />
@@ -31,7 +72,45 @@
         >
         </ShortcutButton>
       </div>
+
+      <div class="flex flex-row">
+        <div class="label">Default for this site</div>
+        <div class="select">
+          <select
+            v-model="siteDefaultStretchMode"
+            @click="setDefaultStretchingMode($event, 'site')"
+          >
+            <option
+              v-for="(command, index) of settings?.active.commands.stretch"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div class="flex flex-row">
+        <div class="label">Extension default</div>
+        <div class="select">
+          <select
+            v-model="extensionDefaultStretchMode"
+            @click="setDefaultStretchingMode($event, 'global')"
+          >
+            <option
+              v-for="(command, index) of settings?.active.commands.stretch"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
+      </div>
     </div>
+
+
+    <!-- ZOOM OPTIONS -->
     <div class="sub-panel">
       <div class="flex flex-row">
         <mdicon name="magnify-plus-outline" :size="32" />
@@ -146,6 +225,7 @@ import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
 import ExecAction from '../ui-libs/ExecAction';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
 import AspectRatioType from '../../common/enums/AspectRatioType.enum';
+import StretchType from '../../common/enums/StretchType.enum';
 import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
 
@@ -155,6 +235,8 @@ export default {
       exec: null,
       scope: 'page',
       CropModePersistence: CropModePersistence,
+      StretchType: StretchType,
+      AspectRatioType: AspectRatioType,
       zoomAspectRatioLocked: true,
       zoom: {
         x: 0,
@@ -163,7 +245,7 @@ export default {
     }
   },
   mixins: [
-    ComputeActionsMixin
+    ComputeActionsMixin,
   ],
   props: [
     'settings',
@@ -189,6 +271,29 @@ export default {
     AlignmentOptionsControlComponent
   },
   computed: {
+    // because this is passed to a <select>, all the values must be
+    // passed as strings.
+    extensionDefaultCrop() {
+      return JSON.stringify(
+        this.settings?.active.crop?.default ?? {type: AspectRatioType.Automatic}
+      );
+    },
+    siteDefaultCrop()  {
+      console.log('default crop for site:', JSON.parse(JSON.stringify(this.settings)), this.settings?.active.sites[window.location.hostname], this.settings?.active.sites[window.location.hostname].defaultCrop)
+      return JSON.stringify(
+        this.settings?.getDefaultCrop() ?? {type: AspectRatioType.Automatic}
+      );
+    },
+    extensionDefaultStretchMode () {
+      return JSON.stringify(
+        this.settings?.active.stretch.default ?? {type: StretchType.NoStretch}
+      );
+    },
+    siteDefaultStretchMode () {
+      return JSON.stringify(
+        this.settings?.getDefaultStretchMode() ?? {type: StretchType.NoStretch}
+      );
+    }
   },
   methods: {
     getZoomForDisplay(axis) {
@@ -236,6 +341,50 @@ export default {
       newZoom = Math.pow(2, newZoom);
       this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis, noAnnounce: true});
     },
+
+    /**
+     * Sets default crop, for either site or global
+     */
+    setDefaultCrop($event, globalOrSite) {
+      const commandArguments = JSON.parse($event.target.value);
+
+      if (globalOrSite === 'site') {
+        if (!this.settings.active.sites[window.location.hostname]) {
+          this.settings.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
+        }
+        this.settings.active.sites[window.location.hostname].defaultCrop = commandArguments;
+      } else {
+        // eventually, this 'if' will be safe to remove (and we'll be able to only
+        // get away with the 'else' section) Maybe in 6 months or so.
+        if (!this.settings.active.crop) {
+          console.log('active settings crop not present. Well add');
+          this.settings.active['crop'] = {
+            default: commandArguments
+          }
+        } else {
+          console.log('default crop settings are present:', JSON.parse(JSON.stringify(this.settings.active.crop)))
+          this.settings.active.crop.default = commandArguments;
+        }
+      }
+      this.settings.saveWithoutReload();
+    },
+
+    /**
+     * Sets default stretching mode, for either site or global
+     */
+    setDefaultStretchingMode($event, globalOrSite) {
+      const commandArguments = JSON.parse($event.target.value);
+
+      if (globalOrSite === 'site') {
+        if (!this.settings.active.sites[window.location.hostname]) {
+          this.setting.active.sites[window.location.hostname] = this.settings.getDefaultSiteConfiguration();
+        }
+        this.setting.active.sites[window.location.hostname].defaultStretch = commandArguments;
+      } else {
+          this.settings.active.stretch.default = commandArguments;
+      }
+      this.settings.saveWithoutReload();
+    }
   }
 }
 </script>

src/ext/conf/ExtensionConf.ts

@@ -140,6 +140,11 @@ const ExtensionConf: SettingsInterface = {
       testRowOffset: 0.02     // we test this % of height from detected edge
     }
   },
+  crop: {
+    default: {
+      type: AspectRatioType.Automatic,
+    }
+  },
   zoom: {
     minLogZoom: -1,
     maxLogZoom: 3,
@@ -152,6 +157,9 @@ const ExtensionConf: SettingsInterface = {
     mousePanReverseMouse: false,
   },
   stretch: {
+    default: {
+      type: StretchType.NoStretch
+    },
     conditionalDifferencePercent: 0.05  // black bars less than this wide will trigger stretch
                                         // if mode is set to '1'. 1.0=100%
   },
@@ -1360,10 +1368,10 @@ const ExtensionConf: SettingsInterface = {
   //    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-added>  // 'official' — blessed by Tam.
-  //                                     // 'community' — blessed by reddit.
+  //                                           // 'community' — blessed by people sending me messages.
-  //                                     // 'user' — user-defined (not here)
+  //                                           // 'user-added' — user-defined (not here)
-  //    override: <true|false>           // override user settings for this site on update
+  //    override: <true|false>                 // override user settings for this site on update
   // }
   //
   // Valid values for options:

src/ext/lib/Settings.ts

@@ -11,6 +11,7 @@ import BrowserDetect from '../conf/BrowserDetect';
 import Logger from './Logger';
 import SettingsInterface from '../../common/interfaces/SettingsInterface';
 import { browser } from 'webextension-polyfill-ts';
+import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading Settings");
@@ -80,13 +81,13 @@ class Settings {
     return browser.runtime.getManifest().version;
   }
   getExtensionVersion(): string {
-    return Settings.getExtensionVersion(); 
+    return Settings.getExtensionVersion();
   }
 
   compareExtensionVersions(a, b) {
     let aa = a.split('.');
     let bb = b.split('.');
-    
+
     if (+aa[0] !== +bb[0]) {
       // difference on first digit
       return +aa[0] - +bb[0];
@@ -105,8 +106,8 @@ class Settings {
       aa[3] = aa[3] === undefined ? 0 : aa[3];
       bb[3] = bb[3] === undefined ? 0 : bb[3];
 
-      // also, the fourth digit can start with a letter. 
+      // also, the fourth digit can start with a letter.
-      // versions that start with a letter are ranked lower than 
+      // versions that start with a letter are ranked lower than
       // versions x.x.x.0
       if (
         (isNaN(+aa[3]) && !isNaN(+bb[3]))
@@ -115,7 +116,7 @@ class Settings {
         return isNaN(+aa[3]) ? -1 : 1;
       }
 
-      // at this point, either both version numbers are a NaN or 
+      // at this point, either both version numbers are a NaN or
       // both versions are a number.
       if (!isNaN(+aa[3])) {
         return +aa[3] - +bb[3];
@@ -168,7 +169,7 @@ class Settings {
       const updateFn = patches[index].updateFn;
       delete patches[index].forVersion;
       delete patches[index].updateFn;
-      
+
       if (Object.keys(patches[index]).length > 0) {
         ObjectCopy.overwrite(this.active, patches[index]);
       }
@@ -213,11 +214,11 @@ class Settings {
     // if there's no settings saved, return default settings.
     if(! settings || (Object.keys(settings).length === 0 && settings.constructor === Object)) {
       this.logger?.log(
-        'info', 
+        'info',
-        'settings', 
+        'settings',
-        '[Settings::init] settings don\'t exist. Using defaults.\n#keys:', 
+        '[Settings::init] settings don\'t exist. Using defaults.\n#keys:',
-        settings ? Object.keys(settings).length : 0, 
+        settings ? Object.keys(settings).length : 0,
-        '\nsettings:', 
+        '\nsettings:',
         settings
       );
       this.active = this.getDefaultSettings();
@@ -262,7 +263,7 @@ class Settings {
     // set 'whatsNewChecked' flag to false when updating, always
     this.active.whatsNewChecked = false;
     // update settings version to current
-    this.active.version = this.version; 
+    this.active.version = this.version;
 
     await this.save();
     return this.active;
@@ -270,7 +271,7 @@ class Settings {
 
   async get() {
     let ret;
-    
+
     ret = await browser.storage.local.get('uwSettings');
 
     this.logger?.log('info', 'settings', 'Got settings:', ret && ret.uwSettings && JSON.parse(ret.uwSettings));
@@ -350,18 +351,18 @@ class Settings {
   // -----------------------------------------
   // 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?
   //    statusEmbedded: <option>      // reserved for future... maybe
-  // } 
+  // }
-  //  
+  //
-  // Veljavne vrednosti za možnosti 
+  // Veljavne vrednosti za možnosti
   // Valid values for options:
   //
   //     status, arStatus, statusEmbedded:
-  //    
+  //
   //    * enabled     — always allow
   //    * basic       — only allow fullscreen
   //    * default     — allow if default is to allow, block if default is to block
@@ -405,7 +406,7 @@ class Settings {
       if (this.active.sites[site].mode === ExtensionMode.Enabled) {
         return ExtensionMode.Enabled;
       } else if (this.active.sites[site].mode === ExtensionMode.Basic) {
-        return ExtensionMode.Basic;            
+        return ExtensionMode.Basic;
       }  else if (this.active.sites[site].mode === ExtensionMode.Disabled) {
         return ExtensionMode.Disabled;
       } else {
@@ -415,7 +416,7 @@ class Settings {
           return ExtensionMode.Disabled;
         }
       }
-  
+
     } catch(e){
       this.logger?.log('error', 'settings', "[Settings.js::canStartExtension] Something went wrong — are settings defined/has init() been called?\n\nerror:", e, "\n\nSettings object:", this)
 
@@ -470,7 +471,7 @@ class Settings {
     }
 
     try {
-      if (!this.active.sites[site] 
+      if (!this.active.sites[site]
           || this.active.sites[site].keyboardShortcutsEnabled === undefined
           || this.active.sites[site].keyboardShortcutsEnabled === ExtensionMode.Default) {
         return this.keyboardShortcutsEnabled('@global');
@@ -518,7 +519,7 @@ class Settings {
       );
     // }
 
-    // if site is not defined, we use default mode:    
+    // if site is not defined, we use default mode:
     if (! this.active.sites[site]) {
       this.logger?.log('info', ['settings', 'aard', 'init', 'debug'], "[Settings::canStartAutoAr] Settings not defined for this site, returning defaults.", site, this.active.sites[site], this.active.sites);
       return this.active.sites['@global'].autoar === ExtensionMode.Enabled;
@@ -548,7 +549,7 @@ class Settings {
     if (!option || allDefault[option] === undefined) {
       return allDefault;
     }
-    
+
     return allDefault[option];
   }
 
@@ -561,7 +562,7 @@ class Settings {
     return this.active.miscSettings.defaultAr;
   }
 
-  getDefaultStretchMode(site) {
+  getDefaultStretchMode_legacy(site) {
     if (site && (this.active.sites[site]?.stretch ?? StretchType.Default) !== StretchType.Default) {
       return this.active.sites[site].stretch;
     }
@@ -585,6 +586,42 @@ class Settings {
 
     return this.active.sites['@global'].videoAlignment;
   }
+
+  /**
+   * Gets default site configuration. Only returns essential settings.
+   * @returns
+   */
+  getDefaultSiteConfiguration() {
+    return {
+      type: 'user-added',
+      defaultCrop: {
+        type: AspectRatioType.Automatic,    // AARD is enabled by default
+      },
+      defaultStretch: {
+        type: StretchType.NoStretch,        // because we aren't uncultured savages
+      },
+    }
+  }
+
+  /**
+   * Gets default cropping mode for extension.
+   * Returns site default if defined, otherwise it returns extension default.
+   * If extension default is not defined because extension updated but the
+   * settings didn't port over, we return automatic.
+   */
+  getDefaultCrop(site?: string) {
+    return this.active.sites[site ?? window.location.hostname]?.defaultCrop ?? this.active.crop?.default ?? {type: AspectRatioType.Automatic};
+  }
+
+  /**
+   * Gets default stretching mode for extension.
+   * Returns site default if defined, otherwise it returns extension default.
+   * If extension default is not defined because extension updated but the
+   * settings didn't port over, we return automatic.
+   */
+  getDefaultStretchMode(site?: string) {
+    return this.active.sites[site ?? window.location.hostname]?.defaultStretch ?? this.active.stretch.default ?? {type: StretchType.NoStretch};
+  }
 }
 
 export default Settings;

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

@@ -31,13 +31,13 @@ class Stretcher {
     this.conf = videoData;
     this.logger = videoData.logger;
     this.settings = videoData.settings;
-    this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
+    this.mode = this.settings.getDefaultStretchMode_legacy(window.location.hostname);
     this.fixedStretchRatio = undefined;
   }
 
   setStretchMode(stretchMode, fixedStretchRatio?) {
     if (stretchMode === StretchType.Default) {
-      this.mode = this.settings.getDefaultStretchMode(window.location.hostname);
+      this.mode = this.settings.getDefaultStretchMode_legacy(window.location.hostname);
     } else {
       if (stretchMode === StretchType.Fixed || stretchMode == StretchType.FixedSource) {
         this.fixedStretchRatio = fixedStretchRatio;