Refactor video flip and rotate

Andrews54757 · Nov 18, 2024 · 563298d · 563298d
1 parent 4bebbba
commit 563298d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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(' ');
   }
 }