feat: add alert dialog when error access camera

Author: edwintantawi

app/analyze/page.tsx

@@ -1,10 +1,21 @@
 'use client';
 
 import * as React from 'react';
+import Link from 'next/link';
 
 import { analyzeFoodImageAction } from '~/app/analyze/actions';
 import { Header } from '~/components/header';
 import { Icons } from '~/components/icons';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '~/components/ui/alert-dialog';
 import { Button } from '~/components/ui/button';
 import {
   Sheet,
@@ -23,7 +34,10 @@ export default function AnalyzePage() {
   const [result, setResult] = React.useState<FoodAnalyzeResult | null>(null);
   const [isPending, startTransition] = React.useTransition();
 
-  const videoElementRef = useVideoStream();
+  const [
+    videoElementRef,
+    { error: videoStreamError, retry: retryVideoStream },
+  ] = useVideoStream();
   const [
     canvasElementRef,
     { drawImageToCanvas, getImageFromCanvas, clearCanvas },
@@ -73,7 +87,7 @@ export default function AnalyzePage() {
       <div className="relative flex-1">
         <video
           ref={videoElementRef}
-          className="absolute inset-0 h-full w-full flex-1 rounded-lg border object-cover"
+          className="absolute inset-0 h-full w-full flex-1 rounded-lg border bg-muted object-cover"
           autoPlay
           muted
         />
@@ -120,6 +134,28 @@ export default function AnalyzePage() {
             </div>
           </SheetContent>
         </Sheet>
+
+        <AlertDialog open={videoStreamError !== null}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                Failed to Access Device Camera!
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                Please make sure you have granted access to your device camera
+                and try again
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel asChild>
+                <Link href="/">Back</Link>
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={retryVideoStream}>
+                Try again
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </main>
   );

hooks/use-video-stream.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 export function useVideoStream() {
   const videoElementRef = React.useRef<HTMLVideoElement>(null);
+  const [error, setError] = React.useState<Error | null>(null);
+  const [retryCount, setRetryCount] = React.useState<number>(0);
 
   React.useEffect(() => {
     async function startVideo() {
@@ -16,14 +18,23 @@ export function useVideoStream() {
         });
 
         videoElementRef.current.srcObject = mediaStream;
+
+        setError(null);
       } catch (error) {
-        // TODO: show user friendly error
+        if (error instanceof Error) {
+          setError(error);
+        }
         console.error(error);
       }
     }
 
     startVideo();
-  }, []);
+  }, [retryCount]);
+
+  const retry = () => {
+    setError(null);
+    setRetryCount((count) => count + 1);
+  };
 
-  return videoElementRef;
+  return [videoElementRef, { error, retry }] as const;
 }