☰

Monster Twitch

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

目前为 2014-04-16 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name       Monster Twitch
  3. // @namespace  http://enut.co/dev
  4. // @author	   Tracerman
  5. // @version    2.70
  6. // @description  Streches stream to max width and hides left navigation bar with an 'M' toggle on the bottom right
  7. // @include        http://*.twitch.tv/*
  8. // @include        http://twitch.tv/*
  9. // @exclude        http://www.twitch.tv/directory*
  10. // @exclude        http://www.twitch.tv/*/dashboard
  11. // @exclude        http://www.twitch.tv/inbox*
  12. // @exclude        http://www.twitch.tv/subscriptions*
  13. // @exclude        http://store.twitch.tv
  14. // @exclude        http://api.twitch.tv/*
  15. // @exclude        https://api.twitch.tv/*
  16. // @require     http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
  17. // @grant       GM_addStyle
  18. // @copyright  2013+, tracerman
  19. // ==/UserScript==
  20.  
  21. var showCheck3 = 0;
  22. var zNode3       = document.createElement ('div');
  23. var pHeight = $(".dynamic-player").css("height");
  24. var bHeight = $('#left_col').css("width");
  25. var cHeight = $('#right_col').css("width");
  26. var cDisp 	= $('#right_col').css("display");
  27. var conWidth = $('#content').css("width");
  28. var tHeight = $('#main_col').css("margin-left");
  29. var zHeight = $('#main_col').css("margin-right");
  30. var mrCheck = $('#main_col').css("margin-right");
  31. var zWidth = $('#main_col').css("width");
  32. var ZWidthCheck = zWidth;
  33. var chatHeight = $('#chat').css("width");
  34. var chatLHeight = $('#chat_line').css("width");
  35. var chatLLHeight = $('#chat_line_list').css("width");
  36. var chatLLPadding = $('#chat_line_list').css("padding");
  37.  
  38.  
  39. zNode3.innerHTML = '<button id="myButton3" type="button">'
  40.                 + 'M</button>';
  41.  
  42. zNode3.setAttribute ('id', 'myContainer3');
  43. document.body.appendChild (zNode3);
  44.  
  45. //--- Activate the newly added button.
  46. document.getElementById ("myButton3").addEventListener (
  47.     "click", ButtonClickAction, false
  48. );
  49.  
  50. function ButtonClickAction (zEvent) {
  51. if(showCheck3 == 1) { 
  52.     $("#channel").removeAttr('style');
  53.     $("#chat_line_list").each(function () {
  54.       this.style.setProperty("padding", chatLLPadding, "important");
  55. });
  56.     $("#chat_line_list").each(function () {
  57.       this.style.setProperty("padding", chatLLPadding);
  58. });
  59.     $("#left_col").show();
  60.     $(".editable").show();
  61.     $("#channel_panels_contain").show();
  62.     $(".stats-and-actions").show();
  63.     $(".resizer").show();
  64.     $("#right_close").show(); 
  65.     $("#right_col").each(function () {
  66.        this.style.setProperty("width", "", "important");
  67. });
  68.     $("#right_col").each(function () {
  69.        this.style.setProperty("width", cHeight);
  70. });
  71.     $("#main_col").removeAttr('style');
  72.     
  73.     $("#main_col").each(function () {
  74.        this.style.setProperty("margin-left", "", "important");
  75. });
  76.     $("#main_col").css("margin-left","");
  77.     
  78.     /* $("#main_col").each(function () {
  79.        this.style.setProperty("margin-left", tHeight);
  80. }); */
  81.     $("#main_col").each(function () {
  82.        /* this.style.setProperty("margin-right", "", "important"); */
  83.        this.style.setProperty("width", "", "important");
  84. });
  85.     
  86.     if (cDisp == "block") {
  87.         
  88.     $("#main_col").each(function () {
  89.       /* this.style.setProperty("margin-right", zHeight); */
  90.         this.style.setProperty("margin-right", "");
  91.        /* this.style.setProperty("width", zWidth); */
  92. });
  93.     }
  94.     
  95.     else {
  96.         $("#main_col").each(function () {
  97.        /* this.style.setProperty("margin-right", "0px"); */
  98.        this.style.setProperty("width", "");
  99. });
  100.         
  101.     }
  102.     
  103.    /* $("#main_col").each(function () {
  104.        this.style.setProperty("margin-left", tHeight);
  105.         /* this.style.setProperty("width", zWidth); */
  106. /* }); */
  107.     
  108.    if(zWidth >= 1) {
  109.     
  110.        $("#main_col").each(function () {
  111.         this.style.setProperty("width", "");
  112.           this.style.setProperty("margin-right", "");
  113. }); 
  114.        
  115.     }
  116.     else {       
  117.         
  118.         /* $("#main_col").css("width", zWidth); */
  119.         $("#main_col").css("width", "");
  120.         
  121.        /* $("#main_col").css("margin-right", "", "important"); */
  122.         
  123.     }
  124.     
  125.     /* if (cDisp == "block") {
  126.        $("#main_col").each(function () {
  127.            this.style.setProperty("margin-right", "340px");
  128. }); 
  129.        
  130.     }
  131.     else {       
  132.         $("#main_col").css("margin-right", "0", "important");
  133.     } */
  134.     
  135.     $(".dynamic-player").each(function () {
  136.        this.style.setProperty("height", "", "important");
  137. });
  138.     $(".dynamic-player").each(function () {
  139.        this.style.setProperty("height", pHeight, "important");
  140. });
  141.     $("#player").each(function () {
  142.       this.style.setProperty("position", "relative");
  143. });
  144.     $("#content").each(function () {
  145.         this.style.setProperty("width", "", "important");
  146. });
  147.     $("#content").each(function () {
  148.         this.style.setProperty("width", conWidth);
  149. });
  150.     $("#chat").each(function () {
  151.        this.style.setProperty("width", "", "important");
  152. });
  153.     $("#chat").each(function () {
  154.        this.style.setProperty("width", chatHeight);
  155. });
  156.     $("#chat_line").each(function () {
  157.        this.style.setProperty("width", "", "important");
  158. });
  159.     $("#chat_line").each(function () {
  160.        this.style.setProperty("width", chatLHeight);
  161. });
  162.     $("#chat_line_list").each(function () {
  163.        this.style.setProperty("width", "", "important");
  164. });
  165.    /* $("#chat_line_list").each(function () {
  166.        this.style.setProperty("width", chatLLHeight);
  167. }); */
  168.     $("#myButton3").fadeTo("fast", 1).delay(300).css({"color":"white"});
  169.     /* $(".primary_button").animate({"width":"149px"}, "fast"); */
  170.     
  171.     //--- Old Chat Button
  172.     $("#chat_speak").animate({"width":"149px"}, "fast");
  173.     //--- New Chat Button
  174.     $(".send-chat-button").css("width", "").css("left", "");
  175.     $("button.primary_button").css("background", "");
  176.     // Show the video bar
  177.     $("#twitch_chat").animate({"top":"51px"}, "fast");
  178.     $("#chat").each(function () {
  179.     this.style.setProperty("top", "51px", "important");
  180. });
  181.     $("#archives").animate({"top":"51px"}, "fast");
  182.     //--- Chat Bottom
  183.     $(".chat-messages").css("bottom", "");
  184.     $(".chat-buttons-container").css("top", "");
  185.     //--- Old Buttons Border
  186.     $(".dropdown_glyph").css("border", "", "important").css("box-shadow", "", "important");
  187.     //--- New Buttons Border
  188.     $("button.settings").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  189.     $("button.viewers").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  190.     $("button.emotemenu").css("margin-right", "").css("margin-left", "").css("border", "", "important").css("box-shadow", "", "important");
  191.     
  192.     //--- Chat Background
  193.     $(".chat-messages").css("background", "");
  194.     
  195.     //--- New Chat Interface Features
  196.     $(".chat-interface").css("background", "").css("height", "").css("border", "", "important").css("box-shadow", "", "!important");
  197.     $(".textarea-contain").css("border", "");
  198.     
  199.     $(".segmented_tabs").css({"visibility":"visible"});
  200.     showCheck3 = 2;
  201. }
  202. else if(showCheck3 == 0) {
  203.     pHeight = $(".dynamic-player").css("height");
  204.     bHeight = $('#left_col').css("width");
  205.     cHeight = $('#right_col').css("width");
  206.     conWidth = $('#content').css("width");
  207.     tHeight = $('#main_col').css("margin-left");
  208.     zHeight = $('#main_col').css("margin-right");
  209.     chatHeight = $('#chat').css("width");
  210.     chatLHeight = $('#chat_line').css("width");
  211.     chatLLHeight = $('#chat_line_list').css("width");
  212.     chatLLPadding = $('#chat_line_list').css("padding");
  213.     cDisp 	= $('#right_col').css("display");
  214.     zWidth = $('#main_col').css("width");
  215.     
  216.     $("#channel").each(function () {
  217.       this.style.setProperty("padding", "0 0 0 0", "important");
  218. });
  219.     $("#chat_line_list").each(function () {
  220.       this.style.setProperty("padding", "0 0 0", "important");
  221. });
  222.     $(".editable").hide();
  223.     $("#left_col").hide();
  224.     $(".resizer").hide();
  225.     $("#channel_panels_contain").hide();
  226.     $(".stats-and-actions").hide();
  227.     $(".dynamic-player, .dynamic-player object, .dynamic-player video").each(function () {
  228.       this.style.setProperty("height", "100%", "important");
  229.       this.style.setProperty("width", "100%", "important");
  230. });
  231.     $(".dynamic-player").each(function () {
  232.       this.style.setProperty("height", "100%", "important");
  233.       this.style.setProperty("width", "100%", "important");
  234. });
  235.     $("#player").each(function () {
  236.       this.style.setProperty("position", "absolute");
  237. });
  238.     if (cDisp == "block") {
  239.     $("#content").each(function () {
  240.       this.style.setProperty("width", "275px", "important");
  241. });
  242.     $("#right_col").each(function () {
  243.       this.style.setProperty("width", "275px", "important");
  244. });
  245.     $("#chat").animate({"width":"275px"}, "fast");
  246.     $("#chat_line_list").css({"width":""});
  247.     $("#chat_line").animate({"width":"272px"}, "fast");
  248.  
  249.     $("#main_col").each(function () {
  250.      this.style.setProperty("margin-right", "275px", "important");
  251.       this.style.setProperty("width", "");
  252. });
  253.     
  254.     $(".segmented_tabs").css({"visibility":"hidden"});
  255.     $("#twitch_chat").css({"top":"0px"});
  256.     $("#chat").each(function () {
  257.       this.style.setProperty("top", "0px", "important");
  258. });
  259.     $("#archives").animate({"top":"0px"}, "fast");
  260.     //--- Old Chat Button    
  261.     $("#chat_speak").animate({"width":"84px"}, "fast");
  262.     //--- New Chat Button
  263.     $(".send-chat-button").css("width", "120px").css("left", "auto");
  264.     $("button.primary_button").css("background", "black");
  265.         
  266.     //--- Chat Background
  267.     $(".chat-messages").css("background", "white");
  268.     
  269.     //--- Chat Bottom
  270.     $(".chat-messages").css("bottom", "110px");
  271.     $(".chat-buttons-container").css("top", "70px");
  272.         
  273.     //--- New Chat Interface Features
  274.     $(".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");
  275.     $(".textarea-contain").css("border", "2px solid rgb(100, 65, 165)");
  276.     }
  277.     else {
  278.         $("#content").each(function () {
  279.       this.style.setProperty("width", "0px", "important");
  280. });
  281.     $("#right_col").each(function () {
  282.       this.style.setProperty("width", "0px", "important");
  283. });
  284.         $("#main_col").each(function () {
  285.       this.style.setProperty("margin-right", "0px", "important");
  286.            this.style.setProperty("width", "100%", "important");
  287. });
  288.         
  289.     }
  290.     
  291.     if (zWidth > 0) {
  292.        $("#main_col").each(function () {
  293.         this.style.setProperty("width", "100%", "important");
  294. }); 
  295.        
  296.     }
  297.     else {       
  298.         this.style.setProperty("width", "", "important");
  299.     }
  300.     
  301.     $("#main_col").each(function () {
  302.       this.style.setProperty("margin-left", "0px", "important");      
  303. });
  304.     $("#right_close").hide();     
  305.     /* zHeight = $('#main_col').css("margin-right"); */
  306.     //--- Old Buttons Border
  307.     $(".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");
  308.     //--- New Buttons Border
  309.     $("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");
  310.     $("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");
  311.     $("button.emotemenu").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");
  312.     $("button.emotemenu").each(function () {
  313.       this.style.setProperty("margin-left", "0px", "important");      
  314. });
  315.     $("#myButton3").fadeTo("fast", 0.5).delay(300).css({"color":"yellow"});
  316.     showCheck3 = 1;
  317. }
  318. else if(showCheck3 == 2) {
  319.     
  320.     if (cDisp == "block") {
  321.         
  322.     $("#main_col").each(function () {
  323.       this.style.setProperty("margin-right", zHeight);
  324.        /* this.style.setProperty("width", zWidth); */
  325. });
  326.     }
  327.     
  328.     else {
  329.         $("#main_col").each(function () {
  330.        this.style.setProperty("margin-right", "0px");
  331.        this.style.setProperty("width", "");
  332. });
  333.         
  334.     }
  335.     
  336.     $("#main_col").each(function () {
  337.        this.style.setProperty("margin-left", tHeight);
  338.         /* this.style.setProperty("width", zWidth); */
  339. });
  340.     
  341.     $("#main_col").css("width", "");
  342.     if (cDisp == "block") {
  343.        $("#main_col").each(function () {
  344.            this.style.setProperty("margin-right", "340px");
  345. }); 
  346.        
  347.     }
  348.     else {       
  349.         $("#main_col").css("margin-right", "0", "important");
  350.     }
  351.  
  352.     $("#myButton3").fadeTo("fast", 1).delay(300).css({"color":"blue"});
  353.     
  354.     
  355.     showCheck3 = 0;
  356. }
  357. else if(showCheck3 == 3) {
  358.     
  359. }
  360. }
  361.  
  362. //--- Style our newly added elements using CSS.
  363. GM_addStyle ( multilineStr ( function () {/*!
  364.     #myContainer3 {
  365.         position:               absolute;
  366.         bottom:                    0;
  367.         left:					0;
  368.         font-size:              10px;
  369.         border:                 0px outset black;
  370.         margin:                 0px;
  371.         opacity:                10.0;
  372.         z-index:                250;
  373.         padding:                0px 1px;
  374.     }
  375.     #myButton3 {
  376.         cursor:                 pointer;
  377.        	background: 			transparent;
  378.     	border: 				none !important;
  379.         color:					purple;
  380.         font-weight:			bold;
  381.     }
  382.     #myContainer3 p {
  383.         color:                  purple;
  384.         background:             transparent;
  385.     }
  386. */} ) );
  387.  
  388. function multilineStr (dummyFunc) {
  389.     var str = dummyFunc.toString ();
  390.     str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
  391.             .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
  392.             .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
  393.             ;
  394.     return str;
  395. }