import React, { useMemo, useState } from 'react'
import { formatHistoryList } from '../utils'
// import 'ocean-player/es/player.css'
import '../style/live.less'
import Player, { HistoryPlayer } from '../ocean-player';


function PlayerComponent({ file, historyList, isLive, startTime, endTime, defaultTime, isLoop, className, cid, title, ...props }) {
  const [playObj, setPlayObj] = useState(null)
  const fragmentList = useMemo(() => (historyList ? formatHistoryList(historyList, startTime, endTime) : undefined), [historyList,startTime,endTime])
  const videoKey = useMemo(() => (isLive ? file : `${cid}-${startTime}-${endTime}`), [cid, endTime, file, isLive, startTime])
  const PlayView = useMemo(() => (isLive ? Player : HistoryPlayer), [isLive])
  return (
    <PlayView
      autoPlay={true}
      isLive={isLive}
      file={file}
      playObj={playObj}
      className={`lm-c-player-component ${className}`}
      onInitPlayer={p => setPlayObj(p)}
      historyList={fragmentList}
      defaultTime={defaultTime}
      key={videoKey}
    >
    </PlayView>
  )
}

PlayerComponent.defaultProps = {
  isLive: true,
  isLoop: false,
  className: ''
}

export default React.memo(PlayerComponent)
