Resize YT To Window Size

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

当前为 2020-04-18 提交的版本,查看 最新版本

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