video player condition is not working with javascript in mozilla firefox

0

I am making a video website using Laravel and JS. To play the videos I'm using video tag (). There are many conditions to play the video. Like: If user is not logged in then video will be paused after 20 seconds. After login if video is free then video will be play completely. But if video is paid and user did not pay for the video then the user can watch till 20 seconds only. and few more conditions are there. In chrome all the conditions are working perfectly. But in Mozilla it does not working. Like: If user is loggedin and he did not pay for the video then the video will be play till only 20 seconds and a message will be shown on the videos. It works on chrome. But at the mozilla the same video does not pause at the 20 seconds.

 <script>
    const videos = document.querySelectorAll('.myVideo');
    let playing = [];
console.log(routename);



    videos.forEach(async (video, index) => {
        const overlay = document.querySelectorAll('.overlay')[index];
        const paymentoverlay = document.querySelectorAll('.paymentoverlay')[index];

        video.addEventListener('loadedmetadata', async function () {
            console.log('1');
            video.addEventListener('timeupdate', async function () {
                console.log('2');
                if (!isUserLoggedIn && video.currentTime >= 20 && !video.paused && playing.includes(video)) {
                console.log('3');
                    video.pause();
                    video.controls = false;
                    overlay.style.display = 'block'; // Show the "Please login to continue watching" overlay
                } else {
                    if (isUserLoggedIn) {
                        if (await isFreeVideo(video)) {
                            console.log('4');
                            // Video will play.
                        } else {
                            if ((await isPaidVideo(video) && await hasPaid(video)) || (await isMemberVideo(video) && await isMembershipActive())) {
                                // Video will play.
                                console.log('5');
                            } else {
                                console.log('6');
                                if (!video.paused && video.currentTime >= 20) {
                                    console.log('7');
                                    video.pause();
                                    video.controls = false;
                                    paymentoverlay.style.display = 'block'; // Show the "Please pay first" overlay
                                }
                            }
                        }
                    }
                }
            });
        });

        video.onplay = function () {
            playing.push(video);
            if (!video.paused) {
                video.controls = true;
            }
        };

        video.onpause = function () {
            if (!video.paused) {
                video.controls = false;
            }
        };
    });

    document.addEventListener('click', async function (event) {
        if (!event.target.classList.contains('myVideo') && !event.target.classList.contains('play-icon')) {
            videos.forEach(async (video, index) => {
                const overlay = document.querySelectorAll('.overlay')[index];
                const paymentoverlay = document.querySelectorAll('.paymentoverlay')[index];

                if (!playing.includes(video) && !isUserLoggedIn && event.target.classList.contains('play-icon')) {
                    if (!(await isFreeVideo(video)) && !(await hasPaid(video)) && !(await isMembershipActive())) {
                        video.pause();
                        video.controls = false;
                        overlay.style.display = 'block'; // Show the "Please login to continue watching" overlay
                    } else if (await isPaidVideo(video) && !await hasPaid(video)) {
                        paymentoverlay.style.display = 'block'; // Show the "Please pay first" overlay
                    }
                }
            });
            event.stopPropagation();
        }
    });

    // Helper functions
    async function isFreeVideo(video) {
        const videoId = video.getAttribute('data-video-id');
        const response = await fetch(`{{ route('video.isFree', ['videoId' => ':videoId']) }}`.replace(':videoId', videoId));
        const data = await response.json();
        return data.isFree;
    }

    async function isPaidVideo(video) {
        const videoId = video.getAttribute('data-video-id');
        const response = await fetch(`{{ route('video.isPaid', ['videoId' => ':videoId']) }}`.replace(':videoId', videoId));
        const data = await response.json();
        return data.isPaid;
    }

    async function hasPaid(video) {
        const videoId = video.getAttribute('data-video-id');
        const response = await fetch(`{{ route('video.hasPaid', ['videoId' => ':videoId']) }}`.replace(':videoId', videoId));
        const data = await response.json();
        return data.hasPaid;
    }

    async function isMemberVideo(video) {
        const videoId = video.getAttribute('data-video-id');
        const response = await fetch(`{{ route('video.isMember', ['videoId' => ':videoId']) }}`.replace(':videoId', videoId));
        const data = await response.json();
        return data.isMember;
    }

    async function isMembershipActive() {
        const response = await fetch(`{{ route('user.isMembershipActive') }}`);
        const data = await response.json();
        return data.isMembershipActive;
    }
    </script>