gui-alucard / react-shaka-player Goto Github PK

// import do css. Agora temos a estilização customizada do ui.css
// NextJs tem esse import de css no _app
import React, { useState, useEffect } from 'react';
import 'react-shaka-player/dist/ui.css';
import { ReactShakaPlayer } from 'react-shaka-player';

function App() {
  const [mainPlayer, setMainPlayer] = useState(undefined);
  const [adsRequest, setAdsRequest] = useState(undefined);
  const [adBlock, setAdBlock] = useState(false);

  useEffect(() => {
    if (window.google) {
      const ADS_CLASS = new google.ima.AdsRequest();
      // Acesse o link para mais infos sobre o IMA SDK
      // https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdsRequest?hl=pt-br
      setAdsRequest(ADS_CLASS);
      setAdBlock(false);
      return;
    }
    return setAdBlock(true);
  }, []);

  return !adsRequest || adBlock ? (
    <Loader />
  ) : (
    <ReactShakaPlayer adsRequest={adsRequest} adsTagUrl={'https://vid.ads.com/vmap'} superConfig="STREAMING" onLoad={(player) => setMainPlayer(player)} src={'https://yourvideo.mpd'} />
  );
}

// import do css. Agora temos a estilização customizada do ui.css
// NextJs tem esse import de css no _app
import React, { useState, useEffect, useCallback } from 'react';
import 'react-shaka-player/dist/ui.css';
import { ReactShakaPlayer } from 'react-shaka-player';

function App() {
  const [mainPlayer, setMainPlayer] = useState(undefined);
  const [adsRequest, setAdsRequest] = useState(undefined);
  const [adBlock, setAdBlock] = useState(false);
  const [isLoading, setIsLoading] = useState(true)
  const [showControls, setShowControls] = useState(true);
  const [adsControls, setAdsControls] = useState(false);
  const [muted, setMuted] = useState(false);

  useEffect(() => {
    if (window.google) {
      const ADS_CLASS = new google.ima.AdsRequest();
      // Acesse o link para mais infos sobre o IMA SDK
      // https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdsRequest?hl=pt-br
      setAdsRequest(ADS_CLASS);
      setAdBlock(false);
      return;
    }
    return setAdBlock(true);
  }, []);

    useEffect(() => {
    let time
    if (!adsRequest) {
      setIsLoading(true)
      time = setInterval(() => {
        setIsLoading(false)
      }, 4000)
      return () => clearInterval(time)
    }
    return setIsLoading(false)
  }, [adsRequest])

  const handleShakaControls = () => {
    const element = document.getElementsByClassName('shaka-controls-container');
    const controls = element?.item(0)?.hasAttribute('shown');
    const adsControls = element?.item(0)?.hasAttribute('ad-active');
    setShowControls(controls);
    setAdsControls(adsControls);
  };

  const handleUnmute = useCallback(() => {
    setMuted(false);
    if (mainPlayer.videoElement) {
      mainPlayer.videoElement.muted = false;
    }
  }, [mainPlayer]);

  const handleFowardRewind = (label) => {
    if (mainPlayer.videoElement && label === 'foward') {
      mainPlayer.videoElement.currentTime = Math.floor(mainPlayer.videoElement.currentTime) + 10;
    } else if (mainPlayer.videoElement && label === 'rewind') {
      mainPlayer.videoElement.currentTime = Math.floor(mainPlayer.videoElement.currentTime) - 10;
    }
  };

  return isLoading ? (
    <PageLoader />
  ) : (
    <div className="App">
      <div className="App-main">
        {!adsRequest || adBlock ? (
          <CardContainer>
            <CardTitleError>ops!</CardTitleError>
            <CardDescriptionError>Desative seu bloqueador de anúncios para assistir o conteúdo.</CardDescriptionError>
            <ButtonReload onClick={() => window.location.reload()}>
              <Icon mt={6} color="neutral.n400" variant="reload" width={24} height={24} />
              <span>tentar novamente</span>
            </ButtonReload>
          </CardContainer>
        ) : (
          <ReactShakaPlayer
            adsRequest={adsRequest}
            adsTagUrl={'https://vid.ads.com/vast'}
            superConfig="VOD"
            src={'https://yourvideo.mpd'}
            onTimeUpdate={handleShakaControls}
            startTime={stopped_at ? stopped_at : 0}
            onLoad={(player) => setMainPlayer(player)}
            onFoward={!adsControls && showControls ? () => handleFowardRewind('foward') : null}
            onRewind={!adsControls && showControls ? () => handleFowardRewind('rewind') : null}
            unmute={muted ? { p: 'ativar som', onUnmute: () => handleUnmute() } : null}
            autoPlay={true}
            muted={true}
          >
            <ChildrenToIncludeIntoFullscreen>
          </ReactPlayer>
        )}
      </div>
    </div>
  )
}