feat: Camera mirror option (macOS)

apps/desktop/src/components/icons/Flip.tsx

@@ -0,0 +1,16 @@
+export const Flip = ({ className }: { className: string }) => {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ >
+ <path d="M8 3H5a2 2 0 00-2 2v14c0 1.1.9 2 2 2h3M16 3h3a2 2 0 012 2v14a2 2 0 01-2 2h-3M12 20v2M12 14v2M12 8v2M12 2v2"></path>
+ </svg>
+ );
+};

apps/desktop/src/components/windows/Camera.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { use, useEffect, useRef, useState } from "react";
 import { useMediaDevices } from "@/utils/recording/MediaDeviceContext";
 import { CloseX } from "@/components/icons/CloseX";
+import { Flip } from "@/components/icons/Flip";
 import { emit } from "@tauri-apps/api/event";
 
 export const Camera = () => {
@@ -11,6 +12,9 @@ export const Camera = () => {
  const { selectedVideoDevice } = useMediaDevices();
  const [isLoading, setIsLoading] = useState(true);
  const tauriWindowImport = import("@tauri-apps/api/window");
+ const [cameraMirrored, setCameraMirrored] = useState(
+ localStorage.getItem("cameraMirrored") || "false"
+ );
 
  useEffect(() => {
  if (!videoRef.current || !selectedVideoDevice) return;
@@ -44,6 +48,17 @@ export const Camera = () => {
  };
  }, [selectedVideoDevice]);
 
+ const mirrorCamera = () => {
+ if (videoRef.current) {
+ const video = videoRef.current;
+ const newCameraMirrored = cameraMirrored === "true" ? "false" : "true";
+ video.style.transform =
+ newCameraMirrored === "true" ? "scaleX(-1)" : "scaleX(1)";
+ setCameraMirrored(newCameraMirrored);
+ localStorage.setItem("cameraMirrored", newCameraMirrored);
+ }
+ };
+
  const setWindowSize = async (type: "sm" | "lg") => {
  if (typeof window === "undefined") return;
 
@@ -91,6 +106,14 @@ export const Camera = () => {
  });
  };
 
+ useEffect(() => {
+ if (videoRef.current) {
+ const video = videoRef.current;
+ video.style.transform =
+ cameraMirrored === "true" ? "scaleX(-1)" : "scaleX(1)";
+ }
+ }, []);
+
  return (
  <div
  data-tauri-drag-region
@@ -125,7 +148,7 @@ export const Camera = () => {
  </svg>
  </div>
  )}
- <div className="opacity-0 group-hover:opacity-100 absolute top-3 left-1/2 transform -translate-x-1/2 bg-gray-800 rounded-xl z-20 grid grid-cols-3 overflow-hidden">
+ <div className="opacity-0 group-hover:opacity-100 absolute top-3 left-1/2 transform -translate-x-1/2 bg-gray-800 rounded-xl z-20 grid grid-cols-4 overflow-hidden">
  <div
  onClick={() => {
  closeWindow();
@@ -152,6 +175,14 @@ export const Camera = () => {
  >
  <span className="w-3 h-3 bg-gray-200 rounded-full"></span>
  </div>
+ <div
+ onClick={mirrorCamera}
+ className="h-full flex items-center justify-center p-2 hover:bg-gray-900"
+ >
+ <div>
+ <Flip className="w-5 h-5 stroke-gray-200" />
+ </div>
+ </div>
  </div>
  <canvas
  ref={canvasRef}