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,9 +1368,9 @@ 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
   // }
   //

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");
@@ -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;