From 563298d9f815637ec60a9aadd83d70129d7c0e04 Mon Sep 17 00:00:00 2001
From: Andrew S <andrews54757@gmail.com>
Date: Mon, 18 Nov 2024 08:23:41 -0600
Subject: [PATCH] Refactor video flip and rotate

---
 chrome/player/FastStreamClient.mjs     |  2 ++
 chrome/player/ui/KeybindManager.mjs    | 25 ++++++-------------------
 chrome/player/utils/CSSFilterUtils.mjs |  9 ++++++++-
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/chrome/player/FastStreamClient.mjs b/chrome/player/FastStreamClient.mjs
index 5e6777d..d7cf665 100644
--- a/chrome/player/FastStreamClient.mjs
+++ b/chrome/player/FastStreamClient.mjs
@@ -76,6 +76,8 @@ export class FastStreamClient extends EventEmitter {
       defaultQuality: 'Auto',
       toolSettings: Utils.mergeOptions(DefaultToolSettings, {}),
       videoDelay: 0,
+      videoFlip: 0,
+      videoRotate: 0,
       disableVisualFilters: false,
       maximumDownloaders: 6,
     };
diff --git a/chrome/player/ui/KeybindManager.mjs b/chrome/player/ui/KeybindManager.mjs
index 9054c17..e574c29 100644
--- a/chrome/player/ui/KeybindManager.mjs
+++ b/chrome/player/ui/KeybindManager.mjs
@@ -158,30 +158,17 @@ export class KeybindManager extends EventEmitter {
       this.client.interfaceController.subtitlesManager.toggleSubtitles();
     });
 
-    let flipIndex = 0;
-    let rotateIndex = 0;
-
-    const updateVideoTransform = () => {
-      const video = this.client.player.getVideo();
-      const str = [];
-      if (flipIndex !== 0) {
-        str.push(`scaleX(${flipIndex % 2 === 0 ? 1 : -1}) scaleY(${flipIndex > 1 ? -1 : 1})`);
-      }
-
-      if (rotateIndex !== 0) {
-        str.push(`rotate(${rotateIndex * 90}deg)`);
-      }
 
-      video.style.transform = str.join(' ');
-    };
     this.on('FlipVideo', (e) => {
-      flipIndex = (flipIndex + 1) % 4;
-      updateVideoTransform();
+      const options = this.client.options;
+      options.videoFlip = (options.videoFlip + 1) % 4;
+      this.client.updateCSSFilters();
     });
 
     this.on('RotateVideo', (e) => {
-      rotateIndex = (rotateIndex + 3) % 4;
-      updateVideoTransform();
+      const options = this.client.options;
+      options.videoRotate = (options.videoRotate + 3) % 4;
+      this.client.updateCSSFilters();
     });
 
     this.on('WindowedFullscreen', (e) => {
diff --git a/chrome/player/utils/CSSFilterUtils.mjs b/chrome/player/utils/CSSFilterUtils.mjs
index 4586fdf..c3e3765 100644
--- a/chrome/player/utils/CSSFilterUtils.mjs
+++ b/chrome/player/utils/CSSFilterUtils.mjs
@@ -53,10 +53,17 @@ export class CSSFilterUtils {
 
   static getTransformString(options) {
     const transforms = [];
-    if (options.videoZoom !== 1) {
+
+    if (options.videoFlip !== 0) {
+      transforms.push(`scaleX(${options.videoFlip % 2 === 0 ? options.videoZoom : -options.videoZoom}) scaleY(${options.videoFlip > 1 ? -options.videoZoom : options.videoZoom})`);
+    } else if (options.videoZoom !== 1) {
       transforms.push(`scale(${options.videoZoom})`);
     }
 
+    if (options.videoRotate !== 0) {
+      transforms.push(`rotate(${options.videoRotate * 90}deg)`);
+    }
+
     return transforms.join(' ');
   }
 }