☰

Resize YT To Window Size

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

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

  1. // ==UserScript==
  2. // @name            Resize YT To Window Size
  3. // @description     Moves the video to the top of the website and resizes it to the screen 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         1.50
  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.             // appendRule('#blarg', 'display', 'none');
  128.             var d = {};
  129.             d[k] = v;
  130.             newStyle = this.buildRule(selector, d);
  131.         } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  132.             // appendRule('#blarg', {'display': 'none'});
  133.             newStyle = this.buildRule(selector, k);
  134.         } else {
  135.             // Invalid Arguments
  136.             console.log('Illegal arguments', arguments);
  137.             return;
  138.         }
  139.  
  140.         this.stylesheet += newStyle;
  141.     };
  142.  
  143.     JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  144.         var styleElement = document.getElementById(injectedStyleId);
  145.         if (!styleElement) {
  146.             styleElement = document.createElement('style');
  147.             styleElement.type = 'text/css';
  148.             styleElement.id = injectedStyleId;
  149.             document.getElementsByTagName('head')[0].appendChild(styleElement);
  150.         }
  151.         styleElement.appendChild(document.createTextNode(stylesheet));
  152.     };
  153.  
  154.     JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  155.         JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  156.     };
  157.  
  158.     //--- Constants
  159.     var scriptShortName = 'ytwp'; // YT Window Player
  160.     var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  161.     var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  162.     var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  163.     var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  164.     var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  165.  
  166.     var videoContainerId = 'player';
  167.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  168.  
  169.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  170.  
  171.     //--- YTWP
  172.     var ytwp = uw.ytwp = {
  173.         scriptShortName: scriptShortName, // YT Window Player
  174.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  175.         log: function() { return this.log_(console.log, arguments); },
  176.         error: function() { return this.log_(console.error, arguments); },
  177.  
  178.         initialized: false,
  179.         pageReady: false,
  180.         watchPage: false,
  181.     };
  182.  
  183.     ytwp.util = {
  184.         isWatchUrl: function (url) {
  185.             if (!url)
  186.                 url = uw.location.href;
  187.             return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  188.         }
  189.     };
  190.  
  191.     var Html5PlayerFix = {
  192.         YTRect: null,
  193.         moviePlayer: null,
  194.         moviePlayerElement: null,
  195.         app: null,
  196.     };
  197.     Html5PlayerFix.getPlayerRect = function() {
  198.         return new Html5PlayerFix.YTRect(Html5PlayerFix.moviePlayerElement.clientWidth, Html5PlayerFix.moviePlayerElement.clientHeight);
  199.     };
  200.     Html5PlayerFix.isFixed = function(app) {
  201.         return app.o.ub === Html5PlayerFix.getPlayerRect;
  202.     };
  203.     Html5PlayerFix.shouldFix = function() {
  204.         return ytplayer.config.html5 && (Html5PlayerFix.app === null || !Html5PlayerFix.isFixed(Html5PlayerFix.app));
  205.     }
  206.     Html5PlayerFix.update = function(app) {
  207.         try {
  208.             if (Html5PlayerFix.app === null || Html5PlayerFix.app !== app) {
  209.                 Html5PlayerFix.app = app;
  210.                 Html5PlayerFix.moviePlayer = Html5PlayerFix.app.o;
  211.                 Html5PlayerFix.moviePlayerElement = Html5PlayerFix.moviePlayer.element;
  212.                 Html5PlayerFix.YTRect = Html5PlayerFix.moviePlayer.ub().constructor;
  213.             }
  214.             if (Html5PlayerFix.app && !Html5PlayerFix.isFixed(Html5PlayerFix.app)) {
  215.                 Html5PlayerFix.moviePlayer.ub = Html5PlayerFix.getPlayerRect;
  216.                 Html5PlayerFix.moviePlayer.hb = Html5PlayerFix.getPlayerRect;
  217.                 Html5PlayerFix.moviePlayer.pj();
  218.             }
  219.         } catch (e) {
  220.             Html5PlayerFix.app = null;
  221.             console.log('[ytwp] ', 'HTML5 Player has changed', e);
  222.         }
  223.     };
  224.     ytwp.Html5PlayerFix = Html5PlayerFix;
  225.  
  226.     ytwp.event = {
  227.         init: function() {
  228.             ytwp.log('init');
  229.             if (ytwp.initialized) return;
  230.  
  231.             ytwp.isWatchPage = ytwp.util.isWatchUrl();
  232.             if (!ytwp.isWatchPage) return;
  233.  
  234.             ytwp.event.initStyle();
  235.             ytwp.event.initScroller();
  236.             ytwp.initialized = true;
  237.             ytwp.pageReady = false;
  238.         },
  239.         initScroller: function() {
  240.             // Register listener & Call it now.
  241.             unsafeWindow.addEventListener('scroll', ytwp.event.onScroll, false);
  242.             unsafeWindow.addEventListener('resize', ytwp.event.onScroll, false);
  243.             ytwp.event.onScroll();
  244.         },
  245.         onScroll: function() {
  246.             var viewportHeight = document.documentElement.clientHeight;
  247.  
  248.             // topOfPageClassId
  249.             if (unsafeWindow.scrollY == 0) {
  250.                 jQuery.addClass(document.body, topOfPageClassId);
  251.             } else {
  252.                 jQuery.removeClass(document.body, topOfPageClassId);
  253.             }
  254.  
  255.             // viewingVideoClassId
  256.             if (unsafeWindow.scrollY <= viewportHeight) {
  257.                 jQuery.addClass(document.body, viewingVideoClassId);
  258.             } else {
  259.                 jQuery.removeClass(document.body, viewingVideoClassId);
  260.             }
  261.         },
  262.         initStyle: function() {
  263.             ytwp.log('initStyle');
  264.             ytwp.style = new JSStyleSheet(scriptStyleId);
  265.             ytwp.event.buildStylesheet();
  266.             ytwp.style.injectIntoHeader();
  267.         },
  268.         buildStylesheet: function() {
  269.             ytwp.log('buildStylesheet');
  270.             //--- Video Player
  271.  
  272.             //
  273.             var d;
  274.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  275.             d['padding'] = '0 !important';
  276.             d['margin'] = '0 !important';
  277.             ytwp.style.appendRule([
  278.                 scriptBodyClassSelector + ' #player',
  279.                 scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  280.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  281.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  282.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  283.             ], d);
  284.             //
  285.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  286.  
  287.             // Bugfix for Firefox
  288.             // Parts of the header (search box) are hidden under the player.
  289.             // Firefox doesn't seem to be using the fixed header+guide yet.
  290.             d['float'] = 'initial';
  291.  
  292.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  293.  
  294.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  295.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  296.             // Also, Youtube Center resizes #player at element level.
  297.             ytwp.style.appendRule(
  298.                 [
  299.                     scriptBodyClassSelector + ' #player',
  300.                     scriptBodyClassSelector + ' #movie_player',
  301.                     scriptBodyClassSelector + ' #player-mole-container',
  302.                     scriptBodyClassSelector + ' .html5-main-video',
  303.                 ],
  304.                 {
  305.                     'width': '100% !important',
  306.                     'min-width': '100% !important',
  307.                     'max-width': '100% !important',
  308.                     'height': '100% !important',
  309.                     'min-height': '100% !important',
  310.                     'max-height': '100% !important',
  311.                 }
  312.             );
  313.  
  314.              ytwp.style.appendRule(
  315.                 [
  316.                     scriptBodyClassSelector + ' #player',
  317.                     scriptBodyClassSelector + ' .html5-main-video',
  318.                 ],
  319.                 {
  320.                     'top': '0 !important',
  321.                     'right': '0 !important',
  322.                     'bottom': '0 !important',
  323.                     'left': '0 !important',
  324.                 }
  325.             );
  326.             // Resize #player-unavailable, #player-api
  327.             // Using min/max width/height will keep
  328.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  329.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  330.  
  331.             //--- Move Video Player
  332.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  333.                 'position': 'absolute',
  334.                 // Already top:0; left: 0;
  335.             });
  336.             ytwp.style.appendRule(scriptBodyClassSelector, { // body
  337.                 'margin-top': '100vh',
  338.             });
  339.  
  340.  
  341.             //--- Sidebar
  342.             // Remove the transition delay as you can see it moving on page load.
  343.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  344.             d['margin-top'] = '0 !important';
  345.             d['top'] = '0 !important';
  346.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  347.  
  348.             ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  349.  
  350.             //--- Absolutely position the fixed header.
  351.             // Masthead
  352.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  353.                 'position': 'absolute',
  354.                 'top': '100% !important'
  355.             });
  356.  
  357.             // Guide
  358.             // When watching the video, we need to line it up with the masthead.
  359.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  360.                 'display': 'initial',
  361.                 'position': 'absolute',
  362.                 'top': '100% !important' // Masthead height
  363.             });
  364.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  365.                 'display': 'initial',
  366.                 'margin': '0',
  367.                 'position': 'initial'
  368.             });
  369.  
  370.             //---
  371.             // Hide Scrollbars
  372.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  373.  
  374.  
  375.             //--- Fix Other Possible Style Issues
  376.  
  377.             //--- Whitespace Leftover From Moving The Video
  378.             ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  379.             ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  380.  
  381.             //--- Playlist Bar
  382.             //ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', "margin", "-15px -10px 20px -10px");
  383.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-left', 'width', '640px !important'); // Same width as .watch-content
  384.             ytwp.style.appendRule([
  385.                 scriptBodyClassSelector + ' .playlist',
  386.                 scriptBodyClassSelector + ' .playlist .watch7-playlist-bar',
  387.             ], 'max-width', '1040px'); // Same width as .watch-content (640px) + .watch-sidebar (300-400px).
  388.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  389.                 "margin-top": "-15px",
  390.                 "height": "287px !important", // 65 (playlist tile) * 4 + 27 (trim on bottom)
  391.                 "margin-bottom": "15px"
  392.             });
  393.             ytwp.style.appendRule([
  394.                 scriptBodyClassSelector + '.cardified-page #watch7-playlist-tray-container + #watch7-sidebar-contents', // Pre Oct 26
  395.                 scriptBodyClassSelector + '.cardified-page #watch-appbar-playlist + #watch7-sidebar-contents', // Post Oct 26
  396.             ], 'padding-top', '15px');
  397.  
  398.             // YT Center
  399.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', 'margin-bottom', '0 !important');
  400.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  401.                 'left': 'initial !important',
  402.                 'width': 'initial !important'
  403.             });
  404.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-right', 'width', '363px !important');
  405.         },
  406.         onWatchInit: function() {
  407.             ytwp.log('onWatchInit');
  408.             if (!ytwp.initialized) return;
  409.             if (ytwp.pageReady) return;
  410.  
  411.             ytwp.event.addBodyClass();
  412.             ytwp.pageReady = true;
  413.         },
  414.         onDispose: function() {
  415.             window.removeEventListener('click', ytwp.event.onWindowClick);
  416.             ytwp.initialized = false;
  417.             ytwp.pageReady = false;
  418.             ytwp.isWatchPage = false;
  419.         },
  420.         addBodyClass: function() {
  421.             // Insert CSS Into the body so people can style around the effects of this script.
  422.             jQuery.addClass(document.body, scriptBodyClassId);
  423.             ytwp.log('Applied ' + scriptBodyClassSelector);
  424.         },
  425.         html5PlayerFix: function() {
  426.             ytwp.log('html5PlayerFix');
  427.  
  428.             // https://github.com/YePpHa/YouTubeCenter/issues/1083
  429.             if (!uw.ytcenter
  430.                 && (!ytwp.ytapp || ytwp.Html5PlayerFix.shouldFix())
  431.                 && (uw.ytplayer && uw.ytplayer.config)
  432.                 && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  433.             ) {
  434.                 ytwp.log('rerunning ytplayer.load()');
  435.                 
  436.                 // Since we have to reload the player anyways, might as well set some useful settings.
  437.                 uw.ytplayer.config.args.autohide = 1; // Autohide the playback control bar.
  438.                 
  439.                 // Next 2 lines are equivalent to: ytplayer.load();
  440.                 ytwp.ytapp = uw.yt.player.Application.create("player-api", uw.ytplayer.config);
  441.                 uw.ytplayer.config.loaded = true;
  442.  
  443.                 ytwp.Html5PlayerFix.update(ytwp.ytapp);
  444.             }
  445.         },
  446.         onWindowClick: function(event) {
  447.             function isClickingLink(el) {
  448.                 while (el) {
  449.                     if (el.tagName === 'A' && el.href) { // is anchor tag
  450.                         return true;
  451.                     }
  452.                     el = el.parentNode;
  453.                 }    
  454.                 return false;
  455.             }
  456.             
  457.             var el = event.target;
  458.             if (isClickingLink(event.target)) {
  459.                 if (ytwp.ytapp && ytwp.ytapp.j && ytwp.ytapp.j.ca === 'GIBBERISH') {
  460.                     ytwp.ytapp.j.ca = 'detailpage';
  461.                     ytwp.log('ytwp.ytapp.j.ca: "GIBBERISH" => "detailpage"');
  462.                 }
  463.             }
  464.         },
  465.     };
  466.  
  467.  
  468.     ytwp.pubsubListeners = {
  469.         'init': function() { // Not always called
  470.             ytwp.event.init();
  471.             ytwp.event.onWatchInit();
  472.             ytwp.event.html5PlayerFix();
  473.         },
  474.         'init-watch': function() { // Not always called
  475.             ytwp.event.init();
  476.             ytwp.event.onWatchInit();
  477.             ytwp.event.html5PlayerFix();
  478.         },
  479.         'player-added': function() { // Not always called
  480.             // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  481.             // The init event is when the body element resets all it's classes.
  482.             ytwp.event.init();
  483.             ytwp.event.onWatchInit();
  484.             ytwp.event.html5PlayerFix();
  485.         },
  486.         // 'player-resize': function() {},
  487.         // 'player-playback-start': function() {},
  488.         'appbar-guide-delay-load': function() {
  489.             // Listen to a later event that is always called in case the others are missed.
  490.             ytwp.event.init();
  491.             ytwp.event.onWatchInit();
  492.  
  493.             // Channel -> /watch
  494.             if (ytwp.util.isWatchUrl())
  495.                 ytwp.event.addBodyClass();
  496.         },
  497.         // 'dispose-watch': function() {},
  498.         'dispose': function() {
  499.             ytwp.event.onDispose();
  500.         }
  501.     };
  502.  
  503.     ytwp.registerYoutubeListeners = function() {
  504.         ytwp.registerYoutubePubSubListeners();
  505.     };
  506.  
  507.     ytwp.registerYoutubePubSubListeners = function() {
  508.         // Subscribe
  509.         for (var eventName in ytwp.pubsubListeners) {
  510.             var eventListener = ytwp.pubsubListeners[eventName];
  511.             uw.yt.pubsub.instance_.subscribe(eventName, eventListener);
  512.         }
  513.     };
  514.  
  515.     ytwp.main = function() {
  516.         try {
  517.             ytwp.registerYoutubeListeners();
  518.         } catch(e) {
  519.             ytwp.error("Could not hook yt.pubsub", e);
  520.         }
  521.         ytwp.event.html5PlayerFix();
  522.         ytwp.event.init();
  523.         ytwp.event.onWatchInit();
  524.     };
  525.  
  526.     ytwp.main();
  527.     
  528. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);