Cycle mode

src/common/enums/AspectRatioType.enum.ts

@@ -1,4 +1,5 @@
 enum AspectRatioType {
+  Cycle = -2,
   Initial = -1,        // page default
   Reset = 0,           // reset to initial
   Automatic = 1,       // we want to request automatic aspect ratio detection

src/ext/conf/ExtensionConf.ts

@@ -249,6 +249,23 @@ const ExtensionConf: SettingsInterface = {
         onKeyUp: true,
         onKeyDown: false,
       }
+    },{
+      action: 'set-ar',
+      label: 'Cycle',
+      comment: 'Cycle through crop options',
+      arguments: {
+        type: AspectRatioType.Cycle
+      },
+      shortcut: {
+        key: 'c',
+        code: 'KeyC',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: false,
+        onKeyUp: true,
+        onKeyDown: false,
+      }
     }, {
       action: 'set-ar',
       label: '21:9',
@@ -679,6 +696,13 @@ const ExtensionConf: SettingsInterface = {
       show: true,
       path: 'crop'
     }
+  }, {
+    name: 'Cycle aspect ratio',
+    label: 'Cycle',
+    cmd: [{
+      action: 'set-ar',
+      arg: AspectRatioType.Cycle
+    }]
   },{
     userAdded: true,
     name: 'Set aspect ratio to 16:9',

src/ext/lib/EventBus.ts

@@ -1,3 +1,4 @@
+import { IframeData } from './video-data/IframeManager';
 import CommsClient, { CommsOrigin } from './comms/CommsClient';
 import CommsServer from './comms/CommsServer';
 
@@ -169,7 +170,7 @@ export default class EventBus {
     window.removeEventListener('message', this.handleIframeMessage);
   }
   private handleIframeMessage(event: any) {
-    console.log('GOT IFRAME MESSAGE!', event)
+    // console.log('GOT IFRAME MESSAGE!', event)
   }
 
   //#endregion

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

@@ -227,7 +227,7 @@ class VideoData {
     this.resizer = new Resizer(this);
     this.arDetector = new ArDetector(this);  // this starts Ar detection. needs optional parameter that prevents ArDetector from starting
 
-    this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid, '\nextension mode:', this.extensionMode)
+    this.logger.log('info', ['debug', 'init'], '[VideoData::ctor] Created videoData with vdid', this.vdid);
 
 
     // Everything is set up at this point. However, we are still purely "read-only" at this point. Player CSS should not be changed until

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

@@ -69,12 +69,28 @@ class Resizer {
   pan: any = null;
   //#endregion
 
+  cycleableAspectRatios: Ar[];
+  nextCycleOptionIndex = 0;
+
+
   //#region event bus configuration
   private eventBusCommands = {
     'set-ar': [{
       function: (config: any) => {
         this.manualZoom = false; // this only gets called from UI or keyboard shortcuts, making this action safe.
+
+        if (config.type !== AspectRatioType.Cycle) {
           this.setAr(config);
+        } else {
+          // if we manually switched to a different aspect ratio, cycle from that ratio forward
+          const lastArIndex = this.cycleableAspectRatios.findIndex(x => x.type === this.lastAr.type && x.ratio === this.lastAr.ratio);
+          if (lastArIndex !== -1) {
+            this.nextCycleOptionIndex = (lastArIndex + 1) % this.cycleableAspectRatios.length;
+          }
+
+          this.setAr(this.cycleableAspectRatios[this.nextCycleOptionIndex]);
+          this.nextCycleOptionIndex = (this.nextCycleOptionIndex + 1) % this.cycleableAspectRatios.length;
+        }
       }
     }],
     'set-alignment': [{
@@ -124,6 +140,12 @@ class Resizer {
     //   this.canPan = false;
     // }
 
+    this.cycleableAspectRatios =
+      (this.settings?.active?.commands?.crop ?? [])
+        .filter(x => [AspectRatioType.FitHeight, AspectRatioType.FitWidth, AspectRatioType.Fixed, AspectRatioType.Reset].includes(x?.arguments?.type))
+        .map(x => x.arguments) as Ar[];
+
+    this.nextCycleOptionIndex = 0;
     this.userCssClassName = videoData.userCssClassName;
   }