Add Live Camera Component

Districts talking about having a Live Stream component.

As far as I know we do not have a generic tag / component?

This may or may not be best in groundwork water or groundwork?

Something like this :

// import { Skeleton } from "@usace/groundwork";
import { useEffect, useState } from "react";


function StreamImage({ altText, src, refreshInterval, maxWidth = "800px" }) {
    // const [isLoading, setIsLoading] = useState(true);
    const [imageSrc, setImageSrc] = useState(
        `${src}?_=${new Date().getTime()}`
    );
    const refreshImage = () => {
        // setIsLoading(true);
        setImageSrc(
            `${src}?_=${new Date().getTime()}`
        );
    };
    // Setup a regular interval for he image to refresh based on refreshInterval
    useEffect(() => {
        const interval = setInterval(() => {
            refreshImage();
        }, refreshInterval);

        // Make sure we cleanup interval when it leaves the view/page
        return () => clearInterval(interval);
    }, [imageSrc, refreshInterval])

    // if (isLoading) return <Skeleton className="w-[80vw] max-w-[800px] h-[50vh]" />

    return (
        <>
            <img
                alt={altText}
                aria-label={altText}
                style={{
                    width: "100%",
                    height: "auto",
                    maxWidth,
                    margin: "0 auto",
                    display: "block",
                }}
                src={imageSrc}
                onLoad={() => {
                    // setIsLoading(false);
                }}
                // onError={() => setIsLoading(false)}
            />
            <div className="gw-text-center">
                Last Updated:
                {new Date(parseInt(imageSrc?.split("?_=")[1])).toLocaleString()}
            </div>
        </>
    )

}

export default StreamImage;
export { StreamImage }

No repository file, test, or entry point is named. Start by reviewing the existing component structure and deciding whether the proposed StreamImage belongs in groundwork or groundwork-water; done means an agreed component location, API, refresh behavior, accessibility treatment, and test expectations.