From 540f2130144fd0ad78bc809f1e2ab37d8e5ddfc6 Mon Sep 17 00:00:00 2001
From: SocioWire <admin@sociowire.com>
Date: Wed, 7 Jan 2026 20:33:53 +0000
Subject: [PATCH] Add camera switch button to live broadcast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add button to toggle front/back camera
- Shows spinner while switching
- Works before and during live stream

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Live/LiveKitBroadcast.jsx | 55 ++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/components/Live/LiveKitBroadcast.jsx b/src/components/Live/LiveKitBroadcast.jsx
index 9bfaf69..b50fe79 100644
--- a/src/components/Live/LiveKitBroadcast.jsx
+++ b/src/components/Live/LiveKitBroadcast.jsx
@@ -19,6 +19,8 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
   const [localStream, setLocalStream] = useState(null);
   const [showConfirm, setShowConfirm] = useState(false);
   const [livePostId, setLivePostId] = useState(null);
+  const [facingMode, setFacingMode] = useState("user");
+  const [isSwitchingCamera, setIsSwitchingCamera] = useState(false);
   const [liveCoords] = useState(() => {
     if (coords && typeof coords === "object") {
       if (Array.isArray(coords) && coords.length >= 2) {
@@ -82,6 +84,42 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
     }
   }, [localStream]);
 
+  // Switch between front and back camera
+  const switchCamera = useCallback(async () => {
+    if (isSwitchingCamera) return;
+    setIsSwitchingCamera(true);
+
+    try {
+      const newFacingMode = facingMode === "user" ? "environment" : "user";
+
+      // Get new stream with switched camera
+      const newStream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: newFacingMode, width: 1280, height: 720 },
+        audio: true,
+      });
+
+      // Stop old tracks
+      if (localStream) {
+        localStream.getTracks().forEach((t) => t.stop());
+      }
+
+      // Update state
+      setLocalStream(newStream);
+      setFacingMode(newFacingMode);
+
+      // Update video element
+      if (videoRef.current) {
+        videoRef.current.srcObject = newStream;
+      }
+
+      console.log("[LiveKit] Switched to", newFacingMode, "camera");
+    } catch (err) {
+      console.error("[LiveKit] Failed to switch camera:", err);
+    } finally {
+      setIsSwitchingCamera(false);
+    }
+  }, [facingMode, localStream, isSwitchingCamera]);
+
   const handleGoLive = useCallback(async () => {
     if (!authToken) {
       alert("Please log in to start a live stream.");
@@ -269,6 +307,23 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
                   <span>LIVE on LiveKit</span>
                 </div>
               )}
+
+              {/* Camera controls overlay */}
+              <div className="sw-broadcast-controls-overlay">
+                <button
+                  type="button"
+                  className="sw-broadcast-control-btn"
+                  onClick={switchCamera}
+                  disabled={isSwitchingCamera}
+                  title={facingMode === "user" ? "Switch to back camera" : "Switch to front camera"}
+                >
+                  {isSwitchingCamera ? (
+                    <i className="fa-solid fa-spinner fa-spin" />
+                  ) : (
+                    <i className="fa-solid fa-camera-rotate" />
+                  )}
+                </button>
+              </div>
             </div>
           </div>