79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
|
import React, { useEffect, useState, useRef } from 'react'
|
||
|
|
import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';
|
||
|
|
import {Slider} from 'antd';
|
||
|
|
import './index.less'
|
||
|
|
|
||
|
|
|
||
|
|
const Page = ({ data, setClock }) => {
|
||
|
|
const [player,setPlayer] = useState(false)
|
||
|
|
const [index,setIndex] = useState(0)
|
||
|
|
const marks = {
|
||
|
|
[0]: {
|
||
|
|
style: { color: '#333' },
|
||
|
|
label: <span style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px'}}>{data?.[0]?.tm||''}</span>,
|
||
|
|
},
|
||
|
|
[data.length - 1]: {
|
||
|
|
style: { color: '#333' },
|
||
|
|
label: <div style={{width: "130px", fontSize: "12px", display:'inline-block', marginTop:'3px', marginLeft: "-32px"}}>{data?.[data?.length-1]?.tm||""}</div>,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
setIndex(0)
|
||
|
|
setPlayer(false)
|
||
|
|
},[data])
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (player) {
|
||
|
|
let num = index;
|
||
|
|
const h = setInterval(() => {
|
||
|
|
num = num + 1;
|
||
|
|
if (num >= data.length) {
|
||
|
|
num = 0;
|
||
|
|
}
|
||
|
|
setIndex(num);
|
||
|
|
}, 1100);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
clearInterval(h);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [player, index]);
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
if(index!==null){
|
||
|
|
setClock(index)
|
||
|
|
}
|
||
|
|
},[index])
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{
|
||
|
|
data.length>0?
|
||
|
|
<div className='SliderPlayerBox'>
|
||
|
|
<div className='SliderPlayerBox_playbtn' onClick={()=>setPlayer(!player)}>
|
||
|
|
{ player?<PauseCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/>:<PlayCircleOutlined style={{color: "#007AFF", fontSize: "25px"}}/> }
|
||
|
|
</div>
|
||
|
|
<div className='SliderPlayerBox_slider'>
|
||
|
|
<Slider
|
||
|
|
disabled={player}
|
||
|
|
min={0}
|
||
|
|
max={data.length-1}
|
||
|
|
value={index}
|
||
|
|
marks={marks}
|
||
|
|
tooltip={{ formatter:(value) => data[value].tm }}
|
||
|
|
onChange={(val) => setIndex(val)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>:null
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Page
|