fix: prevent mirror review of screen recording

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" && (

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}
         />
       )}