InstaSynchP Layouts

Larger layouts and fullscreen mode

当前为 2014-11-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name InstaSynchP Layouts
  3. // @namespace InstaSynchP
  4. // @description Larger layouts and fullscreen mode
  5.  
  6. // @version 1.1.4
  7. // @author Zod-
  8. // @source https://github.com/Zod-/InstaSynchP-Layouts
  9. // @license MIT
  10.  
  11. // @include http://*.instasynch.com/*
  12. // @include http://instasynch.com/*
  13. // @include http://*.instasync.com/*
  14. // @include http://instasync.com/*
  15. // @grant none
  16. // @run-at document-start
  17.  
  18. // @require https://greasyfork.org/scripts/5647-instasynchp-library/code/InstaSynchP%20Library.js
  19. // @require https://greasyfork.org/scripts/2858-jquery-fullscreen/code/jqueryfullscreen.js?version=25886
  20. // ==/UserScript==
  21.  
  22. function Layouts(version) {
  23. "use strict";
  24. this.version = version;
  25. this.name = 'InstaSynchP Layouts';
  26. this.userFullscreenToggle = false;
  27. this.settings = [{
  28. 'label': 'Layout',
  29. 'id': 'Layout',
  30. 'type': 'select',
  31. 'options': ['normal', 'large', 'huge'],
  32. 'default': 'normal',
  33. 'section': ['General']
  34. }, {
  35. 'label': 'Make chat visible on message',
  36. 'id': 'make-chat-visible',
  37. 'type': 'checkbox',
  38. 'default': true,
  39. 'section': ['General', 'Fullscreen']
  40. }, {
  41. 'label': 'On Chat Message Opacity',
  42. 'id': 'chat-message-opacity',
  43. 'type': 'int',
  44. 'title': '0-100',
  45. 'min': 0,
  46. 'max': 100,
  47. 'default': 100,
  48. 'size': 1,
  49. 'section': ['General', 'Fullscreen']
  50. }, {
  51. 'label': 'Chat Opacity',
  52. 'id': 'chat-opacity',
  53. 'type': 'int',
  54. 'title': '0-100',
  55. 'min': 0,
  56. 'max': 100,
  57. 'default': 30,
  58. 'size': 1,
  59. 'section': ['General', 'Fullscreen']
  60. }, {
  61. 'label': 'Playlist Opacity',
  62. 'id': 'playlist-opacity',
  63. 'type': 'int',
  64. 'title': '0-100',
  65. 'min': 0,
  66. 'max': 100,
  67. 'default': 30,
  68. 'size': 1,
  69. 'section': ['General', 'Fullscreen']
  70. }, {
  71. 'label': 'Poll Opacity',
  72. 'id': 'poll-opacity',
  73. 'type': 'int',
  74. 'title': '0-100',
  75. 'min': 0,
  76. 'max': 100,
  77. 'default': 30,
  78. 'size': 1,
  79. 'section': ['General', 'Fullscreen']
  80. }, {
  81. 'label': 'Font color',
  82. 'id': 'fullscreen-font-color',
  83. 'type': 'text',
  84. 'default': '#FFFF00',
  85. 'size': 5,
  86. 'section': ['General', 'Fullscreen']
  87. }, {
  88. 'label': 'Outline color',
  89. 'id': 'fullscreen-outline-color',
  90. 'type': 'text',
  91. 'default': '#000000',
  92. 'size': 5,
  93. 'section': ['General', 'Fullscreen']
  94. }];
  95. }
  96.  
  97. Layouts.prototype.addLayoutsOnce = function () {
  98. "use strict";
  99. var th = this,
  100. i,
  101. layouts = [{
  102. 'name': 'normalLayout',
  103. 'url': ''
  104. }, {
  105. 'name': 'largeLayout',
  106. 'url': 'https://cdn.rawgit.com/Zod-/InstaSynchP-Layouts/7d144b7ae7a5e0ad168f182c88b9312c8fb2beda/largeLayout.css'
  107. }, {
  108. 'name': 'hugeLayout',
  109. 'url': 'https://cdn.rawgit.com/Zod-/InstaSynchP-Layouts/b1e8f187eecce9ea4d552b97f76e8161ecfb3544/hugeLayout.css'
  110. }, {
  111. 'name': 'fullscreenLayout',
  112. 'url': 'https://rawgit.com/Zod-/InstaSynchP-Layouts/af645cbcd04ea0f813e335540995672317809195/fullscreenLayout.css'
  113. }];
  114. for (i = 0; i < layouts.length; i += 1) {
  115. layouts[i].id = 'layout';
  116. cssLoader.add(layouts[i]);
  117. }
  118. //style for the footer controls
  119. cssLoader.add({
  120. 'name': 'layouts',
  121. 'url': 'https://cdn.rawgit.com/Zod-/InstaSynchP-Layouts/e2cb8b52f4dc76811c51c3121dbdd35d1de5b7d9/layouts.css',
  122. 'autoload': true
  123. });
  124. events.on(th, 'SettingChange[Layout]', th.changeLayout);
  125. //reinitialise once the css has been loaded to fix the size
  126. events.on(th, 'CSSLoad[layout]', function () {
  127. $("#videos").data("jsp").reinitialise();
  128. });
  129. };
  130. Layouts.prototype.setUpFullscreenOnce = function () {
  131. "use strict";
  132. var th = this,
  133. chatVisibleTimer;
  134. //make poll visible in fullscreen when it is hidden
  135. events.on(th, 'CreatePoll', function () {
  136. $('.poll-container').removeClass('poll-container2');
  137. $('#hide-poll').removeClass('hide-poll2');
  138. });
  139. $('head').append(
  140. $('<style>', {
  141. 'id': 'fullscreen-font'
  142. })
  143. );
  144. //make chat visible for 5 seconds on every message
  145. function changeFontColor(ignore, newVal) {
  146. if (newVal === 'initial') {
  147. $('#fullscreen-font').text('');
  148. return;
  149. }
  150. $('#fullscreen-font').text(
  151. ('#cin,' +
  152. '#chat .left .messages .message,' +
  153. '#chat .left .messages .message .username{' +
  154. ' color: {0} !important;' +
  155. ' text-shadow: -1px 0 {1}, 0 1px {1}, 1px 0 {1}, 0 -1px {1};' +
  156. '}'
  157. ).format(gmc.get('fullscreen-font-color'), gmc.get('fullscreen-outline-color'))
  158. );
  159. }
  160.  
  161. function chatVisibility() {
  162. if (!gmc.get('make-chat-visible')) {
  163. return;
  164. }
  165. $('#chat .left').css('opacity', gmc.get('chat-message-opacity') / 100.0);
  166. if (chatVisibleTimer) {
  167. clearTimeout(chatVisibleTimer);
  168. chatVisibleTimer = undefined;
  169. }
  170. chatVisibleTimer = setTimeout(function () {
  171. $('#chat .left').css('opacity', gmc.get('chat-opacity') / 100.0);
  172. }, 3000);
  173. }
  174. //on fullscreen change
  175. $(document).bind('fscreenchange', function () {
  176. if ($.fullscreen.isFullScreen()) {
  177. if (th.userFullscreenToggle) {
  178. events.on(th, 'AddMessage', chatVisibility);
  179. changeFontColor();
  180. events.on(th, 'SettingChange[fullscreen-font-color],SettingChange[fullscreen-outline-color]', changeFontColor);
  181. cssLoader.load('fullscreenLayout');
  182. //the event somehow doesn't affect it when changing to fullscreen so fire it by hand again after a short time
  183. setTimeout(function () {
  184. events.fire('CSSLoad[layout]');
  185. }, 1500);
  186. //set bars and elements to their opacity values
  187. $('#chat .left').css('opacity', gmc.get('chat-opacity') / 100.0);
  188. $('#playlist').css('opacity', gmc.get('playlist-opacity') / 100.0);
  189. $('.poll-container').css('opacity', gmc.get('poll-opacity') / 100.0);
  190. $('#chat-slider').slider('option', 'value', gmc.get('chat-opacity'));
  191. $('#poll-slider').slider('option', 'value', gmc.get('poll-opacity'));
  192. $('#playlist-slider').slider('option', 'value', gmc.get('playlist-opacity'));
  193. }
  194. } else {
  195. //turn back to normal if user canceled fullscreen
  196. if (th.userFullscreenToggle) {
  197. events.unbind('AddMessage', chatVisibility);
  198. changeFontColor(undefined, 'initial');
  199. events.unbind('SettingChange[fullscreen-font-color],SettingChange[fullscreen-outline-color]', changeFontColor);
  200. cssLoader.load('{0}Layout'.format(gmc.get('Layout')));
  201. if (chatVisibleTimer) {
  202. clearTimeout(chatVisibleTimer);
  203. chatVisibleTimer = undefined;
  204. }
  205. $('#chat .left').css('opacity', '1');
  206. $('#playlist').css('opacity', '1');
  207. $('.poll-container').css('opacity', '1');
  208. }
  209. th.userFullscreenToggle = false;
  210. }
  211. });
  212. };
  213.  
  214. Layouts.prototype.addLayouts = function () {
  215. "use strict";
  216. var th = this,
  217. i,
  218. layouts = [
  219. 'normal',
  220. 'large',
  221. 'huge'
  222. ];
  223. //change layout if it is a different one and then save
  224. function setLayout(event) {
  225. if (gmc.get('Layout') !== $(event.currentTarget).text()) {
  226. gmc.set('Layout', $(event.currentTarget).text());
  227. window.plugins.settings.save();
  228. }
  229. }
  230.  
  231. $('<div>', {
  232. 'id': 'layoutSelector'
  233. }).text('layout:').insertBefore('#roomFooter');
  234.  
  235. //add all possible layouts
  236. for (i = 0; i < layouts.length; i += 1) {
  237. $('#layoutSelector').append($('<a>', {
  238. 'id': '{0}Layout'.format(layouts[i])
  239. }).text(layouts[i]).click(setLayout).addClass('layoutClickable'));
  240. }
  241.  
  242. //set active layout
  243. $('#{0}Layout'.format(gmc.get('Layout'))).addClass('layoutNotClickable');
  244. //change to that layout
  245. th.changeLayout();
  246. };
  247.  
  248. Layouts.prototype.setUpFullscreen = function () {
  249. "use strict";
  250. var th = this,
  251. opacitySaveTimer;
  252. //add option in the settings menu
  253. $('#playlist-settings-menu').append(
  254. $('<li>', {
  255. 'id': 'fullscreen',
  256. 'title': 'turn fullscreen on or off'
  257. }).click(function () {
  258. th.toggleFullscreen();
  259. }).text('Fullscreen')
  260. );
  261.  
  262. //add div to block the fullscreen button of the player
  263. $('#stage').append($('<div>', {
  264. 'id': 'block-fullscreen'
  265. }).click(th.toggleFullscreen));
  266. $('#playlist').hover(function () {
  267. $('#hide-playlist').css('opacity', 1);
  268. }, function () {
  269. $('#hide-playlist').css('opacity', 0);
  270. });
  271.  
  272. //don't save opacity with every little value change
  273. function saveOpacity() {
  274. $('#chat .left').css('opacity', gmc.get('chat-opacity') / 100.0);
  275. $('#playlist').css('opacity', gmc.get('playlist-opacity') / 100.0);
  276. $('.poll-container').css('opacity', gmc.get('poll-opacity') / 100.0);
  277. if (opacitySaveTimer) {
  278. clearTimeout(opacitySaveTimer);
  279. opacitySaveTimer = undefined;
  280. }
  281. opacitySaveTimer = setTimeout(window.plugins.settings.save, 5000);
  282. }
  283.  
  284. //add buttons to hide playlist/poll
  285. $('#stage .stage').prepend(
  286. $('<div>', {
  287. 'id': 'hide-playlist'
  288. }).append(
  289. $('<div>').click(function () {
  290. $('#videos').toggleClass('playlist2');
  291. $('#hide-playlist').toggleClass('hide-playlist2');
  292. $('#chat').toggleClass('chat2');
  293. })
  294. )
  295. );
  296. $('.poll-container').prepend(
  297. $('<div>', {
  298. 'id': 'hide-poll'
  299. }).append(
  300. $('<div>').click(function () {
  301. $('.poll-container').toggleClass('poll-container2');
  302. $('#hide-poll').toggleClass('hide-poll2');
  303. })
  304. )
  305. );
  306.  
  307. //add opacity sliders
  308. $('.overall').append(
  309. $('<div>', {
  310. 'id': 'opacity-sliders'
  311. }).append(
  312. $('<span>').text('Opacity')
  313. ).append(
  314. $('<div>', {
  315. 'id': 'chat-slider'
  316. }).slider({
  317. range: "min",
  318. value: gmc.get('chat-opacity'),
  319. min: 0,
  320. max: 100,
  321. slide: function (ignore, ui) {
  322. gmc.set('chat-opacity', ui.value);
  323. saveOpacity();
  324. }
  325. }).append(
  326. $('<span>').text('chat').addClass('text-shadow')
  327. )
  328. ).append(
  329. $('<div>', {
  330. 'id': 'poll-slider'
  331. }).slider({
  332. range: "min",
  333. value: gmc.get('poll-opacity'),
  334. min: 0,
  335. max: 100,
  336. slide: function (ignore, ui) {
  337. gmc.set('poll-opacity', ui.value);
  338. saveOpacity();
  339. }
  340. }).append(
  341. $('<span>').text('poll').addClass('text-shadow')
  342. )
  343. ).append(
  344. $('<div>', {
  345. 'id': 'playlist-slider'
  346. }).slider({
  347. range: "min",
  348. value: gmc.get('playlist-opacity'),
  349. min: 0,
  350. max: 100,
  351. slide: function (ignore, ui) {
  352. gmc.set('playlist-opacity', ui.value);
  353. saveOpacity();
  354. }
  355. }).append(
  356. $('<span>').text('playlist').addClass('text-shadow')
  357. )
  358. )
  359. );
  360. };
  361.  
  362. Layouts.prototype.preConnect = function () {
  363. "use strict";
  364. var th = this;
  365. th.addLayouts();
  366. th.setUpFullscreen();
  367. };
  368.  
  369. Layouts.prototype.executeOnce = function () {
  370. "use strict";
  371. var th = this;
  372. th.addLayoutsOnce();
  373. th.setUpFullscreenOnce();
  374. };
  375.  
  376. Layouts.prototype.toggleFullscreen = function () {
  377. "use strict";
  378. var th = this;
  379. if ($.fullscreen.isFullScreen()) {
  380. $.fullscreen.exit();
  381. } else {
  382. th.userFullscreenToggle = true;
  383. $('body').fullscreen();
  384. }
  385. };
  386.  
  387. Layouts.prototype.changeLayout = function () {
  388. "use strict";
  389. $('.layoutNotClickable').removeClass('layoutNotClickable');
  390. $('#{0}Layout'.format(gmc.get('Layout'))).addClass('layoutNotClickable');
  391. cssLoader.load('{0}Layout'.format(gmc.get('Layout')));
  392. };
  393.  
  394. window.plugins = window.plugins || {};
  395. window.plugins.layouts = new Layouts('1.1.4');