{   width: "100%",   height: "100%",   style: {     aspectRatio: "16/9",     marginBottom: "-8px",     background: colors.black,   }, }

import PropTypes from "prop-types";import { Box } from "@mui/material";import { isIOS } from "react-device-detect";import ReactPlayer from "react-player/lazy";import { useStopwatch } from "react-timer-hook";import { useEffect, useRef, useState } from "react";import { useIsVisible } from "utilities/customHooks/useIsVisible";const VideoPlayer = ({  url,  height = "auto",  width,  speed = false,  download = false,  pip = false,  minViewTime = 5,  trackingFunc,  viewPercentageToPlay,  ...props}) => {  const ref = useRef();  const stopwatch = useStopwatch();  const isVisible = useIsVisible(ref, true, viewPercentageToPlay);  const [play, setPlay] = useState(false);  const [mute, setMute] = useState(true);  useEffect(() => {    play ? stopwatch.start() : stopwatch.pause();  }, [play]);  useEffect(() => {    !document?.fullscreenElement && setPlay(isVisible);    if (trackingFunc && !isVisible && stopwatch.totalSeconds >= minViewTime) {      trackingFunc("watching autoplay video duration", {        sixthLabel: stopwatch.totalSeconds,      });      stopwatch.reset();    }    // this is for disabling the automatic rotation in android devices    if (!isIOS) {      if (isVisible) {        screen?.orientation?.lock?.("portrait");      } else {        screen?.orientation?.unlock?.();      }    }  }, [isVisible]);  useEffect(() => {    const handleMute = _event => {      setMute(!Boolean(document?.fullscreenElement));    };    // this event only works for android devices    ref?.current?.addEventListener("fullscreenchange", handleMute);    return () => {      removeEventListener("fullscreenchange", handleMute);    };  }, [ref]);  return (    <Box ref={ref}>      <ReactPlayer        url={url}        playsinline={true}        playing={play}        onPlay={() => setPlay(true)}        onPause={() => setPlay(false)}        config={{          file: {            attributes: {              ...((!speed || !download) && {                controlsList: `${!download && "nodownload"} ${                  !speed && "noplaybackrate"                }`,              }),              ...(!pip && { disablePictureInPicture: true }),            },          },        }}        height={height}        width={width}        volume={0.2}        controls={true}        muted={mute}        {...props}      />    </Box>  );};VideoPlayer.propTypes = {  url: PropTypes.string.isRequired,  height: PropTypes.string,  width: PropTypes.string,  speed: PropTypes.bool,  download: PropTypes.bool,  pip: PropTypes.bool,  minViewTime: PropTypes.number,  viewPercentageToPlay: PropTypes.number,  trackingFunc: PropTypes.func,};export default VideoPlayer;