Как отрисовать прямоугольник по верх видео в момент равный одному или более таймстемпов
Есть список событий с таймстемпами. Надо в момент возникновения события в плеере поверх видео должен рисоваться зелёный прямоугольник, соответствующий области, определённой в событии. При наступлении даты окончания события, прямоугольник должен скрываться. Использую React, Redux.Не могу придумать как реализовать поиск и сравнение videoElement.currentTime(текущее время плеера) с массивом для отрисовки квадрата в нужный момент. Получались какие то громоздкие не работающие конструкции. Может это как то проще делается?
*const events = [
{"id":1,"timestamp":320303,"duration":907,"zone":{"left":535,"top":97,"width":120,"height":58}},
{"id":2,"timestamp":99746,"duration":813,"zone":{"left":231,"top":64,"width":50,"height":43}},
{"id":3,"timestamp":412932,"duration":344,"zone":{"left":975,"top":499,"width":98,"height":75}}
]*
*const dispatch = useAppDispatch();
const { eventList } = useAppSelector(selectEventList);
const [isPlaying, setIsPlaying] = useState(false);
let videoElement: HTMLMediaElement ;
const playingTimeIntervalRef = useRef<NodeJS.Timeout>();
useEffect(()=> {
videoElement = document.getElementById('my-video') as HTMLMediaElement;
videoElement.addEventListener('playing', isPlayingListener)
videoElement.addEventListener('pause', isPausedListener)
if (isPlaying) {
playingTimeIntervalRef.current = setInterval(() => {
eventList.forEach((item) => {
const ms = item.timestamp.toString();
const sec = (Math.floor(Number(item.timestamp)/1000)%60).toString();
const totalTimer = Number(`${sec}.${ms}`);
if (videoElement.currentTime === totalTimer) {
dispatch(selectEventVideo(item))
}
})
}, 100)
} else {
clearInterval(playingTimeIntervalRef.current as NodeJS.Timeout);
}
},[isPlaying])*