User:Most2dot0/common.js

From Angelina Jordan Wiki
Revision as of 09:19, 2 August 2024 by Most2dot0 (talk | contribs) (Add optional start and end times to player)

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 supporting ad-hoc playlists
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 videoId = videoData.split('>')[0];
            var start = videoData.includes('>') ? parseInt(videoData.split('>')[1].split('<')[0]) : 0;
            var end = videoData.includes('<') ? parseInt(videoData.split('<')[1]) : null;
            return { videoId: videoId, start: start, end: end };
        });

        window['onYouTubeIframeAPIReady'] = function() {
            placeholders.forEach(function(placeholder, index) {
                player = 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
                });
            }
        }

        window['youtube-player-' + index] = player;
    });
}

insertYouTubePlayers();