☰

Resize YT To Window Size

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

当前为 2017-04-25 提交的版本，查看 最新版本。

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