Plyr player crash when withCredentials is true

[skfaisal93]

What do you want to do with Hls.js?

I want to play m3u8 video through AWS Cloudfront using signed cookies

What have you tried so far?

I am using plyr player and this hls library. When I load video without Next.js (with native JS) then video plays properly but with Next.js it destroyed my player design and started giving me following error.

Uncaught ReferenceError: n is not defined

https://i.stack.imgur.com/wt1Y7.png

The player design was not destroyed until I enable the withCredentials

let config = {
    xhrSetup: function (xhr) {
        xhr.withCredentials = true; // do send cookies
    },
};

const hls = new Hls(config);

Player Component

const Player4 = ({options}) => {

    const dispatch = useDispatch();

    const {activeChapter} = useSelector(state => state.product.viewData);

    const componentMountedRef = useRef(null);
    const activeChapterRef = useRef(null);
    const updateDurationIntervalRef = useRef(null);

    activeChapterRef.current = activeChapter;

    const updateQuality = newQuality => {
        window.hls.levels.forEach((level, levelIndex) => {
            if (level.height === newQuality) {
                window.hls.currentLevel = levelIndex;
            }
        });
    }

    const destroyHLS = () => {
        clearInterval(updateDurationIntervalRef.current);
        window.hls.stopLoad();
        window.hls.detachMedia();
        window.hls.destroy();
    };

    if (typeof window !== 'undefined') {
        window.destroyHLS = destroyHLS;
        const video = document.getElementById('player');

        //Player Events
        const playerEvents = () => {
            window.player.on('ready', event => {
                updateDurationIntervalRef.current = setInterval(function () {
                    if (!window.player.paused) {
                        dispatch(updateWatchedDuration(activeChapterRef.current?.id, window.player.currentTime));
                    }
                }, 4000);
            });

            window.player.on('emptied', event => {
                console.log('Player Emptied Called', componentMountedRef.current);
                if (componentMountedRef.current) {
                    updateDurationIntervalRef.current = setInterval(function () {
                        dispatch(updateWatchedDuration(activeChapterRef.current?.id, window.player.currentTime));
                    }, 4000);
                }
            });

            window.player.on('ended', event => {
                console.log('Player Ended Called', componentMountedRef.current);
                if (componentMountedRef.current) {
                    updateDurationIntervalRef.current = setInterval(function () {
                        dispatch(updateWatchedDuration(activeChapterRef.current?.id, window.player.currentTime));
                    }, 4000);
                }
            });

            window.player.on('loadedmetadata', event => {
                //alert('loadedmetadata');
                dispatch(updateWatchedDuration(activeChapterRef.current?.id, activeChapterRef.current?.watched_duration));
                window.player.poster = activeChapterRef.current?.thumbnail?.url;
                window.player.currentTime = activeChapterRef.current?.watched_duration;

                if (window.player.paused) {
                    window.player.play();
                }
            });
        }

        const defaultOptions = {
            debug: false,
        };

        if (!Hls.isSupported()) {

            if (video?.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = options.source.src;
                const player = new Plyr(video, defaultOptions);
                window.player = player;
                playerEvents();
            }

        } else {

            if (window.hls) destroyHLS();

            let config = {
                xhrSetup: function (xhr) {
                    xhr.withCredentials = true; // do send cookies
                },
            };

            const hls = new Hls();
            hls.loadSource(options.source.src);

            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

                const availableQualities = hls.levels.map((l) => l.height);

                defaultOptions.quality = {
                    default: availableQualities[0],
                    options: availableQualities,
                    forced: true,
                    onChange: (e) => updateQuality(e),
                }

                const player = new Plyr(video, defaultOptions)
                window.player = player;

                playerEvents();

            });

            hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
                var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span")
                if (hls.autoLevelEnabled) {
                    span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`
                } else {
                    span.innerHTML = `AUTO`
                }
            })

            hls.attachMedia(video);
            window.hls = hls;
        }
    }

    //Unmount component
    useEffect(() => {

        componentMountedRef.current = true;

        return () => {
            if (window.hls) {
                componentMountedRef.current = false;
                window.destroyHLS();
            }
        }
    }, [])

    return (

        <video id="player" autoPlay playsInline controls/>
    );
};

export default Player4;

[robwalch]

Please fill out the Bug Report Template as part of your issue, making sure to include:

• Test stream/page (if possible)
• Steps to reproduce
• Expected behavior
• Actual behavior

Please provide a standalone example that produces the exception with HLS.js alone, otherwise we must assume this is an exception in your stack and not HLS.js.

[robwalch]

Closing as an implementation issue. If you need support, please include a codepen that reproduces the issue with a complete bug report.