qapp-core/src/components/VideoPlayer/LoadingVideo.tsx

import { Box, CircularProgress, Typography } from "@mui/material";

import { PlayArrow } from "@mui/icons-material";
import { Status } from "../../state/publishes";


interface LoadingVideoProps {
  status: Status | null
  percentLoaded: number
  isReady: boolean
  isLoading: boolean
  togglePlay: ()=> void
}
export const LoadingVideo = ({
  status, percentLoaded, isReady, isLoading, togglePlay
}: LoadingVideoProps) => {

  const getDownloadProgress = (percentLoaded: number) => {
    const progress = percentLoaded;
    return Number.isNaN(progress) ? "" : progress.toFixed(0) + "%";
  };
  if(status === 'READY') return null

  return (
    <>
      {isLoading && status !== 'INITIAL' && (
        <Box
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={status === "READY" ? "55px " : 0}
          display="flex"
          justifyContent="center"
          alignItems="center"
          zIndex={25}
          bgcolor="rgba(0, 0, 0, 0.6)"
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "10px",
            height: "100%",
          }}
        >
          {status !== "NOT_PUBLISHED" && (
                      <CircularProgress color="secondary" />

          )}
          {status && (
            <Typography
              variant="subtitle2"
              component="div"
              sx={{
                color: "white",
                fontSize: "15px",
                textAlign: "center",
              }}
            >
             
              {status === "NOT_PUBLISHED" ? (
                <>Video file was not published. Please inform the publisher!</>
              ) : status === "REFETCHING" ? (
                <>
                  <>
                    {getDownloadProgress(
                      percentLoaded
                    )}
                  </>

                  <> Refetching in 25 seconds</>
                </>
              ) : status === "DOWNLOADED" ? (
                <>Download Completed: building video...</>
              ) : status !== "READY" ? (
                <>
                  {getDownloadProgress(
                    percentLoaded
                  )}
                </>
              ) : (
                <>Fetching video...</>
              )}
            </Typography>
          )}
        </Box>
      )}

      {(status === 'INITIAL') && (
        <>
          <Box
            position="absolute"
            top={0}
            left={0}
            right={0}
            bottom={0}
            display="flex"
            justifyContent="center"
            alignItems="center"
            zIndex={500}
            bgcolor="rgba(0, 0, 0, 0.6)"
            onClick={() => {
              togglePlay();
            }}
            sx={{
              cursor: "pointer",
            }}
          >
            <PlayArrow
              sx={{
                width: "50px",
                height: "50px",
                color: "white",
              }}
            />
          </Box>
        </>
      )}
    </>
  );
};