Greasy Fork is available in English.

Monster Twitch

Stretches stream to max width and hides left navigation bar with an Monster toggle that's to the right of the volume rocker

Ajankohdalta 21.5.2014. Katso uusin versio.

// ==UserScript==
// @name       Monster Twitch
// @namespace  http://enut.co/dev
// @author	   Tracerman
// @version    2.775
// @description  Stretches stream to max width and hides left navigation bar with an Monster toggle that's to the right of the volume rocker
// @include        http://*.twitch.tv/*
// @include        http://twitch.tv/*
// @exclude		   http://www.twitch.tv/*/chat?popout=
// @exclude		   http://www.twitch.tv/*/popout
// @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==
/*--- Note, gmMain () will fire under all these conditions:
    1) The page initially loads or does an HTML reload (F5, etc.).
    2) The scheme, host, or port change.  These all cause the browser to
       load a fresh page.
    3) AJAX changes the URL (even if it does not trigger a new HTML load).
*/
var fireOnHashChangesToo    = false;
var pageURLCheckTimer       = setInterval (
    function () {
        if (   this.lastPathStr  !== location.pathname
            || this.lastQueryStr !== location.search
            || (fireOnHashChangesToo && this.lastHashStr !== location.hash)
        ) {
            this.lastPathStr  = location.pathname;
            this.lastQueryStr = location.search;
            this.lastHashStr  = location.hash;
            gmMain ();
        }
    }
    , 1
);

