https://happytravels.com.au/wp-content/plugins/stone-digital-cloud…/sd-cf-video/sd-cf-video.js?ver=6.5.12

1(function () {
2    function initCFVideos() {
3        const videos = document.querySelectorAll('.sd-cf-video-element:not(.cf-initialized)');
4
5        if (videos.length === 0) return;
6
7        // If HLS.js is not loaded, load it dynamically
8        if (typeof Hls === 'undefined') {
9            const script = document.createElement('script');
10            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.12/hls.min.js';
11            script.onload = () => initVideos(videos);
12            document.head.appendChild(script);
13        } else {
14            initVideos(videos);
15        }
16    }
17
18    function initVideos(videos) {
19        videos.forEach(video => {
20            video.classList.add('cf-initialized');
21            const videoSrc = video.getAttribute('data-cf-manifest-url');
22            if (!videoSrc) return;
23
24            // Safari natively handles HLS via the <source> tag we output in PHP.
25            // Attaching Hls.js on Safari (like iPad/Mac) overrides the native <source>, causing a flicker/glitch.
26            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
27
28            if (isSafari && video.canPlayType('application/vnd.apple.mpegurl')) {
29                // Do nothing, let native HTML5 <source> handle it smoothly.
30                return;
31            }
32
33            if (Hls.isSupported()) {
34                const hls = new Hls();
35                hls.loadSource(videoSrc);
36                hls.attachMedia(video);
37
38                // Quality Selector Logic
39                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
40                    const wrapper = video.closest('.ht-container') || video.closest('.ht-video-main');
41                    if (!wrapper) return;
42
43                    const selectorBox = wrapper.querySelector('.sd-cf-quality-selector');
44                    if (selectorBox) {
45                        const select = selectorBox.querySelector('.sd-cf-quality-select');
46
47                        // Populate quality levels
48                        data.levels.forEach((level, index) => {
49                            const option = document.createElement('option');
50                            option.value = index;
51                            option.text = level.height + 'p';
52                            option.style.color = 'black'; // for styling consistency
53                            select.appendChild(option);
54                        });
55
56                        // Set default to maximum quality
57                        const maxIndex = data.levels.length - 1;
58                        if (maxIndex >= 0) {
59                            select.value = maxIndex;
60                            hls.currentLevel = maxIndex;
61                        }
62
63                        selectorBox.style.display = 'flex';
64
65                        // Handle quality change
66                        select.addEventListener('change', function () {
67                            hls.currentLevel = parseInt(this.value);
68                        });
69                    }
70                });
71            }
72        });
73    }
74
75    // Initialize on DOMContentLoaded and also when ACF blocks are loaded in the editor
76    document.addEventListener('DOMContentLoaded', initCFVideos);
77
78    // For block editor preview
79    if (window.acf) {
80        window.acf.addAction('render_block_preview', initCFVideos);
81    }
82})();