WistiaVideo.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import cn from 'classnames'

import { loadScriptOnce } from 'helpers/loadScriptAsync'
import PlaySVG from 'app/components/SVGS/Play'

import './styles.scss'
const bc = 'wistia-video'

export default class WistiaVideo extends Component {
  static defaultProps = {
    wistiaOptions: {
      autoPlay: false,
      popover: true,
      popoverAnimateThumbnail: true,
      playButton: true,
      // smallPlayButton: true,
      playerColor: '25be8c',
      backgroundOpacity: 0.9,
      // buttonBackground: '25be8c',
    },
    height: 88,
    width: 156,
  }

  static propTypes = {
    isAutoPlayVideo: PropTypes.bool,
    children: PropTypes.node,
    videoId: PropTypes.string.isRequired,
    videoThumbnail: PropTypes.string,
    alt: PropTypes.string,
    /**
     * @see https://wistia.com/support/developers/embed-options#using-embed-options
     * @see https://wistia.com/support/developers/embed-options#options-list
     */
    wistiaOptions: PropTypes.shape({
      /**
       * NOTE: will not work on iOS and other mobile devices due to restrictions on bandwidth on cellular networks
       * @see https://wistia.com/support/developers/embed-options#autoplay
       */
      autoPlay: PropTypes.bool,
      email: PropTypes.string,
      endVideoBehavior: PropTypes.oneOf(['default', 'reset', 'loop']),
      fullscreenButton: PropTypes.bool,
      muted: PropTypes.bool,
      playButton: PropTypes.bool,
      playerColor: PropTypes.string,
      popover: PropTypes.bool,
      popoverAnimateThumbnail: PropTypes.bool,
      popoverContent: PropTypes.oneOf(['html', 'link']),
      smallPlayButton: PropTypes.bool,
      /** more @see https://wistia.com/support/developers/embed-options#options-list */
    }),
    height: PropTypes.number,
    width: PropTypes.number,
  }

  state = {
    loaded: false,
  }

  async componentDidMount() {
    await loadScriptOnce('//fast.wistia.com/assets/external/E-v1.js')
    this.setWistiaOptions(this.props)
    this.setState({ loaded: true })
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.videoId !== this.props.videoId) {
      this.setWistiaOptions(nextProps)
    }
  }

  componentWillUnmount() {
    console.log('componentWillUnmount', this.video)
    this.video && this.video.remove()
  }

  setWistiaOptions(props) {
    let { videoId, wistiaOptions = {}, isAutoPlayVideo } = props
    const options = { ...WistiaVideo.defaultProps.wistiaOptions, ...wistiaOptions }
    options.autoPlay = wistiaOptions.autoPlay || isAutoPlayVideo
    window._wq = window._wq || []
    window._wq.push({
      id: videoId,
      options,
      onReady: video => {
        if (options.autoPlay) {
          video.play()
        }
        console.log('onReady', options.autoPlay)
      },
      onEmbedded: video => {
        console.log('onEmbedded', options.autoPlay)
        this.video = video
      },
    })
    console.log('options', options.autoPlay)
  }

  render() {
    const {
      videoId,
      videoThumbnail,
      alt = 'Activity Video',
      height,
      width,
      children,
      wistiaOptions,
      isAutoPlayVideo,
    } = this.props
    const { loaded } = this.state
    if (loaded) {
      return (
        <div
          key={`${videoId}_${wistiaOptions.autoPlay || isAutoPlayVideo}`}
          className={cn(`wistia_embed wistia_async_${videoId}`)}
          style={{ height, width }}
        >
          {wistiaOptions.popoverContent &&
            (children || (
              <div className={`${bc}__play-button`}>
                <PlaySVG width="8px" height="10px" />
              </div>
            ))}
        </div>
      )
    } else {
      if (wistiaOptions.popoverContent) {
        return (
          children || (
            <div className={`${bc}__play-button`}>
              <PlaySVG width="8px" height="10px" />
            </div>
          )
        )
      } else {
        return <img key={videoThumbnail} style={{ height, width }} src={videoThumbnail} alt={alt} />
      }
    }
  }
}