☰

Monster Twitch

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

当前为 2014-05-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name       Monster Twitch
  3. // @namespace  http://enut.co/dev
  4. // @author	   Tracerman
  5. // @version    2.757
  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.     
  71. function ButtonClickAction (zEvent) {
  72. if(showCheck3 == 1) { 
  73.     $("#channel").removeAttr('style');
  74.     $("#chat_line_list").each(function () {
  75.       this.style.setProperty("padding", chatLLPadding, "important");
  76. });
  77.     $("#chat_line_list").each(function () {
  78.       this.style.setProperty("padding", chatLLPadding);
  79. });
  80.     $("#left_col").show(300, "swing");
  81.     $(".editable").show(300, "swing");
  82.     $("#channel_panels_contain").show(300, "swing");
  83.     $(".stats-and-actions").show(300, "swing");
  84.     $(".resizer").show(300, "swing");
  85.     $("#right_close").show(300, "swing"); 
  86.     $("#right_col").each(function () {
  87.        this.style.setProperty("width", "", "important");
  88. });
  89.     $("#right_col").each(function () {
  90.        this.style.setProperty("width", cHeight);
  91. });
  92.     $("#main_col").removeAttr('style');
  93.     
  94.     $("#main_col").each(function () {
  95.        this.style.setProperty("margin-left", "", "important");
  96. });
  97.     $("#main_col").css("margin-left","");
  98.  
  99.     $("#main_col").each(function () {
  100.        this.style.setProperty("width", "", "important");
  101. });
  102.     
  103.     if (cDisp == "block") {
  104.         
  105.     $("#main_col").each(function () {
  106.         this.style.setProperty("margin-right", "");
  107. });
  108.     }
  109.     
  110.     else {
  111.         $("#main_col").each(function () {
  112.        this.style.setProperty("width", "");
  113. });
  114.         
  115.     }
  116.     
  117.    if(zWidth >= 1) {
  118.     
  119.        $("#main_col").each(function () {
  120.         this.style.setProperty("width", "");
  121.           this.style.setProperty("margin-right", "");
  122. }); 
  123.        
  124.     }
  125.     else {       
  126.         
  127.         $("#main_col").css("width", "");
  128.         
  129.     }
  130.     
  131.     $(".dynamic-player").each(function () {
  132.        this.style.setProperty("height", "", "important");
  133. });
  134.     $(".dynamic-player").each(function () {
  135.        this.style.setProperty("height", pHeight, "important");
  136. });
  137.     $("#player").each(function () {
  138.       this.style.setProperty("position", "relative");
  139. });
  140.     $("#content").each(function () {
  141.         this.style.setProperty("width", "", "important");
  142. });
  143.     $("#content").each(function () {
  144.         this.style.setProperty("width", conWidth);
  145. });
  146.     $("#chat").each(function () {
  147.        this.style.setProperty("width", "", "important");
  148. });
  149.     $("#chat").each(function () {
  150.        this.style.setProperty("width", chatHeight);
  151. });
  152.     $("#chat_line").each(function () {
  153.        this.style.setProperty("width", "", "important");
  154. });
  155.     $("#chat_line").each(function () {
  156.        this.style.setProperty("width", chatLHeight);
  157. });
  158.     $("#chat_line_list").each(function () {
  159.        this.style.setProperty("width", "", "important");
  160. });
  161.     $("#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)"});
  162.     
  163.     //--- Old Chat Button
  164.     $("#chat_speak").animate({"width":"149px"}, "fast");
  165.     //--- New Chat Button
  166.     $(".send-chat-button").css("width", "").css("left", chatLeft);
  167.     $("button.primary_button").css("background", "");
  168.     $("button.primary_button").removeAttr("style");
  169.     // Show the video bar
  170.     $("#twitch_chat").animate({"top":"51px"}, "fast");
  171.     $("#chat").each(function () {
  172.     this.style.setProperty("top", "51px", "important");
  173. });
  174.     $("#archives").animate({"top":"51px"}, "fast");
  175.     //--- Chat Bottom
  176.     $(".chat-messages").css("bottom", "");
  177.     $(".chat-buttons-container").css("top", "");
  178.     //--- Old Buttons Border
  179.     $(".dropdown_glyph").css("border", "", "important").css("box-shadow", "", "important");
  180.     //--- New Buttons Border
  181.     $("button.settings").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  182.     $("button.settings").removeAttr("style");
  183.     $("button.viewers").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  184.     $("button.viewers").removeAttr("style");
  185.     $("button.emotemenu").css("margin-right", "").css("margin-left", "").css("border", "", "important").css("box-shadow", "", "important");
  186.     $("button.emotemenu").removeAttr("style");
  187.     //--- Chat Background
  188.     $(".chat-messages").css("background", "");
  189.     
  190.     //--- New Chat Interface Features
  191.     $(".chat-interface").css("background", "").css("border", "", "important").css("box-shadow", "", "!important");
  192.     $(".chat-interface").each(function () {
  193.       this.style.setProperty("height", intHeight, "important");
  194. });
  195.     $(".textarea-contain").css("border", "");
  196.     
  197.     $(".segmented_tabs").css({"visibility":"visible"});
  198.     showCheck3 = 2;
  199. }
  200. else if(showCheck3 == 0) {
  201.     pHeight = $(".dynamic-player").css("height");
  202.     bHeight = $('#left_col').css("width");
  203.     cHeight = $('#right_col').css("width");
  204.     conWidth = $('#content').css("width");
  205.     tHeight = $('#main_col').css("margin-left");
  206.     zHeight = $('#main_col').css("margin-right");
  207.     chatHeight = $('#chat').css("width");
  208.     chatLHeight = $('#chat_line').css("width");
  209.     chatLLHeight = $('#chat_line_list').css("width");
  210.     chatLLPadding = $('#chat_line_list').css("padding");
  211.     cDisp 	= $('#right_col').css("display");
  212.     zWidth = $('#main_col').css("width");
  213.     chatLeft= $('.send-chat-button').css("left");
  214.     intHeight = $(".chat-interface").css("height");
  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(300, "swing");
  223.     $("#left_col").hide(300, "swing");
  224.     $(".resizer").hide(300, "swing");
  225.     $("#channel_panels_contain").hide(300, "swing");
  226.     $(".stats-and-actions").hide(300, "swing");
  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.     //--- Scroll Top Test
  239.     $(".tse-scroll-content").scrollTop(0);
  240.     //--- End Test
  241.  
  242.     if (cDisp == "block") {
  243.     $("#content").each(function () {
  244.       this.style.setProperty("width", "275px", "important");
  245. });
  246.     $("#right_col").each(function () {
  247.       this.style.setProperty("width", "275px", "important");
  248. });
  249.     $("#chat").animate({"width":"275px"}, "fast");
  250.     $("#chat_line_list").css({"width":""});
  251.     $("#chat_line").animate({"width":"272px"}, "fast");
  252.  
  253.     $("#main_col").each(function () {
  254.      this.style.setProperty("margin-right", "275px", "important");
  255.       this.style.setProperty("width", "");
  256. });
  257.     
  258.     $(".segmented_tabs").css({"visibility":"hidden"});
  259.     $("#twitch_chat").css({"top":"0px"});
  260.     $("#chat").each(function () {
  261.       this.style.setProperty("top", "0px", "important");
  262. });
  263.     $("#archives").animate({"top":"0px"}, "fast");
  264.     //--- Old Chat Button    
  265.     $("#chat_speak").animate({"width":"84px"}, "fast");
  266.     //--- New Chat Button
  267.     $(".send-chat-button").css("width", "120px").css("left", "auto");
  268.     $("button.primary_button").css("background", "black");
  269.     $("button.primary_button").each(function () {
  270.       this.style.setProperty("border", "2px solid #6441a5", "important");
  271. });
  272.         
  273.     //--- Chat Background
  274.     $(".chat-messages").css("background", "white");
  275.     
  276.     //--- Chat Bottom
  277.     $(".chat-messages").css("bottom", "110px");
  278.     $(".chat-buttons-container").css("top", "70px");
  279.         
  280.     //--- New Chat Interface Features
  281.     $(".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");
  282.     $(".chat-interface").each(function () {
  283.       this.style.setProperty("height", "110px", "important");
  284. });
  285.         
  286.     $(".textarea-contain").css("border", "2px solid rgb(100, 65, 165)");
  287.     }
  288.     else {
  289.         $("#content").each(function () {
  290.       this.style.setProperty("width", "0px", "important");
  291. });
  292.     $("#right_col").each(function () {
  293.       this.style.setProperty("width", "0px", "important");
  294. });
  295.         $("#main_col").each(function () {
  296.       this.style.setProperty("margin-right", "0px", "important");
  297.            this.style.setProperty("width", "100%", "important");
  298. });
  299.         
  300.     }
  301.     
  302.     if (zWidth > 0) {
  303.        $("#main_col").each(function () {
  304.         this.style.setProperty("width", "100%", "important");
  305. }); 
  306.        
  307.     }
  308.     else {       
  309.         this.style.setProperty("width", "", "important");
  310.     }
  311.     
  312.     $("#main_col").each(function () {
  313.       this.style.setProperty("margin-left", "0px", "important");      
  314. });
  315.     $("#right_close").hide(300, "swing");     
  316.     //--- Old Buttons Border
  317.     $(".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");
  318.     //--- New Buttons Border
  319.     $("button.settings").css("margin-right", "2px");
  320.     $("button.settings").each(function () {
  321.       this.style.setProperty("border", "2px solid #6441a5", "important");
  322.         this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  323. });
  324.     $("button.viewers").css("margin-right", "2px");
  325.     $("button.viewers").each(function () {
  326.       this.style.setProperty("border", "2px solid #6441a5", "important");
  327.         this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  328. });
  329.     $("button.emotemenu").css("margin-right", "2px");
  330.     $("button.emotemenu").each(function () {
  331.       this.style.setProperty("margin-left", "0px", "important");
  332.       this.style.setProperty("border", "2px solid #6441a5", "important");
  333.       this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  334. });
  335.     $("#myContainer3").fadeTo("fast", 1.0).css({"background":"url('http://i61.tinypic.com/ri80w5.png')"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
  336.     showCheck3 = 1;
  337.  
  338. }
  339. else if(showCheck3 == 2) {
  340.     
  341.     if (cDisp == "block") {
  342.         
  343.     $("#main_col").each(function () {
  344.       this.style.setProperty("margin-right", zHeight);
  345. });
  346.     }
  347.     
  348.     else {
  349.         $("#main_col").each(function () {
  350.        this.style.setProperty("margin-right", "0px");
  351.        this.style.setProperty("width", "");
  352. });
  353.         
  354.     }
  355.     
  356.     $("#main_col").each(function () {
  357.        this.style.setProperty("margin-left", tHeight);
  358. });
  359.     
  360.     $("#main_col").css("width", "");
  361.     if (cDisp == "block") {
  362.        $("#main_col").each(function () {
  363.            this.style.setProperty("margin-right", "340px");
  364. }); 
  365.        
  366.     }
  367.     else {       
  368.         $("#main_col").css("margin-right", "0", "important");
  369.     }
  370.  
  371.     $("#myContainer3").fadeTo("fast", 0.5).delay(300).css({"box-shadow":"inset 0 0 20px navy"});
  372.     
  373.     showCheck3 = 0;
  374. }
  375. else if(showCheck3 == 3) {
  376.     
  377. }
  378.     }
  379.     });
  380.  
  381. //--- Style our newly added elements using CSS.
  382. GM_addStyle ( multilineStr ( function () {/*!
  383.     #myContainer3 {
  384.         position:               absolute;
  385.         background:				url("http://i57.tinypic.com/10dxqhc.png");
  386.         background-size:		contain !important; 
  387.         box-shadow:				inset 0 0 20px black;
  388.         bottom:                 0;
  389.         left:					0;
  390.         font-size:              13px;
  391.         border:                 0px outset black;
  392.         margin-left:            160px;
  393.         margin-bottom:			0px;
  394.         opacity:                0.5;
  395.         width:					27px !important;
  396.         height:					27px !important;
  397.         z-index:                999;
  398.         padding:                0px 0px;
  399.     }
  400.     #myButton3 {
  401.         cursor:                 pointer;
  402.        	background: 			transparent;
  403.     	border: 				none !important;
  404.         width:					27px !important;
  405.         height:					27px !important;
  406.         color:					purple;
  407.         font-weight:			bold;
  408.     }
  409.     #myContainer3 p {
  410.         color:                  purple;
  411.         background:             transparent;
  412.     }
  413. */} ) );
  414.  
  415. function multilineStr (dummyFunc) {
  416.     var str = dummyFunc.toString ();
  417.     str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
  418.             .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
  419.             //--- .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
  420.             ;
  421.     return str;
  422. }