Streches stream to max width and hides left navigation bar with an 'M' toggle on the bottom right
// ==UserScript==
// @name Monster Twitch
// @namespace http://enut.co/dev
// @author Tracerman
// @version 2.66
// @description Streches stream to max width and hides left navigation bar with an 'M' toggle on the bottom right
// @include http://*.twitch.tv/*
// @include http://twitch.tv/*
// @exclude http://www.twitch.tv/directory*
// @exclude http://www.twitch.tv/*/dashboard
// @exclude http://www.twitch.tv/inbox*
// @exclude http://www.twitch.tv/subscriptions*
// @exclude http://store.twitch.tv
// @exclude http://api.twitch.tv/*
// @exclude https://api.twitch.tv/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
// @grant GM_addStyle
// @copyright 2013+, tracerman
// ==/UserScript==
var showCheck3 = 0;
var zNode3 = document.createElement ('div');
var pHeight = $(".dynamic-player").css("height");
var bHeight = $('#left_col').css("width");
var cHeight = $('#right_col').css("width");
var cDisp = $('#right_col').css("display");
var conWidth = $('#content').css("width");
var tHeight = $('#main_col').css("margin-left");
var zHeight = $('#main_col').css("margin-right");
var mrCheck = $('#main_col').css("margin-right");
var zWidth = $('#main_col').css("width");
var ZWidthCheck = zWidth;
var chatHeight = $('#chat').css("width");
var chatLHeight = $('#chat_line').css("width");
var chatLLHeight = $('#chat_line_list').css("width");
var chatLLPadding = $('#chat_line_list').css("padding");
zNode3.innerHTML = '<button id="myButton3" type="button">'
+ 'M</button>';
zNode3.setAttribute ('id', 'myContainer3');
document.body.appendChild (zNode3);
//--- Activate the newly added button.
document.getElementById ("myButton3").addEventListener (
"click", ButtonClickAction, false
);
function ButtonClickAction (zEvent) {
if(showCheck3 == 1) {
$("#channel").removeAttr('style');
$("#chat_line_list").each(function () {
this.style.setProperty("padding", chatLLPadding, "important");
});
$("#chat_line_list").each(function () {
this.style.setProperty("padding", chatLLPadding);
});
$("#left_col").show();
$(".editable").show();
$("#channel_panels_contain").show();
$(".stats-and-actions").show();
$(".resizer").show();
$("#right_close").show();
$("#right_col").each(function () {
this.style.setProperty("width", "", "important");
});
$("#right_col").each(function () {
this.style.setProperty("width", cHeight);
});
$("#main_col").removeAttr('style');
$("#main_col").each(function () {
this.style.setProperty("margin-left", "", "important");
});
$("#main_col").css("margin-left","");
/* $("#main_col").each(function () {
this.style.setProperty("margin-left", tHeight);
}); */
$("#main_col").each(function () {
/* this.style.setProperty("margin-right", "", "important"); */
this.style.setProperty("width", "", "important");
});
if (cDisp == "block") {
$("#main_col").each(function () {
/* this.style.setProperty("margin-right", zHeight); */
this.style.setProperty("margin-right", "");
/* this.style.setProperty("width", zWidth); */
});
}
else {
$("#main_col").each(function () {
/* this.style.setProperty("margin-right", "0px"); */
this.style.setProperty("width", "");
});
}
/* $("#main_col").each(function () {
this.style.setProperty("margin-left", tHeight);
/* this.style.setProperty("width", zWidth); */
/* }); */
if(zWidth >= 1) {
$("#main_col").each(function () {
this.style.setProperty("width", "");
this.style.setProperty("margin-right", "");
});
}
else {
/* $("#main_col").css("width", zWidth); */
$("#main_col").css("width", "");
/* $("#main_col").css("margin-right", "", "important"); */
}
/* if (cDisp == "block") {
$("#main_col").each(function () {
this.style.setProperty("margin-right", "340px");
});
}
else {
$("#main_col").css("margin-right", "0", "important");
} */
$(".dynamic-player").each(function () {
this.style.setProperty("height", "", "important");
});
$(".dynamic-player").each(function () {
this.style.setProperty("height", pHeight, "important");
});
$("#player").each(function () {
this.style.setProperty("position", "relative");
});
$("#content").each(function () {
this.style.setProperty("width", "", "important");
});
$("#content").each(function () {
this.style.setProperty("width", conWidth);
});
$("#chat").each(function () {
this.style.setProperty("width", "", "important");
});
$("#chat").each(function () {
this.style.setProperty("width", chatHeight);
});
$("#chat_line").each(function () {
this.style.setProperty("width", "", "important");
});
$("#chat_line").each(function () {
this.style.setProperty("width", chatLHeight);
});
$("#chat_line_list").each(function () {
this.style.setProperty("width", "", "important");
});
/* $("#chat_line_list").each(function () {
this.style.setProperty("width", chatLLHeight);
}); */
$("#myButton3").fadeTo("fast", 1).delay(300).css({"color":"white"});
/* $(".primary_button").animate({"width":"149px"}, "fast"); */
//--- Old Chat Button
$("#chat_speak").animate({"width":"149px"}, "fast");
//--- New Chat Button
$(".send-chat-button").css("width", "").css("left", "");
$("button.primary_button").css("background", "");
// Show the video bar
$("#twitch_chat").animate({"top":"51px"}, "fast");
$("#chat").each(function () {
this.style.setProperty("top", "51px", "important");
});
$("#archives").animate({"top":"51px"}, "fast");
//--- Chat Bottom
$(".chat-messages").css("bottom", "");
//--- Old Buttons Border
$(".dropdown_glyph").css("border", "", "important").css("box-shadow", "", "important");
//--- New Buttons Border
$("button.settings").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
$("button.viewers").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
$("button.emotemenu").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
//--- New Chat Interface Features
$(".chat-interface").css("background", "").css("height", "").css("border", "", "important").css("box-shadow", "", "!important");
$(".textarea-contain").css("border", "");
$(".segmented_tabs").css({"visibility":"visible"});
showCheck3 = 2;
}
else if(showCheck3 == 0) {
pHeight = $(".dynamic-player").css("height");
bHeight = $('#left_col').css("width");
cHeight = $('#right_col').css("width");
conWidth = $('#content').css("width");
tHeight = $('#main_col').css("margin-left");
zHeight = $('#main_col').css("margin-right");
chatHeight = $('#chat').css("width");
chatLHeight = $('#chat_line').css("width");
chatLLHeight = $('#chat_line_list').css("width");
chatLLPadding = $('#chat_line_list').css("padding");
cDisp = $('#right_col').css("display");
zWidth = $('#main_col').css("width");
$("#channel").each(function () {
this.style.setProperty("padding", "0 0 0 0", "important");
});
$("#chat_line_list").each(function () {
this.style.setProperty("padding", "0 0 0", "important");
});
$(".editable").hide();
$("#left_col").hide();
$(".resizer").hide();
$("#channel_panels_contain").hide();
$(".stats-and-actions").hide();
$(".dynamic-player, .dynamic-player object, .dynamic-player video").each(function () {
this.style.setProperty("height", "100%", "important");
this.style.setProperty("width", "100%", "important");
});
$(".dynamic-player").each(function () {
this.style.setProperty("height", "100%", "important");
this.style.setProperty("width", "100%", "important");
});
$("#player").each(function () {
this.style.setProperty("position", "absolute");
});
if (cDisp == "block") {
$("#content").each(function () {
this.style.setProperty("width", "275px", "important");
});
$("#right_col").each(function () {
this.style.setProperty("width", "275px", "important");
});
$("#chat").animate({"width":"275px"}, "fast");
$("#chat_line_list").css({"width":""});
$("#chat_line").animate({"width":"272px"}, "fast");
$("#main_col").each(function () {
this.style.setProperty("margin-right", "275px", "important");
this.style.setProperty("width", "");
});
$(".segmented_tabs").css({"visibility":"hidden"});
$("#twitch_chat").css({"top":"0px"});
$("#chat").each(function () {
this.style.setProperty("top", "0px", "important");
});
$("#archives").animate({"top":"0px"}, "fast");
//--- Old Chat Button
$("#chat_speak").animate({"width":"84px"}, "fast");
//--- New Chat Button
$(".send-chat-button").css("width", "120px").css("left", "auto");
$("button.primary_button").css("background", "black");
//--- Chat Bottom
$(".chat-messages").css("bottom", "110px");
//--- New Chat Interface Features
$(".chat-interface").css("background", "white").css("height", "110px").css("border", "1px solid #6441a5", "important").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
$(".textarea-contain").css("border", "2px solid rgb(100, 65, 165)");
}
else {
$("#content").each(function () {
this.style.setProperty("width", "0px", "important");
});
$("#right_col").each(function () {
this.style.setProperty("width", "0px", "important");
});
$("#main_col").each(function () {
this.style.setProperty("margin-right", "0px", "important");
this.style.setProperty("width", "100%", "important");
});
}
if (zWidth > 0) {
$("#main_col").each(function () {
this.style.setProperty("width", "100%", "important");
});
}
else {
this.style.setProperty("width", "", "important");
}
$("#main_col").each(function () {
this.style.setProperty("margin-left", "0px", "important");
});
$("#right_close").hide();
/* zHeight = $('#main_col').css("margin-right"); */
//--- Old Buttons Border
$(".dropdown_glyph").css("border", "1px solid #6441a5", "important").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
//--- New Buttons Border
$("button.settings").css("margin-right", "1px").css("border", "1px solid #6441a5", "important").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
$("button.viewers").css("margin-right", "1px").css("border", "1px solid #6441a5", "important").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
$("button.emotemenu").css("margin-right", "1px").css("border", "1px solid #6441a5", "important").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
$("#myButton3").fadeTo("fast", 0.5).delay(300).css({"color":"yellow"});
showCheck3 = 1;
}
else if(showCheck3 == 2) {
if (cDisp == "block") {
$("#main_col").each(function () {
this.style.setProperty("margin-right", zHeight);
/* this.style.setProperty("width", zWidth); */
});
}
else {
$("#main_col").each(function () {
this.style.setProperty("margin-right", "0px");
this.style.setProperty("width", "");
});
}
$("#main_col").each(function () {
this.style.setProperty("margin-left", tHeight);
/* this.style.setProperty("width", zWidth); */
});
$("#main_col").css("width", "");
if (cDisp == "block") {
$("#main_col").each(function () {
this.style.setProperty("margin-right", "340px");
});
}
else {
$("#main_col").css("margin-right", "0", "important");
}
$("#myButton3").fadeTo("fast", 1).delay(300).css({"color":"blue"});
showCheck3 = 0;
}
else if(showCheck3 == 3) {
}
}
//--- Style our newly added elements using CSS.
GM_addStyle ( multilineStr ( function () {/*!
#myContainer3 {
position: absolute;
bottom: 0;
left: 0;
font-size: 10px;
border: 0px outset black;
margin: 0px;
opacity: 10.0;
z-index: 250;
padding: 0px 1px;
}
#myButton3 {
cursor: pointer;
background: transparent;
border: none !important;
color: purple;
font-weight: bold;
}
#myContainer3 p {
color: purple;
background: transparent;
}
*/} ) );
function multilineStr (dummyFunc) {
var str = dummyFunc.toString ();
str = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
.replace (/\s*\*\/\s*\}\s*$/, '') // Strip */ }
.replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
;
return str;
}