function gmMain () {
    console.log ('MT: A "New" page has loaded.');
    // DO WHATEVER YOU WANT HERE.
    function ChatWFix(){
 GM_addStyle ( multilineStr ( function () {/*!
    #right_col:before {
    	left: 0px
    }
    */} ) );
    $(".segmented_tabs").css("z-index", "4");
    $("#right_col .top").css("z-index", "4");
    console.log("TM: Chat Left Position Fixed");
}

setTimeout(function () {ChatWFix()}, 5000);
    
    $("#player").ready(function() {
    
var showCheck3 = 0;
var zNode3       = document.createElement ('div');
var pHeight;
        //---alert(pHeight);
var bHeight;
var cHeight = "340px";
var cDisp;
var conWidth;
var tHeight;
var zHeight;
var mrCheck;
var zWidth = $('#main_col').css("width");
var ZWidthCheck = zWidth;
var chatHeight = "340px";
var chatLHeight;
var chatLLHeight;
var chatLLPadding;
var chatLeft;
var intHeight = $(".chat-interface").css("height");

zNode3.innerHTML = '<button id="myButton3" type="button">'
                + '</button>';

zNode3.setAttribute ('id', 'myContainer3');
//--- zNode3.style.background=" url('http://i.imgur.com/hvsy1bQ.png')";
//--- Old Append document.body.appendChild (zNode3);
$("#player").append(zNode3);
//--- document.getElementById('player').appendChild(zNode3);
//--- Node3.style.background="url('i.imgur.com/hvsy1bQ.png')";
//--- zNode3.setAttribute ('style', 'background:' + 'url(http://imgur.com/hvsy1bQ.png)');
//--- Activate the newly added button.
//--- NO document.getElementById ("myButton3").addEventListener (
//--- NO     "click", ButtonClickAction, false
//--- NO  );
$(document.body).on ("click", "#myButton3", ButtonClickAction);

function ButtonClickAction (zEvent) {
    zWidth = $('#main_col').css("width");
if(showCheck3 == 1) { 
    $("#channel").removeAttr('style');
    $("#main_col").children(".tse-scroll-content").first().css("position", "");
    $("#chat_line_list").each(function () {
      this.style.setProperty("padding", chatLLPadding, "important");
});
    $("#chat_line_list").each(function () {
      this.style.setProperty("padding", chatLLPadding);
});
    $("#left_col").show(300, "swing");
    $(".editable").show(300, "swing");
    //--- Old Panels Handler $("#channel_panels_contain").show(300, "swing");
    $(".stats-and-actions").show(300, "swing");
    $(".resizer").show(300, "swing");
    $("#right_close").show(300, "swing"); 
    $("#right_col").each(function () {
       this.style.setProperty("width", "", "important");
});
    $("#right_col").each(function () {
       this.style.setProperty("width", "340px");
});
    $("#main_col").removeAttr('style');
    
    $("#main_col").each(function () {
       this.style.setProperty("margin-left", "", "important");
});
    $("#main_col").css("margin-left","").css("width", zWidth);
	$("#main_col").css("width", "");
    $("#main_col").each(function () {
       //--- this.style.setProperty("width", "", "important");
});
    
    if (cDisp == "block") {
        
    $("#main_col").each(function () {
      //--- this.style.setProperty("margin-right", "0px");
});
    }
    
    else {
        $("#main_col").each(function () {
       this.style.setProperty("width", "");
        this.style.setProperty("margin-right", "0px");
});
        
    }
    
   if(zWidth >= 1) {
    
       $("#main_col").each(function () {
        //--- this.style.setProperty("width", "");
          this.style.setProperty("margin-right", "");
}); 
       
    }
    else {       
        
        //--- $("#main_col").css("width", "");
        
    }
    $(".dynamic-player").removeAttr("style");
    $("#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");
});
    $("#myContainer3").css({"opacity":"0.7"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
    
    //--- OLD BUTTON BACK .css({"box-shadow":"inset 0 0 20px rgb(138, 138, 138)"});
    //--- Old Chat Button
    $("#chat_speak").animate({"width":"149px"}, "fast");
    //--- New Chat Button
    $(".send-chat-button").css("width", "").css("left", chatLeft);
    $("button.primary_button").css("background", "");
    $("button.primary_button").removeAttr("style");
    // Show the video bar
    $("#twitch_chat").animate({"top":"51px"}, "fast");
    $("#chat").removeAttr("style");
    $("#chat").each(function () {
    this.style.setProperty("top", "51px", "important");
        this.style.setProperty("bottom", "0");
});
    $("#archives").animate({"top":"51px"}, "fast");
    //--- Chat Bottom
    $(".chat-messages").removeAttr("style");
    $(".chat-buttons-container").css("top", "");
    //--- 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.settings").removeAttr("style");
    $("button.viewers").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
    $("button.viewers").removeAttr("style");
    $("button.emotemenu").css("margin-right", "").css("margin-left", "").css("border", "", "important").css("box-shadow", "", "important");
    $("button.emotemenu").removeAttr("style");
    //--- Chat Background
    $(".chat-messages").css("background", "");
    
    //--- New Chat Interface Features
    $(".ember-chat .chat-interface").removeAttr("style");
    $(".chat-interface").css("background", "").css("border", "", "important").css("box-shadow", "", "!important");
    //--- $(".chat-interface").each(function () {
    //---  this.style.setProperty("height", "134", "!important");
//---}) ;
    $(".textarea-contain").css("border", "");
    
    $(".segmented_tabs").css({"visibility":"visible"}).css({"z-index":"4"});
    $("#right_col .top").css({"z-index":"4"});
    
    //--- showCheck3 = 2;
    showCheck3 = 0;
}
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");
    chatLeft= $('.send-chat-button').css("left");
    //--- intHeight = $(".chat-interface").css("height");
    
    $("#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(300, "swing");
    $("#left_col").hide(300, "swing");
    $(".resizer").hide(300, "swing");
    //--- Old Panels Handler $("#channel_panels_contain").hide(300, "swing");
    $(".stats-and-actions").hide(300, "swing");
    $(".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");
      this.style.setProperty("z-index", "999");
        
});
    $("#player").each(function () {
      this.style.setProperty("position", "absolute");
    });
    //--- Video Static
    $("#main_col").children(".tse-scroll-content").first().css("position", "static");
    //--- End

    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"});
    $("#right_col .top").css({"z-index":"inherit"});
    $("#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");
    $("button.primary_button").each(function () {
      this.style.setProperty("border", "2px solid #6441a5", "important");
});
        
    //--- Chat Background
    $(".chat-messages").css("background", "white");
    
    //--- Chat Bottom
    $(".chat-messages").each(function () {
      this.style.setProperty("bottom", "110px", "important");
});
    $(".chat-buttons-container").css("top", "70px");
        
    //--- New Chat Interface Features
    $(".chat-interface").css("background", "white").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");
    $(".chat-interface").each(function () {
      this.style.setProperty("height", "110px", "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");
           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(300, "swing");     
    //--- 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", "2px");
    $("button.settings").each(function () {
      this.style.setProperty("border", "2px solid #6441a5", "important");
        this.style.setProperty("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", "2px");
    $("button.viewers").each(function () {
      this.style.setProperty("border", "2px solid #6441a5", "important");
        this.style.setProperty("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", "2px");
    $("button.emotemenu").each(function () {
      this.style.setProperty("margin-left", "0px", "important");
      this.style.setProperty("border", "2px solid #6441a5", "important");
      this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
});
    //--- $("#myContainer3").fadeTo("fast", 1.0).css({"background":"url('http://i61.tinypic.com/ri80w5.png')"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
    $("#myContainer3").css({"opacity":"1"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
    showCheck3 = 1;
 
}
//--- else if(showCheck3 == 2) {
else if(showCheck3 == 5) {    
    if (cDisp == "block") {
        
    $("#main_col").each(function () {
      this.style.setProperty("margin-right", zHeight);
});
    }
    
    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);
});
    
    $("#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");
    }
 
    $("#myContainer3").fadeTo("fast", 0.5).delay(300).css({"box-shadow":"inset 0 0 20px navy"});
    
    showCheck3 = 0;
}
else if(showCheck3 == 3) {
    
}
    //--- clearInterval(pageURLCheckTimer);
    return false;
    }
    }); 
}




//--- Style our newly added elements using CSS.
GM_addStyle ( multilineStr ( function () {/*!
    #myContainer3 {
        position:               absolute;
        background:				url("http://i61.tinypic.com/ri80w5.png");
        opacity:				0.7;
        background-size:		contain !important; 
        box-shadow:				inset 0 0 20px black;
        bottom:                 0;
        left:					0;
        font-size:              13px;
        border:                 0px outset black;
        margin-left:            160px;
        margin-bottom:			0px;
        opacity:                0.5;
        width:					27px !important;
        height:					27px !important;
        z-index:                999;
        padding:                0px 0px;
    }
    #myButton3 {
        cursor:                 pointer;
       	background: 			transparent;
    	border: 				none !important;
        width:					27px !important;
        height:					27px !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;
}