jjwiseman/fastvlm-webgpu

1import GlassButton from "./GlassButton";2import GlassContainer from "./GlassContainer";3import { GLASS_EFFECTS } from "../constants";4 5interface WebcamCaptureProps {6  isRunning: boolean;7  onToggleRunning: () => void;8  error?: string | null;9}10 11export default function WebcamCapture({ isRunning, onToggleRunning, error }: WebcamCaptureProps) {12  const hasError = Boolean(error);13  const [statusText, statusColor, containerBgColor] = hasError14    ? ["Error", "bg-red-500", GLASS_EFFECTS.COLORS.ERROR_BG]15    : isRunning16      ? ["Live", "bg-green-500 animate-pulse", GLASS_EFFECTS.COLORS.DEFAULT_BG]17      : ["Paused", "bg-red-500", GLASS_EFFECTS.COLORS.DEFAULT_BG];18 19  return (20    <>21      {/* Control buttons - positioned absolutely over the video */}22      <div className="absolute top-4 right-4 flex space-x-2 z-20">23        <GlassButton onClick={onToggleRunning} aria-label={isRunning ? "Pause captioning" : "Resume captioning"}>24          {isRunning ? "Pause" : "Resume"}25        </GlassButton>26      </div>27 28      {/* Status indicator with glass morphism */}29      <div className="absolute top-4 left-4 z-20">30        <GlassContainer31          bgColor={containerBgColor}32          className="px-3 py-2 rounded-lg"33          role="status"34          aria-label={`Caption status: ${statusText}`}35        >36          <div className="flex items-center space-x-2">37            <div className={`w-2 h-2 rounded-full ${statusColor}`} />38            <span className="text-white text-sm font-medium">{statusText}</span>39          </div>40        </GlassContainer>41      </div>42    </>43  );44}45