Resize YT To Window Size

Moves the YouTube video to the top of the website and fill the window with the video player.

当前为 2017-04-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Resize YT To Window Size
  3. // @description Moves the YouTube video to the top of the website and fill the window with the video player.
  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 95
  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. // html5Patched (Youtube+)
  26. // ytplayer
  27. var uw = window;
  28.  
  29. //--- Already Loaded?
  30. // GreaseMonkey loads this script twice for some reason.
  31. if (uw.ytwp) return;
  32. //--- Is iframe?
  33. function inIframe () {
  34. try {
  35. return window.self !== window.top;
  36. } catch (e) {
  37. return true;
  38. }
  39. }
  40. if (inIframe()) return;
  41.  
  42. //--- Utils
  43. function isStringType(obj) { return typeof obj === 'string'; }
  44. function isArrayType(obj) { return obj instanceof Array; }
  45. function isObjectType(obj) { return typeof obj === 'object'; }
  46. function isUndefined(obj) { return typeof obj === 'undefined'; }
  47. function buildVenderPropertyDict(propertyNames, value) {
  48. var d = {};
  49. for (var i in propertyNames)
  50. d[propertyNames[i]] = value;
  51. return d;
  52. }
  53. function addClass(el, value) {
  54. var classes = value.split(' ');
  55. for (var i = 0; i < classes.length; i++) {
  56. el.classList.add(classes[i]);
  57. }
  58. }
  59. function removeClass(el, value) {
  60. var classes = value.split(' ');
  61. for (var i = 0; i < classes.length; i++) {
  62. el.classList.remove(classes[i]);
  63. }
  64. }
  65. function observe(selector, config, callback) {
  66. var observer = new MutationObserver(function(mutations) {
  67. mutations.forEach(function(mutation){
  68. callback(mutation);
  69. });
  70. });
  71. var target = document.querySelector(selector);
  72. if (!target) {
  73. return null;
  74. }
  75. observer.observe(target, config);
  76. return observer;
  77. }
  78.  
  79. //--- Stylesheet
  80. var JSStyleSheet = function(id) {
  81. this.id = id;
  82. this.stylesheet = '';
  83. };
  84.  
  85. JSStyleSheet.prototype.buildRule = function(selector, styles) {
  86. var s = "";
  87. for (var key in styles) {
  88. s += "\t" + key + ": " + styles[key] + ";\n";
  89. }
  90. return selector + " {\n" + s + "}\n";
  91. };
  92.  
  93. JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  94. if (isArrayType(selector))
  95. selector = selector.join(',\n');
  96. var newStyle;
  97. if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  98. var d = {};
  99. d[k] = v;
  100. newStyle = this.buildRule(selector, d);
  101. } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  102. newStyle = this.buildRule(selector, k);
  103. } else {
  104. // Invalid Arguments
  105. console.log('Illegal arguments', arguments);
  106. return;
  107. }
  108.  
  109. this.stylesheet += newStyle;
  110. };
  111.  
  112. JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  113. var styleElement = document.getElementById(injectedStyleId);
  114. if (!styleElement) {
  115. styleElement = document.createElement('style');
  116. styleElement.type = 'text/css';
  117. styleElement.id = injectedStyleId;
  118. document.getElementsByTagName('head')[0].appendChild(styleElement);
  119. }
  120. styleElement.appendChild(document.createTextNode(stylesheet));
  121. };
  122.  
  123. JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  124. JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  125. };
  126.  
  127. //--- History
  128. var HistoryEvent = function() {}
  129. HistoryEvent.listeners = []
  130.  
  131. HistoryEvent.dispatch = function(state, title, url) {
  132. var stack = this.listeners
  133. for (var i = 0, l = stack.length; i < l; i++) {
  134. stack[i].call(this, state, title, url)
  135. }
  136. }
  137. HistoryEvent.onPushState = function(state, title, url) {
  138. HistoryEvent.dispatch(state, title, url)
  139. return HistoryEvent.origPushState.apply(window.history, arguments)
  140. }
  141. HistoryEvent.onReplaceState = function(state, title, url) {
  142. HistoryEvent.dispatch(state, title, url)
  143. return HistoryEvent.origReplaceState.apply(window.history, arguments)
  144. }
  145. HistoryEvent.inject = function() {
  146. if (!HistoryEvent.injected) {
  147. HistoryEvent.origPushState = window.history.pushState
  148. HistoryEvent.origReplaceState = window.history.replaceState
  149.  
  150. window.history.pushState = HistoryEvent.onPushState
  151. window.history.replaceState = HistoryEvent.onReplaceState
  152. HistoryEvent.injected = true
  153. }
  154. }
  155.  
  156. HistoryEvent.timerId = 0
  157. HistoryEvent.onTick = function() {
  158. if (HistoryEvent.lastPath != window.location.pathname) {
  159. HistoryEvent.dispatch({}, document.title, window.location.href)
  160. HistoryEvent.lastPath = window.location.pathname
  161. }
  162. }
  163. HistoryEvent.startTimer = function() {
  164. HistoryEvent.lastPath = window.location.pathname
  165. HistoryEvent.timerId = setInterval(HistoryEvent.onTick, 500)
  166. }
  167. HistoryEvent.stopTimer = function() {
  168. clearInterval(HistoryEvent.timerId)
  169. }
  170.  
  171.  
  172. //--- Constants
  173. var scriptShortName = 'ytwp'; // YT Window Player
  174. var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  175. var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  176. var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  177. var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  178. var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  179.  
  180. var videoContainerId = 'player';
  181. var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  182.  
  183. var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  184. var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
  185.  
  186. //--- YTWP
  187. var ytwp = uw.ytwp = {
  188. scriptShortName: scriptShortName, // YT Window Player
  189. log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  190. log: function() { return this.log_(console.log, arguments); },
  191. error: function() { return this.log_(console.error, arguments); },
  192.  
  193. initialized: false,
  194. pageReady: false,
  195. watchPage: false,
  196. };
  197.  
  198. ytwp.util = {
  199. isWatchUrl: function (url) {
  200. if (!url)
  201. url = uw.location.href;
  202. return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  203. }
  204. };
  205.  
  206. ytwp.html5 = {
  207. app: null,
  208. YTRect: null,
  209. YTApplication: null,
  210. playerInstances: null,
  211. moviePlayerElement: null,
  212. };
  213. ytwp.html5.getPlayerRect = function() {
  214. var moviePlayerElement = this.element || ytwp.html5.moviePlayerElement || document.querySelector('movie_player');
  215. return new ytwp.html5.YTRect(moviePlayerElement.clientWidth, moviePlayerElement.clientHeight);
  216. };
  217. ytwp.html5.getApplicationClass = function() {
  218. if (ytwp.html5.YTApplication === null) {
  219. var testEl = document.createElement('div');
  220. var testAppInstance = uw.yt.player.Application.create(testEl, {});
  221. // var testAppInstance = uw.yt.player.Application.create("player-api", uw.ytplayer.config);
  222. ytwp.html5.YTApplication = testAppInstance.constructor;
  223.  
  224. // Cleanup testAppInstance
  225. var playerInstances = ytwp.html5.getPlayerInstances();
  226.  
  227. var testAppInstanceKey = null;
  228. Object.keys(playerInstances).forEach(function(key) {
  229. if (playerInstances[key] === testAppInstance) {
  230. testAppInstanceKey = key;
  231. }
  232. });
  233. testAppInstance.dispose();
  234. delete playerInstances[testAppInstanceKey];
  235. }
  236. return ytwp.html5.YTApplication;
  237. };
  238. ytwp.html5.getPlayerInstances = function() {
  239. if (ytwp.html5.playerInstances === null) {
  240. var YTApplication = ytwp.html5.getApplicationClass();
  241. if (YTApplication === null)
  242. return null;
  243.  
  244. // Use yt.player.Application.create to find the playerInstancesKey.
  245. // function (a,b){try{var c=e9.D(a);if(e9.o[c]){try{e9.o[c].dispose()}catch(e){Fi(e)}e9.o[c]=null}var d=new e9(a,b);Kb(d,function(){e9.o[c]=null});return e9.o[c]=d}catch(e){throw Fi(e),e.stack;}}
  246. var appCreateRegex = /^function \(a,b\)\{try\{var c=([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\(a\);if\(([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\[c\]\)/;
  247. var fnString = yt.player.Application.create.toString();
  248. var m = appCreateRegex.exec(fnString);
  249. if (m) {
  250. var playerInstancesKey = m[4];
  251. ytwp.html5.playerInstances = YTApplication[playerInstancesKey];
  252. } else {
  253. ytwp.error('Error trying to find playerInstancesKey.', fnString);
  254. }
  255. ytwp.html5.playerInstances = YTApplication[playerInstancesKey];
  256. }
  257.  
  258. return ytwp.html5.playerInstances;
  259. };
  260. ytwp.html5.getPlayerInstance = function() {
  261. if (!ytwp.html5.app) {
  262. var playerInstances = ytwp.html5.getPlayerInstances();
  263. ytwp.log('playerInstances', playerInstances);
  264. var appInstance = null;
  265. var appInstanceKey = null;
  266. Object.keys(playerInstances).forEach(function(key) {
  267. appInstanceKey = key;
  268. appInstance = playerInstances[key];
  269. });
  270. ytwp.html5.app = appInstance;
  271. }
  272. return ytwp.html5.app;
  273. };
  274. ytwp.html5.autohideControls = function() {
  275. var moviePlayerElement = document.getElementById('movie_player');
  276. if (!moviePlayerElement) return;
  277. // ytwp.log(moviePlayerElement.classList);
  278. 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');
  279. addClass(moviePlayerElement, 'autominimize-progress-bar autohide-controls hide-controls-when-cued');
  280. // ytwp.log(moviePlayerElement.classList);
  281. };
  282. ytwp.html5.update = function() {
  283. if (!ytwp.html5.playerInstances)
  284. return;
  285. for (var key in ytwp.html5.playerInstances) {
  286. var playerInstance = ytwp.html5.playerInstances[key];
  287. ytwp.html5.updatePlayerInstance(playerInstance);
  288. }
  289. };
  290. ytwp.html5.replaceClientRect = function(app, moviePlayerKey, clientRectFnKey) {
  291. var moviePlayer = app[moviePlayerKey];
  292. ytwp.html5.moviePlayerElement = moviePlayer.element;
  293. ytwp.html5.YTRect = moviePlayer[clientRectFnKey].call(moviePlayer).constructor;
  294. moviePlayer[clientRectFnKey] = ytwp.html5.getPlayerRect;
  295. };
  296. ytwp.html5.setRectFn = function(app, moviePlayerKey, clientRectFnKey) {
  297. ytwp.html5.moviePlayerElement = document.getElementById('movie_player');
  298. var moviePlayer = app[moviePlayerKey];
  299. ytwp.html5.YTRect = moviePlayer[clientRectFnKey].call(moviePlayer).constructor;
  300. moviePlayer.constructor.prototype[clientRectFnKey] = ytwp.html5.getPlayerRect;
  301. };
  302. ytwp.html5.updatePlayerInstance = function(app) {
  303. if (!app) {
  304. return;
  305. }
  306.  
  307. var moviePlayerElement = document.getElementById('movie_player');
  308. var moviePlayer = null;
  309. var moviePlayerKey = null;
  310.  
  311. // function (a,b){return this.isDisposed()?!1:this.R.P.apply(this.R,arguments)}
  312. var applyFnRegex1 = /^function \(a,b\)\{return this\.isDisposed\(\)\?!1:this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\.apply\(this\.([a-zA-Z_$][\w_$]*),arguments\)\}$/;
  313. // function (a,b){return this.O.Y.apply(this.O,arguments)}
  314. var applyFnRegex2 = /^function \(a,b\)\{return this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\.apply\(this\.([a-zA-Z_$][\w_$]*),arguments\)\}$/;
  315. var applyFnKey = null;
  316. var applyKey1 = null;
  317. var applyKey2 = null;
  318.  
  319. // function (a){var b=this.j.X(),c=n$.L.xb.call(this);a||"detailpage"!=b.ma||b.ib||b.experiments.T||(c.height+=30);return c}
  320. // function (a){var b=this.app.X(),c=n$.M.xb.call(this);a||!JK(b)||b.ab||b.experiments.U||(c.height+=30);return c}
  321. var clientRectFnRegex1 = /^(function \(a\)\{var b=this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\(\)).*(\|\|\(c\.height\+=30\);return c})$/;
  322. // function (){var a=this.A.U();if(window.matchMedia){if((a.wb||a.Fb)&&window.matchMedia("(width: "+window.innerWidth+"px) and (height: "+window.innerHeight+"px)").matches)return new H(window.innerWidth,window.innerHeight);if("detailpage"==a.ja&&"blazer"!=a.j&&!a.Fb){a=a.experiments.A;if(window.matchMedia(S6.C).matches)return new H(426,a?280:240);var b=this.A.ha;if(window.matchMedia(b?S6.o:S6.j).matches)return new H(1280,a?760:720);if(b||window.matchMedia(S6.A).matches)return new H(854,a?520:480);if(window.matchMedia(S6.B).matches)return new H(640,a?400:360)}}return new H(this.element.clientWidth,this.element.clientHeight)}
  323. // Tail: return new H(this.element.clientWidth,this.element.clientHeight)}
  324. // function (){var a=this.app.T,b=Yh()==this.element;if(b&&Lp())return new g.ef(window.outerWidth,window.outerHeight);if(b||a.Xe){var c;window.matchMedia&&(a="(width: "+window.innerWidth+"px) and (height: "+window.innerHeight+"px)",this.F&&this.F.media==a||(this.F=window.matchMedia(a)),c=this.F&&this.F.matches);if(c)return new g.ef(window.innerWidth,window.innerHeight)}else if(this.N){if(a.experiments.ba("flex_theater_mode")&&this.app.fa||a.experiments.ba("player_scaling_360p_to_720p")&&this.da.matches)return new g.ef(this.element.clientWidth,this.element.clientHeight);if(this.N.matches)return new g.ef(426,240);a=this.app.fa;if((a?this.aa:this.$).matches)return new g.ef(1280,720);if(a||this.ca.matches)return new g.ef(854,480);if(this.fa.matches)return new g.ef(640,360)}return new g.ef(this.element.clientWidth,this.element.clientHeight)}
  325. // Tail: return new g.ef(this.element.clientWidth,this.element.clientHeight)}
  326. var clientRectFnRegex2 = /^(function \()(.|\n)*(return new ([a-zA-Z_$][\w_$]*\.)?([a-zA-Z_$][\w_$]*)\(this\.element\.clientWidth,this\.element\.clientHeight\)})$/;
  327. var clientRectFn = null;
  328. var clientRectFnKey = null;
  329.  
  330. var fnAlreadyReplacedCount = 0;
  331.  
  332. for (var key1 in app) {
  333. var val1 = app[key1];//console.log(key1, val1);
  334. if (typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement) {
  335. moviePlayer = val1;
  336. moviePlayerKey = key1;
  337.  
  338. for (var key2 in moviePlayer) {
  339. var val2 = moviePlayer[key2];//console.log(key1, key2, val2);
  340. if (typeof val2 === 'function') {
  341. var fnString = val2.toString();
  342. // console.log(fnString);
  343. if (clientRectFn === null && (clientRectFnRegex1.test(fnString) || clientRectFnRegex2.test(fnString))) {
  344. clientRectFn = val2;
  345. clientRectFnKey = key2;
  346. } else if (val2 === ytwp.html5.getPlayerRect) {
  347. fnAlreadyReplacedCount += 1;
  348. clientRectFn = val2;
  349. clientRectFnKey = key2;
  350. } else if (applyFnRegex2.test(fnString)) {
  351. console.log('applyFnRegex2', key1, key2, applyKey1, applyKey2, moviePlayerKey)
  352. applyKey1 = key1;
  353. applyKey2 = key2;
  354. } else {
  355. // console.log(key1, key2, val2, '[Not Used]');
  356. }
  357. }
  358. }
  359. } else if (typeof val1 === 'object' && val1 !== null && typeof val1.logEvent === 'function') {
  360. for (var key2 in val1) {
  361. var val2 = val1[key2];//console.log(key1, key2, val2);
  362. if (typeof val2 === 'function') {
  363. var fnString = val2.toString();
  364. // console.log(fnString);
  365. if (applyKey2 === null && applyFnRegex1.test(fnString)) {
  366. console.log('applyFnRegex1', key1, key2, applyKey1, applyKey2, moviePlayerKey)
  367. applyKey1 = key1;
  368. applyKey2 = key2;
  369. }
  370. }
  371. }
  372. } else if (typeof val1 === 'function') {
  373. var fnString = val1.toString();
  374. if (applyFnRegex1.test(fnString)) {
  375. applyFnKey = key1;
  376. }
  377. }
  378. }
  379.  
  380. if (fnAlreadyReplacedCount > 0) {
  381. // return;
  382. }
  383.  
  384. if (moviePlayer === null || clientRectFn === null) {
  385. console.log('[ytwp] ', '[Error]', 'HTML5 Player has changed or there\'s multiple playerInstances and this one has been destroyed.');
  386. console.log('moviePlayer', moviePlayerKey, moviePlayer);
  387. console.log('clientRectFn', clientRectFnKey, clientRectFn);
  388. console.log('fnAlreadyReplacedCount', fnAlreadyReplacedCount);
  389. if (moviePlayer === null) {
  390. console.log('Debugging: moviePlayer');
  391. var table = [];
  392. Object.keys(app).forEach(function(key1) {
  393. var val1 = app[key1];
  394. table.push({
  395. key: key1,
  396. element: typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement,
  397. val: val1,
  398. });
  399. });
  400. console.table(table);
  401. }
  402. if (moviePlayer != null) {
  403. console.log('Debugging: clientRectFn');
  404. var table = [];
  405. for (var key2 in moviePlayer) {
  406. var val2 = moviePlayer[key2];
  407. table.push({
  408. key: key2,
  409. returns: moviePlayer[key2] && moviePlayer[key2].toString().indexOf('return'),
  410. src: moviePlayer[key2] && moviePlayer[key2].toString(),
  411. });
  412. }
  413. console.table(table);
  414. }
  415. return;
  416. }
  417. ytwp.html5.setRectFn(app, moviePlayerKey, clientRectFnKey);
  418.  
  419. if (applyFnKey) { // Probably not needed.
  420. ytwp.log('applyFnKey', applyFnKey);
  421. app[applyFnKey]('resize', ytwp.html5.getPlayerRect());
  422. } else if (applyKey1 && applyKey2) {
  423. ytwp.log('applyKey', applyKey1, applyKey2, app[applyKey1][applyKey2]);
  424. app[applyKey1][applyKey2]('resize', ytwp.html5.getPlayerRect());
  425. } else {
  426. ytwp.log('applyFn not found');
  427. //app.oa.T('resize', ytwp.html5.getPlayerRect()); // tempfix
  428. }
  429. };
  430.  
  431.  
  432.  
  433. ytwp.event = {
  434. init: function() {
  435. ytwp.log('init');
  436. if (!ytwp.initialized) {
  437. ytwp.isWatchPage = ytwp.util.isWatchUrl();
  438. if (ytwp.isWatchPage) {
  439. if (!document.getElementById(scriptStyleId)) {
  440. ytwp.event.initStyle();
  441. }
  442. ytwp.event.initScroller();
  443. ytwp.initialized = true;
  444. ytwp.pageReady = false;
  445. }
  446. }
  447. ytwp.event.onWatchInit();
  448. if (ytwp.isWatchPage) {
  449. ytwp.event.html5PlayerFix();
  450. }
  451. },
  452. initScroller: function() {
  453. // Register listener & Call it now.
  454. uw.addEventListener('scroll', ytwp.event.onScroll, false);
  455. uw.addEventListener('resize', ytwp.event.onScroll, false);
  456. ytwp.event.onScroll();
  457. },
  458. onScroll: function() {
  459. var viewportHeight = document.documentElement.clientHeight;
  460.  
  461. // topOfPageClassId
  462. if (ytwp.isWatchPage && uw.scrollY == 0) {
  463. document.body.classList.add(topOfPageClassId);
  464. //var player = document.getElementById('movie_player');
  465. //if (player)
  466. // player.focus();
  467. } else {
  468. document.body.classList.remove(topOfPageClassId);
  469. }
  470.  
  471. // viewingVideoClassId
  472. if (ytwp.isWatchPage && uw.scrollY <= viewportHeight) {
  473. document.body.classList.add(viewingVideoClassId);
  474. } else {
  475. document.body.classList.remove(viewingVideoClassId);
  476. }
  477. },
  478. initStyle: function() {
  479. ytwp.log('initStyle');
  480. ytwp.style = new JSStyleSheet(scriptStyleId);
  481. ytwp.event.buildStylesheet();
  482. // Duplicate stylesheet targeting data-spf-name if enabled.
  483. if (uw.spf) {
  484. var temp = scriptBodyClassSelector;
  485. scriptBodyClassSelector = 'body[data-spf-name="watch"]';
  486. ytwp.event.buildStylesheet();
  487. ytwp.style.appendRule('body[data-spf-name="watch"]:not(.ytwp-window-player) #masthead-positioner', {
  488. 'position': 'absolute',
  489. 'top': '100% !important'
  490. });
  491. }
  492. ytwp.style.injectIntoHeader();
  493. },
  494. buildStylesheet: function() {
  495. ytwp.log('buildStylesheet');
  496. //--- Browser Scrollbar
  497. ytwp.style.appendRule(scriptBodyClassSelector + '::-webkit-scrollbar', {
  498. 'width': '0',
  499. 'height': '0',
  500. });
  501.  
  502. //--- Video Player
  503. var d;
  504. d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  505. d['padding'] = '0 !important';
  506. d['margin'] = '0 !important';
  507. ytwp.style.appendRule([
  508. scriptBodyClassSelector + ' #player',
  509. scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  510. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  511. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  512. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  513. ], d);
  514. //
  515. d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  516.  
  517. // Bugfix for Firefox
  518. // Parts of the header (search box) are hidden under the player.
  519. // Firefox doesn't seem to be using the fixed header+guide yet.
  520. d['float'] = 'initial';
  521.  
  522. // Skinny mode
  523. d['left'] = 0;
  524. d['margin-left'] = 0;
  525.  
  526. ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  527.  
  528. // Theatre mode
  529. ytwp.style.appendRule(scriptBodyClassSelector + ' .watch-stage-mode #player .player-api', {
  530. 'left': 'initial',
  531. 'margin-left': 'initial',
  532. });
  533. // Hide the cinema/wide mode button since it's useless.
  534. //ytwp.style.appendRule(scriptBodyClassSelector + ' #movie_player .ytp-size-button', 'display', 'none');
  535.  
  536. // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  537. // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  538. // Also, Youtube Center resizes #player at element level.
  539. // Don't resize if Youtube+'s html.floater is detected.
  540. ytwp.style.appendRule(
  541. [
  542. scriptBodyClassSelector + ' #player',
  543. scriptBodyClassSelector + ' #player-api',
  544. 'html:not(.floater) ' + scriptBodyClassSelector + ' #movie_player',
  545. scriptBodyClassSelector + ' #player-mole-container',
  546. 'html:not(.floater) ' + scriptBodyClassSelector + ' .html5-video-container',
  547. 'html:not(.floater) ' + scriptBodyClassSelector + ' .html5-main-video',
  548. ],
  549. {
  550. 'width': '100% !important',
  551. 'min-width': '100% !important',
  552. 'max-width': '100% !important',
  553. 'height': '100vh !important',
  554. 'min-height': '100vh !important',
  555. 'max-height': '100vh !important',
  556. }
  557. );
  558.  
  559. ytwp.style.appendRule(
  560. [
  561. scriptBodyClassSelector + ' #player',
  562. scriptBodyClassSelector + ' .html5-main-video',
  563. ],
  564. {
  565. 'top': '0 !important',
  566. 'right': '0 !important',
  567. 'bottom': '0 !important',
  568. 'left': '0 !important',
  569. }
  570. );
  571. // Resize #player-unavailable, #player-api
  572. // Using min/max width/height will keep
  573. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  574. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  575.  
  576. // Fix video overlays
  577. ytwp.style.appendRule([
  578. scriptBodyClassSelector + ' .html5-video-player .ad-container-single-media-element-annotations', // Ad
  579. scriptBodyClassSelector + ' .html5-video-player .ytp-upnext', // Autoplay Next Video
  580. ], 'top', '0');
  581.  
  582. //--- Move Video Player
  583. ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  584. 'position': 'absolute',
  585. // Already top:0; left: 0;
  586. });
  587. ytwp.style.appendRule(scriptBodyClassSelector, { // body
  588. 'margin-top': '100vh',
  589. });
  590.  
  591.  
  592. //--- Sidebar
  593. // Remove the transition delay as you can see it moving on page load.
  594. d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  595. d['margin-top'] = '0 !important';
  596. d['top'] = '0 !important';
  597. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  598.  
  599. ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  600.  
  601. //--- Absolutely position the fixed header.
  602. // Masthead
  603. d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
  604. ytwp.style.appendRule(scriptBodyClassSelector + '.hide-header-transition #masthead-positioner', d);
  605. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  606. 'position': 'absolute',
  607. 'top': '100% !important'
  608. });
  609. // Lower masthead below Youtube+'s html.floater
  610. ytwp.style.appendRule('html.floater ' + scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  611. 'z-index': '5',
  612. });
  613.  
  614. // Guide
  615. // When watching the video, we need to line it up with the masthead.
  616. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  617. 'display': 'initial',
  618. 'position': 'absolute',
  619. 'top': '100% !important' // Masthead height
  620. });
  621. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  622. 'display': 'initial',
  623. 'margin': '0',
  624. 'position': 'initial'
  625. });
  626.  
  627.  
  628. //---
  629. // Hide Scrollbars
  630. ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  631.  
  632.  
  633. //--- Fix Other Possible Style Issues
  634. ytwp.style.appendRule(scriptBodyClassSelector + ' #placeholder-player', 'display', 'none');
  635. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-sidebar-spacer', 'display', 'none');
  636. ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
  637.  
  638. //--- Whitespace Leftover From Moving The Video
  639. ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  640. ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  641.  
  642. //--- Youtube+ Compatiblity
  643. ytwp.style.appendRule(scriptBodyClassSelector + ' #body-container', 'position', 'static');
  644. ytwp.style.appendRule('.part_static_size:not(.content-snap-width-skinny-mode) ' + scriptBodyClassSelector + ' .watch-non-stage-mode #player-playlist', 'width', '1066px');
  645.  
  646. //--- Playlist Bar
  647. ytwp.style.appendRule([
  648. scriptBodyClassSelector + ' #placeholder-playlist',
  649. scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist',
  650. ], {
  651. 'height': '540px !important',
  652. 'max-height': '540px !important',
  653. });
  654.  
  655. d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
  656. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-appbar-playlist', d);
  657. d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
  658. d['margin-left'] = '0';
  659. d['top'] = 'calc(100vh + 60px)';
  660. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist', d);
  661. ytwp.style.appendRule(scriptBodyClassSelector + ' .playlist-videos-list', {
  662. 'max-height': '470px !important',
  663. 'height': 'initial !important',
  664. });
  665. //---
  666. // Material UI
  667. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-scrolltop #extra-buttons', 'display', 'none !important');
  668. // ytwp.style.appendRule('body > #player:not(.ytd-watch)', 'display', 'none');
  669. // ytwp.style.appendRule('body.ytwp-viewing-video #content:not(app-header-layout) ytd-page-manager', 'margin-top', '0 !important');
  670. // ytwp.style.appendRule('.ytd-watch-0 #content-separator.ytd-watch', 'margin-top', '0');
  671. ytwp.style.appendRule('ytd-app', 'position', 'static !important');
  672. ytwp.style.appendRule('ytd-watch #top', 'margin-top', '71px !important'); // 56px (topnav height) + 15px (margin)
  673. ytwp.style.appendRule('ytd-watch #container', 'margin-top', '0 !important');
  674. ytwp.style.appendRule('ytd-watch #content-separator', 'margin-top', '0 !important');
  675. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-app #masthead-container.ytd-app', {
  676. 'position': 'absolute',
  677. 'top': '100vh',
  678. });
  679. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-watch #masthead-positioner', {
  680. 'top': '100vh !important',
  681. });
  682. },
  683. onWatchInit: function() {
  684. ytwp.log('onWatchInit');
  685. if (!ytwp.initialized) return;
  686. if (ytwp.pageReady) return;
  687.  
  688. ytwp.event.addBodyClass();
  689. ytwp.pageReady = true;
  690. },
  691. onDispose: function() {
  692. ytwp.log('onDispose');
  693. ytwp.initialized = false;
  694. ytwp.pageReady = false;
  695. ytwp.isWatchPage = false;
  696. ytwp.html5.app = null;
  697. // ytwp.html5.YTRect = null;
  698. ytwp.html5.YTApplication = null;
  699. ytwp.html5.playerInstances = null;
  700. //ytwp.html5.moviePlayerElement = null;
  701. },
  702. addBodyClass: function() {
  703. // Insert CSS Into the body so people can style around the effects of this script.
  704. document.body.classList.add(scriptBodyClassId);
  705. ytwp.log('Applied ' + scriptBodyClassSelector);
  706. },
  707. html5PlayerFix: function() {
  708. ytwp.log('html5PlayerFix');
  709.  
  710. try {
  711. if (!uw.ytcenter // Youtube Center
  712. && !uw.html5Patched // Youtube+
  713. && (!ytwp.html5.app)
  714. && (uw.ytplayer && uw.ytplayer.config)
  715. && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  716. ) {
  717. ytwp.html5.app = ytwp.html5.getPlayerInstance();
  718. }
  719.  
  720. ytwp.html5.update();
  721. ytwp.html5.autohideControls();
  722. } catch (e) {
  723. ytwp.error(e);
  724. }
  725. },
  726. fixMasthead: function() {
  727. ytwp.log('fixMasthead');
  728. // Fix the offset when closing the Share widget (element.style.height = ~275px).
  729.  
  730. observe('#masthead-positioner-height-offset', {
  731. attributes: true,
  732. }, function(mutation) {
  733. console.log(mutation.type, mutation)
  734. if (mutation.attributeName === 'style') {
  735. var el = mutation.target;
  736. if (el.style.height) { // != ""
  737. setTimeout(function(){
  738. el.style.height = ""
  739. document.querySelector('#appbar-guide-menu').style.marginTop = "";
  740. }, 0);
  741. }
  742.  
  743. }
  744. });
  745.  
  746. },
  747. };
  748.  
  749.  
  750. ytwp.pubsubListeners = {
  751. 'init': function() { // Not always called
  752. ytwp.event.init();
  753. },
  754. 'init-watch': function() { // Not always called
  755. ytwp.event.init();
  756. },
  757. 'player-added': function() { // Not always called
  758. // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  759. // The init event is when the body element resets all it's classes.
  760. ytwp.event.init();
  761. },
  762. // 'player-resize': function() {},
  763. // 'player-playback-start': function() {},
  764. 'appbar-guide-delay-load': function() {
  765. // Listen to a later event that is always called in case the others are missed.
  766. ytwp.event.init();
  767.  
  768. // Channel -> /watch
  769. if (ytwp.util.isWatchUrl()) {
  770. ytwp.event.addBodyClass();
  771. }
  772. ytwp.event.fixMasthead();
  773. },
  774. // 'dispose-watch': function() {},
  775. 'dispose': function() {
  776. ytwp.event.onDispose();
  777. },
  778. };
  779.  
  780. //--- Material UI
  781. ytwp.materialPageTransition = function() {
  782. ytwp.pubsubListeners['appbar-guide-delay-load']();
  783. if (!ytwp.util.isWatchUrl()) {
  784. ytwp.pubsubListeners['dispose']();
  785. document.body.classList.remove(scriptBodyClassId);
  786. }
  787. };
  788.  
  789. //--- Listeners
  790. ytwp.registerYoutubeListeners = function() {
  791. ytwp.registerYoutubePubSubListeners();
  792. };
  793.  
  794. ytwp.registerYoutubePubSubListeners = function() {
  795. // Subscribe
  796. var instance = uw.yt.pubsub.instance_ || uw.yt.pubsub;
  797. for (var eventName in ytwp.pubsubListeners) {
  798. var eventListener = ytwp.pubsubListeners[eventName];
  799. instance.subscribe(eventName, eventListener);
  800. }
  801.  
  802. // For Material UI
  803. HistoryEvent.listeners.push(ytwp.materialPageTransition)
  804. HistoryEvent.startTimer()
  805. // HistoryEvent.inject()
  806. // HistoryEvent.listeners.push(console.log.bind(console))
  807. };
  808.  
  809. ytwp.main = function() {
  810. try {
  811. ytwp.registerYoutubeListeners();
  812. } catch(e) {
  813. ytwp.error("Could not hook yt.pubsub", e);
  814. setTimeout(ytwp.main, 1000);
  815. }
  816. ytwp.event.init();
  817. };
  818.  
  819. ytwp.main();
  820. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);