A really nice Mux video component

'use client';
// Swap these out for another icon set if you want
import { Loader2, PlayIcon } from 'lucide-react';
// To dynamically load the video player
import dynamic from 'next/dynamic';
import { FC, useState } from 'react';
import { preload } from 'react-dom';
// This is from Sanity type generation
import { MuxVideo, Video as VideoType } from '~/sanity.types';

const getVideoToPlayUrl = (muxId: string) => {
  return `https://stream.mux.com/${muxId}.m3u8?min_resolution=1080p&rendition_order=desc`;
};

const getPosterUrl = (muxId: string) => {
  return `https://image.mux.com/${muxId}/thumbnail.webp?fit_mode=smartcrop&time=0`;
};

const getMuxVideoProps = (muxId: string) => {
  return {
    poster: getPosterUrl(muxId),
    vidUrl: getVideoToPlayUrl(muxId),
  };
};

type VideoPlay = {
  poster: string;
  vidUrl: string;
  loop?: boolean;
  muted?: boolean;
  control?: boolean;
};

const VideoAutoPlay = ({ control, loop, muted, poster, vidUrl }: VideoPlay) => {
  const HlsVideo = dynamic(
    () => import('./hls-video').then((mod) => mod.HlsVideo),
    {
      loading: () => {
        return (
          <div className="relative size-full">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={poster}
              // Pick your most commonly used video size to avoid CLS
              width={1920}
              height={1080}
              alt="a"
              className="mx-auto  size-full "
            />
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform ">
              <Loader2 className="animate-spin" size={112} strokeWidth={0.5} />
            </div>
          </div>
        );
      },
    },
  );
  return (
    <HlsVideo
      autoPlay
      poster={poster}
      vidUrl={vidUrl}
      loop={control ? loop : undefined}
      muted={control ? muted : undefined}
      controls={control}
      width={1920}
      height={1080}
      className="mx-auto size-full"
    />
  );
};

const VideoWithOutAutoPlay = (
  props: VideoPlay & { loading?: 'lazy' | 'eager' },
) => {
  const { poster, loading } = props;
  const [play, setPlay] = useState(false);

  return (
    <div className=" size-full">
      {play ? (
        <div className="relative size-full ">
          <div className="my-4">
            <VideoAutoPlay {...props} />
          </div>
        </div>
      ) : (
        <div className="relative size-full">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={poster}
            width={1920}
            height={1080}
            loading={loading === 'lazy' ? 'lazy' : 'eager'}
            alt="a"
            className="mx-auto  size-full "
          />
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform ">
            <button
              className="grid place-items-center rounded-full bg-black p-8 hover:bg-hotpink-400"
              onClick={() => setPlay(true)}
            >
              <PlayIcon className="h-8 w-8 fill-white text-white" />
              <span className="sr-only">Play</span>
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export type VideoProps = VideoType & {
  videoEmbed: NonNullable<VideoType['videoEmbed']> & {
    video: MuxVideo & {
      asset: {
        playbackId: string;
      };
    };
  };
};

export const Video: FC<VideoProps & { loading?: 'lazy' | 'eager' }> = ({
  videoEmbed,
  loading = 'eager',
}) => {
  const { video, autoPlay, control, loop, muted } = videoEmbed ?? {};

  const { poster, vidUrl } = getMuxVideoProps(video?.asset?.playbackId);

  preload(vidUrl, {
    as: 'video',
    fetchPriority: 'high',
  });
  preload(poster, {
    as: 'image',
    fetchPriority: 'high',
  });

  const videoProps = { poster, loading, vidUrl, loop, muted, control };

  return (
    <div className="mx-auto flex max-w-7xl">
      {control && autoPlay ? (
        <VideoAutoPlay {...videoProps} />
      ) : (
        <VideoWithOutAutoPlay {...videoProps} loading={loading} />
      )}
    </div>
  );
};