Aspect ratio types were enumified.

src/common/enums/aspect-ratio.enum.js

@@ -0,0 +1,10 @@
+var AspectRatio = Object.freeze({
+  Initial: -1,
+  Reset: 0,
+  Automatic: 1,
+  FitWidth: 2,
+  FitHeight: 3,
+  Fixed: 4,
+});
+
+export default AspectRatio;

src/ext/conf/ActionList.js

@@ -1,24 +1,26 @@
 import VideoAlignment from '../../common/enums/video-alignment.enum';
 import Stretch from '../../common/enums/stretch.enum';
 import ExtensionMode from '../../common/enums/extension-mode.enum';
+import AspectRatio from '../../common/enums/aspect-ratio.enum';
 
 var ActionList = {
   'set-ar': {
     name: 'Set aspect ratio',
     args: [{
       name: 'Automatic',
-      arg: 'auto',
+      arg: AspectRatio.Automatic,
     },{
       name: 'Fit width',
-      arg: 'fitw'
+      arg: AspectRatio.FitWidth,
     },{
       name: 'Fit height',
-      arg: 'fith',
+      arg: AspectRatio.FitHeight,
     },{
       name: 'Reset',
-      arg: 'reset',
+      arg: AspectRatio.Reset,
     },{
-      name: 'Ratio',
+      name: 'Manually specify ratio',
+      arg: AspectRatio.Fixed,
       customArg: true,
       hintHTML: '',
     }],

src/ext/conf/Debug.js

@@ -7,7 +7,7 @@ var Debug = {
   init: true,
   debug: true,
   // debug: false,
-  // keyboard: true,
+  keyboard: true,
   // debugResizer: true,
   // debugArDetect: true,
   // debugStorage: false,

src/ext/conf/ExtensionConf.js

@@ -4,6 +4,7 @@ import VideoAlignment from '../../common/enums/video-alignment.enum';
 import Stretch from '../../common/enums/stretch.enum';
 import ExtensionMode from '../../common/enums/extension-mode.enum';
 import AntiGradientMode from '../../common/enums/anti-gradient-mode.enum';
+import AspectRatio from '../../common/enums/aspect-ratio.enum';
 
 if(Debug.debug)
   console.log("Loading: ExtensionConf.js");
@@ -163,7 +164,7 @@ var ExtensionConf = {
     label: 'Automatic',                     // name displayed in ui (can be overriden in scope/playerUi)
     cmd: [{
       action: 'set-ar',
-      arg: 'auto',
+      arg: AspectRatio.Automatic,
       persistent: false, // optional, false by default. If true, change doesn't take effect immediately.
                          // Instead, this action saves stuff to settings
     }],
@@ -197,7 +198,7 @@ var ExtensionConf = {
     label: 'Reset',
     cmd: [{
       action: 'set-ar',
-      arg: 'reset',
+      arg: AspectRatio.Reset,
     }],
     scopes: {
       page: {
@@ -222,7 +223,7 @@ var ExtensionConf = {
     label: 'Fit width',
     cmd: [{
       action: 'set-ar',
-      arg: 'fitw',
+      arg: AspectRatio.FitWidth,
     }],
     scopes: {
       page: {
@@ -247,7 +248,7 @@ var ExtensionConf = {
     label: 'Fit height',
     cmd: [{
       action: 'set-ar',
-      arg: 'fith',
+      arg: AspectRatio.FitHeight
     }],
     scopes: {
       page: {
@@ -272,7 +273,8 @@ var ExtensionConf = {
     label: '16:9',
     cmd: [{
       action: 'set-ar',
-      arg: 1.78,
+      arg: AspectRatio.Fixed,
+      customArg: 1.78,
     }],
     scopes: {
       page: {
@@ -297,7 +299,8 @@ var ExtensionConf = {
     label: '21:9',
     cmd: [{
       action: 'set-ar',
-      arg: 2.39,
+      arg: AspectRatio.Fixed,
+      customArg: 2.39
     }],
     scopes: {
       page: {
@@ -322,7 +325,8 @@ var ExtensionConf = {
     label: '18:9',
     cmd: [{
       action: 'set-ar',
-      arg: 2.0,
+      arg: AspectRatio.Fixed,
+      customArg: 2.0,
     }],
     scopes: {
       page: {

src/ext/lib/ActionHandler.js

@@ -180,7 +180,7 @@ class ActionHandler {
         for (var cmd of action.cmd) {
           if (action.scope === 'page') {
             if (cmd.action === "set-ar") {
-              this.pageInfo.setAr(cmd.arg);
+              this.pageInfo.setAr({type: cmd.arg, ratio: cmd.customArg});
             } else if (cmd.action === "change-zoom") {
               this.pageInfo.zoomStep(cmd.arg);
             } else if (cmd.action === "set-zoom") {

src/ext/lib/ar-detect/ArDetector.js

@@ -6,6 +6,7 @@ import EdgeDetectQuality from './edge-detect/enums/EdgeDetectQualityEnum';
 import GuardLine from './GuardLine';
 import DebugCanvas from './DebugCanvas';
 import VideoAlignment from '../../../common/enums/video-alignment.enum';
+import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 class ArDetector {
 
@@ -192,7 +193,7 @@ class ArDetector {
     this.resetBlackLevel();
 
     // if we're restarting ArDetect, we need to do this in order to force-recalculate aspect ratio
-    this.conf.resizer.setLastAr({type: "auto", ar: null});
+    this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: null});
 
     this.canvasImageDataRowLength = cwidth << 2;
     this.noLetterboxCanvasReset = false;
@@ -213,9 +214,9 @@ class ArDetector {
     if (Debug.debug) {
       console.log("%c[ArDetect::setup] Starting automatic aspect ratio detection.", _ard_console_start);
     }
-    if (this.conf.resizer.lastAr.type === 'auto') {
+    if (this.conf.resizer.lastAr.type === AspectRatio.Automatic) {
       // ensure first autodetection will run in any case
-      this.conf.resizer.setLastAr({type: 'auto', ar: null});
+      this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: null});
     }
 
     // launch main() if it's currently not running:
@@ -475,7 +476,7 @@ class ArDetector {
     // poglejmo, če se je razmerje stranic spremenilo
     // check if aspect ratio is changed:
     var lastAr = this.conf.resizer.getLastAr();
-    if( lastAr.type == "auto" && lastAr.ar != null){
+    if( lastAr.type === AspectRatio.Automatic && lastAr.ar != null){
       // spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic
       // že nastavili.
       //
@@ -509,7 +510,7 @@ class ArDetector {
       console.log("%c[ArDetect::processAr] Triggering aspect ratio change. New aspect ratio: ", _ard_console_change, trueAr);
     }
     
-    this.conf.resizer.setAr(trueAr, {type: "auto", ar: trueAr});
+    this.conf.resizer.setAr({type: AspectRatio.Automatic, ratio: trueAr}, {type: AspectRatio.Automatic, ratio: trueAr});
   }
 
   frameCheck(){
@@ -599,7 +600,7 @@ class ArDetector {
       // If we don't detect letterbox, we reset aspect ratio to aspect ratio of the video file. The aspect ratio could
       // have been corrected manually. It's also possible that letterbox (that was there before) disappeared.
       console.log("FAST LETTERBOX PRESENCE TEST FAILED, CALLING RESET")
-      this.conf.resizer.reset({type: "auto", ar: null});
+      this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null});
       this.guardLine.reset();
       this.noLetterboxCanvasReset = true;
 
@@ -638,7 +639,7 @@ class ArDetector {
     // (since the new letterbox edge isn't present in our sample due to technical
     // limitations)
     if (this.fallbackMode && guardLineOut.blackbarFail) {
-      this.conf.resizer.reset({type: "auto", ar: null});
+      this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null});
       this.guardLine.reset();
       this.noLetterboxCanvasReset = true;
 
@@ -664,7 +665,7 @@ class ArDetector {
           }
 
           if(guardLineOut.blackbarFail){
-            this.conf.resizer.reset({type: "auto", ar: null});
+            this.conf.resizer.reset({type: AspectRatio.Automatic, ar: null});
             this.guardLine.reset();
           }
 

src/ext/lib/comms/CommsClient.js

@@ -65,7 +65,7 @@ class CommsClient {
     }
 
     if (message.cmd === "set-ar") {
-      this.pageInfo.setAr(message.arg, message.playing);
+      this.pageInfo.setAr({type: message.arg, ratio: message.customArg}, message.playing);
     } else if (message.cmd === 'set-alignment') {
       this.pageInfo.setvideoAlignment(message.arg, message.playing);
       this.pageInfo.restoreAr();

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

@@ -1,6 +1,7 @@
 import Debug from '../../conf/Debug';
 import VideoData from './VideoData';
 import RescanReason from './enums/RescanReason';
+import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 if(Debug.debug)
   console.log("Loading: PageInfo.js");
@@ -308,7 +309,7 @@ class PageInfo {
       console.log('[PageInfo::setAr] aspect ratio:', ar, "playing only?", playingOnly)
     }
 
-    if (ar !== 'auto') {
+    if (ar.type !== AspectRatio.Automatic) {
       this.stopArDetection(playingOnly);
     } else {
       if (Debug.debug) {
@@ -330,7 +331,7 @@ class PageInfo {
     }
 
     // TODO: find a way to only change aspect ratio for one video
-    if (ar === 'reset') {
+    if (ar === AspectRatio.Reset) {
       for (var vd of this.videos) {
         if (!playingOnly || vd.isPlaying()) {
           vd.resetAr();

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

@@ -1,5 +1,6 @@
 import Debug from '../../conf/Debug';
 import ExtensionMode from '../../../common/enums/extension-mode.enum'
+import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 if(Debug.debug)
   console.log("Loading: PlayerData.js");
@@ -199,7 +200,7 @@ class PlayerData {
 
         this.videoData.resizer.restore();
 
-        if (lastAr.type === 'original' || lastAr.type === 'auto') {
+        if (lastAr.type === 'original' || lastAr.type === AspectRatio.Automatic) {
           this.videoData.rebootArDetection();
         }
       } else {

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

@@ -6,6 +6,7 @@ import PlayerData from '../video-data/PlayerData';
 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';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");
@@ -39,7 +40,7 @@ class Resizer {
 
     
     // this.lastAr = this.settings.getDefaultAr();                 // this is the aspect ratio we start with
-    this.lastAr = {type: 'original'};
+    this.lastAr = {type: AspectRatio.Initial};
     this.videoAlignment = this.settings.getDefaultVideoAlignment(window.location.hostname); // this is initial video alignment
     this.destroyed = false;
 
@@ -71,6 +72,61 @@ class Resizer {
     this.stopCssWatcher();
   }
 
+  calculateRatioForLegacyOptions(ar){
+    // also present as modeToAr in Scaler.js
+    if (ar.ratio) {
+      return ar.ratio;
+    }
+    // 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 AspectRatio.Reset. No zoom tho
+    var ratioOut;
+
+    if (!this.conf.video) {
+      if(Debug.debug){
+        console.log("[Scaler.js::modeToAr] No video??",this.conf.video, "killing videoData");
+      }
+      this.conf.destroy();
+      return null;
+    }
+
+    
+    if(! this.conf.player.dimensions ){
+      ratioOut = screen.width / screen.height;
+    }
+    else {
+      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). 
+    
+    var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
+      
+    if (ar.type === AspectRatio.FitWidth){
+      ratioOut > fileAr ? ratioOut : fileAr
+      ar.ratio = ratioOut;
+      return ratioOut;
+    }
+    else if(ar.type === AspectRatio.FitHeight){
+      ratioOut < fileAr ? ratioOut : fileAr
+      ar.ratio = ratioOut;
+      return ratioOut;
+    }
+    else if(ar.type === AspectRatio.Reset){
+      if(Debug.debug){
+        console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
+      }
+      ar.ar = fileAr;
+      return fileAr;
+    }
+
+    return null;
+  }
+
 
   setAr(ar, lastAr){
     if (this.destroyed) {
@@ -81,7 +137,7 @@ class Resizer {
       console.log('[Resizer::setAr] <rid:'+this.resizerId+'> trying to set ar. New ar:', ar)
     }
 
-    if (ar === null) {
+    if (ar == null) {
       return;
     }
 
@@ -89,13 +145,16 @@ class Resizer {
       this.lastAr = lastAr;
     } else {
       if(isNaN(ar)){
-        this.lastAr = {type: 'legacy', ar: ar}
+        // NOTE: "fitw" "fith" and "reset" should ignore ar.ratio bit, but
+        // I'm not sure whether they do. Check that.
+        this.lastAr = {type: ar.type, ratio: ar.ratio}
+        this.calculateRatioForLegacyOptions(ar);
       } else {
-        this.lastAr = {type: 'static', ar: ar};
+        throw 'Ar was passed as a number rather than an object. You missed one.'
       }
     }
 
-    if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar !== 'reset') {
+    if (this.extensionMode === ExtensionMode.Basic && !PlayerData.isFullScreen() && ar.type !== AspectRatio.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; 
@@ -117,7 +176,7 @@ class Resizer {
       if (this.stretcher.mode === Stretch.Basic) {
         this.conf.arDetector.pause();
       } else {
-        if (this.lastAr.type === 'auto') {
+        if (this.lastAr.type === AspectRatio.Automatic) {
           this.conf.arDetector.unpause();
         }
       }
@@ -139,7 +198,7 @@ class Resizer {
         return;
       }
       if(this.stretcher.mode === Stretch.Conditional){
-         this.stretcher.applyConditionalStretch(stretchFactors, ar);
+         this.stretcher.applyConditionalStretch(stretchFactors, ar.ratio);
       }
 
       if (Debug.debug) {
@@ -147,7 +206,7 @@ class Resizer {
       }
 
     } else if (this.stretcher.mode === Stretch.Hybrid) {
-      var stretchFactors = this.stretcher.calculateStretch(ar);
+      var stretchFactors = this.stretcher.calculateStretch(ar.ratio);
       if (Debug.debug) {
         console.log('[Resizer::setAr] Processed stretch factors for hybrid stretch/crop. Stretch factors are:', stretchFactors);
       }
@@ -172,7 +231,7 @@ class Resizer {
   }
 
   resetLastAr() {
-    this.lastAr = {type: 'original'};
+    this.lastAr = {type: AspectRatio.Initial};
   }
 
   setLastAr(override){
@@ -259,7 +318,6 @@ class Resizer {
     }
 
     if(timeout === undefined) {
-      console.log("?")
       this.cssCheck(); // no timeout = one-off
       return;
     }
@@ -282,7 +340,9 @@ class Resizer {
   }
 
   stopCssWatcher() {
-    if(Debug.debug) console.log("[Resizer.js] STOPPING CSS WATCHER!")
+    if (Debug.debug) {
+      console.log("[Resizer.js] STOPPING CSS WATCHER!")
+    }
 
     clearInterval(this.cssWatcherTimeout);
   }
@@ -295,15 +355,15 @@ class Resizer {
     // this is true until we verify that css has actually been applied
     this.restore_wd = true;
     
-    if(this.lastAr.type === 'original'){
+    if(this.lastAr.type === AspectRatio.Initial){
-      this.setAr('reset');
+      this.setAr({type: AspectRatio.Reset});
     }
     else {
-      if (this.lastAr && this.lastAr.ar === null) {
+      if (this.lastAr && this.lastAr.ratio === null) {
         console.log("[Resizer::restore] LAST AR IS NULL")
         throw "Last ar is null!"
       }
-      this.setAr(this.lastAr.ar, this.lastAr)
+      this.setAr(this.lastAr, this.lastAr)
     }
   }
 
@@ -311,7 +371,7 @@ class Resizer {
     this.setStretchMode(this.settings.active.sites[window.location.hostname] ? this.settings.active.sites[window.location.hostname].stretch : this.settings.active.sites['@global'].stretch);
     this.zoom.setZoom(1);
     this.resetPan();
-    this.setAr('reset');
+    this.setAr({type: AspectRatio.Reset});
   }
 
   setPanMode(mode) {
@@ -342,7 +402,7 @@ class Resizer {
   }
 
   resetCrop(){
-    this.setAr('reset');
+    this.setAr({type: AspectRatio.Reset});
   }
 
   resetStretch(){

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

@@ -1,4 +1,5 @@
 import Debug from '../../conf/Debug';
+import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 
 // računa velikost videa za približevanje/oddaljevanje
 // does video size calculations for zooming/cropping
@@ -11,12 +12,15 @@ class Scaler {
   constructor(videoData) {
     this.conf = videoData;
   }
-
+  
-  modeToAr(mode){
+  modeToAr(ar){
+    if (ar.ratio) {
+      return ar.ratio; 
+    }
     // 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 'reset'. No zoom tho
+    // handles "legacy" options, such as 'fit to widht', 'fit to height' and AspectRatio.Reset. No zoom tho
-    var ar;
+    var ratioOut;
 
     if (!this.conf.video) {
       if(Debug.debug){
@@ -28,10 +32,10 @@ class Scaler {
 
     
     if(! this.conf.player.dimensions ){
-      ar = screen.width / screen.height;
+      ratioOut = screen.width / screen.height;
     }
     else {
-      ar = 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,
@@ -42,26 +46,28 @@ class Scaler {
     
     var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
       
-    if (mode == "fitw"){
+    if (ar.type === AspectRatio.FitWidth){
-      return ar > fileAr ? ar : fileAr;
+      ratioOut > fileAr ? ratioOut : fileAr
+      ar.ratio = ratioOut;
+      return ratioOut;
     }
-    else if(mode == "fith"){
+    else if(ar.type === AspectRatio.FitHeight){
-      return ar < fileAr ? ar : fileAr;
+      ratioOut < fileAr ? ratioOut : fileAr
+      ar.ratio = ratioOut;
+      return ratioOut;
     }
-    else if(mode == "reset"){
+    else if(ar.type === AspectRatio.Reset){
       if(Debug.debug){
         console.log("[Scaler.js::modeToAr] Using original aspect ratio -", fileAr)
       }
-
+      ar.ar = fileAr;
       return fileAr;
     }
 
     return null;
   }
 
-  calculateCrop(mode) {
+  calculateCrop(ar) {
-    
-  
     if(!this.conf.video || this.conf.video.videoWidth == 0 || this.conf.video.videoHeight == 0){
       if(Debug.debug)
         console.log("[Scaler::calculateCrop] ERROR — no video detected.");
@@ -74,27 +80,21 @@ class Scaler {
     // če je 'ar' string, potem bomo z njim opravili v legacy wrapperju. Seveda obstaja izjema
     // if 'ar' is string, we'll handle that in legacy wrapper, with one exception
 
-    if (mode === 'reset'){
+    if (ar.type === AspectRatio.Reset){
       return {xFactor: 1, yFactor: 1}
     }
 
-
+    var ratio = this.modeToAr(ar);
-    var ar = 0;
-    if(isNaN(mode)){
-      ar = this.modeToAr(mode);
-    } else {
-      ar = mode;
-    }
 
     // handle fuckie-wuckies
-    if (! ar){
+    if (! ratio){
       if(Debug.debug)
-        console.log("[Scaler::calculateCrop] no ar?", ar, " -- we were given this mode:", mode);
+        console.log("[Scaler::calculateCrop] no ar?", ratio, " -- we were given this mode:", ar);
-      return {error: "no_ar", ar: ar};
+      return {error: "no_ar", ratio: ratio};
     }
 
     if(Debug.debug)
-      console.log("[Scaler::calculateCrop] trying to set ar. args are: ar->",ar,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
+      console.log("[Scaler::calculateCrop] trying to set ar. args are: ar->",ratio,"; this.conf.player.dimensions->",this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
 
     if( (! this.conf.player.dimensions) || this.conf.player.dimensions.width === 0 || this.conf.player.dimensions.height === 0 ){
       if(Debug.debug)
@@ -105,18 +105,17 @@ class Scaler {
     // zdaj lahko končno začnemo računati novo velikost videa
     // we can finally start computing required video dimensions now:
 
-
     // Dejansko razmerje stranic datoteke/<video> značke
     // Actual aspect ratio of the file/<video> tag
     var fileAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
     var playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
 
-    if(mode == "default" || !ar)
+    if(ar.type == AspectRatio.Initial || !ratio)
-      ar = fileAr;
+      ratio = fileAr;
 
   
     if(Debug.debug)
-      console.log("[Scaler::calculateCrop] ar is " ,ar, ", file ar is", fileAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
+      console.log("[Scaler::calculateCrop] ar is " ,ratio, ", file ar is", fileAr, ", this.conf.player.dimensions are ", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
     
     var videoDimensions = {
       xFactor: 1,
@@ -129,15 +128,15 @@ class Scaler {
     //   console.log("[Scaler::calculateCrop] Player dimensions?", this.conf.player.dimensions.width, "×", this.conf.player.dimensions.height, "| obj:", this.conf.player.dimensions);
     // }
   
-    if( fileAr < ar ){
+    if( fileAr < ratio ){
       // imamo letterbox zgoraj in spodaj -> spremenimo velikost videa (a nikoli širše od ekrana)
       // letterbox -> change video size (but never to wider than monitor width)
 
-        videoDimensions.xFactor = Math.min(ar, playerAr) / fileAr;
+        videoDimensions.xFactor = Math.min(ratio, playerAr) / fileAr;
         videoDimensions.yFactor = videoDimensions.xFactor;
     }
     else {
-        videoDimensions.xFactor = fileAr / Math.min(ar, playerAr);
+        videoDimensions.xFactor = fileAr / Math.min(ratio, playerAr);
         videoDimensions.yFactor = videoDimensions.xFactor;
     }
     

src/options/controls-settings/add-edit-action-popup.vue

@@ -154,7 +154,7 @@ export default {
     parseCommand(cmd) {
       let cmdstring = '';
       for(const c of cmd) {
-        cmdstring += `${c.action} ${c.arg}${c.persistent ? ' persistent' : ''}; `;
+        cmdstring += `${c.action} ${c.arg} ${c.customArg ? '' : c.customArg} | ${c.persistent ? ' persistent' : ''}; `;
       }
       return cmdstring;
     },
@@ -188,22 +188,22 @@ export default {
     deleteCommand(index) {
       this.action.cmd.splice(index,1);
     },
-    updateCommand(action, arg) {
+    updateCommand(action, arg, customArg) {
       this.addEditCommand = false;
       if (this.currentCmdIndex < 0) {
         this.action.cmd.push({
           cmd: action,
           arg: arg,
+          customArg: customArg,
         });
       } else {
         this.action.cmd[this.currentCmdIndex] = {
           cmd: action,
           arg: arg,
+          customArg: customArg,
         };
       }
       this.action = JSON.parse(JSON.stringify(this.action));
-
-      // this.$nextTick(function() {this.$forceUpdate()});
     }
   }
 }

src/options/controls-settings/command-builder/command-add-edit.vue

@@ -38,9 +38,9 @@
                   @change="setArgument($event.target.value)"
           >
             <option :value="undefined" selected disabled>Select ...</option>
-            <option v-for="(arg, key) of ActionList[selectedAction].args"
+            <option v-for="arg of ActionList[selectedAction].args"
-                    :key="key"
+                    :key="arg.arg"
-                    :value="key"
+                    :value="arg.arg"
             >
               {{arg.name}}
             </option>
@@ -116,7 +116,7 @@ export default {
         name: ActionList[this.action.cmd].args.find(x => x.arg === this.action.arg) || ActionList[this.action.cmd].args.find(x => x.customArg),
         arg: this.action.arg
       }
-      this.customArgumentValue = this.action.arg;
+      this.customArgumentValue = this.action.customArg;
     }
     
     // console.log("this.actionList", ActionList, this.ActionList)
@@ -139,14 +139,16 @@ export default {
       this.customArgumentValue = undefined;
     },
     setArgument(arg) {
-      this.selectedArgument = ActionList[this.selectedAction].args[arg];
+      console.log("SETTING ARG:", arg)
+      this.selectedArgument = ActionList[this.selectedAction].args.find(x => x.arg === arg);
       this.customArgumentValue = undefined;
     },
     emitCommand() {
       this.$emit(
         'set-command',
         this.selectedAction,
-        this.customArgumentValue ? this.customArgumentValue : this.selectedArgument.arg
+        this.selectedArgument.arg,
+        this.customArgumentValue
       );
     }
   }

src/res/popup/js/popup.js

@@ -15,7 +15,7 @@ var hasVideos = false;
 var zoom_videoScale = 1;
 
 var _config; 
-var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" }
+var _changeAr_button_shortcuts = { "autoar":"none", AspectRatio.Reset:"none", "219":"none", "189":"none", "169":"none", "custom":"none" }
 
 var comms = new Comms();
 var settings = new Settings(undefined, () => updateConfig());