☰

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-17 提交的版本，查看 最新版本。

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