Skip to content

Instantly share code, notes, and snippets.

@Anaerin
Last active August 29, 2015 14:06
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Anaerin/1ca768451ab4c592f54a to your computer and use it in GitHub Desktop.
// ==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&amp;channel=' + channelName + '&amp;auto_play=true&amp;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