React component for Wistia embed

WistiaEmbed.js

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import classNames from 'classnames/bind'

import s from './WistiaEmbed.module.scss'
const cn = classNames.bind(s)

const WistiaEmbed = ({ id, play = false, style, options }) => {
  // const el = useRef()
  const [video, setVideo] = useState()

  useEffect(() => {
    if (!video) return
    if (play) {
      console.log('play video')
      video.play()
    } else {
      video.pause()
    }
  }, [play, video])

  useEffect(() => {
    window._wq = window._wq || []

    // RUN WEBSITE IN PRICAVY MODE
    window._wq.push(function (W) {
      W.consent(false)
    })

    window._wq.push({
      id,
      options: {
        // PLAYBACK
        preload: true,
        muted: true,
        playsinline: true,
        autoPlay: play,
        silentAutoPlay: true,
        endVideoBehavior: 'loop',

        // LAYOUT
        fitStrategy: 'cover',
        videoFoam: false,

        // TRACKING
        copyLinkAndThumbnailEnabled: false,
        doNotTrack: true,
        googleAnalytics: false,
        seo: false,

        // DEFAULT QUALITY
        // qualityMax,
        // qualityMin,

        // UI CONTROLS
        controlsVisibleOnLoad: false,
        fullscreenOnRotateToLandscape: false,
        fullscreenButton: false,
        settingsControl: false,
        qualityControl: false,
        playButton: false,
        playbar: false,
        playbackRateControl: false,
        smallPlayButton: false,

        ...options,
      },
      onReady: myOnReady,
      onHasData: () => {
        console.log('onHasData')
      },
    })
  }, [])

  const onPlayEvent = () => {
    console.log('The video was just played!', id)
  }

  useEffect(() => {
    if (!video) return

    video.bind('play', onPlayEvent)
    video.bind('beforeremove', function () {
      return video.unbind
    })
    return () => {
      video.unbind('play', onPlayEvent)
      video.remove() // clean up
    }
  }, [video])

  const myOnReady = (video) => {
    console.log('myOnReady')
    setVideo(video)
  }

  // const isSSR = typeof window === 'undefined'
  // if (isSSR) return null

  return (
    <>
      <Helmet>
        <script src={`https://fast.wistia.com/embed/medias/${id}.jsonp`} async></script>
        <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
      </Helmet>
      <div className={cn('WistiaEmbed', `wistia_embed wistia_async_${id}`)} style={{ height: '100%', ...style }}></div>
    </>
  )
}

WistiaEmbed.propTypes = {
  id: PropTypes.string,
  play: PropTypes.bool,
  style: PropTypes.object,
  options: PropTypes.object,
}

export default WistiaEmbed