User:Most2dot0/common.js

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = { parameterColor: "#FFDD99" }

// embedded YouTube player implementation 
// Use like this, where + designates an optional start, and "-" an optional stop time:
// <div class="youtube-player-placeholder" data-videos="VIDEO_ID_1|+45-135,VIDEO_ID_2,VIDEO_ID_3|+10-60"></div>

function insertYouTubePlayers() {
    var placeholders = document.querySelectorAll('.youtube-player-placeholder');

    if (!document.getElementById('youtube-iframe-api')) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        tag.id = 'youtube-iframe-api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }

    var player;
    var videoDataLists = [];
    var videoLists = [];
    var currentVideoIndices = [];
    var checkIntervals = [];

    placeholders.forEach(function(placeholder, index) {
        var videoDataList = placeholder.getAttribute('data-videos').split(',');

        var playerDiv = document.createElement('div');
        playerDiv.id = 'youtube-player-' + index;
        placeholder.appendChild(playerDiv);

        videoDataLists[index] = videoDataList;
        currentVideoIndices[index] = 0;
        checkIntervals[index] = null;

        videoLists[index] = videoDataList.map(function(videoData) {
            var parts = videoData.split('|');
            var videoId = parts[0];
            var start = 0;
            var end = null;

            if (parts.length > 1) {
                var timeParts = parts[1].split('+');
                if (timeParts.length > 1) {
                    start = parseInt(timeParts[1].split('-')[0]) || 0;
                    if (timeParts[1].includes('-')) {
                        end = parseInt(timeParts[1].split('-')[1]) || null;
                    }
                } else if (parts[1].includes('-')) {
                    end = parseInt(parts[1].split('-')[1]) || null;
                }
            }

            return { videoId: videoId, start: start, end: end };
        });
    });

    function onYouTubeIframeAPIReady() {
        var observer = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    var index = entry.target.getAttribute('data-index');
                    if (!entry.target.getAttribute('data-loaded')) {
                        loadYouTubePlayer(entry.target, index);
                        entry.target.setAttribute('data-loaded', 'true');
                    }
                }
            });
        });

        placeholders.forEach(function(placeholder, index) {
            placeholder.setAttribute('data-index', index);
            observer.observe(placeholder);
        });
    }

    window['onYouTubeIframeAPIReady'] = onYouTubeIframeAPIReady;

    function loadYouTubePlayer(placeholder, index) {
        window['youtube-player-' + index] = new YT.Player('youtube-player-' + index, {
            height: '270',
            width: '480',
            videoId: videoLists[index][currentVideoIndices[index]].videoId,
            playerVars: {
                start: videoLists[index][currentVideoIndices[index]].start
            },
            events: {
                'onStateChange': onPlayerStateChange(index)
            }
        });
    }

    function onPlayerStateChange(index) {
        return function(event) {
            clearInterval(checkIntervals[index]);
            if (event.data == YT.PlayerState.PLAYING && videoLists[index][currentVideoIndices[index]].end) {
                checkIntervals[index] = setInterval(function() {
                    var currentTime = window['youtube-player-' + index].getCurrentTime();
                    if (currentTime >= videoLists[index][currentVideoIndices[index]].end) {
                        playNextVideo(index);
                    }
                }, 1000); // Check every second
            } else if (event.data == YT.PlayerState.ENDED) {
                playNextVideo(index);
            }
        };
    }

    function playNextVideo(index) {
        clearInterval(checkIntervals[index]);
        currentVideoIndices[index]++;
        if (currentVideoIndices[index] < videoLists[index].length) {
            window['youtube-player-' + index].loadVideoById({
                videoId: videoLists[index][currentVideoIndices[index]].videoId,
                startSeconds: videoLists[index][currentVideoIndices[index]].start
            });
        } else {
            currentVideoIndices[index] = 0;
            window['youtube-player-' + index].loadVideoById({
                videoId: videoLists[index][currentVideoIndices[index]].videoId,
                startSeconds: videoLists[index][currentVideoIndices[index]].start
            });
        }
    }
}

insertYouTubePlayers();