How to use media ended event in a for loop?

Viewed 32

I need to use an array of cloud stored videos' width and height values to make some styling on frontend. I try to get the info by using HTMLMediaElement: ended event. I can receive the info, but can not dispatch it into redux, since the dispatch is triggered before the ended event. In other words, I realized the main function's for loop ends before the video width and height values are received.

I just want to receive the width and height values to make some calculations, then dispatch the updated items as arrays. Any suggestions?

Main Function Snippet

let tempVideos = []
for(let i = 0; i < VideoIDArray.length; i++) {
    tempMoveableDivArray[i] = moveableDiv.divCreate(i,VideoIDArray[i]);

    [tempVideos[i], tempMoveableDivArray[i] ]= SetupServerVideo(
        signedURLArray[i],
        VideoIDArray[i], 
        tempMoveableDivArray[i],
    );
}

// These dispatches triggered before ended event

dispatch(VideoElements_Store(tempVideos))
dispatch(MoveableDivArray_Store(tempMoveableDivArray))

SetupFunction

export const SetupServerVideo = (
    signedURL, 
    videoID,
    tempMoveableDiv
) => {
    let moveableDiv = new MoveableDiv();
    const canvas =  document.getElementById('glcanvas')

    const videoPlayer = document.createElement('video');
    videoPlayer.id = videoID
    videoPlayer.crossOrigin ="anonymous"
    videoPlayer.src = signedURL
    videoPlayer.play()
    videoPlayer.currentTime = 7200;

    videoPlayer.addEventListener( 'ended', () => {
        let [divHeight, divWidth] = moveableDiv.divHeightWidthCalculator(canvas.height, canvas.width, videoPlayer.videoHeight, videoPlayer.videoWidth);
        let [divStyleTop, divStyleLeft] = moveableDiv.divPositionTopLeftCalculator(
            divHeight,
            divWidth,
            canvas.height,
            canvas.width,
            canvas.getBoundingClientRect()
        );

        tempMoveableDiv = moveableDiv.divStyleUpdate(tempMoveableDiv, divStyleTop, divStyleLeft, divHeight, divWidth);
        tempMoveableDiv.style.border = '2px dashed green';

    })

return [videoPlayer,tempMoveableDiv]
}
0 Answers
Related