From b2dbd65c197c09b780909fec2654a66d7c3908b3 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 8 Apr 2026 16:38:10 -0700
Subject: [PATCH] fix: prevent mirror review of screen recording

---
 js/src/features/compose/compose-overlay.tsx   | 3 +++
 js/src/features/compose/recording-overlay.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/js/src/features/compose/compose-overlay.tsx b/js/src/features/compose/compose-overlay.tsx
index 0074ad4..140f46c 100644
--- a/js/src/features/compose/compose-overlay.tsx
+++ b/js/src/features/compose/compose-overlay.tsx
@@ -164,6 +164,7 @@ export function ComposeOverlay({
     stopRecording: stopScreenRecording,
     cancelRecording: cancelScreenRecording,
   } = useScreenRecorder({
+    mode: recordingMode,
     onFinish: (blob, durationMs, mimeType) => {
       setStepSync("reviewing");
       setReviewBlob(blob);
@@ -496,6 +497,7 @@ export function ComposeOverlay({
           onAddFiles={openFilePicker}
           isDragging={isDragging}
           dropZoneProps={dropZoneProps}
+          mirror={true}
         />
       )}
       {step === "reviewing" && recordingSource === "screen" && reviewBlob && (
@@ -511,6 +513,7 @@ export function ComposeOverlay({
           onAddFiles={openFilePicker}
           isDragging={isDragging}
           dropZoneProps={dropZoneProps}
+          mirror={false}
         />
       )}
       {step === "typing" && (
diff --git a/js/src/features/compose/recording-overlay.tsx b/js/src/features/compose/recording-overlay.tsx
index 8615622..914ecae 100644
--- a/js/src/features/compose/recording-overlay.tsx
+++ b/js/src/features/compose/recording-overlay.tsx
@@ -25,6 +25,8 @@ interface RecordingOverlayProps {
     onDragLeave: (e: React.DragEvent) => void;
     onDrop: (e: React.DragEvent) => void;
   };
+  /** Mirror the video horizontally. Defaults to true (selfie-view for webcam). Set false for screen recordings. */
+  mirror?: boolean;
 }
 
 function RecordingTimer() {
@@ -52,9 +54,11 @@ function RecordingTimer() {
 function ReviewPlayback({
   blob,
   isVideo,
+  mirror = true,
 }: {
   blob: Blob;
   isVideo: boolean;
+  mirror?: boolean;
 }) {
   const urlRef = useRef<string | null>(null);
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
@@ -82,7 +86,7 @@ function ReviewPlayback({
         autoPlay
         loop
         playsInline
-        className="absolute inset-0 h-full w-full -scale-x-100 object-cover"
+        className={`absolute inset-0 h-full w-full object-cover${mirror ? " -scale-x-100" : ""}`}
       />
     );
   }
@@ -119,6 +123,7 @@ export function RecordingOverlay({
   onAddFiles,
   isDragging,
   dropZoneProps,
+  mirror = true,
 }: RecordingOverlayProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const recordingAudioSource = useAudioSource(mediaStream ?? null);
@@ -176,6 +181,7 @@ export function RecordingOverlay({
         <ReviewPlayback
           blob={reviewBlob}
           isVideo={recordingMode === "video"}
+          mirror={mirror}
         />
       )}