This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Twitch.Plug.DJ | |
// @namespace twitch.plug.dj | |
// @include http://plug.dj/* | |
// @include https://plug.dj/* | |
// @version 1 | |
// @grant none | |
// @description Integrates twitch streams into plug.dj | |
// ==/UserScript== | |
/* | |
Twitch.plug.dj | |
A website integration script by Anaerin - anaerin@gmail.com | |
Copyright 2014, Robert "Anaerin" Johnston. | |
This is free software, and comes with no warranty or guarantee. Use it at your | |
own risk. | |
If you want to improve/update/make changes to this software, feel free to do so, | |
but do please let me know, and keep this license and message intact. | |
INSTRUCTIONS | |
============ | |
Load this like any other greasemonkey or user script. | |
If the plug.dj room you are in has a twitch.tv url in it's welcome message, this | |
script will automatically load the specified twitch stream. | |
If you want to add a twitch stream to a room that doesn't have one, use the chat | |
command "/addtwitch <channelname>". This will also change channel if one is | |
already open. | |
If you no longer want to view the twitch stream, use the chat command | |
"/removetwitch". | |
Note: These chat commands will only work in the plug.dj chat, not the twitch | |
one. | |
REVISION HISTORY | |
================ | |
1.0 Initial release. | |
*/ | |
console.log("Loading..."); | |
function addTwitch(channelName) { | |
API.chatLog("Loading twitch channel " + channelName,false); | |
$("#users-button").before('<div class="header-panel-button" id="twitch-button"><i class="icon icon-twitch"></i></div>'); | |
$("#twitch-button").click(function() { | |
if (!$(this).hasClass("selected")) { | |
$(".header-panel-button").removeClass("selected"); | |
$(this).addClass("selected"); | |
$(".app-right > div").css("display", "none"); | |
$("#twitchChat").css("display", "block"); | |
} | |
}); | |
$(".icon-twitch").css({ | |
"position": "relative", | |
"top": "13px", | |
"display": "inline-block", | |
"margin": "0px auto", | |
"background-image": "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEY2QkQ3ODgzQTA1MTFFNEJEQTBDN0E0MTg5NEREQ0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEY2QkQ3ODkzQTA1MTFFNEJEQTBDN0E0MTg5NEREQ0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RjZCRDc4NjNBMDUxMUU0QkRBMEM3QTQxODk0RERDRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RjZCRDc4NzNBMDUxMUU0QkRBMEM3QTQxODk0RERDRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ptfx7lcAAAKMSURBVHjaxFe9axRBFJ+Z3b29JBdFtBCxMYpRJEIUlKCW6fxALSxsopWNhcF/wjRaaWuRQFLYKGITsdMiFoqCEcGAJLJ4kCOe4b53fe9u9nxZZ/ZmN3vkwe92d252fjO/9zGzPAgCthNm40+l1mDvP35nvh9MMs7O95Pw9NihJ4VB1+sQV+vszbtl1mr5Dzhn4/0iRW1HRw487xILYHNz9nEgHoPbsM8vgJ8RZx6wBwcVgre6Uku7TJ5/A84BihkRXwTMhSuixBbgWkSVkpxAFvYnvOHyKuT1IID6lkfU2K5ZyqgGy5FJaI1DAEAcML9HCmLMCCGIsFulpMRGyQzpxoYL+X1DA+5+eMQg+QZoki4jALdaa5Q2yhWPc8XkI8RGVm802fiJo1MXzozOSP8fA3hEzhfY9vnr6uNnr5bu5hz98CKpszhvr0MXA3ZHaW7H5XIq4uBfjVXluN/po89/npY4KxP9K44ZSy19HKtkXJ/UUkOtDQNngIwTmtsObyF6ZkuidHIci31aXp1f80ofZP6uRwLrJqBQ3qz+cOwtxapGpOaJiWElrLheXvGKGysa972VqjAklgmAKtwhUrcSE+NAFgxqCcuoryRdAFySzY8AX+KIA9MyGmMh6RX5/BAwbRLV2yEejpDiSqdNajW++DqyAaAtEX/dANzXTH434DAhvWca1ejEk4r2CiGdU+2zEfuPNG0BwVPJVcBsGlKV1MJgILQJwKRBNihJVVKvyQOZqtRNAa7L+72R/2ZlEFGrAhZ7RWxIvAl4qel7VtP+FHArca2nxJjstXqzfZ5SlPddGtLbafYsPD51ifOuwyZOHWGa76hF8h5O6ydgJm2eDw3mOivfqY+2vwIMAIAvucLKtiD4AAAAAElFTkSuQmCC)" | |
}); | |
$(".app-right > div").css({ | |
"display": "none", | |
"background-color": "#0a0a0a" | |
}); | |
$(".header-panel-button").removeClass("selected"); | |
$("#chat").before('<div id="twitchChat" style="display: block;"><iframe width="100%" height="100%" frameborder="0" scrolling="no" id="twitchiFrame" /></div>'); | |
$("#twitchiFrame").attr('src',"http://www.twitch.tv/" + channelName + "/chat"); | |
$("#twitchChat").css({ | |
"position": "absolute", | |
"top": "0px", | |
"left": "0px", | |
"z-index": "2", | |
"width": "100%", | |
"height": "100%" | |
}); | |
$("#chat-button").css({ | |
"width": "85px" | |
}); | |
$("#twitch-button").css({ | |
"width": "85px", | |
"left": "86px" | |
}); | |
$("#users-button").css({ | |
"width": "85px", | |
"left": "172px" | |
}); | |
$("#waitlist-button").css({ | |
"width": "85px", | |
"left": "258px" | |
}); | |
$(".app-header").before('<div id="twitchStream">Loading...</div>'); | |
$("#twitchStream").css({ | |
"position": "absolute", | |
"top": "54px", | |
"left": "0px", | |
"right": "346px", | |
"bottom": "55px" | |
}); | |
$("#twitchStream").html('<object style="height: 100%; width: 100%;" type="application/x-shockwave-flash" id="embed_' + channelName + '" class="stream" data="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.r13c6ca84fa09a2961548fabd63cb80592c053ed8.swf?old=1&channel=' + channelName + '" bgcolor="#000000" width="400" height="255"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"><param name="movie" value="https://www.twitch.tv/widgets/live_embed_player.swf"><param name="flashvars" value="hostname=www.twitch.tv&channel=' + channelName + '&auto_play=true&start_volume=0"><param name="wmode" value="opaque"></object>' ); | |
$("#twitch-button").addClass("selected"); | |
$("#avatars-container").css({ | |
"display": "none" | |
}); | |
$("#playback").css({ | |
"visibility": "hidden" | |
}); | |
} | |
function isTwitchLoaded() { | |
if (document.getElementById("twitchiFrame")) return true; | |
return false; | |
} | |
function removeTwitch() { | |
$("#twitch-button").remove(); | |
$("#twitchChat").remove(); | |
$("#twitchStream").remove(); | |
$("#avatars-container").css({ | |
"display": "block" | |
}); | |
$("#playback").css({ | |
"visibility": "visible" | |
}); | |
$("#chat-button").css({ | |
"width": "80px" | |
}); | |
$("#users-button").css({ | |
"width":"136px", | |
"left":"80px" | |
}); | |
$("#waitlist-button").css({ | |
"width":"131px", | |
"left":"215px" | |
}); | |
} | |
function apiCommand(commandTyped) { | |
var command; | |
var argument; | |
if (commandTyped.indexOf(" ") > 0) { | |
var commandArr = commandTyped.toLowerCase().split(" "); | |
command = commandArr.shift(); | |
argument = commandArr.join(" "); | |
} else { | |
command = commandTyped.toLowerCase(); | |
argument = false; | |
} | |
switch(command) { | |
case "/addtwitch": | |
if (isTwitchLoaded()) removeTwitch(); | |
addTwitch(argument); | |
break; | |
case "/removetwitch": | |
API.chatLog("Removing Twitch...", false); | |
if (isTwitchLoaded()) removeTwitch(); | |
break; | |
default: | |
//Do Nothing. | |
break; | |
} | |
} | |
function checkReady() { | |
if (document.getElementById("playlist-meta") && document.getElementById("dj-button") && document.getElementById("vote") && API) { | |
API.chatLog("Setting up twitch.plug.dj, please wait...", false); | |
// Actually runs too early, but it's the thought that counts. | |
document.getElementById("playlist-meta").insertBefore(document.getElementById("vote"), document.getElementById("twitter-menu")); | |
document.getElementById("playlist-meta").insertBefore(document.getElementById("dj-button"), document.getElementById("twitter-menu")); | |
$("#vote .crowd-response").css({ | |
"width": "50px" | |
}); | |
$("#vote .crowd-response .top").css({ | |
"height": "25px", | |
"width": "50px" | |
}); | |
$("#vote .crowd-response .top i").css({ | |
"top": "0px", | |
"margin": "auto", | |
"left": "10px" | |
}); | |
$("#vote .crowd-response .top .label").css({ | |
"top": "5px", | |
"display": "none" | |
}); | |
$("#vote .bottom").css({ | |
"top":"27px", | |
"height":"23px" | |
}); | |
$(".social-menu").css({ | |
"height": "27px", | |
"width": "27px" | |
}); | |
$("#twitter-menu").css({ | |
"right": "10px" | |
}); | |
$("#facebook-menu").css({ | |
"right": "10px", | |
"top": "27px" | |
}); | |
$(".social-menu > .icon").css({ | |
"top": "0px", | |
"left": "0px" | |
}); | |
$(".social-menu .menu").css({ | |
"z-index": "2" | |
}); | |
$("#dj-button span").css({ | |
"width": "100px" | |
}); | |
var interval = setInterval(function() { | |
if (document.getElementById("playlist-panel").style.display != "block") { | |
$("#vote").css({ | |
"left": "auto", | |
"top": "1px", | |
"right": "39px", | |
"height": "52px", | |
"display": "block", | |
"z-index": "1", | |
"width": "153px" | |
}); | |
$("#dj-button").css({ | |
"left": "auto", | |
"top": "1px", | |
"right": "194px", | |
"height": "51px", | |
"line-height": "50px", | |
"display": "block", | |
"z-index": "1", | |
"width": "179px" | |
}); | |
$("#dj-button .left .icon-join-waitlist-big").css({ | |
"top": "10px" | |
}); | |
$("#dj-button .left .icon-leave-waitlist-big").css({ | |
"top": "10px" | |
}); | |
} else { | |
$("#vote").css({ | |
"display": "none" | |
}); | |
$("#dj-button").css({ | |
"display": "none" | |
}); | |
} | |
}, 1000); | |
var welcomeText = $(".welcome .value").text(); | |
var channelName; | |
API.on(API.CHAT_COMMAND, apiCommand); | |
if (welcomeText.indexOf("twitch.tv") > 0) { | |
if (welcomeText.indexOf(" ",welcomeText.indexOf("twitch.tv")) > 0) { | |
channelName = welcomeText.substring(welcomeText.indexOf("twitch.tv") + 10, welcomeText.indexOf(" ",welcomeText.indexOf("twitch.tv"))); | |
} else { | |
channelName = welcomeText.substring(welcomeText.indexOf("twitch.tv") + 10); | |
} | |
addTwitch(channelName); | |
} | |
} else { | |
setTimeout(checkReady, 1000); | |
} | |
} | |
checkReady(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment