☰

Resize YT To Window Size

Moves the YouTube video to the top of the website and resizes it to the window size.

As of 2015-05-28. See the latest version.

  1. // ==UserScript==
  2. // @name            Resize YT To Window Size
  3. // @description     Moves the YouTube video to the top of the website and resizes it to the window size.
  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         65
  9. // @include         http*://*.youtube.com/*
  10. // @include         http*://youtube.com/*
  11. // @include         http*://*.youtu.be/*
  12. // @include         http*://youtu.be/*
  13. // ==/UserScript==
  14.  
  15. // Github:          https://github.com/Zren/ResizeYoutubePlayerToWindowSize
  16. // GreasyFork:      https://greasyfork.org/scripts/811-resize-yt-to-window-size
  17. // OpenUserJS.org:  https://openuserjs.org/scripts/zren/Resize_YT_To_Window_Size
  18. // Userscripts.org: http://userscripts-mirror.org/scripts/show/153699
  19.  
  20. (function (window) {
  21.     "use strict";
  22.     
  23.     //--- Imported Globals
  24.     // yt
  25.     // ytcenter
  26.     // ytplayer
  27.     var uw = window.top;
  28.  
  29.     //--- Already Loaded?
  30.     // GreaseMonkey loads this script twice for some reason.
  31.     if (uw.ytwp) return;
  32.  
  33.     //--- Utils
  34.     function isStringType(obj) { return typeof obj === 'string'; }
  35.     function isArrayType(obj) { return obj instanceof Array; }
  36.     function isObjectType(obj) { return typeof obj === 'object'; }
  37.     function isUndefined(obj) { return typeof obj === 'undefined'; }
  38.     function buildVenderPropertyDict(propertyNames, value) {
  39.         var d = {};
  40.         for (var i in propertyNames)
  41.             d[propertyNames[i]] = value;
  42.         return d;
  43.     }
  44.  
  45.     //--- jQuery
  46.     // Based on jQuery
  47.     // https://github.com/jquery/jquery/blob/master/src/manipulation.js
  48.     var core_rnotwhite = /\S+/g;
  49.     var rclass = /[\t\r\n\f]/g;
  50.     var rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;
  51.  
  52.     var jQuery = {
  53.         trim: function( text ) {
  54.             return (text || "").replace( rtrim, "" );
  55.         },
  56.         addClass: function( elem, value ) {
  57.             var classes, cur, clazz, j,
  58.                 proceed = typeof value === "string" && value;
  59.  
  60.             if ( proceed ) {
  61.                 // The disjunction here is for better compressibility (see removeClass)
  62.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  63.  
  64.                 cur = elem.nodeType === 1 && ( elem.className ?
  65.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  66.                     " "
  67.                 );
  68.  
  69.                 if ( cur ) {
  70.                     j = 0;
  71.                     while ( (clazz = classes[j++]) ) {
  72.                         if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
  73.                             cur += clazz + " ";
  74.                         }
  75.                     }
  76.                     elem.className = jQuery.trim( cur );
  77.                 }
  78.             }
  79.         },
  80.         removeClass: function( elem, value ) {
  81.             var classes, cur, clazz, j,
  82.                 proceed = arguments.length === 0 || typeof value === "string" && value;
  83.  
  84.             if ( proceed ) {
  85.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  86.  
  87.                 // This expression is here for better compressibility (see addClass)
  88.                 cur = elem.nodeType === 1 && ( elem.className ?
  89.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  90.                     ""
  91.                 );
  92.  
  93.                 if ( cur ) {
  94.                     j = 0;
  95.                     while ( (clazz = classes[j++]) ) {
  96.                         // Remove *all* instances
  97.                         while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
  98.                             cur = cur.replace( " " + clazz + " ", " " );
  99.                         }
  100.                     }
  101.                     elem.className = value ? jQuery.trim( cur ) : "";
  102.                 }
  103.             }
  104.         }
  105.     };
  106.  
  107.  
  108.     //--- Stylesheet
  109.     var JSStyleSheet = function(id) {
  110.         this.id = id;
  111.         this.stylesheet = '';
  112.     };
  113.  
  114.     JSStyleSheet.prototype.buildRule = function(selector, styles) {
  115.         var s = "";
  116.         for (var key in styles) {
  117.             s += "\t" + key + ": " + styles[key] + ";\n";
  118.         }
  119.         return selector + " {\n" + s + "}\n";
  120.     };
  121.  
  122.     JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  123.         if (isArrayType(selector))
  124.             selector = selector.join(',\n');
  125.         var newStyle;
  126.         if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  127.             var d = {};
  128.             d[k] = v;
  129.             newStyle = this.buildRule(selector, d);
  130.         } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  131.             newStyle = this.buildRule(selector, k);
  132.         } else {
  133.             // Invalid Arguments
  134.             console.log('Illegal arguments', arguments);
  135.             return;
  136.         }
  137.  
  138.         this.stylesheet += newStyle;
  139.     };
  140.  
  141.     JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  142.         var styleElement = document.getElementById(injectedStyleId);
  143.         if (!styleElement) {
  144.             styleElement = document.createElement('style');
  145.             styleElement.type = 'text/css';
  146.             styleElement.id = injectedStyleId;
  147.             document.getElementsByTagName('head')[0].appendChild(styleElement);
  148.         }
  149.         styleElement.appendChild(document.createTextNode(stylesheet));
  150.     };
  151.  
  152.     JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  153.         JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  154.     };
  155.  
  156.     //--- Constants
  157.     var scriptShortName = 'ytwp'; // YT Window Player
  158.     var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  159.     var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  160.     var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  161.     var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  162.     var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  163.  
  164.     var videoContainerId = 'player';
  165.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  166.  
  167.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  168.     var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
  169.  
  170.     //--- YTWP
  171.     var ytwp = uw.ytwp = {
  172.         scriptShortName: scriptShortName, // YT Window Player
  173.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  174.         log: function() { return this.log_(console.log, arguments); },
  175.         error: function() { return this.log_(console.error, arguments); },
  176.  
  177.         initialized: false,
  178.         pageReady: false,
  179.         watchPage: false,
  180.     };
  181.  
  182.     ytwp.util = {
  183.         isWatchUrl: function (url) {
  184.             if (!url)
  185.                 url = uw.location.href;
  186.             return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  187.         }
  188.     };
  189.  
  190.     var Html5PlayerFix = {
  191.         YTRect: null,
  192.         YTApplication: null,
  193.         playerInstances: null,
  194.         moviePlayerElement: null,
  195.     };
  196.     Html5PlayerFix.getPlayerRect = function() {
  197.         return new Html5PlayerFix.YTRect(Html5PlayerFix.moviePlayerElement.clientWidth, Html5PlayerFix.moviePlayerElement.clientHeight);
  198.     };
  199.     Html5PlayerFix.getApplicationClass = function() {
  200.         if (Html5PlayerFix.YTApplication === null) {
  201.             var testEl = document.createElement('div');
  202.             var testAppInstance = uw.yt.player.Application.create(testEl, {});
  203.             Html5PlayerFix.YTApplication = testAppInstance.constructor;
  204.  
  205.             // Cleanup testAppInstance
  206.             var playerInstances = Html5PlayerFix.getPlayerInstances();
  207.  
  208.             var testAppInstanceKey = null;
  209.             Object.keys(playerInstances).forEach(function(key) {
  210.                 if (playerInstances[key] === testAppInstance) {
  211.                     testAppInstanceKey = key;
  212.                 }
  213.             });
  214.             testAppInstance.dispose();
  215.             delete playerInstances[testAppInstanceKey];
  216.             
  217.         }
  218.  
  219.  
  220.         return Html5PlayerFix.YTApplication;
  221.     };
  222.     Html5PlayerFix.getPlayerInstances = function() {
  223.         if (Html5PlayerFix.playerInstances === null) {
  224.             var YTApplication =  Html5PlayerFix.getApplicationClass();
  225.             if (YTApplication === null)
  226.                 return null;
  227.  
  228.             // Use yt.player.Application.create to find the playerInstancesKey.
  229.             // function (a,b){try{var c=t$.B(a);if(t$.j[c]){try{t$.j[c].dispose()}catch(d){cg(d)}t$.j[c]=null}var e=new t$(a,b);Ji(e,function(){t$.j[c]=null});return t$.j[c]=e}catch(g){throw cg(g),g;}}
  230.             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\]\)/;
  231.             var fnString = yt.player.Application.create.toString();
  232.             var m = appCreateRegex.exec(fnString);
  233.             if (m) {
  234.                 var playerInstancesKey = m[4];
  235.                 Html5PlayerFix.playerInstances = YTApplication[playerInstancesKey];
  236.             } else {
  237.                 ytwp.error('Error trying to find playerInstancesKey.', fnString);
  238.             }
  239.             Html5PlayerFix.playerInstances = YTApplication.j;
  240.         }
  241.  
  242.         return Html5PlayerFix.playerInstances;
  243.     };
  244.     Html5PlayerFix.getPlayerInstance = function() {
  245.         if (!ytwp.ytapp) {
  246.             var playerInstances = Html5PlayerFix.getPlayerInstances();
  247.             ytwp.log('playerInstances', playerInstances);
  248.             var appInstance = null;
  249.             var appInstanceKey = null;
  250.             Object.keys(playerInstances).forEach(function(key) {
  251.                 appInstanceKey = key;
  252.                 appInstance = playerInstances[key];
  253.             });
  254.             ytwp.ytapp = appInstance;
  255.         }
  256.         return ytwp.ytapp;
  257.     };
  258.     Html5PlayerFix.autohideControls = function() {
  259.         var moviePlayerElement = document.getElementById('movie_player');
  260.         if (!moviePlayerElement) return;
  261.         // ytwp.log(moviePlayerElement.classList);
  262.         jQuery.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');
  263.         jQuery.addClass(moviePlayerElement, 'autominimize-progress-bar autohide-controls hide-controls-when-cued');
  264.         // ytwp.log(moviePlayerElement.classList);
  265.     };
  266.     Html5PlayerFix.update = function() {
  267.         if (!Html5PlayerFix.playerInstances)
  268.             return;
  269.         for (var key in Html5PlayerFix.playerInstances) {
  270.             var playerInstance = Html5PlayerFix.playerInstances[key];
  271.             Html5PlayerFix.updatePlayerInstance(playerInstance);
  272.         }
  273.     };
  274.     Html5PlayerFix.updatePlayerInstance = function(app) {
  275.         if (!app) {
  276.             return;
  277.         }
  278.  
  279.         var moviePlayerElement = document.getElementById('movie_player');
  280.         var moviePlayer = null;
  281.         var moviePlayerKey = null;
  282.  
  283.         // 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}
  284.         // 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}
  285.         var clientRectFnRegex1 = /^(function \(a\)\{var b=this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\(\)).*(\|\|\(c\.height\+=30\);return c})$/;
  286.         // 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)}
  287.         var clientRectFnRegex2 = /^(function \()(.|\n)*(return new ([a-zA-Z_$][\w_$]*)\(this\.element\.clientWidth,this\.element\.clientHeight\)})$/;
  288.         var clientRectFn = null;
  289.         var clientRectFnKey = null;
  290.  
  291.         var fnAlreadyReplacedCount = 0;
  292.  
  293.         Object.keys(app).forEach(function(key1) {
  294.             var val1 = app[key1];//console.log(key1, val1);
  295.             if (typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement) {
  296.                 moviePlayer = val1;
  297.                 moviePlayerKey = key1;
  298.  
  299.                 Object.keys(moviePlayer.constructor.prototype).forEach(function(key2) {
  300.                     var val2 = moviePlayer[key2];//console.log(key1, key2, val2);
  301.                     if (typeof val2 === 'function') {
  302.                         var fnString = val2.toString();
  303.                         // console.log(fnString);
  304.                         if (clientRectFn === null && (clientRectFnRegex1.test(fnString) || clientRectFnRegex2.test(fnString))) {
  305.                             clientRectFn = val2;
  306.                             clientRectFnKey = key2;
  307.                         } else if (val2 === Html5PlayerFix.getPlayerRect) {
  308.                             fnAlreadyReplacedCount += 1;
  309.                         } else {
  310.                             // console.log(key1, key2, val2, '[Not Used]');
  311.                         }
  312.                     }
  313.                 });
  314.             }
  315.         });
  316.  
  317.         if (fnAlreadyReplacedCount > 0) {
  318.             return;
  319.         }
  320.  
  321.         if (moviePlayer === null || clientRectFn === null) {
  322.             console.log('[ytwp] ', '[Error]', 'HTML5 Player has changed or there\'s multiple playerInstances and this one has been destroyed.');
  323.             console.log('moviePlayer', moviePlayerKey, moviePlayer);
  324.             console.log('clientRectFn', clientRectFnKey, clientRectFn);
  325.             console.log('fnAlreadyReplacedCount', fnAlreadyReplacedCount);
  326.             return;
  327.         }
  328.         
  329.         Html5PlayerFix.moviePlayerElement = moviePlayerElement;
  330.         Html5PlayerFix.YTRect = moviePlayer[clientRectFnKey].call(moviePlayer).constructor;
  331.  
  332.         moviePlayer[clientRectFnKey] = Html5PlayerFix.getPlayerRect;
  333.     };
  334.     ytwp.Html5PlayerFix = Html5PlayerFix;
  335.  
  336.     ytwp.event = {
  337.         init: function() {
  338.             ytwp.log('init');
  339.             if (!ytwp.initialized) {
  340.                 ytwp.isWatchPage = ytwp.util.isWatchUrl();
  341.                 if (ytwp.isWatchPage) {
  342.                     ytwp.event.initStyle();
  343.                     ytwp.event.initScroller();
  344.                     ytwp.initialized = true;
  345.                     ytwp.pageReady = false;
  346.                 }
  347.             }
  348.             ytwp.event.onWatchInit();
  349.             ytwp.event.html5PlayerFix();
  350.         },
  351.         initScroller: function() {
  352.             // Register listener & Call it now.
  353.             unsafeWindow.addEventListener('scroll', ytwp.event.onScroll, false);
  354.             unsafeWindow.addEventListener('resize', ytwp.event.onScroll, false);
  355.             ytwp.event.onScroll();
  356.         },
  357.         onScroll: function() {
  358.             var viewportHeight = document.documentElement.clientHeight;
  359.  
  360.             // topOfPageClassId
  361.             if (unsafeWindow.scrollY == 0) {
  362.                 jQuery.addClass(document.body, topOfPageClassId);
  363.             } else {
  364.                 jQuery.removeClass(document.body, topOfPageClassId);
  365.             }
  366.  
  367.             // viewingVideoClassId
  368.             if (unsafeWindow.scrollY <= viewportHeight) {
  369.                 jQuery.addClass(document.body, viewingVideoClassId);
  370.             } else {
  371.                 jQuery.removeClass(document.body, viewingVideoClassId);
  372.             }
  373.         },
  374.         initStyle: function() {
  375.             ytwp.log('initStyle');
  376.             ytwp.style = new JSStyleSheet(scriptStyleId);
  377.             ytwp.event.buildStylesheet();
  378.             ytwp.style.injectIntoHeader();
  379.         },
  380.         buildStylesheet: function() {
  381.             ytwp.log('buildStylesheet');
  382.             //--- Video Player
  383.  
  384.             //
  385.             var d;
  386.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  387.             d['padding'] = '0 !important';
  388.             d['margin'] = '0 !important';
  389.             ytwp.style.appendRule([
  390.                 scriptBodyClassSelector + ' #player',
  391.                 scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  392.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  393.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  394.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  395.             ], d);
  396.             //
  397.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  398.  
  399.             // Bugfix for Firefox
  400.             // Parts of the header (search box) are hidden under the player.
  401.             // Firefox doesn't seem to be using the fixed header+guide yet.
  402.             d['float'] = 'initial';
  403.  
  404.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  405.  
  406.             // Theatre mode
  407.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch-stage-mode #player .player-api', {
  408.                 'left': 'initial',
  409.                 'margin-left': 'initial',
  410.             });
  411.                 
  412.  
  413.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  414.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  415.             // Also, Youtube Center resizes #player at element level.
  416.             ytwp.style.appendRule(
  417.                 [
  418.                     scriptBodyClassSelector + ' #player',
  419.                     scriptBodyClassSelector + ' #movie_player',
  420.                     scriptBodyClassSelector + ' #player-mole-container',
  421.                     scriptBodyClassSelector + ' .html5-video-container',
  422.                     scriptBodyClassSelector + ' .html5-main-video',
  423.                 ],
  424.                 {
  425.                     'width': '100% !important',
  426.                     'min-width': '100% !important',
  427.                     'max-width': '100% !important',
  428.                     'height': '100% !important',
  429.                     'min-height': '100% !important',
  430.                     'max-height': '100% !important',
  431.                 }
  432.             );
  433.  
  434.              ytwp.style.appendRule(
  435.                 [
  436.                     scriptBodyClassSelector + ' #player',
  437.                     scriptBodyClassSelector + ' .html5-main-video',
  438.                 ],
  439.                 {
  440.                     'top': '0 !important',
  441.                     'right': '0 !important',
  442.                     'bottom': '0 !important',
  443.                     'left': '0 !important',
  444.                 }
  445.             );
  446.             // Resize #player-unavailable, #player-api
  447.             // Using min/max width/height will keep
  448.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  449.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  450.  
  451.             //--- Move Video Player
  452.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  453.                 'position': 'absolute',
  454.                 // Already top:0; left: 0;
  455.             });
  456.             ytwp.style.appendRule(scriptBodyClassSelector, { // body
  457.                 'margin-top': '100vh',
  458.             });
  459.  
  460.  
  461.             //--- Sidebar
  462.             // Remove the transition delay as you can see it moving on page load.
  463.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  464.             d['margin-top'] = '0 !important';
  465.             d['top'] = '0 !important';
  466.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  467.  
  468.             ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  469.  
  470.             //--- Absolutely position the fixed header.
  471.             // Masthead
  472.             d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
  473.             ytwp.style.appendRule(scriptBodyClassSelector + '.hide-header-transition #masthead-positioner', d);
  474.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  475.                 'position': 'absolute',
  476.                 'top': '100% !important'
  477.             });
  478.  
  479.             // Guide
  480.             // When watching the video, we need to line it up with the masthead.
  481.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  482.                 'display': 'initial',
  483.                 'position': 'absolute',
  484.                 'top': '100% !important' // Masthead height
  485.             });
  486.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  487.                 'display': 'initial',
  488.                 'margin': '0',
  489.                 'position': 'initial'
  490.             });
  491.  
  492.             //---
  493.             // Hide Scrollbars
  494.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  495.  
  496.  
  497.             //--- Fix Other Possible Style Issues
  498.             ytwp.style.appendRule(scriptBodyClassSelector + ' #placeholder-player', 'display', 'none');
  499.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-sidebar-spacer', 'display', 'none');
  500.             ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
  501.  
  502.             //--- Whitespace Leftover From Moving The Video
  503.             ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  504.             ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  505.  
  506.             //--- Playlist Bar
  507.             ytwp.style.appendRule([
  508.                 scriptBodyClassSelector + ' #placeholder-playlist',
  509.                 scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist',
  510.             ], 'height', '490px !important');
  511.             d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
  512.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-appbar-playlist', d);
  513.             d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
  514.             d['margin-left'] = '0';
  515.             d['top'] = 'calc(100vh + 60px)';
  516.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist', d);
  517.             ytwp.style.appendRule(scriptBodyClassSelector + ' .playlist-videos-list', 'height', '430px');
  518.         },
  519.         onWatchInit: function() {
  520.             ytwp.log('onWatchInit');
  521.             if (!ytwp.initialized) return;
  522.             if (ytwp.pageReady) return;
  523.  
  524.             ytwp.event.addBodyClass();
  525.             ytwp.pageReady = true;
  526.         },
  527.         onDispose: function() {
  528.             ytwp.log('onDispose');
  529.             ytwp.initialized = false;
  530.             ytwp.pageReady = false;
  531.             ytwp.isWatchPage = false;
  532.             ytwp.ytapp = null;
  533.         },
  534.         addBodyClass: function() {
  535.             // Insert CSS Into the body so people can style around the effects of this script.
  536.             jQuery.addClass(document.body, scriptBodyClassId);
  537.             ytwp.log('Applied ' + scriptBodyClassSelector);
  538.         },
  539.         html5PlayerFix: function() {
  540.             ytwp.log('html5PlayerFix');
  541.  
  542.             // https://github.com/YePpHa/YouTubeCenter/issues/1083
  543.             if (!uw.ytcenter
  544.                 && (!ytwp.ytapp)
  545.                 && (uw.ytplayer && uw.ytplayer.config)
  546.                 && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  547.             ) {
  548.                 ytwp.ytapp = Html5PlayerFix.getPlayerInstance();
  549.             }
  550.  
  551.             Html5PlayerFix.update();
  552.             Html5PlayerFix.autohideControls();
  553.         },
  554.  
  555.     };
  556.  
  557.  
  558.     ytwp.pubsubListeners = {
  559.         'init': function() { // Not always called
  560.             ytwp.event.init();
  561.         },
  562.         'init-watch': function() { // Not always called
  563.             ytwp.event.init();
  564.         },
  565.         'player-added': function() { // Not always called
  566.             // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  567.             // The init event is when the body element resets all it's classes.
  568.             ytwp.event.init();
  569.         },
  570.         // 'player-resize': function() {},
  571.         // 'player-playback-start': function() {},
  572.         'appbar-guide-delay-load': function() {
  573.             // Listen to a later event that is always called in case the others are missed.
  574.             ytwp.event.init();
  575.  
  576.             // Channel -> /watch
  577.             if (ytwp.util.isWatchUrl())
  578.                 ytwp.event.addBodyClass();
  579.         },
  580.         // 'dispose-watch': function() {},
  581.         'dispose': function() {
  582.             ytwp.event.onDispose();
  583.         }
  584.     };
  585.  
  586.     ytwp.registerYoutubeListeners = function() {
  587.         ytwp.registerYoutubePubSubListeners();
  588.     };
  589.  
  590.     ytwp.registerYoutubePubSubListeners = function() {
  591.         // Subscribe
  592.         for (var eventName in ytwp.pubsubListeners) {
  593.             var eventListener = ytwp.pubsubListeners[eventName];
  594.             uw.yt.pubsub.instance_.subscribe(eventName, eventListener);
  595.         }
  596.     };
  597.  
  598.     ytwp.main = function() {
  599.         try {
  600.             ytwp.registerYoutubeListeners();
  601.         } catch(e) {
  602.             ytwp.error("Could not hook yt.pubsub", e);
  603.             setTimeout(ytwp.main, 1000);
  604.         }
  605.         ytwp.event.init();
  606.     };
  607.  
  608.     ytwp.main();
  609.     
  610. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);