import React, { useEffect, useRef } from 'react'

export default ({ url }) => {
  const ref = useRef()

  useEffect(() => {
    let player = null
    if (window.flvjs.isSupported) {
      player = window.flvjs.createPlayer({
        type: 'flv',
        volume: 0.8,
        cors: true,
        url,
        muted: false
      })

      if (ref.current) {
        player.attachMediaElement(ref.current)
        player.load()
        player.play()
      }
    }
    return () => {
      if (player) {
        player.unload()
        player.pause()
        player.destroy()
        player = null
      }
    }

  }, [url, ref.current])

  return (
    <video ref={ref} controls autoPlay={true} muted={false} className="flv-player"></video>
  )
}