diff --git a/js/src/features/compose/compose-overlay.tsx b/js/src/features/compose/compose-overlay.tsx index 39331b4..c3e69c2 100644 --- a/js/src/features/compose/compose-overlay.tsx +++ b/js/src/features/compose/compose-overlay.tsx @@ -503,6 +503,7 @@ export function ComposeOverlay({ isDragging={isDragging} dropZoneProps={dropZoneProps} mirror={true} + objectFit="cover" /> )} {step === "reviewing" && recordingSource === "screen" && reviewBlob && ( @@ -519,6 +520,7 @@ export function ComposeOverlay({ isDragging={isDragging} dropZoneProps={dropZoneProps} mirror={false} + objectFit="contain" /> )} {step === "typing" && ( diff --git a/js/src/features/compose/recording-overlay.tsx b/js/src/features/compose/recording-overlay.tsx index 914ecae..82a9dc3 100644 --- a/js/src/features/compose/recording-overlay.tsx +++ b/js/src/features/compose/recording-overlay.tsx @@ -25,8 +25,10 @@ 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 the video horizontally. Defaults to true (selfie-view for webcam). */ mirror?: boolean; + /** How video fills its container. Defaults to "cover". Use "contain" for screen recordings. */ + objectFit?: "cover" | "contain"; } function RecordingTimer() { @@ -55,10 +57,12 @@ function ReviewPlayback({ blob, isVideo, mirror = true, + objectFit = "cover", }: { blob: Blob; isVideo: boolean; mirror?: boolean; + objectFit?: "cover" | "contain"; }) { const urlRef = useRef(null); const [objectUrl, setObjectUrl] = useState(null); @@ -86,7 +90,7 @@ function ReviewPlayback({ autoPlay loop playsInline - className={`absolute inset-0 h-full w-full object-cover${mirror ? " -scale-x-100" : ""}`} + className={`absolute inset-0 h-full w-full ${objectFit === "contain" ? "object-contain" : "object-cover"}${mirror ? " -scale-x-100" : ""}`} /> ); } @@ -124,6 +128,7 @@ export function RecordingOverlay({ isDragging, dropZoneProps, mirror = true, + objectFit = "cover", }: RecordingOverlayProps) { const videoRef = useRef(null); const recordingAudioSource = useAudioSource(mediaStream ?? null); @@ -182,6 +187,7 @@ export function RecordingOverlay({ blob={reviewBlob} isVideo={recordingMode === "video"} mirror={mirror} + objectFit={objectFit} /> )}