catstodon/app/javascript/flavours/glitch/components/gifv.tsx

import { useCallback, useState } from 'react';

interface Props {
  src: string;
  key: string;
  alt?: string;
  lang?: string;
  width: number;
  height: number;
  onClick?: () => void;
}

export const GIFV: React.FC<Props> = ({
  src,
  alt,
  lang,
  width,
  height,
  onClick,
}) => {
  const [loading, setLoading] = useState(true);

  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
    useCallback(() => {
      setLoading(false);
    }, [setLoading]);

  const handleClick: React.MouseEventHandler = useCallback(
    (e) => {
      if (onClick) {
        e.stopPropagation();
        onClick();
      }
    },
    [onClick],
  );

  return (
    <div className='gifv' style={{ position: 'relative' }}>
      {loading && (
        <canvas
          width={width}
          height={height}
          role='button'
          tabIndex={0}
          aria-label={alt}
          title={alt}
          lang={lang}
          onClick={handleClick}
        />
      )}

      <video
        src={src}
        role='button'
        tabIndex={0}
        aria-label={alt}
        title={alt}
        lang={lang}
        muted
        loop
        autoPlay
        playsInline
        onClick={handleClick}
        onLoadedData={handleLoadedData}
        style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
      />
    </div>
  );
};