☰

Monster Twitch

Stretches stream to max width and hides left navigation bar with an Monster toggle that's to the right of the volume rocker

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

  1. // ==UserScript==
  2. // @name       Monster Twitch
  3. // @author	   Tracerman
  4. // @version    2.787
  5. // @description  Stretches stream to max width and hides left navigation bar with an Monster toggle that's to the right of the volume rocker
  6. // @include        http://*.twitch.tv/*
  7. // @include        http://twitch.tv/*
  8. // @exclude		   http://www.twitch.tv/*/chat?popout=
  9. // @exclude		   http://www.twitch.tv/*/popout
  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  2014  tracerman
  19. // @icon        https://monkeyguts.com//icon/104.png
  20. // @run-at		document-end
  21. // @namespace http://enut.co/dev
  22. // ==/UserScript==
  23. /*--- Note, gmMain () will fire under all these conditions:
  24.     1) The page initially loads or does an HTML reload (F5, etc.).
  25.     2) The scheme, host, or port change.  These all cause the browser to
  26.        load a fresh page.
  27.     3) AJAX changes the URL (even if it does not trigger a new HTML load).
  28. */
  29. var fireOnHashChangesToo    = false;
  30. var pageURLCheckTimer       = setInterval (
  31.     function () {
  32.         if (   this.lastPathStr  !== location.pathname
  33.             || this.lastQueryStr !== location.search
  34.             || (fireOnHashChangesToo && this.lastHashStr !== location.hash)
  35.         ) {
  36.             this.lastPathStr  = location.pathname;
  37.             this.lastQueryStr = location.search;
  38.             this.lastHashStr  = location.hash;
  39.             gmMain ();
  40.         }
  41.     }
  42.     , 1
  43. );
  44.  
  45. function gmMain () {
  46.     console.log ('MT: A "New" page has loaded.');
  47.     // DO WHATEVER YOU WANT HERE.
  48.     function ChatWFix(){
  49.  GM_addStyle ( multilineStr ( function () {/*!
  50.     #right_col:before {
  51.     	left: 0px
  52.     }
  53.     */} ) );
  54.     $(".segmented_tabs").css("z-index", "4");
  55.     $("#right_col .top").css("z-index", "4");
  56.     console.log("TM: Chat Left Position Fixed");
  57. }
  58.  
  59. setTimeout(function () {ChatWFix()}, 5000);
  60.     
  61.     $("#player").ready(function() {
  62.     
  63. var showCheck3 = 0;
  64. var zNode3       = document.createElement ('div');
  65. var pHeight;
  66. var bHeight;
  67. var cHeight = "340px";
  68. var cDisp;
  69. var conWidth;
  70. var tHeight;
  71. var zHeight;
  72. var mrCheck;
  73. var mmLeft;
  74. var zWidth = $('#main_col').css("width");
  75. var ZWidthCheck = zWidth;
  76. var chatHeight = "340px";
  77. var chatLHeight;
  78. var chatLLHeight;
  79. var chatLLPadding;
  80. var chatLeft;
  81. var intHeight = $(".chat-interface").css("height");
  82.  
  83. zNode3.innerHTML = '<button id="myButton3" type="button">'
  84.                 + '</button>';
  85.  
  86. zNode3.setAttribute ('id', 'myContainer3');
  87.  
  88. $("#player").append(zNode3);
  89.         
  90. $(document.body).on ("click", "#myButton3", ButtonClickAction);
  91. var rTest = 360;
  92.         
  93. function bRotate() {
  94.         setTimeout(function(){$("#myContainer3").css("transform", "rotate(" + rTest + "deg)")}, 500);
  95. }
  96.         
  97. function ButtonClickAction (zEvent) {
  98.     zWidth = $('#main_col').css("width");
  99. if(showCheck3 == 1) { 
  100.     $("#channel").removeAttr('style');
  101.     $("#main_col").children(".tse-scroll-content").first().css("position", "");
  102.     $("#chat_line_list").each(function () {
  103.       this.style.setProperty("padding", chatLLPadding, "important");
  104. });
  105.     $("#chat_line_list").each(function () {
  106.       this.style.setProperty("padding", chatLLPadding);
  107. });
  108.     $("#left_col").show(300, "swing");
  109.     $(".editable").show(300, "swing");
  110.     $("#new-user-prompt").show(300, "swing");
  111.     //--- Old Panels Handler $("#channel_panels_contain").show(300, "swing");
  112.     $(".stats-and-actions").show(300, "swing");
  113.     $(".resizer").show(300, "swing");
  114.     $("#right_close").show(300, "swing"); 
  115.     $("#right_col").each(function () {
  116.        this.style.setProperty("width", "", "important");
  117. });
  118.     $("#right_col").each(function () {
  119.        this.style.setProperty("width", "340px");
  120. });
  121.     $("#main_col").removeAttr('style');
  122.     
  123.     $("#main_col").each(function () {
  124.        this.style.setProperty("margin-left", "", "important");
  125. });
  126.     $("#main_col").css("margin-left","").css("width", zWidth);
  127. 	$("#main_col").css("width", "");
  128.     $("#main_col").each(function () {
  129.        //--- this.style.setProperty("width", "", "important");
  130. });
  131.     
  132.     if (cDisp == "block") {
  133.         
  134.     $("#main_col").each(function () {
  135.       //--- this.style.setProperty("margin-right", "0px");
  136. });
  137.     }
  138.     
  139.     else {
  140.         $("#main_col").each(function () {
  141.        this.style.setProperty("width", "");
  142.         this.style.setProperty("margin-right", "0px");
  143. });
  144.         
  145.     }
  146.     
  147.    if(zWidth >= 1) {
  148.     
  149.        $("#main_col").each(function () {
  150.         //--- this.style.setProperty("width", "");
  151.           this.style.setProperty("margin-right", "");
  152. }); 
  153.        
  154.     }
  155.     else {       
  156.         
  157.         //--- $("#main_col").css("width", "");
  158.         
  159.     }
  160.     $(".dynamic-player").removeAttr("style");
  161.     $("#player").each(function () {
  162.       this.style.setProperty("position", "relative");
  163. });
  164.     $("#content").each(function () {
  165.         this.style.setProperty("width", "", "important");
  166. });
  167.     $("#content").each(function () {
  168.         this.style.setProperty("width", conWidth);
  169. });
  170.     $("#chat").each(function () {
  171.        this.style.setProperty("width", "", "important");
  172. });
  173.     $("#chat").each(function () {
  174.        this.style.setProperty("width", chatHeight);
  175. });
  176.     $("#chat_line").each(function () {
  177.        this.style.setProperty("width", "", "important");
  178. });
  179.     $("#chat_line").each(function () {
  180.        this.style.setProperty("width", chatLHeight);
  181. });
  182.     $("#chat_line_list").each(function () {
  183.        this.style.setProperty("width", "", "important");
  184. });
  185.     $("#myContainer3").css({"opacity":"0.7"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
  186.     
  187.     //--- OLD BUTTON BACK .css({"box-shadow":"inset 0 0 20px rgb(138, 138, 138)"});
  188.     //--- Old Chat Button
  189.     $("#chat_speak").animate({"width":"149px"}, "fast");
  190.     //--- New Chat Button
  191.     $(".send-chat-button").css("right", "").css("width", "").css("margin-left", "").css("left", chatLeft);
  192.     $("button.primary").css("background", "");
  193.     $("button.primary").removeAttr("style");
  194.     // Show the video bar
  195.     $("#twitch_chat").animate({"top":"51px"}, "fast");
  196.     $("#chat").removeAttr("style");
  197.     $("#chat").each(function () {
  198.     this.style.setProperty("top", "51px", "important");
  199.         this.style.setProperty("bottom", "0");
  200. });
  201.     $(".tse-content").removeAttr("style");
  202.     $(".ember-chat .chat-messages .tse-content").css("padding", "");
  203.     $("#archives").animate({"top":"51px"}, "fast");
  204.     //--- Chat Bottom
  205.     $(".chat-messages").removeAttr("style");
  206.     $(".chat-buttons-container").css("top", "");
  207.     //--- Old Buttons Border
  208.     $(".dropdown_glyph").css("border", "", "important").css("box-shadow", "", "important");
  209.     //--- New Buttons Border
  210.     $(".button.glyph-only svg").css("margin-left", "");
  211.     $(".button.glyph-only").css("padding", "");
  212.     $(".chat-option-buttons .button").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  213.     $(".chat-option-buttons .button").removeAttr("style");
  214.     $("button.viewers").css("margin-right", "").css("border", "", "important").css("box-shadow", "", "important");
  215.     $("button.viewers").removeAttr("style");
  216.     $("button.emotemenu").css("margin-right", "").css("margin-left", "").css("border", "", "important").css("box-shadow", "", "important");
  217.     $("button.emotemenu").removeAttr("style");
  218.     //--- Chat Background
  219.     $(".chat-messages").css("background", "");
  220.     
  221.     //--- New Chat Interface Features
  222.     $(".ember-chat .chat-interface").removeAttr("style");
  223.     $(".chat-interface").css("background", "").css("border", "", "important").css("box-shadow", "", "!important");
  224.     //--- $(".chat-interface").each(function () {
  225.     //---  this.style.setProperty("height", "134", "!important");
  226. //---}) ;
  227.     $(".textarea-contain").css("top", "").css("left", "").css("right", "");
  228.     
  229.     //--- $(".segmented_tabs").css({"visibility":"visible"}).css({"z-index":"4"});
  230.     //--- $(".segmented_tabs").show(300, "swing");
  231.     $(".tabs").slideDown(300);
  232.     $("#right_col .top").css({"z-index":"4"});
  233.     
  234.     //--- showCheck3 = 2;
  235.     bRotate();
  236.     rTest = 0;
  237.     showCheck3 = 0;
  238. }
  239. else if(showCheck3 == 0) {
  240.     pHeight = $(".dynamic-player").css("height");
  241.     bHeight = $('#left_col').css("width");
  242.     cHeight = $('#right_col').css("width");
  243.     conWidth = $('#content').css("width");
  244.     tHeight = $('#main_col').css("margin-left");
  245.     zHeight = $('#main_col').css("margin-right");
  246.     chatHeight = $('#chat').css("width");
  247.     chatLHeight = $('#chat_line').css("width");
  248.     chatLLHeight = $('#chat_line_list').css("width");
  249.     chatLLPadding = $('#chat_line_list').css("padding");
  250.     cDisp 	= $('#right_col').css("display");
  251.     localStorage.mmLeft = $('#main_col').css("margin-left");
  252.     //--- zWidth = $('#main_col').css("width");
  253.     chatLeft= $('.send-chat-button').css("left");
  254.     //--- intHeight = $(".chat-interface").css("height");
  255.     
  256.     $("#channel").each(function () {
  257.       this.style.setProperty("padding", "0 0 0 0", "important");
  258. });
  259.     $("#chat_line_list").each(function () {
  260.       this.style.setProperty("padding", "0 0 0", "important");
  261. });
  262.     $(".editable").hide(300, "swing");
  263.     $("#new-user-prompt").hide(300, "swing");
  264.     $("#left_col").hide(300, "swing");
  265.     $(".resizer").hide(300, "swing");
  266.     $(".tabs").slideUp(300);
  267.     //--- Old Panels Handler $("#channel_panels_contain").hide(300, "swing");
  268.     $(".stats-and-actions").hide(300, "swing");
  269.     
  270.     $(".dynamic-player, .dynamic-player object, .dynamic-player video").each(function () {
  271.       this.style.setProperty("height", "100%", "important");
  272.       this.style.setProperty("width", "100%", "important");
  273. });
  274.     $(".dynamic-player").each(function () {
  275.       this.style.setProperty("height", "100%", "important");
  276.       this.style.setProperty("width", "100%", "important");
  277.       this.style.setProperty("z-index", "999");
  278.         
  279. });
  280.     $("#player").each(function () {
  281.       this.style.setProperty("position", "absolute");
  282.     });
  283.     //--- Video Static
  284.     $("#main_col").children(".tse-scroll-content").first().css("position", "static");
  285.     //--- End
  286.  
  287.     if (cDisp == "block") {
  288.     $("#content").each(function () {
  289.       this.style.setProperty("width", "275px", "important");
  290. });
  291.     $("#right_col").each(function () {
  292.       this.style.setProperty("width", "275px", "important");
  293. });
  294.     $("#chat").animate({"width":"275px"}, "fast");
  295.     $("#chat_line_list").css({"width":""});
  296.     $("#chat_line").animate({"width":"272px"}, "fast");
  297.  
  298.     $("#main_col").each(function () {
  299.      this.style.setProperty("margin-right", "275px", "important");
  300.       this.style.setProperty("width", "");
  301. });
  302.     
  303.     $("#right_col .top").css({"z-index":"inherit"});
  304.     $("#twitch_chat").css({"top":"0px"});
  305.     $("#chat").each(function () {
  306.       this.style.setProperty("top", "0px", "important");
  307. });
  308.     $(".tse-content").css("padding-bottom", "7px");
  309.     $(".ember-chat .chat-messages .tse-content").css("padding", "0 10px");
  310.     $("#archives").animate({"top":"0px"}, "100");
  311.     //--- Old Chat Button    
  312.     $("#chat_speak").animate({"width":"84px"}, "100");
  313.     //--- New Chat Button
  314.     $(".send-chat-button").css("right", "5px").css("width", "120px").css("margin-left", "auto");
  315.     $("button.primary").animate({"width": "120px"}, 100).css("height", "28px").css("left", "auto");
  316.         
  317.     // $("button.primary_button").css("background", "black");
  318.     // $("button.primary_button").css("background","linear-gradient(black, rgb(100, 65, 165) 5%, black, rgb(100, 65, 165))");
  319.     $("button.primary").each(function () {
  320.       this.style.setProperty("border", "2px ridge #6441a5", "important");
  321.       this.style.setProperty("background", "linear-gradient(black, rgb(100, 65, 165) 5%, black, rgb(100, 65, 165))", "important");
  322. });
  323.         
  324.     //--- Chat Background
  325.     $(".chat-messages").css("background", "white").css("margin-bottom", "3px").css("overflow", "hidden");
  326.     
  327.     //--- Chat Bottom
  328.     $(".chat-messages").each(function () {
  329.       this.style.setProperty("bottom", "100px", "important");
  330. });
  331.     $(".chat-buttons-container").css("top", "57px");
  332.         
  333.     //--- New Chat Interface Features
  334.     $(".chat-interface").css("background", "white").css("left", "0").css("right", "0").css("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "!important");
  335.     $(".chat-interface").each(function () {
  336.       this.style.setProperty("height", "100px", "important");
  337. });
  338.         
  339.     $(".textarea-contain").css("top", "0").css("left", "0").css("right", "0");
  340.     }
  341.     else {
  342.         $("#content").each(function () {
  343.       this.style.setProperty("width", "0px", "important");
  344. });
  345.     $("#right_col").each(function () {
  346.       this.style.setProperty("width", "0px", "important");
  347. });
  348.         $("#main_col").each(function () {
  349.       this.style.setProperty("margin-right", "0px");
  350.            this.style.setProperty("width", "100%", "important");
  351. });
  352.         
  353.     }
  354.     
  355.     if (zWidth > 0) {
  356.        $("#main_col").each(function () {
  357.         this.style.setProperty("width", "100%", "important");
  358. }); 
  359.        
  360.     }
  361.     else {       
  362.         this.style.setProperty("width", "", "important");
  363.     }
  364.     
  365.     $("#main_col").each(function () {
  366.       this.style.setProperty("margin-left", "0px", "important");      
  367. });
  368.     $("#right_close").hide(300, "swing");     
  369.     //--- Old Buttons Border
  370.     $(".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");
  371.     //--- New Buttons Border
  372.     $(".button.glyph-only").css("padding-left", "4px").css("padding-right", "4px");
  373.     $(".chat-option-buttons .button").css("margin-right", "2px").css("margin-left", "5px").css("height", "24px");
  374.     $(".button.glyph-only svg").css("margin-top", "4px");
  375.     $(".chat-option-buttons .button").each(function () {
  376.       this.style.setProperty("border", "2px ridge #6441a5", "important");
  377.       this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  378.       this.style.setProperty("background", 'linear-gradient(to top, white, rgba(100, 65, 165, 0.9))' , "important");
  379. });
  380.     $("button.viewers").css("margin-right", "2px");
  381.     $("button.viewers").each(function () {
  382.       this.style.setProperty("border", "2px ridge #6441a5", "important");
  383.       this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  384.       //this.style.setProperty("background", 'url("/images/xarth/button_glyphs.png") no-repeat 4px -21px, linear-gradient(to top,black, rgb(100, 65, 165))', "important");
  385. });
  386.     $("#emote-menu-button").css("margin-right", "2px").css("width", "40px").css("height", "34px");
  387.     $("#emote-menu-button").each(function () {
  388.       this.style.setProperty("border", "2px ridge #6441a5", "important");
  389.         this.style.setProperty("margin-left", "5px", "important");
  390.       this.style.setProperty("box-shadow", "1px 1px 1px rgb(100, 65, 165), 0px 1px 0px rgba(0, 0, 0, 0.15) inset", "important");
  391.       this.style.setProperty("background", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKUSURBVDhPfZTNi1JRGMZvMIsWUZts5SIXFYK0CME/IGghxVC7WUoU1NBixI+mRSD4MQzmxziKO3XUBhRmUGZKdBG40XEGU6d0GFGZcT4qxW1hi7fzvNwZqKwDD5z7vs/vueeee+6VMJxO5wUhhdvtfuHz+T4tLS2NhegfGsMDLxiwHIIhLi57PJ75VCr1Y39/n4bDIY1Go4lCDx54wYCVYzjoVjQa/dxutyfCkwSvYJpgOSQf708tuBa1yWRy/L+V/Cl4wYBFhhTxfLhum/esiiJ1u12KRCJksVhofX2dTk5OzkHMUUMPHnjB2F55VpEhPde/Lbx8FqBEIkHpdJoMBgNptVrS6XRUqVTOg7a3t2lmZob0ej2p1Wr2ggGLDOnJ3QSZH4coHo/TysoKhygUCtJoNFQsFmkwGLAwR7hSqSSVSsVeMGCRIT29F6fXJi8Xy+Uymc1mmp6eJofDQfV6nU5PT1mY2+127uHxSqUSh4FFhhQLvrvtcrm+YpkHBwdUrVZpa2uLarUadTodOjw8ZGGOGnrwwAsGLDLw1i4uLrzRYeOOj49pb2+Pdnd3qdVq8StGAIQ5ao1Ggz3wggGLDD4C4izcEcWfR0dHbMrlcrSxscGbjVAIK8lms7S5ucmB/X6fXz9YDsEQFzdjsVit2Wzyqc1kMrwfVquVjEYjzc3NkclkIpvNRmtra+yBVzAfBXtDjuGgS8FgcFbc8QvuhjNSKBQoFAqR6LFEn/L5PPfggXd5eXkWrBzDQdC1QCBgFoeut7Ozw/tyBp2FQzhPwtOFFwzY34Yo4A9wRXzdD8LhcE48wncE9no9Fuaoid574bkPLxgZ/3uI5pTQVfFlP/L7/Wmhb7JSXq/3IXrwyHZ5SNIvGCnqyh+J7+gAAAAASUVORK5CYII=) no-repeat 50%, linear-gradient(to top, white, rgba(100, 65, 165, 0.901961))", "important");
  392. });
  393.     //--- $("#myContainer3").fadeTo("fast", 1.0).css({"background":"url('http://i61.tinypic.com/ri80w5.png')"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
  394.     $("#myContainer3").css({"opacity":"1"}).delay(300).css({"box-shadow":"inset 0 0 20px black"});
  395.     bRotate();
  396.     rTest = 360;
  397.     showCheck3 = 1;
  398.  
  399. }
  400. //--- else if(showCheck3 == 2) {
  401. else if(showCheck3 == 5) {    
  402.     if (cDisp == "block") {
  403.         
  404.     $("#main_col").each(function () {
  405.       this.style.setProperty("margin-right", zHeight);
  406. });
  407.     }
  408.     
  409.     else {
  410.         $("#main_col").each(function () {
  411.        this.style.setProperty("margin-right", "0px");
  412.        this.style.setProperty("width", "");
  413. });
  414.         
  415.     }
  416.     
  417.     $("#main_col").each(function () {
  418.        this.style.setProperty("margin-left", tHeight);
  419. });
  420.     
  421.     $("#main_col").css("width", "");
  422.     if (cDisp == "block") {
  423.        $("#main_col").each(function () {
  424.            this.style.setProperty("margin-right", "340px");
  425. }); 
  426.        
  427.     }
  428.     else {       
  429.         $("#main_col").css("margin-right", "0", "important");
  430.     }
  431.  
  432.     $("#myContainer3").fadeTo("fast", 0.5).delay(300).css({"box-shadow":"inset 0 0 20px navy"});
  433.     
  434.     showCheck3 = 0;
  435. }
  436. else if(showCheck3 == 3) {
  437.     
  438. }
  439.     //--- clearInterval(pageURLCheckTimer);
  440.     return false;
  441.     }
  442.     }); 
  443. }
  444.  
  445.  
  446.  
  447.  
  448. //--- Style our newly added elements using CSS.
  449. GM_addStyle ( multilineStr ( function () {/*!
  450.     #myContainer3 {
  451.         position:               absolute;
  452.         border-radius:			25px;
  453.         transition:				1s ease-in-out;
  454.         background:				url("http://i61.tinypic.com/ri80w5.png");
  455.         opacity:				0.7;
  456.         background-size:		contain !important; 
  457.         box-shadow:				inset 0 0 20px black;
  458.         bottom:                 0;
  459.         left:					0;
  460.         font-size:              13px;
  461.         border:                 0px outset black;
  462.         margin-left:            160px;
  463.         margin-bottom:			0px;
  464.         opacity:                0.5;
  465.         width:					27px !important;
  466.         height:					27px !important;
  467.         z-index:                999;
  468.         padding:                0px 0px;
  469.     }
  470.     #myButton3 {
  471.         cursor:                 pointer;
  472.        	background: 			transparent;
  473.     	border: 				none !important;
  474.         width:					27px !important;
  475.         height:					27px !important;
  476.         color:					purple;
  477.         font-weight:			bold;
  478.     }
  479.     #myContainer3 p {
  480.         color:                  purple;
  481.         background:             transparent;
  482.     }
  483. */} ) ); 
  484.  
  485. function multilineStr (dummyFunc) {
  486.     var str = dummyFunc.toString ();
  487.     str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
  488.             .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
  489.             //--- .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
  490.             ;
  491.     return str;
  492. }