<div>
        <!-- modules hook -->
    @action('live::video-column-player', $this->channel)

    <style>
        :root {
            --plyr-color-main : #007f3f;
        }

        .plyr:fullscreen video {
            max-width: 100vh !important;
            max-height: 100vh !important;
        }
    </style>

    <video  data-poster="{{url($channel->poster ?? theme('/img/photos/vod/default-video.jpg'))}}" css="video-player aspect-video w-full" id="player" playsinline crossorigin controls ></video>


    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const source = '{{$channel->playerLink()}}';
            const video = document.querySelector('video');

            const defaultOptions = {};

            if (!Hls.isSupported()) {
                video.src = source;
                var player = new Plyr(video, defaultOptions);
            } else {
                // For more Hls.js options, see https://github.com/dailymotion/hls.js
                const hls = new Hls();
                hls.loadSource(source);

                // From the m3u8 playlist, hls parses the manifest and returns
                // all available video qualities. This is important, in this approach,
                // we will have one source on the Plyr player.
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

                    // Transform available levels into an array of integers (height values).
                    // const availableQualities = hls.levels.map((l) => l.bitrate/1000)
                    const availableQualities  = ['720', '480', '360', '240']
                    availableQualities.unshift(0) //prepend 0 to quality array

                    // Add new qualities to option
                    defaultOptions.quality = {
                        default: 0, //Default - AUTO
                        options: availableQualities,
                        forced: true,
                        onChange: (e) => updateQuality(e),
                    }
                    // Add Auto Label
                    defaultOptions.i18n = @json(trans("vod::lang.player"))

                    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 = `{{trans("vod::lang.auto")}} (${extractQuality(hls.levels[data.level].url)}p)`
                        } else {
                            span.innerHTML = `{{trans("vod::lang.auto_with_description")}}`
                        }
                    })

                    // Initialize new Plyr player with quality options
                    var player = new Plyr(video, defaultOptions);
                });

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

            function updateQuality(newQuality) {
                console.log(newQuality);
                if (newQuality === 0) {
                    window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
                } else {
                    window.hls.levels.forEach((level, levelIndex) => {
                        console.log(levelIndex)
                        console.log(extractQuality(hls.levels[levelIndex].url), newQuality)
                        if (extractQuality(hls.levels[levelIndex].url) === newQuality) {
                            window.hls.currentLevel = levelIndex;
                        }
                    });
                }
            }

            function extractQuality(inputArray) {
                if (inputArray.length === 1) {
                    const url = inputArray[0];
                    const parts = url.split('_');
                    if(parts.length == 2) {
                        const name = parts[1]
                        return name.replace('.m3u8', '')
                    }
                }
                // invalid input
                return null;
            }

        });
    </script>
</div>
