☰

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.

目前為 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; // body.ytwp-window-player
  178.     scriptBodySelector += ':not(.enhancer-for-youtube-pinned-player)'; // Support "Enhancer for Youtube" (Pull Request #51)
  179.     var scriptSelector = scriptHtmlSelector + ' ' + scriptBodySelector;
  180.  
  181.     var videoContainerId = 'player';
  182.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  183.  
  184.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  185.     var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
  186.  
  187.     //--- YTWP
  188.     var ytwp = uw.ytwp = {
  189.         scriptShortName: scriptShortName, // YT Window Player
  190.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  191.         log: function() { return this.log_(console.log, arguments); },
  192.         error: function() { return this.log_(console.error, arguments); },
  193.  
  194.         initialized: false,
  195.         pageReady: false,
  196.         isWatchPage: false,
  197.     };
  198.  
  199.     ytwp.isWatchUrl = function (url) {
  200.         if (!url)
  201.             url = uw.location.href;
  202.         if (url.match(/https?:\/\/(www\.)?youtube.com\/(c|channel|user)\/[^\/]+\/live/)) {
  203.             if (document.querySelector('ytd-browse')) {
  204.                 return false
  205.             } else {
  206.                 return true
  207.             }
  208.         }
  209.         return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  210.     };
  211.  
  212.     ytwp.enterTheaterMode = function() {
  213.         // ytwp.log('enterTheaterMode')
  214.         var watchElement = document.querySelector('ytd-watch:not([hidden])') || document.querySelector('ytd-watch-flexy:not([hidden])')
  215.         if (watchElement) {
  216.             if (!watchElement.hasAttribute('theater')) {
  217.                 var sizeButton = watchElement.querySelector('button.ytp-size-button')
  218.                 if (sizeButton) {
  219.                     sizeButton.click()
  220.                 }
  221.             }
  222.             watchElement.canFitTheater_ = true // When it's too small, it disables the theater mode.
  223.         } else if (watchElement = document.querySelector('#page.watch')) {
  224.             if (!watchElement.classList.contains('watch-stage-mode')) {
  225.                 var sizeButton = watchElement.querySelector('button.ytp-size-button')
  226.                 if (sizeButton) {
  227.                     sizeButton.click()
  228.                 }
  229.             }
  230.         }
  231.     }
  232.     ytwp.enterTheaterMode();
  233.     uw.addEventListener('resize', ytwp.enterTheaterMode);
  234.  
  235.     ytwp.init = function() {
  236.         ytwp.log('init');
  237.         if (!ytwp.initialized) {
  238.             ytwp.isWatchPage = ytwp.isWatchUrl();
  239.             if (ytwp.isWatchPage) {
  240.                 ytwp.removeSearchAutofocus();
  241.                 if (!document.getElementById(scriptStyleId)) {
  242.                     ytwp.event.initStyle();
  243.                 }
  244.                 ytwp.initScroller();
  245.                 ytwp.initialized = true;
  246.                 ytwp.pageReady = false;
  247.             }
  248.         }
  249.         ytwp.event.onWatchInit();
  250.         if (ytwp.isWatchPage) {
  251.             ytwp.html5PlayerFix();
  252.         }
  253.     }
  254.  
  255.     ytwp.initScroller = function() {
  256.         // Register listener & Call it now.
  257.         uw.addEventListener('scroll', ytwp.onScroll, false);
  258.         uw.addEventListener('resize', ytwp.onScroll, false);
  259.         ytwp.onScroll();
  260.     }
  261.  
  262.     ytwp.onScroll = function() {
  263.         var viewportHeight = document.documentElement.clientHeight;
  264.  
  265.         // topOfPageClassId
  266.         if (ytwp.isWatchPage && uw.scrollY == 0) {
  267.             document.body.classList.add(topOfPageClassId);
  268.             //var player = document.getElementById('movie_player');
  269.             //if (player)
  270.             //    player.focus();
  271.         } else {
  272.             document.body.classList.remove(topOfPageClassId);
  273.         }
  274.  
  275.         // viewingVideoClassId
  276.         if (ytwp.isWatchPage && uw.scrollY <= viewportHeight) {
  277.             document.body.classList.add(viewingVideoClassId);
  278.         } else {
  279.             document.body.classList.remove(viewingVideoClassId);
  280.         }
  281.     }
  282.  
  283.     ytwp.event = {
  284.         initStyle: function() {
  285.             ytwp.log('initStyle');
  286.             ytwp.style = new JSStyleSheet(scriptStyleId);
  287.             ytwp.event.buildStylesheet();
  288.             // Duplicate stylesheet targeting data-spf-name if enabled.
  289.             if (uw.spf) {
  290.                 var temp = scriptBodySelector;
  291.                 scriptBodySelector = 'body[data-spf-name="watch"]';
  292.                 scriptSelector = scriptHtmlSelector + ' ' + scriptBodySelector
  293.                 ytwp.event.buildStylesheet();
  294.                 ytwp.style.appendRule('body[data-spf-name="watch"]:not(.ytwp-window-player) #masthead-positioner',  {
  295.                     'position': 'absolute',
  296.                     'top': playerHeight + ' !important'
  297.                 });
  298.             }
  299.             ytwp.style.injectIntoHeader();
  300.         },
  301.         buildStylesheet: function() {
  302.             ytwp.log('buildStylesheet');
  303.             //--- Browser Scrollbar
  304.             // Chrome/Webkit
  305.             ytwp.style.appendRule(scriptBodySelector + '::-webkit-scrollbar', {
  306.                 'width': '0',
  307.                 'height': '0',
  308.             });
  309.             // Firefox/Gecko
  310.             // Requires about:config flag to be toggled as of FireFox v63
  311.             // https://github.com/Zren/ResizeYoutubePlayerToWindowSize/issues/42
  312.             ytwp.style.appendRule('html', {
  313.                 'scrollbar-width': 'none',
  314.             });
  315.  
  316.             //--- Video Player
  317.             var d;
  318.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  319.             d['padding'] = '0 !important';
  320.             d['margin'] = '0 !important';
  321.             ytwp.style.appendRule([
  322.                 scriptBodySelector + ' #player',
  323.                 scriptBodySelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  324.                 scriptBodySelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  325.                 scriptBodySelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  326.                 scriptBodySelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  327.             ], d);
  328.             //
  329.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  330.  
  331.             // Bugfix for Firefox
  332.             // Parts of the header (search box) are hidden under the player.
  333.             // Firefox doesn't seem to be using the fixed header+guide yet.
  334.             d['float'] = 'initial';
  335.  
  336.             // Skinny mode
  337.             d['left'] = 0;
  338.             d['margin-left'] = 0;
  339.  
  340.             ytwp.style.appendRule(scriptBodySelector + ' #player-api', d);
  341.  
  342.             // Theatre mode
  343.             ytwp.style.appendRule(scriptBodySelector + ' .watch-stage-mode #player .player-api', {
  344.                 'left': 'initial !important',
  345.                 'margin-left': 'initial !important',
  346.             });
  347.  
  348.             // Hide the cinema/wide mode button since it's useless.
  349.             //ytwp.style.appendRule(scriptBodySelector + ' #movie_player .ytp-size-button', 'display', 'none');
  350.  
  351.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  352.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  353.             // Also, Youtube Center resizes #player at element level.
  354.             // Don't resize if Youtube+'s html.floater is detected.
  355.             // Dont' resize if Youtube+ (Iridium/Material)'s html.iri-always-visible is detected.
  356.             ytwp.style.appendRule(
  357.                 [
  358.                     scriptSelector + ' #player',
  359.                     scriptSelector + ' #player-api',
  360.                     scriptHtmlSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' #movie_player',
  361.                     scriptSelector + ' #player-mole-container',
  362.                     scriptHtmlSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' .html5-video-container',
  363.                     scriptHtmlSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' .html5-main-video',
  364.                     scriptSelector + ' ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy',
  365.                 ],
  366.                 {
  367.                     'width': '100% !important',
  368.                     'min-width': '100% !important',
  369.                     'max-width': '100% !important',
  370.                     'height': playerHeight + ' !important',
  371.                     'min-height': playerHeight + ' !important',
  372.                     'max-height': playerHeight + ' !important',
  373.                 }
  374.             );
  375.  
  376.              ytwp.style.appendRule(
  377.                 [
  378.                     scriptSelector + ' #player',
  379.                     scriptSelector + ' .html5-main-video',
  380.                 ],
  381.                 {
  382.                     'top': '0 !important',
  383.                     'right': '0 !important',
  384.                     'bottom': '0 !important',
  385.                     'left': '0 !important',
  386.                 }
  387.             );
  388.             // Resize #player-unavailable, #player-api
  389.             // Using min/max width/height will keep
  390.             ytwp.style.appendRule(scriptSelector + ' #player .player-width', 'width', '100% !important');
  391.             ytwp.style.appendRule(scriptSelector + ' #player .player-height', 'height', '100% !important');
  392.  
  393.             // Fix video overlays
  394.             ytwp.style.appendRule([
  395.                 scriptSelector + ' .html5-video-player .ad-container-single-media-element-annotations', // Ad
  396.                 scriptSelector + ' .html5-video-player .ytp-upnext', // Autoplay Next Video
  397.             ], 'top', '0');
  398.  
  399.  
  400.             //--- Move Video Player
  401.             ytwp.style.appendRule(scriptSelector + ' #player', {
  402.                 'position': 'absolute',
  403.                 // Already top:0; left: 0;
  404.             });
  405.             ytwp.style.appendRule(scriptSelector, { // body
  406.                 'margin-top': playerHeight,
  407.             });
  408.  
  409.             // Fix the top right avatar button
  410.             ytwp.style.appendRule(scriptSelector + ' button.ytp-button.ytp-cards-button', 'top', '0');
  411.  
  412.  
  413.             //--- Sidebar
  414.             // Remove the transition delay as you can see it moving on page load.
  415.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  416.             d['margin-top'] = '0 !important';
  417.             d['top'] = '0 !important';
  418.             ytwp.style.appendRule(scriptSelector + ' #watch7-sidebar', d);
  419.  
  420.             ytwp.style.appendRule(scriptSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  421.  
  422.             //--- Absolutely position the fixed header.
  423.             // Masthead
  424.             d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
  425.             ytwp.style.appendRule(scriptSelector + '.hide-header-transition #masthead-positioner', d);
  426.             ytwp.style.appendRule(scriptSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  427.                 'position': 'absolute',
  428.                 'top': playerHeight + ' !important'
  429.             });
  430.             // Lower masthead below Youtube+'s html.floater
  431.             ytwp.style.appendRule('html.floater ' + scriptBodySelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  432.                 'z-index': '5',
  433.             });
  434.             // Autocomplete popup
  435.             ytwp.style.appendRule(scriptSelector + ' .sbdd_a', {
  436.                 'top': '56px',
  437.             });
  438.             ytwp.style.appendRule(scriptSelector + '.' + viewingVideoClassId + ' .sbdd_a', {
  439.                 'top': 'calc(' + playerHeight + ' + 56px) !important',
  440.                 'position': 'absolute !important',
  441.             });
  442.  
  443.             // Guide
  444.             // When watching the video, we need to line it up with the masthead.
  445.             ytwp.style.appendRule(scriptSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  446.                 'display': 'initial',
  447.                 'position': 'absolute',
  448.                 'top': '100% !important' // Masthead height
  449.             });
  450.             ytwp.style.appendRule(scriptSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  451.                 'display': 'initial',
  452.                 'margin': '0',
  453.                 'position': 'initial'
  454.             });
  455.  
  456.  
  457.             //---
  458.             // MiniPlayer-Bar
  459.             ytwp.style.appendRule(scriptSelector + ' #miniplayer-bar #player', {
  460.                 'position': 'static',
  461.             });
  462.             ytwp.style.appendRule(
  463.                 [
  464.                     scriptSelector + ' #miniplayer-bar #player',
  465.                     scriptSelector + ' #miniplayer-bar #player-api',
  466.                     scriptHtmlSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' #miniplayer-bar #movie_player',
  467.                     scriptSelector + ' #player-mole-container',
  468.                     scriptSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' #miniplayer-bar .html5-video-container',
  469.                     scriptSelector + ':not(.floater):not(.iri-always-visible) ' + scriptBodySelector + ' #miniplayer-bar .html5-main-video',
  470.                 ],
  471.                 {
  472.                     'width': '252px !important',
  473.                     'min-width': '252px !important',
  474.                     'max-width': '252px !important',
  475.                     'height': '142px !important',
  476.                     'min-height': '142px !important',
  477.                     'max-height': '142px !important',
  478.                 }
  479.             );
  480.             // Override inline style (caused by a JS animation) that breaks the miniplayer video
  481.             // https://github.com/Zren/ResizeYoutubePlayerToWindowSize/issues/41#issuecomment-439710130
  482.             ytwp.style.appendRule('.video-stream.html5-main-video', {
  483.                 'top': '0 !important',
  484.             });
  485.  
  486.             //---
  487.             // Hide Scrollbars
  488.             ytwp.style.appendRule(scriptSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  489.  
  490.  
  491.             //--- Fix Other Possible Style Issues
  492.             ytwp.style.appendRule(scriptSelector + ' #placeholder-player', 'display', 'none');
  493.             ytwp.style.appendRule(scriptSelector + ' #watch-sidebar-spacer', 'display', 'none');
  494.             ytwp.style.appendRule(scriptSelector + ' .skip-nav', 'display', 'none');
  495.  
  496.             //--- Whitespace Leftover From Moving The Video
  497.             ytwp.style.appendRule(scriptSelector + ' #page.watch', 'padding-top', '0');
  498.             ytwp.style.appendRule(scriptSelector + ' .player-branded-banner', 'height', '0');
  499.  
  500.             //--- Youtube+ Compatiblity
  501.             ytwp.style.appendRule(scriptSelector + ' #body-container', 'position', 'static');
  502.             ytwp.style.appendRule(scriptHtmlSelector + '.part_static_size:not(.content-snap-width-skinny-mode) ' + scriptBodySelector + ' .watch-non-stage-mode #player-playlist', 'width', '1066px');
  503.  
  504.             //--- Playlist Bar
  505.             ytwp.style.appendRule([
  506.                 scriptSelector + ' #placeholder-playlist',
  507.                 scriptSelector + ' #player .player-height#watch-appbar-playlist',
  508.             ], {
  509.                 'height': '540px !important',
  510.                 'max-height': '540px !important',
  511.             });
  512.  
  513.             d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
  514.             ytwp.style.appendRule(scriptSelector + ' #watch-appbar-playlist', d);
  515.             d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
  516.             d['margin-left'] = '0';
  517.             d['top'] = 'calc(' + playerHeight + ' + 60px)';
  518.             ytwp.style.appendRule(scriptSelector + ' #player .player-height#watch-appbar-playlist', d);
  519.             ytwp.style.appendRule(scriptSelector + ' .playlist-videos-list', {
  520.                 'max-height': '470px !important',
  521.                 'height': 'initial !important',
  522.             });
  523.  
  524.             // Old layout `&disable_polymer=true`
  525.             ytwp.style.appendRule(scriptSelector + ' #player .player-height#watch-appbar-playlist', {
  526.                 'left': 'calc((100vw - 1066px)/2 + 640px + 10px)',
  527.                 'width': '416px',
  528.             });
  529.             ytwp.style.stylesheet += '@media screen and (min-height: 630px) and (min-width: 1294px) {\n';
  530.             ytwp.style.appendRule(scriptSelector + ' #player .player-height#watch-appbar-playlist', {
  531.                 'left': 'calc((100vw - 1280px)/2 + 854px + 10px)',
  532.             });
  533.             ytwp.style.stylesheet += '}\n @media screen and (min-width: 1720px) and (min-height:980px) {\n';
  534.             ytwp.style.appendRule(scriptSelector + ' #player .player-height#watch-appbar-playlist', {
  535.                 'left': 'calc((100vw - 1706px)/2 + 1280px + 10px)',
  536.             });
  537.             ytwp.style.stylesheet += '}\n';
  538.  
  539.             //---
  540.             // Material UI
  541.             ytwp.style.appendRule(scriptSelector + '.ytwp-scrolltop #extra-buttons', 'display', 'none !important');
  542.             // ytwp.style.appendRule('body > #player:not(.ytd-watch)', 'display', 'none');
  543.             // ytwp.style.appendRule('body.ytwp-viewing-video #content:not(app-header-layout) ytd-page-manager', 'margin-top', '0 !important');
  544.             // ytwp.style.appendRule('.ytd-watch-0 #content-separator.ytd-watch', 'margin-top', '0');
  545.             ytwp.style.appendRule('ytd-app', 'position', 'static !important');
  546.             ytwp.style.appendRule('ytd-watch #top', 'margin-top', '71px !important'); // 56px (topnav height) + 15px (margin)
  547.             ytwp.style.appendRule('ytd-watch #container', 'margin-top', '0 !important');
  548.             ytwp.style.appendRule('ytd-watch #content-separator', 'margin-top', '0 !important');
  549.             ytwp.style.appendRule(scriptSelector + '.ytwp-viewing-video ytd-app #masthead-container.ytd-app', {
  550.                 'position': 'absolute',
  551.                 'top': playerHeight,
  552.                 'z-index': 0,
  553.             });
  554.             ytwp.style.appendRule(scriptSelector + '.ytwp-viewing-video ytd-watch #masthead-positioner', {
  555.                 'top': playerHeight + ' !important',
  556.             });
  557.             ytwp.style.appendRule(scriptSelector + ' .ytp-cued-thumbnail-overlay', 'z-index', '10');
  558.  
  559.             //---
  560.             // Flexy UI
  561.             ytwp.style.appendRule(scriptSelector + ' ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy', {
  562.                 'position': 'absolute',
  563.                 'top': '0',
  564.             });
  565.             ytwp.style.appendRule(scriptSelector + ' ytd-watch-flexy', 'padding-top', '71px'); // 56px (topnav height) + 15px (margin)
  566.             ytwp.style.appendRule(scriptSelector + ' #error-screen', 'z-index', '11');
  567.         },
  568.         onWatchInit: function() {
  569.             ytwp.log('onWatchInit');
  570.             if (!ytwp.initialized) return;
  571.             if (ytwp.pageReady) return;
  572.  
  573.             ytwp.event.addBodyClass();
  574.             ytwp.pageReady = true;
  575.         },
  576.         onDispose: function() {
  577.             ytwp.log('onDispose');
  578.             ytwp.initialized = false;
  579.             ytwp.pageReady = false;
  580.             ytwp.isWatchPage = false;
  581.         },
  582.         addBodyClass: function() {
  583.             // Insert CSS Into the body so people can style around the effects of this script.
  584.             document.body.classList.add(scriptBodyClassId);
  585.             ytwp.log('Applied ' + scriptBodySelector);
  586.         },
  587.     };
  588.  
  589.     ytwp.html5PlayerFix = function() {
  590.         ytwp.log('html5PlayerFix');
  591.         return;
  592.  
  593.         try {
  594.             if (!uw.ytcenter // Youtube Center
  595.                 && !uw.html5Patched // Youtube+
  596.                 && (!ytwp.html5.app)
  597.                 && (uw.ytplayer && uw.ytplayer.config)
  598.                 && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  599.             ) {
  600.                 ytwp.html5.app = ytwp.html5.getPlayerInstance();
  601.             }
  602.  
  603.             ytwp.html5.update();
  604.             ytwp.html5.autohideControls();
  605.         } catch (e) {
  606.             ytwp.error(e);
  607.         }
  608.     }
  609.  
  610.     ytwp.fixMasthead = function() {
  611.         ytwp.log('fixMasthead');
  612.         var el = document.querySelector('#masthead-positioner-height-offset');
  613.         if (el) {
  614.             ytwp.fixMastheadElement(el);
  615.         }
  616.     }
  617.     ytwp.fixMastheadElement = function(el) {
  618.         ytwp.log('fixMastheadElement', el);
  619.         if (el.style.height) { // != ""
  620.             setTimeout(function(){
  621.                 el.style.height = ""
  622.                 document.querySelector('#appbar-guide-menu').style.marginTop = "";
  623.             }, 0);
  624.         }
  625.     }
  626.  
  627.     JSStyleSheet.injectIntoHeader(scriptStyleId + '-focusfix', 'input#search[autofocus] { display: none; }');
  628.     ytwp.removeSearchAutofocus = function() {
  629.         var e = document.querySelector('input#search');
  630.         // ytwp.log('removeSearchAutofocus', e)
  631.         if (e) {
  632.             e.removeAttribute('autofocus')
  633.         }
  634.     }
  635.  
  636.     ytwp.registerMastheadFix = function() {
  637.         ytwp.log('registerMastheadFix');
  638.         // Fix the offset when closing the Share widget (element.style.height = ~275px).
  639.  
  640.         observe('#masthead-positioner-height-offset', {
  641.             attributes: true,
  642.         }, function(mutation) {
  643.             console.log(mutation.type, mutation)
  644.             if (mutation.attributeName === 'style') {
  645.                 var el = mutation.target;
  646.                 if (el.style.height) { // != ""
  647.                     setTimeout(function(){
  648.                         el.style.height = ""
  649.                         document.querySelector('#appbar-guide-menu').style.marginTop = "";
  650.                     }, 0);
  651.                 }
  652.  
  653.             }
  654.         });
  655.     }
  656.  
  657.     //--- Material UI
  658.     ytwp.materialPageTransition = function() {
  659.         ytwp.log('materialPageTransition')
  660.         ytwp.init();
  661.  
  662.         if (ytwp.isWatchUrl()) {
  663.             ytwp.removeSearchAutofocus();
  664.             ytwp.event.addBodyClass();
  665.             // if (!ytwp.html5.app) {
  666.             if (!ytwp.initialized) {
  667.                 ytwp.log('materialPageTransition !ytwp.html5.app', ytwp.html5.app)
  668.                 setTimeout(ytwp.materialPageTransition, 100);
  669.             }
  670.              var playerApi = document.querySelector('#player-api')
  671.              if (playerApi) {
  672.                  playerApi.click()
  673.              }
  674.         } else {
  675.             ytwp.event.onDispose();
  676.             document.body.classList.remove(scriptBodyClassId);
  677.         }
  678.         ytwp.onScroll();
  679.         ytwp.fixMasthead();
  680.         ytwp.attemptToUpdatePlayer();
  681.     };
  682.  
  683.     //--- Listeners
  684.     ytwp.registerListeners = function() {
  685.         ytwp.registerMaterialListeners();
  686.         ytwp.registerMastheadFix();
  687.     };
  688.  
  689.     ytwp.registerMaterialListeners = function() {
  690.         // For Material UI
  691.         HistoryEvent.listeners.push(ytwp.materialPageTransition);
  692.         HistoryEvent.startTimer();
  693.         // HistoryEvent.inject();
  694.         // HistoryEvent.listeners.push(console.log.bind(console));
  695.     };
  696.  
  697.     ytwp.main = function() {
  698.         ytwp.registerListeners();
  699.         ytwp.init();
  700.         ytwp.fixMasthead();
  701.     };
  702.  
  703.     ytwp.main();
  704.  
  705.     // ytwp.updatePlayerTimerId = 0;
  706.     ytwp.updatePlayerAttempts = -1;
  707.     ytwp.updatePlayerMaxAttempts = 150; // 60fps = 2.5sec
  708.     ytwp.attemptToUpdatePlayer = function() {
  709.         console.log('ytwp.attemptToUpdatePlayer')
  710.         if (0 <= ytwp.updatePlayerAttempts && ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
  711.             ytwp.updatePlayerAttempts = 0;
  712.         } else {
  713.             ytwp.updatePlayerAttempts = 0;
  714.             ytwp.attemptToUpdatePlayerTick();
  715.         }
  716.         // setTimeout(ytwp.updatePlayer, 10000); /// Just in case it's not caught
  717.     }
  718.     ytwp.attemptToUpdatePlayerTick = function() {
  719.         console.log('ytwp.attemptToUpdatePlayerTick', ytwp.updatePlayerAttempts)
  720.         if (ytwp.updatePlayerAttempts < ytwp.updatePlayerMaxAttempts) {
  721.             ytwp.updatePlayerAttempts += 1;
  722.             ytwp.updatePlayer();
  723.             // ytwp.updatePlayerTimerId = setTimeout(ytwp.attemptToUpdatePlayerTick, 200);
  724.             requestAnimationFrame(ytwp.attemptToUpdatePlayerTick);
  725.         }
  726.     }
  727.  
  728.     ytwp.updatePlayer = function() {
  729.         ytwp.removeSearchAutofocus();
  730.         ytwp.enterTheaterMode();
  731.     }
  732.  
  733.     ytwp.materialPageTransition()
  734.     setInterval(ytwp.updatePlayer, 2500);
  735.  
  736. })(window);