function Player()

in frontend/src/player/Player.js [7:66]


function Player() {
    const { playbackUrl } = React.useContext(IVSContext);
    const [, dispatch] = React.useContext(PlayerMetadataContext);

    React.useEffect(() => {
        // eslint-disable-next-line no-undef
        const videojs = window.videojs,
              registerIVSTech = window.registerIVSTech,
              registerIVSQualityPlugin = window.registerIVSQualityPlugin;

        // Set up IVS playback tech and quality plugin
        const IVSPlugin = videojs.getPlugin("getIVSPlayer");

        // If the plugins haven't been loaded, load them.
        if (!IVSPlugin) {
          registerIVSTech(videojs);
          registerIVSQualityPlugin(videojs);
        }

        const videoJsOptions = {
          techOrder: ["AmazonIVS"],
          autoplay: true,
          muted: true,
        };

        // instantiate video.js
        const player = videojs("amazon-ivs-videojs", videoJsOptions);
        const ivsPlayer = player.getIVSPlayer();
        const PlayerEventType = player.getIVSEvents().PlayerEventType;

        ivsPlayer.addEventListener(PlayerEventType.TEXT_METADATA_CUE, (cue) => {
            const metadataText = cue.text;
            console.log('Timed metadata: ', metadataText);
            dispatch({
                type: SET_CURRENT_QUESTION_ACTION,
                question: JSON.parse(metadataText),
            });
        });

        player.ready(() => {
          player.enableIVSQualityPlugin();
          player.src(playbackUrl);
          player.play();
        });

        return () => {
            player.dispose();
        };
        // eslint-disable-next-line
    }, []);

    return (
        <div className="player-wrapper">
            <CurrentQuestion />
            <div data-vjs-player>
                <video id="amazon-ivs-videojs" className="video-js vjs-fluid" playsInline />
            </div>
        </div>
    );
  }