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]
}