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