From 289f41c2536cb337890f7f1a31ba662aef5f4fb8 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:36:01 +0100
Subject: [PATCH] feat: Camera mirror option (macOS)

---
 apps/desktop/src/components/icons/Flip.tsx    | 16 +++++++++
 .../desktop/src/components/windows/Camera.tsx | 35 +++++++++++++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 apps/desktop/src/components/icons/Flip.tsx

diff --git a/apps/desktop/src/components/icons/Flip.tsx b/apps/desktop/src/components/icons/Flip.tsx
new file mode 100644
index 00000000..273ddd77
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/desktop/src/components/windows/Camera.tsx b/apps/desktop/src/components/windows/Camera.tsx
index b5f1f486..d9e36466 100644
--- a/apps/desktop/src/components/windows/Camera.tsx
+++ b/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}