Monster Twitch

Streches stream to max width and hides left navigation bar with an 'M' toggle on the bottom right

Version au 04/04/2014. Voir la dernière version.

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name       Monster Twitch
// @namespace  http://enut.co/dev
// @author	   Tracerman
// @version    2.67
// @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("margin-left", "").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", "2px").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", "2px").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", "2px").css("margin-left", "0px").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;
}