refactor video results playback and management form UX

src/components/video/annotatedVideoPlayer.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { RefObject } from 'react';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+
+interface AnnotatedVideoPlayerProps {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  videoUrl: string | null;
+  isLoading: boolean;
+  isError: boolean;
+  onRetry: () => void;
+  onTimeUpdate: () => void;
+  onSeeked: () => void;
+}
+
+export default function AnnotatedVideoPlayer({
+  videoRef,
+  videoUrl,
+  isLoading,
+  isError,
+  onRetry,
+  onTimeUpdate,
+  onSeeked,
+}: AnnotatedVideoPlayerProps) {
+  return (
+    <div className="relative overflow-hidden rounded-lg border bg-black">
+      {videoUrl ? (
+        <video
+          ref={videoRef}
+          src={videoUrl}
+          controls
+          preload="metadata"
+          onTimeUpdate={onTimeUpdate}
+          onSeeked={onSeeked}
+          className="block w-full aspect-video"
+        />
+      ) : (
+        <div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
+          {isError ? (
+            <>
+              <AlertTriangle className="h-7 w-7 text-destructive" />
+              <p className="text-sm font-medium text-destructive">
+                Failed to load the annotated video.
+              </p>
+              <button
+                type="button"
+                onClick={onRetry}
+                className="text-xs font-semibold uppercase tracking-wider text-primary hover:underline"
+              >
+                Retry
+              </button>
+            </>
+          ) : (
+            <>
+              <Loader2 className="h-7 w-7 animate-spin text-primary" />
+              <p className="text-xs font-medium uppercase tracking-widest">
+                {isLoading ? 'Loading annotated video...' : 'Preparing video...'}
+              </p>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}