From 9532d410a55c2c80f6f7d72648f34a356aa6670d Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Tue, 22 Jul 2025 09:57:56 -0500
Subject: [PATCH] Fix camera UI issue - always render video element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Root Cause Fixed:
- Video element was conditionally rendered based on isStreaming
- When user clicks 'Start Camera', video element doesn't exist yet
- This makes videoRef.current null, causing 'Video element not available' error

✅ Solution:
- Always render video element in DOM
- Show placeholder when not streaming
- Show scan guide overlay only when streaming
- Video ref is now always available for camera initialization

This fixes the core issue where camera works but UI doesn't show!
---
 src/components/CameraScanner.tsx | 54 +++++++++++++++-----------------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/components/CameraScanner.tsx b/src/components/CameraScanner.tsx
index 37ef9dd..e770342 100644
--- a/src/components/CameraScanner.tsx
+++ b/src/components/CameraScanner.tsx
@@ -239,18 +239,19 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
         )}
       </div>
 
-      {/* Camera Preview */}
-      {(isStreaming || streamRef.current) && (
-        <div className="relative bg-black rounded-lg overflow-hidden mb-4">
-          <video
-            ref={videoRef}
-            autoPlay
-            playsInline
-            muted
-            className="w-full h-auto max-h-96 object-cover"
-          />
-          
-          {/* Scan Guide Overlay */}
+      {/* Camera Preview - Always render video element */}
+      <div className="relative bg-black rounded-lg overflow-hidden mb-4">
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          className="w-full h-auto max-h-96 object-cover"
+          style={{ minHeight: isStreaming ? 'auto' : '200px' }}
+        />
+        
+        {/* Show overlay only when streaming */}
+        {isStreaming && (
           <div className="absolute inset-0 pointer-events-none">
             <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
               <div className="bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm text-center">
@@ -259,24 +260,19 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
               </div>
             </div>
           </div>
-        </div>
-      )}
-
-      {/* Fallback: Always show video element for debugging */}
-      {!isStreaming && streamRef.current && (
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
-          <div className="text-yellow-800 font-medium mb-2">🔍 Debug: Stream exists but not marked as streaming</div>
-          <div className="relative bg-black rounded-lg overflow-hidden">
-            <video
-              ref={videoRef}
-              autoPlay
-              playsInline
-              muted
-              className="w-full h-auto max-h-96 object-cover"
-            />
+        )}
+        
+        {/* Show placeholder when not streaming */}
+        {!isStreaming && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-white text-center">
+              <div className="text-4xl mb-2">📹</div>
+              <div className="font-medium">Camera Preview</div>
+              <div className="text-sm opacity-75">Click "Start Camera" to begin</div>
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
 
       {/* Hidden canvas for image capture */}
       <canvas ref={canvasRef} className="hidden" />