From 302f21b47718431a5f5413f640d3c83b885e89f7 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Thu, 30 Mar 2023 00:43:30 +0200
Subject: [PATCH] Cycle mode

---
 src/common/enums/AspectRatioType.enum.ts |  1 +
 src/ext/conf/ExtensionConf.ts            | 24 ++++++++++++++++++++++++
 src/ext/lib/EventBus.ts                  |  3 ++-
 src/ext/lib/video-data/VideoData.ts      |  2 +-
 src/ext/lib/video-transform/Resizer.ts   | 24 +++++++++++++++++++++++-
 5 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/common/enums/AspectRatioType.enum.ts b/src/common/enums/AspectRatioType.enum.ts
index 72e1924..586030f 100644
--- a/src/common/enums/AspectRatioType.enum.ts
+++ b/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
diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts
index 17ee934..0aacff7 100644
--- a/src/ext/conf/ExtensionConf.ts
+++ b/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',
@@ -680,6 +697,13 @@ const ExtensionConf: SettingsInterface = {
       path: 'crop'
     }
   }, {
+    name: 'Cycle aspect ratio',
+    label: 'Cycle',
+    cmd: [{
+      action: 'set-ar',
+      arg: AspectRatioType.Cycle
+    }]
+  },{
     userAdded: true,
     name: 'Set aspect ratio to 16:9',
     label: '16:9',
diff --git a/src/ext/lib/EventBus.ts b/src/ext/lib/EventBus.ts
index 7442cf6..1f39ec4 100644
--- a/src/ext/lib/EventBus.ts
+++ b/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
diff --git a/src/ext/lib/video-data/VideoData.ts b/src/ext/lib/video-data/VideoData.ts
index ef0783c..c6bc12a 100644
--- a/src/ext/lib/video-data/VideoData.ts
+++ b/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
diff --git a/src/ext/lib/video-transform/Resizer.ts b/src/ext/lib/video-transform/Resizer.ts
index e54931c..505b89c 100644
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/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.
-        this.setAr(config);
+
+        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;
   }