Resize YT To Window Size

Moves the video to the top of the website and resizes it to the screen size.

当前为 2015-02-25 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Resize YT To Window Size
  3. // @description Moves the video to the top of the website and resizes it to the screen size.
  4. // @author Chris H (Zren / Shade)
  5. // @icon https://youtube.com/favicon.ico
  6. // @homepageURL https://github.com/Zren/ResizeYoutubePlayerToWindowSize/
  7. // @namespace http://xshade.ca
  8. // @version 55
  9. // @include http*://*.youtube.com/*
  10. // @include http*://youtube.com/*
  11. // @include http*://*.youtu.be/*
  12. // @include http*://youtu.be/*
  13. // ==/UserScript==
  14.  
  15. // Github: https://github.com/Zren/ResizeYoutubePlayerToWindowSize
  16. // GreasyFork: https://greasyfork.org/scripts/811-resize-yt-to-window-size
  17. // OpenUserJS.org: https://openuserjs.org/scripts/zren/Resize_YT_To_Window_Size
  18. // Userscripts.org: http://userscripts-mirror.org/scripts/show/153699
  19.  
  20. (function (window) {
  21. "use strict";
  22. //--- Imported Globals
  23. // yt
  24. // ytcenter
  25. // ytplayer
  26. var uw = window.top;
  27.  
  28. //--- Already Loaded?
  29. // GreaseMonkey loads this script twice for some reason.
  30. if (uw.ytwp) return;
  31.  
  32. //--- Utils
  33. function isStringType(obj) { return typeof obj === 'string'; }
  34. function isArrayType(obj) { return obj instanceof Array; }
  35. function isObjectType(obj) { return typeof obj === 'object'; }
  36. function isUndefined(obj) { return typeof obj === 'undefined'; }
  37. function buildVenderPropertyDict(propertyNames, value) {
  38. var d = {};
  39. for (var i in propertyNames)
  40. d[propertyNames[i]] = value;
  41. return d;
  42. }
  43.  
  44. //--- jQuery
  45. // Based on jQuery
  46. // https://github.com/jquery/jquery/blob/master/src/manipulation.js
  47. var core_rnotwhite = /\S+/g;
  48. var rclass = /[\t\r\n\f]/g;
  49. var rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;
  50.  
  51. var jQuery = {
  52. trim: function( text ) {
  53. return (text || "").replace( rtrim, "" );
  54. },
  55. addClass: function( elem, value ) {
  56. var classes, cur, clazz, j,
  57. proceed = typeof value === "string" && value;
  58.  
  59. if ( proceed ) {
  60. // The disjunction here is for better compressibility (see removeClass)
  61. classes = ( value || "" ).match( core_rnotwhite ) || [];
  62.  
  63. cur = elem.nodeType === 1 && ( elem.className ?
  64. ( " " + elem.className + " " ).replace( rclass, " " ) :
  65. " "
  66. );
  67.  
  68. if ( cur ) {
  69. j = 0;
  70. while ( (clazz = classes[j++]) ) {
  71. if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
  72. cur += clazz + " ";
  73. }
  74. }
  75. elem.className = jQuery.trim( cur );
  76. }
  77. }
  78. },
  79. removeClass: function( elem, value ) {
  80. var classes, cur, clazz, j,
  81. proceed = arguments.length === 0 || typeof value === "string" && value;
  82.  
  83. if ( proceed ) {
  84. classes = ( value || "" ).match( core_rnotwhite ) || [];
  85.  
  86. // This expression is here for better compressibility (see addClass)
  87. cur = elem.nodeType === 1 && ( elem.className ?
  88. ( " " + elem.className + " " ).replace( rclass, " " ) :
  89. ""
  90. );
  91.  
  92. if ( cur ) {
  93. j = 0;
  94. while ( (clazz = classes[j++]) ) {
  95. // Remove *all* instances
  96. while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
  97. cur = cur.replace( " " + clazz + " ", " " );
  98. }
  99. }
  100. elem.className = value ? jQuery.trim( cur ) : "";
  101. }
  102. }
  103. }
  104. };
  105.  
  106.  
  107. //--- Stylesheet
  108. var JSStyleSheet = function(id) {
  109. this.id = id;
  110. this.stylesheet = '';
  111. };
  112.  
  113. JSStyleSheet.prototype.buildRule = function(selector, styles) {
  114. var s = "";
  115. for (var key in styles) {
  116. s += "\t" + key + ": " + styles[key] + ";\n";
  117. }
  118. return selector + " {\n" + s + "}\n";
  119. };
  120.  
  121. JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  122. if (isArrayType(selector))
  123. selector = selector.join(',\n');
  124. var newStyle;
  125. if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  126. // appendRule('#blarg', 'display', 'none');
  127. var d = {};
  128. d[k] = v;
  129. newStyle = this.buildRule(selector, d);
  130. } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  131. // appendRule('#blarg', {'display': 'none'});
  132. newStyle = this.buildRule(selector, k);
  133. } else {
  134. // Invalid Arguments
  135. console.log('Illegal arguments', arguments);
  136. return;
  137. }
  138.  
  139. this.stylesheet += newStyle;
  140. };
  141.  
  142. JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  143. var styleElement = document.getElementById(injectedStyleId);
  144. if (!styleElement) {
  145. styleElement = document.createElement('style');
  146. styleElement.type = 'text/css';
  147. styleElement.id = injectedStyleId;
  148. document.getElementsByTagName('head')[0].appendChild(styleElement);
  149. }
  150. styleElement.appendChild(document.createTextNode(stylesheet));
  151. };
  152.  
  153. JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  154. JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  155. };
  156.  
  157. //--- Constants
  158. var scriptShortName = 'ytwp'; // YT Window Player
  159. var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  160. var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  161. var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  162. var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  163. var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  164.  
  165. var videoContainerId = 'player';
  166. var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  167.  
  168. var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  169.  
  170. //--- YTWP
  171. var ytwp = uw.ytwp = {
  172. scriptShortName: scriptShortName, // YT Window Player
  173. log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  174. log: function() { return this.log_(console.log, arguments); },
  175. error: function() { return this.log_(console.error, arguments); },
  176.  
  177. initialized: false,
  178. pageReady: false,
  179. watchPage: false,
  180. };
  181.  
  182. ytwp.util = {
  183. isWatchUrl: function (url) {
  184. if (!url)
  185. url = uw.location.href;
  186. return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  187. }
  188. };
  189.  
  190. var Html5PlayerFix = {
  191. YTRect: null,
  192. YTApplication: null,
  193. playerInstances: null,
  194. moviePlayer: null,
  195. moviePlayerElement: null,
  196. app: null,
  197. };
  198. Html5PlayerFix.getPlayerRect = function() {
  199. return new Html5PlayerFix.YTRect(Html5PlayerFix.moviePlayerElement.clientWidth, Html5PlayerFix.moviePlayerElement.clientHeight);
  200. };
  201. Html5PlayerFix.getApplicationClass = function() {
  202. if (Html5PlayerFix.YTApplication === null) {
  203. var testEl = document.createElement('div');
  204. var testAppInstance = uw.yt.player.Application.create(testEl, {});
  205. Html5PlayerFix.YTApplication = testAppInstance.constructor;
  206.  
  207. // Cleanup testAppInstance
  208. var playerInstances = Html5PlayerFix.getPlayerInstances();
  209.  
  210. var testAppInstanceKey = null;
  211. Object.keys(playerInstances).forEach(function(key) {
  212. if (playerInstances[key] === testAppInstance) {
  213. testAppInstanceKey = key;
  214. }
  215. });
  216. testAppInstance.dispose();
  217. delete playerInstances[testAppInstanceKey];
  218. }
  219.  
  220.  
  221. return Html5PlayerFix.YTApplication;
  222. };
  223. Html5PlayerFix.getPlayerInstances = function() {
  224. if (Html5PlayerFix.playerInstances === null) {
  225. var YTApplication = Html5PlayerFix.getApplicationClass();
  226. if (YTApplication === null)
  227. return null;
  228.  
  229. // Use yt.player.Application.create to find the playerInstancesKey.
  230. // function (a,b){try{var c=U7.A(a);if(U7.j[c]){try{U7.j[c].dispose()}catch(d){Sf(d)}U7.j[c]=null}var e=new U7(a,b);ti(e,function(){U7.j[c]=null});return U7.j[c]=e}catch(g){throw Sf(g),g;}}
  231. var appCreateRegex = /^^function \(\w+,\w+\)\{try\{var \w+=\w+\.\w+\(\w+\);if\(\w+\.(\w+)\[\w+\]\)/;
  232. var fnString = yt.player.Application.create.toString();
  233. var m = appCreateRegex.exec(fnString);
  234. if (m) {
  235. var playerInstancesKey = m[1];
  236. Html5PlayerFix.playerInstances = YTApplication[playerInstancesKey];
  237. } else {
  238. ytwp.error('Error trying to find playerInstancesKey.', fnString);
  239. }
  240. Html5PlayerFix.playerInstances = YTApplication.j;
  241. }
  242.  
  243. return Html5PlayerFix.playerInstances;
  244. };
  245. Html5PlayerFix.getPlayerInstance = function() {
  246. if (!ytwp.ytapp) {
  247. var playerInstances = Html5PlayerFix.getPlayerInstances();
  248. ytwp.log('playerInstances', playerInstances);
  249. var appInstance = null;
  250. var appInstanceKey = null;
  251. Object.keys(playerInstances).forEach(function(key) {
  252. appInstanceKey = key;
  253. appInstance = playerInstances[key];
  254. });
  255. ytwp.ytapp = appInstance;
  256. }
  257. return ytwp.ytapp;
  258. };
  259. Html5PlayerFix.autohideControls = function() {
  260. var moviePlayerElement = document.getElementById('movie_player');
  261. if (!moviePlayerElement) return;
  262. // ytwp.log(moviePlayerElement.classList);
  263. jQuery.removeClass(moviePlayerElement, 'autohide-controlbar autominimize-controls-aspect autohide-controls-fullscreenonly autohide-controls hide-controls-when-cued autominimize-progress-bar autominimize-progress-bar-fullscreenonly autohide-controlbar-fullscreenonly autohide-controls-aspect autohide-controls-fullscreen autominimize-progress-bar-non-aspect');
  264. jQuery.addClass(moviePlayerElement, 'autominimize-progress-bar autohide-controls hide-controls-when-cued');
  265. // ytwp.log(moviePlayerElement.classList);
  266. };
  267. Html5PlayerFix.update = function(app) {
  268. if (!app)
  269. return;
  270.  
  271. var moviePlayerElement = document.getElementById('movie_player');
  272. var moviePlayer = null;
  273. var moviePlayerKey = null;
  274.  
  275. // function (){var a=this.app.R();return"detailpage"!=a.da||a.Za?S7.J.wb.call(this):N5(a,!0)}
  276. var clientRectFn1Regex = /^(function \(\)\{var a=this\.app\.\w+\(\);return"detailpage"!=a\.\w+).+(:\w+\(a,!0\)\})$/;
  277. var clientRectFn1 = null;
  278. var clientRectFn1Key = null;
  279.  
  280. // function (){var a=this.app.R();return"detailpage"!=a.da||a.Za?R7.J.hb.call(this):L5(a)}
  281. var clientRectFn2Regex = /^(function \(\)\{var a=this\.app\.\w+\(\);return"detailpage"!=a\.\w+).+(:\w+\(a\)\})$/;
  282. var clientRectFn2 = null;
  283. var clientRectFn2Key = null;
  284.  
  285. // function (){L7.J.jk.call(this);N7(this,this.hb())}
  286. // var clientRectUpdateFnRegex = /^function \(\)\{\w+\.\w+\.\w+\.call\(this\);\w+\(this,this\.\w+\(\)\)\}$/;
  287. // var clientRectUpdateFn = null;
  288. // var clientRectUpdateFnKey = null;
  289.  
  290. var fnAlreadyReplacedCount = 0;
  291.  
  292. Object.keys(app).forEach(function(key1) {
  293. var val1 = app[key1];//console.log(key1, val1);
  294. if (typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement) {
  295. moviePlayer = val1;
  296. moviePlayerKey = key1;
  297.  
  298. Object.keys(moviePlayer.constructor.prototype).forEach(function(key2) {
  299. var val2 = moviePlayer[key2];//console.log(key1, key2, val2);
  300. if (typeof val2 === 'function') {
  301. var fnString = val2.toString();
  302. // console.log(fnString);
  303. if (clientRectFn1 === null && clientRectFn1Regex.test(fnString)) {
  304. clientRectFn1 = val2;
  305. clientRectFn1Key = key2;
  306. } else if (clientRectFn2 === null && clientRectFn2Regex.test(fnString)) {
  307. clientRectFn2 = val2;
  308. clientRectFn2Key = key2;
  309. // } else if (clientRectUpdateFn === null && clientRectUpdateFnRegex.test(fnString)) {
  310. // clientRectUpdateFn = val2;
  311. // clientRectUpdateFnKey = key2;
  312. } else if (val2 === Html5PlayerFix.getPlayerRect) {
  313. fnAlreadyReplacedCount += 1;
  314. } else {
  315. // console.log(key1, key2, val2, '[Not Used]');
  316. }
  317. }
  318. });
  319. }
  320. });
  321.  
  322. if (fnAlreadyReplacedCount > 0) {
  323. return;
  324. }
  325.  
  326. if (moviePlayer === null || clientRectFn1 === null || clientRectFn2 === null /*|| clientRectUpdateFn === null*/) {
  327. console.log('[ytwp] ', '[Error]', 'HTML5 Player has changed');
  328. console.log('moviePlayer', moviePlayerKey, moviePlayer);
  329. console.log('clientRectFn1', clientRectFn1Key, clientRectFn1);
  330. console.log('clientRectFn2', clientRectFn2Key, clientRectFn2);
  331. // console.log('clientRectUpdateFn', clientRectUpdateFnKey, clientRectUpdateFn);
  332. console.log('fnAlreadyReplacedCount', fnAlreadyReplacedCount);
  333. return;
  334. }
  335. Html5PlayerFix.moviePlayerElement = moviePlayerElement;
  336. Html5PlayerFix.YTRect = moviePlayer[clientRectFn1Key].call(moviePlayer).constructor;
  337.  
  338. moviePlayer[clientRectFn1Key] = Html5PlayerFix.getPlayerRect;
  339. moviePlayer[clientRectFn2Key] = Html5PlayerFix.getPlayerRect;
  340. //clientRectUpdateFn();
  341. };
  342. ytwp.Html5PlayerFix = Html5PlayerFix;
  343.  
  344. ytwp.event = {
  345. init: function() {
  346. ytwp.log('init');
  347. if (ytwp.initialized) return;
  348.  
  349. ytwp.isWatchPage = ytwp.util.isWatchUrl();
  350. if (!ytwp.isWatchPage) return;
  351.  
  352. ytwp.event.initStyle();
  353. ytwp.event.initScroller();
  354. ytwp.initialized = true;
  355. ytwp.pageReady = false;
  356. },
  357. initScroller: function() {
  358. // Register listener & Call it now.
  359. unsafeWindow.addEventListener('scroll', ytwp.event.onScroll, false);
  360. unsafeWindow.addEventListener('resize', ytwp.event.onScroll, false);
  361. ytwp.event.onScroll();
  362. },
  363. onScroll: function() {
  364. var viewportHeight = document.documentElement.clientHeight;
  365.  
  366. // topOfPageClassId
  367. if (unsafeWindow.scrollY == 0) {
  368. jQuery.addClass(document.body, topOfPageClassId);
  369. } else {
  370. jQuery.removeClass(document.body, topOfPageClassId);
  371. }
  372.  
  373. // viewingVideoClassId
  374. if (unsafeWindow.scrollY <= viewportHeight) {
  375. jQuery.addClass(document.body, viewingVideoClassId);
  376. } else {
  377. jQuery.removeClass(document.body, viewingVideoClassId);
  378. }
  379. },
  380. initStyle: function() {
  381. ytwp.log('initStyle');
  382. ytwp.style = new JSStyleSheet(scriptStyleId);
  383. ytwp.event.buildStylesheet();
  384. ytwp.style.injectIntoHeader();
  385. },
  386. buildStylesheet: function() {
  387. ytwp.log('buildStylesheet');
  388. //--- Video Player
  389.  
  390. //
  391. var d;
  392. d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  393. d['padding'] = '0 !important';
  394. d['margin'] = '0 !important';
  395. ytwp.style.appendRule([
  396. scriptBodyClassSelector + ' #player',
  397. scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  398. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  399. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  400. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  401. ], d);
  402. //
  403. d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  404.  
  405. // Bugfix for Firefox
  406. // Parts of the header (search box) are hidden under the player.
  407. // Firefox doesn't seem to be using the fixed header+guide yet.
  408. d['float'] = 'initial';
  409.  
  410. ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  411.  
  412. // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  413. // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  414. // Also, Youtube Center resizes #player at element level.
  415. ytwp.style.appendRule(
  416. [
  417. scriptBodyClassSelector + ' #player',
  418. scriptBodyClassSelector + ' #movie_player',
  419. scriptBodyClassSelector + ' #player-mole-container',
  420. scriptBodyClassSelector + ' .html5-main-video',
  421. ],
  422. {
  423. 'width': '100% !important',
  424. 'min-width': '100% !important',
  425. 'max-width': '100% !important',
  426. 'height': '100% !important',
  427. 'min-height': '100% !important',
  428. 'max-height': '100% !important',
  429. }
  430. );
  431.  
  432. ytwp.style.appendRule(
  433. [
  434. scriptBodyClassSelector + ' #player',
  435. scriptBodyClassSelector + ' .html5-main-video',
  436. ],
  437. {
  438. 'top': '0 !important',
  439. 'right': '0 !important',
  440. 'bottom': '0 !important',
  441. 'left': '0 !important',
  442. }
  443. );
  444. // Resize #player-unavailable, #player-api
  445. // Using min/max width/height will keep
  446. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  447. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  448.  
  449. //--- Move Video Player
  450. ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  451. 'position': 'absolute',
  452. // Already top:0; left: 0;
  453. });
  454. ytwp.style.appendRule(scriptBodyClassSelector, { // body
  455. 'margin-top': '100vh',
  456. });
  457.  
  458.  
  459. //--- Sidebar
  460. // Remove the transition delay as you can see it moving on page load.
  461. d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  462. d['margin-top'] = '0 !important';
  463. d['top'] = '0 !important';
  464. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  465.  
  466. ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  467.  
  468. //--- Absolutely position the fixed header.
  469. // Masthead
  470. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  471. 'position': 'absolute',
  472. 'top': '100% !important'
  473. });
  474.  
  475. // Guide
  476. // When watching the video, we need to line it up with the masthead.
  477. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  478. 'display': 'initial',
  479. 'position': 'absolute',
  480. 'top': '100% !important' // Masthead height
  481. });
  482. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  483. 'display': 'initial',
  484. 'margin': '0',
  485. 'position': 'initial'
  486. });
  487.  
  488. //---
  489. // Hide Scrollbars
  490. ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  491.  
  492.  
  493. //--- Fix Other Possible Style Issues
  494.  
  495. ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
  496.  
  497. //--- Whitespace Leftover From Moving The Video
  498. ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  499. ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  500.  
  501. //--- Playlist Bar
  502. //ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', "margin", "-15px -10px 20px -10px");
  503. ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-left', 'width', '640px !important'); // Same width as .watch-content
  504. ytwp.style.appendRule([
  505. scriptBodyClassSelector + ' .playlist',
  506. scriptBodyClassSelector + ' .playlist .watch7-playlist-bar',
  507. ], 'max-width', '1040px'); // Same width as .watch-content (640px) + .watch-sidebar (300-400px).
  508. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  509. "margin-top": "-15px",
  510. "height": "287px !important", // 65 (playlist tile) * 4 + 27 (trim on bottom)
  511. "margin-bottom": "15px"
  512. });
  513. ytwp.style.appendRule([
  514. scriptBodyClassSelector + '.cardified-page #watch7-playlist-tray-container + #watch7-sidebar-contents', // Pre Oct 26
  515. scriptBodyClassSelector + '.cardified-page #watch-appbar-playlist + #watch7-sidebar-contents', // Post Oct 26
  516. ], 'padding-top', '15px');
  517.  
  518. // YT Center
  519. ytwp.style.appendRule(scriptBodyClassSelector + ' #player', 'margin-bottom', '0 !important');
  520. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  521. 'left': 'initial !important',
  522. 'width': 'initial !important'
  523. });
  524. ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-right', 'width', '363px !important');
  525. },
  526. onWatchInit: function() {
  527. ytwp.log('onWatchInit');
  528. if (!ytwp.initialized) return;
  529. if (ytwp.pageReady) return;
  530.  
  531. ytwp.event.addBodyClass();
  532. ytwp.pageReady = true;
  533. },
  534. onDispose: function() {
  535. ytwp.log('onDispose');
  536. ytwp.initialized = false;
  537. ytwp.pageReady = false;
  538. ytwp.isWatchPage = false;
  539. ytwp.ytapp = null;
  540. },
  541. addBodyClass: function() {
  542. // Insert CSS Into the body so people can style around the effects of this script.
  543. jQuery.addClass(document.body, scriptBodyClassId);
  544. ytwp.log('Applied ' + scriptBodyClassSelector);
  545. },
  546. html5PlayerFix: function() {
  547. ytwp.log('html5PlayerFix');
  548.  
  549. // https://github.com/YePpHa/YouTubeCenter/issues/1083
  550. if (!uw.ytcenter
  551. && (!ytwp.ytapp)
  552. && (uw.ytplayer && uw.ytplayer.config)
  553. && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  554. ) {
  555. ytwp.ytapp = Html5PlayerFix.getPlayerInstance();
  556. return;
  557. if (document.querySelectorAll('#movie_player').length > 0)
  558. return;
  559. ytwp.log('rerunning ytplayer.load()');
  560. // Since we have to reload the player anyways, might as well set some useful settings.
  561. uw.ytplayer.config.args.autohide = 1; // Autohide the playback control bar.
  562. // Next 2 lines are equivalent to: ytplayer.load();
  563. ytwp.log(document.querySelectorAll('#movie_player'));
  564. ytwp.ytapp = uw.yt.player.Application.create("player-api", uw.ytplayer.config);
  565. ytwp.log(document.querySelectorAll('#movie_player'));
  566. uw.ytplayer.config.loaded = true;
  567. }
  568.  
  569. Html5PlayerFix.update(ytwp.ytapp);
  570. Html5PlayerFix.autohideControls();
  571. },
  572. };
  573.  
  574.  
  575. ytwp.pubsubListeners = {
  576. 'init': function() { // Not always called
  577. ytwp.event.init();
  578. ytwp.event.onWatchInit();
  579. ytwp.event.html5PlayerFix();
  580. },
  581. 'init-watch': function() { // Not always called
  582. ytwp.event.init();
  583. ytwp.event.onWatchInit();
  584. ytwp.event.html5PlayerFix();
  585. },
  586. 'player-added': function() { // Not always called
  587. // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  588. // The init event is when the body element resets all it's classes.
  589. ytwp.event.init();
  590. ytwp.event.onWatchInit();
  591. ytwp.event.html5PlayerFix();
  592. },
  593. // 'player-resize': function() {},
  594. // 'player-playback-start': function() {},
  595. 'appbar-guide-delay-load': function() {
  596. // Listen to a later event that is always called in case the others are missed.
  597. ytwp.event.init();
  598. ytwp.event.onWatchInit();
  599.  
  600. // Channel -> /watch
  601. if (ytwp.util.isWatchUrl())
  602. ytwp.event.addBodyClass();
  603. },
  604. // 'dispose-watch': function() {},
  605. 'dispose': function() {
  606. ytwp.event.onDispose();
  607. }
  608. };
  609.  
  610. ytwp.registerYoutubeListeners = function() {
  611. ytwp.registerYoutubePubSubListeners();
  612. };
  613.  
  614. ytwp.registerYoutubePubSubListeners = function() {
  615. // Subscribe
  616. for (var eventName in ytwp.pubsubListeners) {
  617. var eventListener = ytwp.pubsubListeners[eventName];
  618. uw.yt.pubsub.instance_.subscribe(eventName, eventListener);
  619. }
  620. };
  621.  
  622. ytwp.main = function() {
  623. try {
  624. ytwp.registerYoutubeListeners();
  625. } catch(e) {
  626. ytwp.error("Could not hook yt.pubsub", e);
  627. setTimeout(ytwp.main, 1000);
  628. }
  629. ytwp.event.html5PlayerFix();
  630. ytwp.event.init();
  631. ytwp.event.onWatchInit();
  632. };
  633.  
  634. ytwp.main();
  635. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);