Resize YT To Window Size

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

目前為 2017-12-05 提交的版本,檢視 最新版本

  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 113
  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.  
  27. //--- Imported Globals
  28. // yt
  29. // ytcenter
  30. // html5Patched (Youtube+)
  31. // ytplayer
  32. var uw = window;
  33.  
  34. //--- Already Loaded?
  35. // GreaseMonkey loads this script twice for some reason.
  36. if (uw.ytwp) return;
  37.  
  38. //--- Is iframe?
  39. function inIframe () {
  40. try {
  41. return window.self !== window.top;
  42. } catch (e) {
  43. return true;
  44. }
  45. }
  46. if (inIframe()) return;
  47.  
  48. //--- Utils
  49. function isStringType(obj) { return typeof obj === 'string'; }
  50. function isArrayType(obj) { return obj instanceof Array; }
  51. function isObjectType(obj) { return typeof obj === 'object'; }
  52. function isUndefined(obj) { return typeof obj === 'undefined'; }
  53. function buildVenderPropertyDict(propertyNames, value) {
  54. var d = {};
  55. for (var i in propertyNames)
  56. d[propertyNames[i]] = value;
  57. return d;
  58. }
  59. function addClass(el, value) {
  60. var classes = value.split(' ');
  61. for (var i = 0; i < classes.length; i++) {
  62. el.classList.add(classes[i]);
  63. }
  64. }
  65. function removeClass(el, value) {
  66. var classes = value.split(' ');
  67. for (var i = 0; i < classes.length; i++) {
  68. el.classList.remove(classes[i]);
  69. }
  70. }
  71. function observe(selector, config, callback) {
  72. var observer = new MutationObserver(function(mutations) {
  73. mutations.forEach(function(mutation){
  74. callback(mutation);
  75. });
  76. });
  77. var target = document.querySelector(selector);
  78. if (!target) {
  79. return null;
  80. }
  81. observer.observe(target, config);
  82. return observer;
  83. }
  84.  
  85. //--- Stylesheet
  86. var JSStyleSheet = function(id) {
  87. this.id = id;
  88. this.stylesheet = '';
  89. };
  90.  
  91. JSStyleSheet.prototype.buildRule = function(selector, styles) {
  92. var s = "";
  93. for (var key in styles) {
  94. s += "\t" + key + ": " + styles[key] + ";\n";
  95. }
  96. return selector + " {\n" + s + "}\n";
  97. };
  98.  
  99. JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  100. if (isArrayType(selector))
  101. selector = selector.join(',\n');
  102. var newStyle;
  103. if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  104. var d = {};
  105. d[k] = v;
  106. newStyle = this.buildRule(selector, d);
  107. } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  108. newStyle = this.buildRule(selector, k);
  109. } else {
  110. // Invalid Arguments
  111. console.log('Illegal arguments', arguments);
  112. return;
  113. }
  114.  
  115. this.stylesheet += newStyle;
  116. };
  117.  
  118. JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  119. var styleElement = document.getElementById(injectedStyleId);
  120. if (!styleElement) {
  121. styleElement = document.createElement('style');
  122. styleElement.type = 'text/css';
  123. styleElement.id = injectedStyleId;
  124. document.getElementsByTagName('head')[0].appendChild(styleElement);
  125. }
  126. styleElement.appendChild(document.createTextNode(stylesheet));
  127. };
  128.  
  129. JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  130. JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  131. };
  132.  
  133. //--- History
  134. var HistoryEvent = function() {}
  135. HistoryEvent.listeners = []
  136.  
  137. HistoryEvent.dispatch = function(state, title, url) {
  138. var stack = this.listeners
  139. for (var i = 0, l = stack.length; i < l; i++) {
  140. stack[i].call(this, state, title, url)
  141. }
  142. }
  143. HistoryEvent.onPushState = function(state, title, url) {
  144. HistoryEvent.dispatch(state, title, url)
  145. return HistoryEvent.origPushState.apply(window.history, arguments)
  146. }
  147. HistoryEvent.onReplaceState = function(state, title, url) {
  148. HistoryEvent.dispatch(state, title, url)
  149. return HistoryEvent.origReplaceState.apply(window.history, arguments)
  150. }
  151. HistoryEvent.inject = function() {
  152. if (!HistoryEvent.injected) {
  153. HistoryEvent.origPushState = window.history.pushState
  154. HistoryEvent.origReplaceState = window.history.replaceState
  155.  
  156. window.history.pushState = HistoryEvent.onPushState
  157. window.history.replaceState = HistoryEvent.onReplaceState
  158. HistoryEvent.injected = true
  159. }
  160. }
  161.  
  162. HistoryEvent.timerId = 0
  163. HistoryEvent.onTick = function() {
  164. var currentPage = window.location.pathname + window.location.search
  165. if (HistoryEvent.lastPage != currentPage) {
  166. HistoryEvent.dispatch({}, document.title, window.location.href)
  167. HistoryEvent.lastPage = currentPage
  168. }
  169. }
  170. HistoryEvent.startTimer = function() {
  171. HistoryEvent.lastPage = window.location.pathname + window.location.search
  172. HistoryEvent.timerId = setInterval(HistoryEvent.onTick, 500)
  173. }
  174. HistoryEvent.stopTimer = function() {
  175. clearInterval(HistoryEvent.timerId)
  176. }
  177. window.ytwpHistoryEvent = HistoryEvent
  178.  
  179.  
  180. //--- Constants
  181. var scriptShortName = 'ytwp'; // YT Window Player
  182. var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  183. var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  184. var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  185. var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  186. var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  187.  
  188. var videoContainerId = 'player';
  189. var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  190.  
  191. var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  192. var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
  193.  
  194. //--- YTWP
  195. var ytwp = uw.ytwp = {
  196. scriptShortName: scriptShortName, // YT Window Player
  197. log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  198. log: function() { return this.log_(console.log, arguments); },
  199. error: function() { return this.log_(console.error, arguments); },
  200.  
  201. initialized: false,
  202. pageReady: false,
  203. isWatchPage: false,
  204. };
  205.  
  206. ytwp.isWatchUrl = function (url) {
  207. if (!url)
  208. url = uw.location.href;
  209. return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/)
  210. || url.match(/https?:\/\/(www\.)?youtube.com\/(c|channel)\/[^\/]+\/live/);
  211. };
  212.  
  213. ytwp.enterTheaterMode = function() {
  214. // ytwp.log('enterTheaterMode')
  215. var watchElement = document.querySelector('ytd-watch:not([hidden])')
  216. if (watchElement) {
  217. if (!watchElement.hasAttribute('theater')) {
  218. var sizeButton = watchElement.querySelector('button.ytp-size-button')
  219. sizeButton.click()
  220. }
  221. watchElement.canFitTheater_ = true // When it's too small, it disables the theater mode.
  222. } else if (watchElement = document.querySelector('#page.watch')) {
  223. if (!watchElement.classList.contains('watch-stage-mode')) {
  224. var sizeButton = watchElement.querySelector('button.ytp-size-button')
  225. sizeButton.click()
  226. }
  227. }
  228. }
  229. ytwp.enterTheaterMode();
  230. uw.addEventListener('resize', ytwp.enterTheaterMode);
  231.  
  232. ytwp.init = function() {
  233. ytwp.log('init');
  234. if (!ytwp.initialized) {
  235. ytwp.isWatchPage = ytwp.isWatchUrl();
  236. if (ytwp.isWatchPage) {
  237. ytwp.removeSearchAutofocus();
  238. if (!document.getElementById(scriptStyleId)) {
  239. ytwp.event.initStyle();
  240. }
  241. ytwp.initScroller();
  242. ytwp.initialized = true;
  243. ytwp.pageReady = false;
  244. }
  245. }
  246. ytwp.event.onWatchInit();
  247. if (ytwp.isWatchPage) {
  248. ytwp.html5PlayerFix();
  249. }
  250. }
  251.  
  252. ytwp.initScroller = function() {
  253. // Register listener & Call it now.
  254. uw.addEventListener('scroll', ytwp.onScroll, false);
  255. uw.addEventListener('resize', ytwp.onScroll, false);
  256. ytwp.onScroll();
  257. }
  258.  
  259. ytwp.onScroll = function() {
  260. var viewportHeight = document.documentElement.clientHeight;
  261.  
  262. // topOfPageClassId
  263. if (ytwp.isWatchPage && uw.scrollY == 0) {
  264. document.body.classList.add(topOfPageClassId);
  265. //var player = document.getElementById('movie_player');
  266. //if (player)
  267. // player.focus();
  268. } else {
  269. document.body.classList.remove(topOfPageClassId);
  270. }
  271.  
  272. // viewingVideoClassId
  273. if (ytwp.isWatchPage && uw.scrollY <= viewportHeight) {
  274. document.body.classList.add(viewingVideoClassId);
  275. } else {
  276. document.body.classList.remove(viewingVideoClassId);
  277. }
  278. }
  279.  
  280. ytwp.event = {
  281. initStyle: function() {
  282. ytwp.log('initStyle');
  283. ytwp.style = new JSStyleSheet(scriptStyleId);
  284. ytwp.event.buildStylesheet();
  285. // Duplicate stylesheet targeting data-spf-name if enabled.
  286. if (uw.spf) {
  287. var temp = scriptBodyClassSelector;
  288. scriptBodyClassSelector = 'body[data-spf-name="watch"]';
  289. ytwp.event.buildStylesheet();
  290. ytwp.style.appendRule('body[data-spf-name="watch"]:not(.ytwp-window-player) #masthead-positioner', {
  291. 'position': 'absolute',
  292. 'top': playerHeight + ' !important'
  293. });
  294. }
  295. ytwp.style.injectIntoHeader();
  296. },
  297. buildStylesheet: function() {
  298. ytwp.log('buildStylesheet');
  299. //--- Browser Scrollbar
  300. ytwp.style.appendRule(scriptBodyClassSelector + '::-webkit-scrollbar', {
  301. 'width': '0',
  302. 'height': '0',
  303. });
  304.  
  305. //--- Video Player
  306. var d;
  307. d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  308. d['padding'] = '0 !important';
  309. d['margin'] = '0 !important';
  310. ytwp.style.appendRule([
  311. scriptBodyClassSelector + ' #player',
  312. scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  313. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  314. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  315. scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  316. ], d);
  317. //
  318. d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  319.  
  320. // Bugfix for Firefox
  321. // Parts of the header (search box) are hidden under the player.
  322. // Firefox doesn't seem to be using the fixed header+guide yet.
  323. d['float'] = 'initial';
  324.  
  325. // Skinny mode
  326. d['left'] = 0;
  327. d['margin-left'] = 0;
  328.  
  329. ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  330.  
  331. // Theatre mode
  332. ytwp.style.appendRule(scriptBodyClassSelector + ' .watch-stage-mode #player .player-api', {
  333. 'left': 'initial',
  334. 'margin-left': 'initial',
  335. });
  336.  
  337. // Hide the cinema/wide mode button since it's useless.
  338. //ytwp.style.appendRule(scriptBodyClassSelector + ' #movie_player .ytp-size-button', 'display', 'none');
  339.  
  340. // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  341. // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  342. // Also, Youtube Center resizes #player at element level.
  343. // Don't resize if Youtube+'s html.floater is detected.
  344. // Dont' resize if Youtube+ (Iridium/Material)'s html.iri-always-visible is detected.
  345. ytwp.style.appendRule(
  346. [
  347. scriptBodyClassSelector + ' #player',
  348. scriptBodyClassSelector + ' #player-api',
  349. 'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' #movie_player',
  350. scriptBodyClassSelector + ' #player-mole-container',
  351. 'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' .html5-video-container',
  352. 'html:not(.floater):not(.iri-always-visible) ' + scriptBodyClassSelector + ' .html5-main-video',
  353. ],
  354. {
  355. 'width': '100% !important',
  356. 'min-width': '100% !important',
  357. 'max-width': '100% !important',
  358. 'height': playerHeight + ' !important',
  359. 'min-height': playerHeight + ' !important',
  360. 'max-height': playerHeight + ' !important',
  361. }
  362. );
  363.  
  364. ytwp.style.appendRule(
  365. [
  366. scriptBodyClassSelector + ' #player',
  367. scriptBodyClassSelector + ' .html5-main-video',
  368. ],
  369. {
  370. 'top': '0 !important',
  371. 'right': '0 !important',
  372. 'bottom': '0 !important',
  373. 'left': '0 !important',
  374. }
  375. );
  376. // Resize #player-unavailable, #player-api
  377. // Using min/max width/height will keep
  378. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  379. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  380.  
  381. // Fix video overlays
  382. ytwp.style.appendRule([
  383. scriptBodyClassSelector + ' .html5-video-player .ad-container-single-media-element-annotations', // Ad
  384. scriptBodyClassSelector + ' .html5-video-player .ytp-upnext', // Autoplay Next Video
  385. ], 'top', '0');
  386.  
  387.  
  388. //--- Move Video Player
  389. ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  390. 'position': 'absolute',
  391. // Already top:0; left: 0;
  392. });
  393. ytwp.style.appendRule(scriptBodyClassSelector, { // body
  394. 'margin-top': playerHeight,
  395. });
  396.  
  397. // Fix the top right avatar button
  398. ytwp.style.appendRule(scriptBodyClassSelector + ' button.ytp-button.ytp-cards-button', 'top', '0');
  399.  
  400.  
  401. //--- Sidebar
  402. // Remove the transition delay as you can see it moving on page load.
  403. d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  404. d['margin-top'] = '0 !important';
  405. d['top'] = '0 !important';
  406. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  407.  
  408. ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  409.  
  410. //--- Absolutely position the fixed header.
  411. // Masthead
  412. d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
  413. ytwp.style.appendRule(scriptBodyClassSelector + '.hide-header-transition #masthead-positioner', d);
  414. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  415. 'position': 'absolute',
  416. 'top': playerHeight + ' !important'
  417. });
  418. // Lower masthead below Youtube+'s html.floater
  419. ytwp.style.appendRule('html.floater ' + scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  420. 'z-index': '5',
  421. });
  422. // Autocomplete popup
  423. ytwp.style.appendRule(scriptBodyClassSelector + ' .sbdd_a', {
  424. 'top': '56px',
  425. });
  426. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' .sbdd_a', {
  427. 'top': 'calc(100vh + 56px) !important',
  428. 'position': 'absolute !important',
  429. });
  430.  
  431. // Guide
  432. // When watching the video, we need to line it up with the masthead.
  433. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  434. 'display': 'initial',
  435. 'position': 'absolute',
  436. 'top': '100% !important' // Masthead height
  437. });
  438. ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  439. 'display': 'initial',
  440. 'margin': '0',
  441. 'position': 'initial'
  442. });
  443.  
  444.  
  445. //---
  446. // Hide Scrollbars
  447. ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  448.  
  449.  
  450. //--- Fix Other Possible Style Issues
  451. ytwp.style.appendRule(scriptBodyClassSelector + ' #placeholder-player', 'display', 'none');
  452. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-sidebar-spacer', 'display', 'none');
  453. ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
  454.  
  455. //--- Whitespace Leftover From Moving The Video
  456. ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  457. ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  458.  
  459. //--- Youtube+ Compatiblity
  460. ytwp.style.appendRule(scriptBodyClassSelector + ' #body-container', 'position', 'static');
  461. ytwp.style.appendRule('.part_static_size:not(.content-snap-width-skinny-mode) ' + scriptBodyClassSelector + ' .watch-non-stage-mode #player-playlist', 'width', '1066px');
  462.  
  463. //--- Playlist Bar
  464. ytwp.style.appendRule([
  465. scriptBodyClassSelector + ' #placeholder-playlist',
  466. scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist',
  467. ], {
  468. 'height': '540px !important',
  469. 'max-height': '540px !important',
  470. });
  471.  
  472. d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
  473. ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-appbar-playlist', d);
  474. d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
  475. d['margin-left'] = '0';
  476. d['top'] = 'calc(' + playerHeight + ' + 60px)';
  477. ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist', d);
  478. ytwp.style.appendRule(scriptBodyClassSelector + ' .playlist-videos-list', {
  479. 'max-height': '470px !important',
  480. 'height': 'initial !important',
  481. });
  482.  
  483. //---
  484. // Material UI
  485. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-scrolltop #extra-buttons', 'display', 'none !important');
  486. // ytwp.style.appendRule('body > #player:not(.ytd-watch)', 'display', 'none');
  487. // ytwp.style.appendRule('body.ytwp-viewing-video #content:not(app-header-layout) ytd-page-manager', 'margin-top', '0 !important');
  488. // ytwp.style.appendRule('.ytd-watch-0 #content-separator.ytd-watch', 'margin-top', '0');
  489. ytwp.style.appendRule('ytd-app', 'position', 'static !important');
  490. ytwp.style.appendRule('ytd-watch #top', 'margin-top', '71px !important'); // 56px (topnav height) + 15px (margin)
  491. ytwp.style.appendRule('ytd-watch #container', 'margin-top', '0 !important');
  492. ytwp.style.appendRule('ytd-watch #content-separator', 'margin-top', '0 !important');
  493. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-app #masthead-container.ytd-app', {
  494. 'position': 'absolute',
  495. 'top': playerHeight,
  496. });
  497. ytwp.style.appendRule(scriptBodyClassSelector + '.ytwp-viewing-video ytd-watch #masthead-positioner', {
  498. 'top': playerHeight + ' !important',
  499. });
  500. },
  501. onWatchInit: function() {
  502. ytwp.log('onWatchInit');
  503. if (!ytwp.initialized) return;
  504. if (ytwp.pageReady) return;
  505.  
  506. ytwp.event.addBodyClass();
  507. ytwp.pageReady = true;
  508. },
  509. onDispose: function() {
  510. ytwp.log('onDispose');
  511. ytwp.initialized = false;
  512. ytwp.pageReady = false;
  513. ytwp.isWatchPage = false;
  514. },
  515. addBodyClass: function() {
  516. // Insert CSS Into the body so people can style around the effects of this script.
  517. document.body.classList.add(scriptBodyClassId);
  518. ytwp.log('Applied ' + scriptBodyClassSelector);
  519. },
  520. };
  521.  
  522. ytwp.html5PlayerFix = function() {
  523. ytwp.log('html5PlayerFix');
  524. return;
  525.  
  526. try {
  527. if (!uw.ytcenter // Youtube Center
  528. && !uw.html5Patched // Youtube+
  529. && (!ytwp.html5.app)
  530. && (uw.ytplayer && uw.ytplayer.config)
  531. && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  532. ) {
  533. ytwp.html5.app = ytwp.html5.getPlayerInstance();
  534. }
  535.  
  536. ytwp.html5.update();
  537. ytwp.html5.autohideControls();
  538. } catch (e) {
  539. ytwp.error(e);
  540. }
  541. }
  542.  
  543. ytwp.fixMasthead = function() {
  544. ytwp.log('fixMasthead');
  545. var el = document.querySelector('#masthead-positioner-height-offset');
  546. if (el) {
  547. ytwp.fixMastheadElement(el);
  548. }
  549. }
  550. ytwp.fixMastheadElement = function(el) {
  551. ytwp.log('fixMastheadElement', el);
  552. if (el.style.height) { // != ""
  553. setTimeout(function(){
  554. el.style.height = ""
  555. document.querySelector('#appbar-guide-menu').style.marginTop = "";
  556. }, 0);
  557. }
  558. }
  559.  
  560. JSStyleSheet.injectIntoHeader(scriptStyleId + '-focusfix', 'input#search[autofocus] { display: none; }');
  561. ytwp.removeSearchAutofocus = function() {
  562. var e = document.querySelector('input#search');
  563. // ytwp.log('removeSearchAutofocus', e)
  564. if (e) {
  565. e.removeAttribute('autofocus')
  566. }
  567. }
  568.  
  569. ytwp.registerMastheadFix = function() {
  570. ytwp.log('registerMastheadFix');
  571. // Fix the offset when closing the Share widget (element.style.height = ~275px).
  572.  
  573. observe('#masthead-positioner-height-offset', {
  574. attributes: true,
  575. }, function(mutation) {
  576. console.log(mutation.type, mutation)
  577. if (mutation.attributeName === 'style') {
  578. var el = mutation.target;
  579. if (el.style.height) { // != ""
  580. setTimeout(function(){
  581. el.style.height = ""
  582. document.querySelector('#appbar-guide-menu').style.marginTop = "";
  583. }, 0);
  584. }
  585.  
  586. }
  587. });
  588. }
  589.  
  590. //--- Material UI
  591. ytwp.materialPageTransition = function() {
  592. ytwp.log('materialPageTransition')
  593. ytwp.init();
  594.  
  595. if (ytwp.isWatchUrl()) {
  596. ytwp.removeSearchAutofocus();
  597. ytwp.event.addBodyClass();
  598. // if (!ytwp.html5.app) {
  599. if (!ytwp.initialized) {
  600. ytwp.log('materialPageTransition !ytwp.html5.app', ytwp.html5.app)
  601. setTimeout(ytwp.materialPageTransition, 100);
  602. }
  603. var playerApi = document.querySelector('#player-api')
  604. if (playerApi) {
  605. playerApi.click()
  606. }
  607. } else {
  608. ytwp.event.onDispose();
  609. document.body.classList.remove(scriptBodyClassId);
  610. }
  611. ytwp.onScroll();
  612. ytwp.fixMasthead();
  613. ytwp.attemptToUpdatePlayer();
  614. };
  615.  
  616. //--- Listeners
  617. ytwp.registerListeners = function() {
  618. ytwp.registerMaterialListeners();
  619. ytwp.registerMastheadFix();
  620. };
  621.  
  622. ytwp.registerMaterialListeners = function() {
  623. // For Material UI
  624. HistoryEvent.listeners.push(ytwp.materialPageTransition);
  625. HistoryEvent.startTimer();
  626. // HistoryEvent.inject();
  627. // HistoryEvent.listeners.push(console.log.bind(console));
  628. };
  629.  
  630. ytwp.main = function() {
  631. ytwp.registerListeners();
  632. ytwp.init();
  633. ytwp.fixMasthead();
  634. };
  635.  
  636. ytwp.main();
  637.  
  638. // ytwp.updatePlayerTimerId = 0;
  639. ytwp.updatePlayerAttempts = -1;
  640. ytwp.updatePlayerMaxAttempts = 150; // 60fps = 2.5sec
  641. ytwp.attemptToUpdatePlayer = function() {
  642. console.log('ytwp.attemptToUpdatePlayer')
  643. if (0 <= ytwp.updatePlayerAttempts && ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
  644. ytwp.updatePlayerAttempts = 0;
  645. } else {
  646. ytwp.updatePlayerAttempts = 0;
  647. ytwp.attemptToUpdatePlayerTick();
  648. }
  649. // setTimeout(ytwp.updatePlayer, 10000); /// Just in case it's not caught
  650. }
  651. ytwp.attemptToUpdatePlayerTick = function() {
  652. console.log('ytwp.attemptToUpdatePlayerTick', ytwp.updatePlayerAttempts)
  653. if (ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
  654. ytwp.updatePlayerAttempts += 1;
  655. ytwp.updatePlayer();
  656. // ytwp.updatePlayerTimerId = setTimeout(ytwp.attemptToUpdatePlayerTick, 200);
  657. requestAnimationFrame(ytwp.attemptToUpdatePlayerTick);
  658. }
  659. }
  660.  
  661. ytwp.updatePlayer = function() {
  662. ytwp.removeSearchAutofocus();
  663. ytwp.enterTheaterMode();
  664. }
  665.  
  666. ytwp.materialPageTransition()
  667. setInterval(ytwp.updatePlayer, 2500);
  668.  
  669. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);