☰

Monster Twitch

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

目前为 2014-05-11 提交的版本。查看 最新版本。

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