User:Most2dot0/common.js

From Angelina Jordan Wiki

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
//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 
function insertYouTubePlayers() {
    var placeholders = document.querySelectorAll('.youtube-player-placeholder');

    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);

        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 currentVideoIndex = 0;

        var videoList = 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 };
        });

        window['onYouTubeIframeAPIReady'] = function() {
            placeholders.forEach(function(placeholder, index) {
                window['youtube-player-' + index] = new YT.Player('youtube-player-' + index, {
                    height: '360',
                    width: '640',
                    videoId: videoList[currentVideoIndex].videoId,
                    playerVars: {
                        start: videoList[currentVideoIndex].start,
                        end: videoList[currentVideoIndex].end
                    },
                    events: {
                        'onStateChange': onPlayerStateChange(index)
                    }
                });
            });
        };

        function onPlayerStateChange(index) {
            return function(event) {
                if (event.data == YT.PlayerState.ENDED) {
                    playNextVideo(index);
                }
            };
        }

        function playNextVideo(index) {
            currentVideoIndex++;
            if (currentVideoIndex < videoList.length) {
                window['youtube-player-' + index].loadVideoById({
                    videoId: videoList[currentVideoIndex].videoId,
                    startSeconds: videoList[currentVideoIndex].start,
                    endSeconds: videoList[currentVideoIndex].end
                });
            } else {
                currentVideoIndex = 0;
                window['youtube-player-' + index].loadVideoById({
                    videoId: videoList[currentVideoIndex].videoId,
                    startSeconds: videoList[currentVideoIndex].start,
                    endSeconds: videoList[currentVideoIndex].end
                });
            }
        }

        // Ensure that players are created once the API is ready
        if (typeof YT !== 'undefined' && YT && YT.Player) {
            window['onYouTubeIframeAPIReady']();
        }
    });
}

insertYouTubePlayers();