import React from 'react';
import './index.less';
import { useBarStatus } from '../../utils'
import TimeLine from './TimeLine';

const CustomTimeline = ({ player, historyList, onFrontEndSeek, seekPercent }) => {
  const fragments = () => {
    const data = historyList[0] || {};
    const fragments = [{
      begin: 0,
      end: data.endTime - data.beginTime,
      file: data.hls
    }];
    return fragments;
  }
  const duration = () => {
    const data = historyList[0] || {};
    return (data.endTime - data.beginTime) || 0;
  }
  const barStatus = useBarStatus(player)

  return (
    <TimeLine
      className={(barStatus === 'hide') ? 'hide-timeline' : ''}
      player={player}
      onFrontEndSeek={onFrontEndSeek}
      seekPercent={seekPercent}
      fragments={fragments()}
      duration={duration()}
      beginDateTime={+(historyList[0].beginTime)}
    />
  )
}
export default CustomTimeline;