MediaWiki:DraggableYouTubePlayer/code.js

/* * YouTubePlayer * @author A-Salt-Rifle * @description Draggable box that lets you play a youtube video on-site. * Updated: 19 Sept, 2017 */

(function {   var version = '1.0',        config = window.YouTubePlayerSettings || {},        ytpfvs = config.favorites || [],        defaultVideo = config.defaultVideo || 'B2zgebe8-PI'; //File Select - Super Mario Galaxy        defaultTheme = config.defaultTheme || 'default';        helpButton = config.helpButton || 'show';        autoplay = config.alwaysAutoplay || false;        loop = config.alwaysLoop || false;    // CSS aka my forte    importStylesheetURI('http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer.css');    // Main body    $('\ \ \ \               \  \ \ \       \        \        \            YouTubePlayer v' + version + '  \ x \ - \ ? \           \             \  \  \ \       \		 \				 \				\ \ \                    \				 \				\ \                   \                        <p style="position: absolute; font-size: 16px;"> 0:00 / 0:00  \ <input type="range" id="progress-bar" value="0" style="width: 70%; position: absolute; right: 0; height: 15px; bottom: 0;">\ \                   \				 \			 \		 \		<div id="Help" style="display:none; position: absolute; z-index: 1; background-color: rgba(57, 160, 177, 0.84); width: 500px; box-shadow: 0 0 20px 0 rgba(57, 160, 177, 0.84); color:white; top: -10px; height: 300px; overflow: auto; border: 1px solid #c3faff; border-bottom: none; border-radius: 5px; padding: 6px 8px; left: -50px;">\ \           Help \ \           \            Welcome to YouTubePlayer! This handy script allows you to play any YouTube video on any page you go as you work on your wikis! This is a small list of information regarding how to control the player.\ \           In order to play a YouTube video, copy paste the YouTube video ID or link into the upper search bar on the left. It is labelled as "Video ID or link". The ID of a video is found in the URL of the YouTube video - it is the series of characters at the end of the link that follows "watch?v=".\ \           The player can also play YouTube playlists. Simply copy and paste the playlist ID into the search bar labelled "Playlist". The ID of a playlist, just like the ID of a video, is also found in the URL of the playlist page. after "playlist?list=".\ \           You can also enable autoplay by checking the checkbox below "Add". By default, it is not checked. You\'ll have to configure your settings if you want every video to autoplay. A full list of configurations can be found <a href="https://dev.wikia.com/wiki/DraggableYouTubePlayer#Configuration" title="DraggableYouTubePlayer ">here</a>.\ \           After adding a YouTube video, you are given new options to control the video. The video itself will not allow you to control it, so only the buttons to the left side of the player will work. You are able to mute, loop, change the volume, and skip to a time. If you want to change which video you wish to play, click "Remove" and input a new link or ID.\ \           On the top right corner,\ \           x : closes the player.\ \           - : minimizes the player and moves it to the bottom left corner. It will still keep playing the video, and you will still be able to play/pause the video as well as skip to whichever time in the video you want.\ \           Color button: change the background color of the player to three different presets. Click outside the button to close the selection.\ \           <div id="closeHelp" style="text-align:center; float: right; width: fit-content; background: rgba(57, 160, 177, 0.84); border: 1px solid #c3faff; box-shadow: 0 0 20px rgb(195, 250, 255); display: flex; color: white; clear: both; height: fit-content; cursor:pointer; align-items: center; padding: 6px 8px; border-radius: 5px; transition: .5s;">Okay \ \	 ').appendTo($('body'));

// Main body var YouTubePlayer = $('#YouTubePlayer');

// Monobook support (ish) if (mw.config.get('skin') === 'monobook') { mw.util.addPortletLink('p-tb', '#', 'YouTubePlayer', 'YTPButton'); } else if ($('.toolbar .tools').length) { $('.toolbar .tools').append('<li id="YTPButton" style="cursor:pointer"><a>YouTubePlayer</a></li>'); } else { return; // There is nothing to append to   } $('#YTPButton').click(function {       YouTubePlayer.show;    }); $.getScript("https://www.youtube.com/iframe_api");

function exist(variable) { if (variable == "") { return false; }       return true; }

// Run it when a video is added. function initialize(event) { var player, time_update_interval = 0; // Update the controls on load. updateTimerDisplay; updateProgressBar; // Clear any old interval. clearInterval(time_update_interval); // Start interval to update elapsed time display and // The elapsed part of the progress bar every second. time_update_interval = setInterval(function {           updateTimerDisplay;            updateProgressBar;            getVideoInfo;        }, 1000); $('#videoInfo, #MBtn, .videoControls, #remove').show; $('#music, #playlist, #addmusic, #autoplay').hide; $('#favoriteList').animate({           height: '300px',            top: '-172px'        }); if ($('#autoplaycbox').prop('checked')) { event.target.playVideo; $('#musicbutton').html('<img src="http://vignette1.wikia.nocookie.net/steven-universe/images/b/bb/Notspritepause.png/revision/latest/scale-to-width-down/13" style="position:relative; top:-2px;" alt="Pause">'); playing = true; }       if (exist($('#playlist').val)) { initializePlaylist; } else { $('#MBtn').css({               'width': '100%'            }); }   }    // If the "video" is a playlist function initializePlaylist { $('.playlistOnlyBtn').show; }

// Get info and update it   function getVideoInfo { if (window.player) { $('span#title').text(player.getVideoData.title); $('span#channel').text(player.getVideoData.author); $('#videoThumbnail').css('background', 'url(https://i.ytimg.com/vi/' + player.getVideoData.video_id + '/hqdefault.jpg) center / cover'); }       $('#sound').on('click', function {            var muteToggle = $(this);            if (player.isMuted) {                player.unMute;                $('#volume').removeAttr('disabled');                $('#volumeTD').css('opacity', '1');            } else {                player.mute;                $('#volume').attr('disabled', 'disabled');                $('#volumeTD').css('opacity', '.5');            }        }); $('#volume').on('input', function {           if (!window.player) return;            player.setVolume(this.value);        }); }

function updateTimerDisplay { // Update current time text display. if (window.player) { $('span#current-time').text(formatTime(player.getCurrentTime)); $('span#duration').text(formatTime(player.getDuration)); } else return; }

function formatTime(time) { time = Math.round(time); var minutes = Math.floor(time / 60), seconds = time - minutes * 60; seconds = seconds < 10 ? '0' + seconds : seconds; return minutes + ":" + seconds; }

function updateProgressBar { if (!window.player) return; // Update the value of our progress bar accordingly. $('#progress-bar').val((player.getCurrentTime / player.getDuration) * 100); }

// Lets you skip to a point in the video $('#progress-bar').on('mouseup touchend', function(e) {       // Calculate the new time for the video.        // New time in seconds = total duration in seconds * ( value of range input / 100 )        var newTime = player.getDuration * (e.target.value / 100);        // Skip video to new time.        player.seekTo(newTime);    });

// Add Music $('#addmusic').click(function {       var link = $('#music').val;        var playlist = $('#playlist').val;        if (window.player) {            alert('You already have a video playing. Please remove it before adding a new one.');       } else if (exist(link)) {            window.player = new YT.Player('video1', { height: '100%', width: '100%', videoId: link.slice(-11), playerVars: { 'controls': 0, 'list': playlist, 'fs': 0, 'showinfo': 0, 'rel': 0, 'enablejsapi': 1 },               events: { onReady: initialize, onStateChange: function(e) { if (e.data === YT.PlayerState.ENDED &&                           $('#loop').prop('checked')) { player.playVideo; }                   }                }            });            try {                player.playVideo;            } catch (e) {}        } else if ((exist(playlist)) && (!exist(link))){            window.player = new YT.Player('video1', { height: '100%', width: '100%', playerVars: { 'controls': 0, 'list': playlist, 'fs': 0, 'showinfo': 0, 'rel': 0, 'enablejsapi': 1 },               events: { onReady: initialize, onStateChange: function(e) { if (e.data === YT.PlayerState.ENDED &&                           $('#loop').prop('checked')) { player.playVideo; }                   }                }            });            try {                player.playVideo;            } catch (e) {}        } else {            window.player = new YT.Player('video1', { height: '100%', width: '100%', videoId: defaultVideo, playerVars: { 'controls': 0, 'fs': 0, 'showinfo': 0, 'rel': 0, 'enablejsapi': 1 },               events: { onReady: initialize, onStateChange: function(e) { if (e.data === YT.PlayerState.ENDED &&                           $('#loop').prop('checked')) { player.playVideo; }                   }                }            });            try {                player.playVideo;            } catch (e) {}        }    });

// Remove Music $('#removemusic').click(function {       window.player.stopVideo;        window.player = undefined;        playing = false;        $('#video1').remove;        $(' <img width="100%" src="https://i.ytimg.com/vi/yE-ssqMY8yw/maxresdefault.jpg"> ').appendTo('#youtube');        $('#musicbutton').html('<img src="https://vignette1.wikia.nocookie.net/steven-universe/images/f/fb/Notspriteplay.png/revision/latest/scale-to-width-down/14" alt="Play">');        $('#MBtn, #videoInfo, .videoControls, .playlistOnlyBtn, #remove').hide;        $('#music, #playlist').show.val('');        $('#addmusic, #autoplay').show;        $('#favoriteList').animate({ height: '210px', top: '-120px' });       $('#MBtn').css({ width: '40%', });   });

// Buttons! var playing = false; $('#musicbutton').click(function {       if (!window.player) return;        if (playing) {            $('#musicbutton').html('<img src="https://vignette1.wikia.nocookie.net/steven-universe/images/f/fb/Notspriteplay.png/revision/latest/scale-to-width-down/13" style="position:relative; top:-2px;" alt="Play">');            player.pauseVideo;        } else {            $('#musicbutton').html('<img src="http://vignette1.wikia.nocookie.net/steven-universe/images/b/bb/Notspritepause.png/revision/latest/scale-to-width-down/13" style="position:relative; top:-2px;" alt="Pause">');            try {                player.playVideo;            } catch (e) {}        }        playing = !playing;    }); // Playlist Buttons $('#previousPlaylist').click(function {       if (!window.player) return;        player.previousVideo;    }); $('#nextPlaylist').click(function {       if (!window.player) return;        player.nextVideo;    });

// Buttons on the top right. $('#closePlayer').click(function {       YouTubePlayer.hide;    });

$('#minimizePlayer').toggle(function {       $('.minimize, #version').hide;        YouTubePlayer.animate({ 'bottom': '0', 'left': '0', 'width': '200px' });       YouTubePlayer.css({ 'top': 'initial', });       $('#progress-bar').animate({ 'width': '50%' });       $('#openHelp').hide;        $('.skinSwitch').css({ 'top': 'initial', 'position': 'inherit' });       $(this).text('+');    }, function {        if (window.player) {            $('.minimize:not(#autoplay), #version').show;            YouTubePlayer.animate({ 'left': '25%', 'top': '30%', 'width': '400px' });           YouTubePlayer.css({ 'bottom': 'initial', });           $('#progress-bar').animate({ 'width': '70%' });           $('#openHelp').show;            $('.skinSwitch').css({ 'right': '22px', 'top': '0', 'position': 'absolute' });           $(this).text('-');        } else {            $('.minimize:not(#videoInfo, .videoControls, #remove), #version').show;            YouTubePlayer.animate({ 'left': '25%', 'top': '30%', 'width': '400px' });           YouTubePlayer.css({ 'bottom': 'initial', });           $('#progress-bar').animate({ 'width': '70%' });           $('#openHelp').show;            $('.skinSwitch').css({ 'right': '22px', 'top': '0', 'position': 'absolute' });           $(this).text('-');        }    }); // Skin Switch $('head').append($(' ', { id: 'YTPTheme', rel: 'stylesheet', href: 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/defaultTheme.css' }));    $('.otherSkin').hide; YouTubePlayer.on('click', function(e) {   if ($(e.target).closest('.currentSkin').length) {        $('.otherSkin').show;        $('.currentSkin').css({ 'border-radius': '0', });       $('#darkSkin').on('click', function { $(this).addClass('currentSkin').removeClass('otherSkin'); $('#lightSkin, #defaultSkin').removeClass('currentSkin').addClass('otherSkin'); $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/darkTheme.css'); if (($('#defaultSkin').css('top') === '0px') && ($('#lightSkin').css('top') === '-22px')) { $('#lightSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#darkSkin').css({                   'border-radius': '0',                    'top': '0'                }); $('#defaultSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px'                }); } else if (($('#defaultSkin').css('top') === '-22px') && ($('#lightSkin').css('top') === '0px')) { $('#defaultSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px'                }); $('#darkSkin').css({                   'border-radius': '0',                    'top': '0'                }); $('#lightSkin').css({                   'border-radius': '0 0 3px',                    'top': '22px',                }); } else if (($('#defaultSkin').css('top') === '0px') && ($('#lightSkin').css('top') === '22px')) { $('#defaultSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px'                }); $('#darkSkin').css({                   'border-radius': '0',                    'top': '0'                }); $('#lightSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#defaultSkin').css('top') === '22px') && ($('#lightSkin').css('top') === '0px')) { $('#lightSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#darkSkin').css({                   'border-radius': '0',                    'top': '0'                }); $('#defaultSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px'                }); }       });        $('#lightSkin').on('click', function { $(this).addClass('currentSkin').removeClass('otherSkin'); $('#defaultSkin, #darkSkin').removeClass('currentSkin').addClass('otherSkin'); $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/lightTheme.css'); if (($('#defaultSkin').css('top') === '0px') && ($('#darkSkin').css('top') === '22px')) { $('#defaultSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#lightSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#darkSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#defaultSkin').css('top') === '22px') && ($('#darkSkin').css('top') === '0px')) { $('#darkSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#lightSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#defaultSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#defaultSkin').css('top') === '0px') && ($('#darkSkin').css('top') === '-22px')) { $('#darkSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#lightSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#defaultSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#defaultSkin').css('top') === '-22px') && ($('#darkSkin').css('top') === '0px')) { $('#defaultSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#lightSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#darkSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); }       });        $('#defaultSkin').on('click', function { $(this).addClass('currentSkin').removeClass('otherSkin'); $('#lightSkin, #darkSkin').removeClass('currentSkin').addClass('otherSkin'); $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/defaultTheme.css'); if (($('#lightSkin').css('top') === '0px') && ($('#darkSkin').css('top') === '-22px')) { $('#darkSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#defaultSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#lightSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#lightSkin').css('top') === '0px') && ($('#darkSkin').css('top') === '22px')) { $('#lightSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#defaultSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#darkSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#lightSkin').css('top') === '-22px') && ($('#darkSkin').css('top') === '0px')) { $('#lightSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#defaultSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#darkSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); } else if (($('#lightSkin').css('top') === '22px') && ($('#darkSkin').css('top') === '0px')) { $('#darkSkin').css({                   'border-radius': '3px 3px 0 0',                    'top': '-22px',                }); $('#defaultSkin').css({                   'border-radius': '0',                    'top': '0',                }); $('#lightSkin').css({                   'border-radius': '0 0 3px 3px',                    'top': '22px',                }); }       });    } else if (!$(e.target).closest('.skinSwitch').length) {        $('.currentSkin').css({ 'border-radius': '0 0 0 3px', });       $('.otherSkin').hide;    }    }); if (defaultTheme === 'default') { $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/defaultTheme.css'); $('#defaultSkin').addClass('currentSkin').removeClass('otherSkin'); $('#lightSkin, #darkSkin').removeClass('currentSkin').addClass('otherSkin'); $('#lightSkin').css({               'border-radius': '3px 3px 0 0',                'top': '-22px',            }); $('#defaultSkin').css({               'border-radius': '0 0 0 3px',                'top': '0',            }); $('#darkSkin').css({               'border-radius': '0 0 3px 3px',                'top': '22px',            }); } if (defaultTheme === 'light') { $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/lightTheme.css'); $('#lightSkin').addClass('currentSkin').removeClass('otherSkin').show; $('#defaultSkin, #darkSkin').removeClass('currentSkin').addClass('otherSkin'); $('#defaultSkin').css({               'border-radius': '3px 3px 0 0',                'top': '-22px',                'display': 'none'            }); $('#lightSkin').css({               'border-radius': '0 0 0 3px',                'top': '0',            }); $('#darkSkin').css({               'border-radius': '0 0 3px 3px',                'top': '22px',            }); } if (defaultTheme === 'dark') { $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/darkTheme.css'); $('#darkSkin').addClass('currentSkin').removeClass('otherSkin').show; $('#lightSkin, #defaultSkin').removeClass('currentSkin').addClass('otherSkin'); $('#lightSkin').css({               'border-radius': '3px 3px 0 0',                'top': '-22px',            }); $('#darkSkin').css({               'border-radius': '0 0 0 3px',                'top': '0'            }); $('#defaultSkin').css({               'border-radius': '0 0 3px 3px',                'top': '22px',                'display': 'none'            }); } if (['dark','light','default'].indexOf(defaultTheme) == -1) { $('#YTPTheme').attr('href', 'http://dev.wikia.com/index.php?action=raw&ctype=text/css&title=MediaWiki:DraggableYouTubePlayer/defaultTheme.css'); }   if (helpButton !== 'show') { $('#openHelp').hide; $('.skinSwitch').css({           'right': 'initial',            'top': 'initial',            'position': 'inherit'        }); }   $('#openHelp').click(function {        $('#Help').show;    }); $('#closeHelp').click(function {       $('#Help').hide;    }); // Favorite List if (ytpfvs.length) { $('#FVStatement span').text('Favorites List'); ytpfvs.forEach(function(obj, i) {           $('#favoriteList ul').append($('', {                id: 'FV' + (i + 1),                append: $(' ', { class: 'fvlist', append: [ $(' ', {                           class: 'fvthumb',                            css: {                                background: 'url(https://i.ytimg.com/vi/' + obj.id + '/hqdefault.jpg) center center / cover'                            }                        }), $(' ', {                           text: obj.name,                            css: {                                width: '100px'                            }                        }) ]               }).click(function { if (window.player) { alert('You already have a video playing. Please remove it before adding a new one.'); } else { $('#music').hide; window.player = new YT.Player('video1', {                           height: '100%',                            width: '100%',                            videoId: obj.id,                            playerVars: {                                'controls': 0,                                'fs': 0,                                'showinfo': 0,                                'rel': 0,                                'enablejsapi': 1                            },                            events: {                                onReady: initialize,                                onStateChange: function(e) {                                    if (e.data === YT.PlayerState.ENDED && $('#loop').prop('checked')) {                                       player.playVideo;                                    }                                }                            }                        }); try { player.playVideo; } catch (e) {} }               })            }));            });    } else { $('#favorites').hover(function {            $('#favoriteList').css({ 'display': 'flex', 'align-items': 'center', });           $('#FVStatement span').text('You have no favorites');            $('#FVStatement').attr('style', 'border-bottom: none !important');        }, function {            $('#favoriteList').css({ 'display': 'none' });       }    );    }    // Other settings if (alwaysLoop === true) { $('#loop').prop('checked', true); }   if (alwaysAutoplay === true) { $('#autoplaycbox').prop('checked', true); }   // Make it draggable. var containerStyle, $container; try { $container.draggable({           containment: 'window',            scroll: false,            stop: function {                containerStyle = this.style;                containerStyle = {                    left: containerStyle.left,                    top: containerStyle.top                };            }        }); containerStyle = $container[0].style; containerStyle = { left: containerStyle.left, top: containerStyle.top };   } catch (e) {} mw.loader.using(['jquery.ui.draggable'], function {       var $window = $(window);        YouTubePlayer.draggable({ containment: document.body });   }); });