Greasy Fork 支持简体中文。

Resize YT To Window Size

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

目前為 2017-06-29 提交的版本,檢視 最新版本

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