Monster Twitch

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

Устаревшая версия за 04.04.2014. Перейдите к последней версии.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey, Greasemonkey или Violentmonkey.

Для установки этого скрипта вам необходимо установить расширение, такое как Tampermonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Violentmonkey.

Чтобы установить этот скрипт, вы сначала должны установить расширение браузера, например Tampermonkey или Userscripts.

Чтобы установить этот скрипт, сначала вы должны установить расширение браузера, например Tampermonkey.

Чтобы установить этот скрипт, вы должны установить расширение — менеджер скриптов.

(у меня уже есть менеджер скриптов, дайте мне установить скрипт!)

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение браузера, например Stylus.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

Чтобы установить этот стиль, сначала вы должны установить расширение — менеджер стилей.

(у меня уже есть менеджер стилей, дайте мне установить скрипт!)

// ==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;
}