☰

Greasy Fork 支持简体中文。

Monster Twitch

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

目前為 2014-03-10 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name       Monster Twitch
  3. // @namespace  http://enut.co/dev
  4. // @version    2.59
  5. // @description  Streches stream to max width and hides left navigation bar with an 'M' toggle on the bottom right
  6. // @include        http://*.twitch.tv/*
  7. // @include        http://twitch.tv/*
  8. // @exclude        http://www.twitch.tv/directory*
  9. // @exclude        http://www.twitch.tv/*/dashboard
  10. // @exclude        http://www.twitch.tv/inbox*
  11. // @exclude        http://www.twitch.tv/subscriptions*
  12. // @exclude        http://store.twitch.tv
  13. // @exclude        http://api.twitch.tv/*
  14. // @exclude        https://api.twitch.tv/*
  15. // @require     http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
  16. // @grant       GM_addStyle
  17. // @copyright  2013+, tracerman
  18. // ==/UserScript==
  19.  
  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);
  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-simple.primary").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.     //--- Old Buttons Border
  183.     $(".dropdown_glyph").css("border", "", "important").css("box-shadow", "", "important");
  184.     //--- New Buttons Border
  185.     $("button.settings").css("border", "", "important").css("box-shadow", "", "important");
  186.     $("button.viewers").css("border", "", "important").css("box-shadow", "", "important");
  187.     
  188.     //--- New Chat Interface Features
  189.     $(".chat-interface").css("background", "").css("border", "", "important").css("box-shadow", "", "!important");
  190.     $(".textarea-contain").css("border", "");
  191.     
  192.     $(".segmented_tabs").css({"visibility":"visible"});
  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.     
  209.     $("#channel").each(function () {
  210.       this.style.setProperty("padding", "0 0 0 0", "important");
  211. });
  212.     $("#chat_line_list").each(function () {
  213.       this.style.setProperty("padding", "0 0 0", "important");
  214. });
  215.     $(".editable").hide();
  216.     $("#left_col").hide();
  217.     $(".resizer").hide();
  218.     $("#channel_panels_contain").hide();
  219.     $(".stats-and-actions").hide();
  220.     $(".dynamic-player, .dynamic-player object, .dynamic-player video").each(function () {
  221.       this.style.setProperty("height", "100%", "important");
  222.       this.style.setProperty("width", "100%", "important");
  223. });
  224.     $(".dynamic-player").each(function () {
  225.       this.style.setProperty("height", "100%", "important");
  226.       this.style.setProperty("width", "100%", "important");
  227. });
  228.     $("#player").each(function () {
  229.       this.style.setProperty("position", "absolute");
  230. });
  231.     if (cDisp == "block") {
  232.     $("#content").each(function () {
  233.       this.style.setProperty("width", "275px", "important");
  234. });
  235.     $("#right_col").each(function () {
  236.       this.style.setProperty("width", "275px", "important");
  237. });
  238.     $("#chat").animate({"width":"275px"}, "fast");
  239.     $("#chat_line_list").css({"width":""});
  240.     $("#chat_line").animate({"width":"272px"}, "fast");
  241.  
  242.     $("#main_col").each(function () {
  243.      this.style.setProperty("margin-right", "275px", "important");
  244.       this.style.setProperty("width", "");
  245. });
  246.     
  247.     $(".segmented_tabs").css({"visibility":"hidden"});
  248.     $("#twitch_chat").css({"top":"0px"});
  249.     $("#chat").each(function () {
  250.       this.style.setProperty("top", "0px", "important");
  251. });
  252.     $("#archives").animate({"top":"0px"}, "fast");
  253.     //--- Old Chat Button    
  254.     $("#chat_speak").animate({"width":"84px"}, "fast");
  255.     //--- New Chat Button
  256.     $(".send-chat-button").css("width", "150px").css("left", "100px");
  257.     $(".button-simple.primary").css("background", "black");
  258.     
  259.     //--- New Chat Interface Features
  260.     $(".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");
  261.     $(".textarea-contain").css("border", "2px solid rgb(100, 65, 165)");
  262.     }
  263.     else {
  264.         $("#content").each(function () {
  265.       this.style.setProperty("width", "0px", "important");
  266. });
  267.     $("#right_col").each(function () {
  268.       this.style.setProperty("width", "0px", "important");
  269. });
  270.         $("#main_col").each(function () {
  271.       this.style.setProperty("margin-right", "0px", "important");
  272.            this.style.setProperty("width", "100%", "important");
  273. });
  274.         
  275.     }
  276.     
  277.     if (zWidth > 0) {
  278.        $("#main_col").each(function () {
  279.         this.style.setProperty("width", "100%", "important");
  280. }); 
  281.        
  282.     }
  283.     else {       
  284.         this.style.setProperty("width", "", "important");
  285.     }
  286.     
  287.     $("#main_col").each(function () {
  288.       this.style.setProperty("margin-left", "0px", "important");      
  289. });
  290.     $("#right_close").hide();     
  291.     /* zHeight = $('#main_col').css("margin-right"); */
  292.     //--- Old Buttons Border
  293.     $(".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");
  294.     //--- New Buttons Border
  295.     $("button.settings").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");
  296.     $("button.viewers").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");
  297.     
  298.     $("#myButton3").fadeTo("fast", 0.5).delay(300).css({"color":"yellow"});
  299.     showCheck3 = 1;
  300. }
  301. else if(showCheck3 == 2) {
  302.     
  303.     if (cDisp == "block") {
  304.         
  305.     $("#main_col").each(function () {
  306.       this.style.setProperty("margin-right", zHeight);
  307.        /* this.style.setProperty("width", zWidth); */
  308. });
  309.     }
  310.     
  311.     else {
  312.         $("#main_col").each(function () {
  313.        this.style.setProperty("margin-right", "0px");
  314.        this.style.setProperty("width", "");
  315. });
  316.         
  317.     }
  318.     
  319.     $("#main_col").each(function () {
  320.        this.style.setProperty("margin-left", tHeight);
  321.         /* this.style.setProperty("width", zWidth); */
  322. });
  323.     
  324.     $("#main_col").css("width", "");
  325.     if (cDisp == "block") {
  326.        $("#main_col").each(function () {
  327.            this.style.setProperty("margin-right", "340px");
  328. }); 
  329.        
  330.     }
  331.     else {       
  332.         $("#main_col").css("margin-right", "0", "important");
  333.     }
  334.  
  335.     $("#myButton3").fadeTo("fast", 1).delay(300).css({"color":"blue"});
  336.     
  337.     
  338.     showCheck3 = 0;
  339. }
  340. else if(showCheck3 == 3) {
  341.     
  342. }
  343. }
  344.  
  345. //--- Style our newly added elements using CSS.
  346. GM_addStyle ( multilineStr ( function () {/*!
  347.     #myContainer3 {
  348.         position:               absolute;
  349.         bottom:                    0;
  350.         left:					0;
  351.         font-size:              10px;
  352.         border:                 0px outset black;
  353.         margin:                 0px;
  354.         opacity:                10.0;
  355.         z-index:                250;
  356.         padding:                0px 1px;
  357.     }
  358.     #myButton3 {
  359.         cursor:                 pointer;
  360.        	background: 			transparent;
  361.     	border: 				none !important;
  362.         color:					purple;
  363.         font-weight:			bold;
  364.     }
  365.     #myContainer3 p {
  366.         color:                  purple;
  367.         background:             transparent;
  368.     }
  369. */} ) );
  370.  
  371. function multilineStr (dummyFunc) {
  372.     var str = dummyFunc.toString ();
  373.     str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
  374.             .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
  375.             .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
  376.             ;
  377.     return str;
  378. }