Skip to content

Add webcam mirror toggle #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddharthvaddem merged 4 commits into from
Jun 2, 2026
Merged

Add webcam mirror toggle #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2349272
feat: add webcam mirror toggle
AjTheSpidey May 21, 2026
2cf09a8
fix: polish webcam mirror toggle
AjTheSpidey May 22, 2026
205ea55
fix: tidy webcam mirror settings
AjTheSpidey May 25, 2026
b56daae
Merge upstream main into webcam mirror toggle
AjTheSpidey Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/components/video-editor/SettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ import type {
ZoomFocusMode,
} from "./types";
import {
DEFAULT_WEBCAM_MIRRORED,
MAX_ZOOM_SCALE,
MIN_ZOOM_SCALE,
ROTATION_3D_PRESET_ORDER,
Expand Down Expand Up @@ -316,6 +317,8 @@ interface SettingsPanelProps {
onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
webcamMaskShape?: import("./types").WebcamMaskShape;
onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
webcamMirrored?: boolean;
onWebcamMirroredChange?: (mirrored: boolean) => void;
webcamSizePreset?: WebcamSizePreset;
onWebcamSizePresetChange?: (size: WebcamSizePreset) => void;
onWebcamSizePresetCommit?: () => void;
Expand Down Expand Up @@ -445,6 +448,8 @@ export function SettingsPanel({
onWebcamLayoutPresetChange,
webcamMaskShape = DEFAULT_WEBCAM_SETTINGS.maskShape,
onWebcamMaskShapeChange,
webcamMirrored = DEFAULT_WEBCAM_MIRRORED,
onWebcamMirroredChange,
webcamSizePreset = DEFAULT_WEBCAM_SETTINGS.sizePreset,
onWebcamSizePresetChange,
onWebcamSizePresetCommit,
Expand Down Expand Up @@ -1234,6 +1239,19 @@ export function SettingsPanel({
</SelectContent>
</Select>
</div>
{webcamLayoutPreset !== "no-webcam" && (
<div className="mt-2 flex items-center justify-between p-2 rounded-lg editor-control-surface">
<div className="text-[10px] font-medium text-slate-300">
{t("layout.mirrorWebcam")}
</div>
<Switch
checked={webcamMirrored}
onCheckedChange={onWebcamMirroredChange}
className="data-[state=checked]:bg-[#34B27B] scale-90"
aria-label={t("layout.mirrorWebcam")}
/>
</div>
)}
{webcamLayoutPreset === "picture-in-picture" && (
<div className="mt-2 p-2 rounded-lg editor-control-surface">
<div className="text-[10px] font-medium text-slate-300 mb-1.5">
Expand Down
16 changes: 15 additions & 1 deletion src/components/video-editor/VideoEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
} = editorState;
Expand Down Expand Up @@ -375,6 +376,7 @@ export default function VideoEditor() {
aspectRatio: normalizedEditor.aspectRatio,
webcamLayoutPreset: normalizedEditor.webcamLayoutPreset,
webcamMaskShape: normalizedEditor.webcamMaskShape,
webcamMirrored: normalizedEditor.webcamMirrored,
webcamSizePreset: normalizedEditor.webcamSizePreset,
webcamPosition: normalizedEditor.webcamPosition,
});
Expand Down Expand Up @@ -447,6 +449,8 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
Expand All @@ -471,6 +475,8 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
Expand Down Expand Up @@ -595,6 +601,7 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
exportQuality,
Expand Down Expand Up @@ -655,6 +662,8 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
Expand All @@ -663,7 +672,6 @@ export default function VideoEditor() {
gifSizePreset,
videoPath,
t,
webcamSizePreset,
],
);

Expand Down Expand Up @@ -1733,6 +1741,7 @@ export default function VideoEditor() {
annotationRegions,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
previewWidth,
Expand Down Expand Up @@ -1824,6 +1833,7 @@ export default function VideoEditor() {
annotationRegions,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
previewWidth,
Expand Down Expand Up @@ -1925,6 +1935,7 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored,
webcamSizePreset,
webcamPosition,
exportQuality,
Expand Down Expand Up @@ -2197,6 +2208,7 @@ export default function VideoEditor() {
webcamVideoPath={webcamVideoPath || undefined}
webcamLayoutPreset={webcamLayoutPreset}
webcamMaskShape={webcamMaskShape}
webcamMirrored={webcamMirrored}
webcamSizePreset={webcamSizePreset}
webcamPosition={webcamPosition}
onWebcamPositionChange={(pos) => updateState({ webcamPosition: pos })}
Expand Down Expand Up @@ -2340,6 +2352,8 @@ export default function VideoEditor() {
}
webcamMaskShape={webcamMaskShape}
onWebcamMaskShapeChange={(shape) => pushState({ webcamMaskShape: shape })}
webcamMirrored={webcamMirrored}
onWebcamMirroredChange={(mirrored) => pushState({ webcamMirrored: mirrored })}
webcamSizePreset={webcamSizePreset}
onWebcamSizePresetChange={(v) => updateState({ webcamSizePreset: v })}
onWebcamSizePresetCommit={commitState}
Expand Down
3 changes: 3 additions & 0 deletions src/components/video-editor/VideoPlayback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ interface VideoPlaybackProps {
webcamVideoPath?: string;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape?: import("./types").WebcamMaskShape;
webcamMirrored?: boolean;
webcamSizePreset?: WebcamSizePreset;
webcamPosition?: { cx: number; cy: number } | null;
onWebcamPositionChange?: (position: { cx: number; cy: number }) => void;
Expand Down Expand Up @@ -227,6 +228,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
webcamVideoPath,
webcamLayoutPreset,
webcamMaskShape,
webcamMirrored = false,
webcamSizePreset,
webcamPosition,
onWebcamPositionChange,
Expand Down Expand Up @@ -1909,6 +1911,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
clipPath: clipPath ?? undefined,
boxShadow: useClipPath ? "none" : webcamCssBoxShadow,
backgroundColor: "#000",
transform: webcamMirrored ? "scaleX(-1)" : undefined,
}}
onPointerDown={handleWebcamPointerDown}
onPointerMove={handleWebcamPointerMove}
Expand Down
8 changes: 8 additions & 0 deletions src/components/video-editor/projectPersistence.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ describe("projectPersistence media compatibility", () => {
aspectRatio: "16:9",
webcamLayoutPreset: "picture-in-picture",
webcamMaskShape: "circle",
webcamMirrored: true,
webcamSizePreset: 25,
webcamPosition: null,
exportQuality: "good",
exportFormat: "mp4",
Expand All @@ -68,6 +70,12 @@ describe("projectPersistence media compatibility", () => {
).toBe("rectangle");
});

it("normalizes webcam mirroring safely", () => {
expect(normalizeProjectEditor({ webcamMirrored: true }).webcamMirrored).toBe(true);
expect(normalizeProjectEditor({ webcamMirrored: false }).webcamMirrored).toBe(false);
expect(normalizeProjectEditor({ webcamMirrored: "yes" as never }).webcamMirrored).toBe(false);
});

it("normalizes blur region type and mosaic block size safely", () => {
const editor = normalizeProjectEditor({
annotationRegions: [
Expand Down
4 changes: 4 additions & 0 deletions src/components/video-editor/projectPersistence.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
DEFAULT_BLUR_INTENSITY,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_WEBCAM_MIRRORED,
DEFAULT_ZOOM_DEPTH,
DEFAULT_ZOOM_MOTION_BLUR,
MAX_BLUR_BLOCK_SIZE,
Expand Down Expand Up @@ -78,6 +79,7 @@ export interface ProjectEditorState {
aspectRatio: AspectRatio;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape: WebcamMaskShape;
webcamMirrored: boolean;
webcamSizePreset: WebcamSizePreset;
webcamPosition: WebcamPosition | null;
exportQuality: ExportQuality;
Expand Down Expand Up @@ -485,6 +487,8 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
editor.webcamMaskShape === "rounded"
? editor.webcamMaskShape
: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamMirrored:
typeof editor.webcamMirrored === "boolean" ? editor.webcamMirrored : DEFAULT_WEBCAM_MIRRORED,
webcamSizePreset:
typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
? Math.max(10, Math.min(50, editor.webcamSizePreset))
Expand Down
2 changes: 2 additions & 0 deletions src/components/video-editor/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export type WebcamMaskShape = "rectangle" | "circle" | "square" | "rounded";

export const DEFAULT_WEBCAM_MASK_SHAPE: WebcamMaskShape = "rectangle";

export const DEFAULT_WEBCAM_MIRRORED = false;

export interface WebcamPosition {
cx: number; // normalized horizontal center (0-1)
cy: number; // normalized vertical center (0-1)
Expand Down
4 changes: 3 additions & 1 deletion src/hooks/useEditorHistory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import type {
WebcamSizePreset,
ZoomRegion,
} from "@/components/video-editor/types";
import { DEFAULT_CROP_REGION } from "@/components/video-editor/types";
import { DEFAULT_CROP_REGION, DEFAULT_WEBCAM_MIRRORED } from "@/components/video-editor/types";
import type { AspectRatio } from "@/utils/aspectRatioUtils";

// Undoable state — selection IDs are intentionally excluded (undoing a
Expand All @@ -36,6 +36,7 @@ export interface EditorState {
aspectRatio: AspectRatio;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape: WebcamMaskShape;
webcamMirrored: boolean;
webcamSizePreset: WebcamSizePreset;
webcamPosition: WebcamPosition | null;
}
Expand All @@ -56,6 +57,7 @@ export const INITIAL_EDITOR_STATE: EditorState = {
aspectRatio: DEFAULT_EDITOR_LAYOUT_SETTINGS.aspectRatio,
webcamLayoutPreset: DEFAULT_WEBCAM_SETTINGS.layoutPreset,
webcamMaskShape: DEFAULT_WEBCAM_SETTINGS.maskShape,
webcamMirrored: DEFAULT_WEBCAM_MIRRORED,
webcamSizePreset: DEFAULT_WEBCAM_SETTINGS.sizePreset,
webcamPosition: DEFAULT_WEBCAM_SETTINGS.position,
};
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/ar/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "إطار مزدوج",
"webcamShape": "شكل الكاميرا",
"webcamSize": "حجم كاميرا الويب",
"noWebcam": "بدون كاميرا"
"noWebcam": "بدون كاميرا",
"mirrorWebcam": "عكس كاميرا الويب"
},
"effects": {
"title": "تأثيرات الفيديو",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/en/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Dual Frame",
"noWebcam": "No Webcam",
"webcamShape": "Camera Shape",
"webcamSize": "Webcam Size"
"webcamSize": "Webcam Size",
"mirrorWebcam": "Mirror Webcam"
},
"effects": {
"title": "Video Effects",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/es/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Marco dual",
"webcamShape": "Forma de cámara",
"webcamSize": "Tamaño de cámara",
"noWebcam": "Sin cámara"
"noWebcam": "Sin cámara",
"mirrorWebcam": "Reflejar cámara"
},
"effects": {
"title": "Efectos de video",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/fr/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Double cadre",
"webcamShape": "Forme de la caméra",
"webcamSize": "Taille de la caméra",
"noWebcam": "Sans webcam"
"noWebcam": "Sans webcam",
"mirrorWebcam": "Inverser la webcam"
},
"effects": {
"title": "Effets vidéo",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/it/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Doppio frame",
"noWebcam": "Nessuna webcam",
"webcamShape": "Forma fotocamera",
"webcamSize": "Dimensione webcam"
"webcamSize": "Dimensione webcam",
"mirrorWebcam": "Specchia webcam"
},
"effects": {
"title": "Effetti video",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/ja-JP/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "デュアルフレーム",
"webcamShape": "カメラの形状",
"webcamSize": "カメラのサイズ",
"noWebcam": "Webカメラなし"
"noWebcam": "Webカメラなし",
"mirrorWebcam": "Webカメラを反転"
},
"effects": {
"title": "動画効果",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/ko-KR/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"webcamShape": "카메라 모양",
"webcamSize": "웹캠 크기",
"dualFrame": "듀얼 프레임",
"noWebcam": "웹캠 없음"
"noWebcam": "웹캠 없음",
"mirrorWebcam": "웹캠 미러링"
},
"effects": {
"title": "비디오 효과",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/ru/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Двойной кадр",
"webcamShape": "Форма камеры",
"webcamSize": "Размер веб-камеры",
"noWebcam": "Без веб-камеры"
"noWebcam": "Без веб-камеры",
"mirrorWebcam": "Зеркалить веб-камеру"
},
"effects": {
"title": "Видеоэффекты",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/tr/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"webcamShape": "Kamera Şekli",
"dualFrame": "Çift Kare",
"webcamSize": "Webcam Boyutu",
"noWebcam": "Web kamerası yok"
"noWebcam": "Web kamerası yok",
"mirrorWebcam": "Web kamerasını aynala"
},
"effects": {
"title": "Video Efektleri",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/vi/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "Khung kép",
"webcamShape": "Hình dạng máy ảnh",
"webcamSize": "Kích thước Webcam",
"noWebcam": "Không có webcam"
"noWebcam": "Không có webcam",
"mirrorWebcam": "Lật webcam"
},
"effects": {
"title": "Hiệu ứng video",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/zh-CN/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"dualFrame": "双画框",
"webcamShape": "摄像头形状",
"webcamSize": "摄像头大小",
"noWebcam": "无摄像头"
"noWebcam": "无摄像头",
"mirrorWebcam": "镜像摄像头"
},
"effects": {
"title": "视频效果",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/locales/zh-TW/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
"dualFrame": "雙畫框",
"webcamShape": "攝影機形狀",
"webcamSize": "攝影機大小",
"noWebcam": "無網路攝影機"
"noWebcam": "無網路攝影機",
"mirrorWebcam": "鏡像攝影機"
},
"effects": {
"title": "影片效果",
Expand Down
Loading
Loading