☰

Resize YT To Window Size

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

当前为 2014-07-13 提交的版本，查看 最新版本。

  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            http://youtube.com/favicon.ico
  6. // @homepageURL     https://github.com/Zren/ResizeYoutubePlayerToWindowSize/
  7. // @namespace       http://xshade.ca
  8. // @version         1.39
  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/httpxshade.ca/Resize_YT_To_Window_Size
  18. // Userscripts.org: http://userscripts.org:8080/scripts/show/153699
  19.  
  20. (function (window) {
  21.     "use strict";
  22.  
  23.     //--- Imported Globals
  24.     var yt = window.yt;
  25.  
  26.     //--- Utils
  27.     function isStringType(obj) { return typeof obj === 'string'; }
  28.     function isArrayType(obj) { return obj instanceof Array; }
  29.     function isObjectType(obj) { return typeof obj === 'object'; }
  30.     function isUndefined(obj) { return typeof obj === 'undefined'; }
  31.     function buildVenderPropertyDict(propertyNames, value) {
  32.         var d = {};
  33.         for (var i in propertyNames)
  34.             d[propertyNames[i]] = value;
  35.         return d;
  36.     }
  37.  
  38.     //--- jQuery
  39.     // Based on jQuery
  40.     // https://github.com/jquery/jquery/blob/master/src/manipulation.js
  41.     var core_rnotwhite = /\S+/g;
  42.     var rclass = /[\t\r\n\f]/g;
  43.     var rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;
  44.     
  45.     var jQuery = {
  46.         trim: function( text ) {
  47.             return (text || "").replace( rtrim, "" );
  48.         },
  49.         addClass: function( elem, value ) {
  50.             var classes, cur, clazz, j,
  51.                 proceed = typeof value === "string" && value;
  52.     
  53.             if ( proceed ) {
  54.                 // The disjunction here is for better compressibility (see removeClass)
  55.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  56.     
  57.                 cur = elem.nodeType === 1 && ( elem.className ?
  58.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  59.                     " "
  60.                 );
  61.     
  62.                 if ( cur ) {
  63.                     j = 0;
  64.                     while ( (clazz = classes[j++]) ) {
  65.                         if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
  66.                             cur += clazz + " ";
  67.                         }
  68.                     }
  69.                     elem.className = jQuery.trim( cur );
  70.                 }
  71.             }
  72.         },
  73.         removeClass: function( elem, value ) {
  74.             var classes, cur, clazz, j,
  75.                 proceed = arguments.length === 0 || typeof value === "string" && value;
  76.     
  77.             if ( proceed ) {
  78.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  79.     
  80.                 // This expression is here for better compressibility (see addClass)
  81.                 cur = elem.nodeType === 1 && ( elem.className ?
  82.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  83.                     ""
  84.                 );
  85.     
  86.                 if ( cur ) {
  87.                     j = 0;
  88.                     while ( (clazz = classes[j++]) ) {
  89.                         // Remove *all* instances
  90.                         while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
  91.                             cur = cur.replace( " " + clazz + " ", " " );
  92.                         }
  93.                     }
  94.                     elem.className = value ? jQuery.trim( cur ) : "";
  95.                 }
  96.             }
  97.         }
  98.     };
  99.  
  100.     
  101.     //--- Stylesheet
  102.     var JSStyleSheet = function(id) {
  103.         this.id = id;
  104.         this.stylesheet = '';
  105.     };
  106.  
  107.     JSStyleSheet.prototype.buildRule = function(selector, styles) {
  108.         var s = "";
  109.         for (var key in styles) {
  110.             s += "\t" + key + ": " + styles[key] + ";\n";
  111.         }
  112.         return selector + " {\n" + s + "}\n";
  113.     };
  114.  
  115.     JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  116.         if (isArrayType(selector))
  117.             selector = selector.join(',\n');
  118.         var newStyle;
  119.         if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  120.             // appendRule('#blarg', 'display', 'none');
  121.             var d = {};
  122.             d[k] = v;
  123.             newStyle = this.buildRule(selector, d);
  124.         } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  125.             // appendRule('#blarg', {'display': 'none'});
  126.             newStyle = this.buildRule(selector, k);
  127.         } else {
  128.             // Invalid Arguments
  129.             console.log('Illegal arguments', arguments);
  130.             return;
  131.         }
  132.         
  133.         this.stylesheet += newStyle;
  134.     };
  135.  
  136.     JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  137.         var styleElement = document.getElementById(injectedStyleId);
  138.         if (!styleElement) {
  139.             styleElement = document.createElement('style');
  140.             styleElement.type = 'text/css';
  141.             styleElement.id = injectedStyleId;
  142.             document.getElementsByTagName('head')[0].appendChild(styleElement);
  143.         }
  144.         styleElement.appendChild(document.createTextNode(stylesheet));
  145.     };
  146.  
  147.     JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  148.         JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  149.     };
  150.  
  151.     //--- Constants
  152.     var scriptShortName = 'ytwp'; // YT Window Player
  153.     var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  154.     var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  155.     var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  156.     var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  157.     var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  158.     
  159.     var videoContainerId = 'player';
  160.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  161.     
  162.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  163.     
  164.     //--- YTWP
  165.     var ytwp = window.ytwp = {
  166.         scriptShortName: scriptShortName, // YT Window Player
  167.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  168.         log: function() { return this.log_(console.log, arguments); },
  169.         error: function() { return this.log_(console.error, arguments); },
  170.  
  171.         initialized: false,
  172.         pageReady: false,
  173.         watchPage: false,
  174.     };
  175.  
  176.     ytwp.util = {
  177.         isWatchUrl: function (url) {
  178.             if (!url)
  179.                 url = window.location.href;
  180.             return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  181.         }
  182.     };
  183.  
  184.     ytwp.event = {
  185.         init: function() {
  186.             ytwp.log('init');
  187.             if (ytwp.initialized) return;
  188.  
  189.             ytwp.isWatchPage = ytwp.util.isWatchUrl();
  190.             if (!ytwp.isWatchPage) return;
  191.  
  192.             ytwp.event.initStyle();
  193.             ytwp.event.initScroller();
  194.             ytwp.initialized = true;
  195.             ytwp.pageReady = false;
  196.         },
  197.         initScroller: function() {
  198.             // Register listener & Call it now.
  199.             unsafeWindow.addEventListener('scroll', ytwp.event.onScroll, false);
  200.             unsafeWindow.addEventListener('resize', ytwp.event.onScroll, false);
  201.             ytwp.event.onScroll();
  202.         },
  203.         onScroll: function() {
  204.             var viewportHeight = document.documentElement.clientHeight;
  205.         
  206.             // topOfPageClassId
  207.             if (unsafeWindow.scrollY == 0) {
  208.                 jQuery.addClass(document.body, topOfPageClassId);
  209.             } else {
  210.                 jQuery.removeClass(document.body, topOfPageClassId);
  211.             }
  212.  
  213.             // viewingVideoClassId
  214.             if (unsafeWindow.scrollY <= viewportHeight) {
  215.                 jQuery.addClass(document.body, viewingVideoClassId);
  216.             } else {
  217.                 jQuery.removeClass(document.body, viewingVideoClassId);
  218.             }
  219.         },
  220.         initStyle: function() {
  221.             ytwp.log('initStyle');
  222.             ytwp.style = new JSStyleSheet(scriptStyleId);
  223.             ytwp.event.buildStylesheet();
  224.             ytwp.style.injectIntoHeader();
  225.         },
  226.         buildStylesheet: function() {
  227.             ytwp.log('buildStylesheet');
  228.             //--- Video Player
  229.         
  230.             //
  231.             var d;
  232.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  233.             d['padding'] = '0 !important';
  234.             d['margin'] = '0 !important';
  235.             ytwp.style.appendRule([
  236.                 scriptBodyClassSelector + ' #player',
  237.                 scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  238.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  239.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  240.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  241.             ], d);
  242.             //
  243.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  244.  
  245.             // Bugfix for Firefox
  246.             // Parts of the header (search box) are hidden under the player.
  247.             // Firefox doesn't seem to be using the fixed header+guide yet.
  248.             d['float'] = 'initial';
  249.  
  250.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  251.  
  252.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  253.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  254.             // Also, Youtube Center resizes #player at element level.
  255.             ytwp.style.appendRule(
  256.                 [
  257.                     scriptBodyClassSelector + ' #player',
  258.                     scriptBodyClassSelector + ' #movie_player',
  259.                     scriptBodyClassSelector + ' #player-mole-container',
  260.                 ],
  261.                 {
  262.                     'width': '100% !important',
  263.                     'height': '100% !important',
  264.                     'min-width': '100% !important',
  265.                     'max-width': '100% !important',
  266.                     'min-height': '100% !important',
  267.                     'max-height': '100% !important'
  268.                 }
  269.             );
  270.  
  271.             // Resize #player-unavailable, #player-api
  272.             // Using min/max width/height will keep 
  273.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  274.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  275.             
  276.                 
  277.             //--- Sidebar
  278.             
  279.             // Remove the transition delay as you can see it moving on page load.
  280.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  281.             d['margin-top'] = '0 !important';
  282.             d['top'] = '0 !important';
  283.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  284.  
  285.             ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  286.             
  287.             //--- Absolutely position the fixed header.
  288.             // Masthead
  289.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  290.                 'position': 'absolute',
  291.                 'top': '100% !important'
  292.             });
  293.             
  294.             // Guide
  295.             // When watching the video, we need to line it up with the masthead.
  296.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  297.                 'display': 'initial',
  298.                 'position': 'absolute',
  299.                 'top': '100% !important' // Masthead height
  300.             });
  301.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  302.                 'display': 'initial',
  303.                 'margin': '0',
  304.                 'position': 'initial'
  305.             });
  306.  
  307.             //---
  308.             // Hide Scrollbars
  309.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  310.             
  311.  
  312.             //--- Fix Other Possible Style Issues
  313.  
  314.             //--- Whitespace Leftover From Moving The Video
  315.             ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  316.             ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  317.             
  318.             //--- Playlist Bar
  319.             //ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', "margin", "-15px -10px 20px -10px");
  320.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-left', 'width', '640px !important'); // Same width as .watch-content
  321.             ytwp.style.appendRule([
  322.                 scriptBodyClassSelector + ' .playlist',
  323.                 scriptBodyClassSelector + ' .playlist .watch7-playlist-bar',
  324.             ], 'max-width', '1040px'); // Same width as .watch-content (640px) + .watch-sidebar (300-400px).
  325.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  326.                 "margin-top": "-15px",
  327.                 "height": "287px !important", // 65 (playlist tile) * 4 + 27 (trim on bottom)
  328.                 "margin-bottom": "15px"
  329.             });
  330.             ytwp.style.appendRule([
  331.                 scriptBodyClassSelector + '.cardified-page #watch7-playlist-tray-container + #watch7-sidebar-contents', // Pre Oct 26
  332.                 scriptBodyClassSelector + '.cardified-page #watch-appbar-playlist + #watch7-sidebar-contents', // Post Oct 26
  333.             ], 'padding-top', '15px');
  334.             
  335.             // YT Center
  336.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', 'margin-bottom', '0 !important');
  337.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  338.                 'left': 'initial !important',
  339.                 'width': 'initial !important'
  340.             });
  341.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-right', 'width', '363px !important');
  342.         },
  343.         onWatchInit: function() {
  344.             ytwp.log('onWatchInit');
  345.             if (!ytwp.initialized) return;
  346.             if (ytwp.pageReady) return;
  347.  
  348.             ytwp.event.moveVideoContainer();
  349.             ytwp.event.movePlaylist();
  350.             ytwp.event.addBodyClass();
  351.             ytwp.pageReady = true;
  352.         },
  353.         onWatchDispose: function() {
  354.             ytwp.log('onWatchDispose');
  355.             if (ytwp.isWatchPage) {
  356.                 if (ytwp.util.isWatchUrl()) {
  357.                     ytwp.event.onWatchDisposeToWatch();
  358.                 } else {
  359.                     ytwp.event.onWatchDisposeToElsewhere();
  360.                 }
  361.             }
  362.         },
  363.         onDispose: function() {
  364.             ytwp.initialized = false;
  365.             ytwp.pageReady = false;
  366.             ytwp.isWatchPage = false;
  367.         },
  368.         onWatchDisposeToWatch: function() {
  369.             ytwp.log('onWatchDisposeToWatch');
  370.             
  371.         },
  372.         onWatchDisposeToElsewhere: function() {
  373.             ytwp.log('onWatchDisposeToElsewhere');
  374.             // Delete the Video player (as it's not where it normally is).
  375.             // var videoContainer = document.getElementById(videoContainerId);
  376.             // if (videoContainer)
  377.             //     videoContainer.remove();
  378.         },
  379.         moveVideoContainer: function() {
  380.             // https://developers.google.com/youtube/js_api_reference#getPlayerState
  381.             var PLAYING = 1;
  382.             var BUFFERING = 3;
  383.             var autoPlay = false;
  384.             try {
  385.                 var playerState = document.getElementById('movie_player').getPlayerState();
  386.                 autoPlay = playerState == PLAYING || playerState == BUFFERING;
  387.             } catch (e) {}
  388.  
  389.             ytwp.log('moveVideoContainer');
  390.             var videoContainer = document.getElementById(videoContainerId);
  391.             var body = document.body;
  392.             body.insertBefore(videoContainer, body.firstChild);
  393.  
  394.             // Moving the player seems to pause the video for some reason.
  395.             
  396.             try {
  397.                 if (autoPlay) {
  398.                     document.getElementById('movie_player').playVideo();
  399.                     ytwp.log('autoplaying');
  400.                 }
  401.             } catch(e) {
  402.                 // Videos in a playlist will cause this error, but will play fine.
  403.                 //ytwp.error('Error calling playVideo(). Might not autoplay video.');
  404.             }
  405.         },
  406.         removeVideoContainer: function() {
  407.             ytwp.log('removeVideoContainer');
  408.             var videoContainer = document.getElementById(videoContainerId);
  409.             if (videoContainer)
  410.                 videoContainer.parentNode.removeChild(videoContainer);
  411.         },
  412.         movePlaylist: function() {
  413.             // --- Old Playlist bar (still in firefox).
  414.  
  415.             // Move the bar to the top of the main container.
  416.             var mainContainer = document.getElementById('watch7-main-container');
  417.             var bar = document.getElementById('playlist');
  418.             if (mainContainer && bar) {
  419.                 mainContainer.insertBefore(bar, mainContainer.firstChild);
  420.                 ytwp.log('Moved #playlist');
  421.             }
  422.             
  423.             // Move the tray to inside the sidebar
  424.             var tray = document.getElementById('watch7-playlist-tray-container');
  425.             var sidebar = document.getElementById('watch7-sidebar');
  426.             if (tray && sidebar) {
  427.                 sidebar.insertBefore(tray, sidebar.firstChild);
  428.                 ytwp.log('Moved #watch7-playlist-tray-container');
  429.             }
  430.         },
  431.         addBodyClass: function() {
  432.             // Insert CSS Into the body so people can style around the effects of this script.
  433.             jQuery.addClass(document.body, scriptBodyClassId);
  434.             ytwp.log('Applied ' + scriptBodyClassSelector);
  435.         },
  436.         html5PlayerSeekFix: function() {
  437.             var videoContainer = document.getElementById(videoContainerId);
  438.             if (videoContainer) {
  439.                 var watchClasses = [
  440.                     'watch-small',
  441.                     'watch-medium',
  442.                     'watch-medium-540',
  443.                     'watch-large'
  444.                 ];
  445.                 for (var i = watchClasses.length - 1; i >= 0; i--) {
  446.                     jQuery.removeClass(videoContainer, watchClasses[i]);
  447.                 }
  448.             }
  449.         }
  450.     };
  451.     
  452.  
  453.     ytwp.pubsubListeners = {
  454.         'init': function() { // Not always called
  455.             ytwp.event.init();
  456.             ytwp.event.onWatchInit();
  457.         },
  458.         'init-watch': function() { // Not always called
  459.             ytwp.event.init();
  460.             ytwp.event.onWatchInit();
  461.         },
  462.         'player-added': function() { // Not always called
  463.             // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  464.             // The init event is when the body element resets all it's classes.
  465.             ytwp.event.init();
  466.             ytwp.event.onWatchInit();
  467.             ytwp.event.html5PlayerSeekFix();
  468.         },
  469.         'player-resize': function() {
  470.             ytwp.event.html5PlayerSeekFix();
  471.         },
  472.         'player-playback-start': function() {
  473.             ytwp.event.html5PlayerSeekFix();
  474.         },
  475.         'appbar-guide-delay-load': function() {
  476.             // Listen to a later event that is always called in case the others are missed.
  477.             ytwp.event.init();
  478.             ytwp.event.onWatchInit();
  479.             
  480.             // Channel -> /watch
  481.             if (ytwp.util.isWatchUrl())
  482.                 ytwp.event.addBodyClass();
  483.         },
  484.         'dispose-watch': function() {
  485.             ytwp.event.onWatchDispose();
  486.         },
  487.         'dispose': function() {
  488.             ytwp.event.onDispose();
  489.         }
  490.     };
  491.  
  492.     ytwp.initLogging = function() {
  493.         
  494.     };
  495.  
  496.     ytwp.registerYoutubeListeners = function() {
  497.         // ytwp.registerYoutubePlayerApiListeners();
  498.         ytwp.registerYoutubePubSubListeners();
  499.     };
  500.  
  501.     ytwp.registerYoutubePlayerApiListeners = function() {
  502.         var onYouTubePlayerReady_old = onYouTubePlayerReady;
  503.         onYouTubePlayerReady = function() {
  504.             onYouTubePlayerReady_old.apply(this, arguments);
  505.         };
  506.     };
  507.  
  508.     ytwp.registerYoutubePubSubListeners = function() {
  509.         // Debugging Youtubes Events
  510.         // var yt_pubsub_publish = yt.pubsub.instance_.publish;
  511.         // yt.pubsub.instance_.publish = function(){
  512.         //     // ytwp.log(arguments);
  513.         //     ytwp.log('[pubsub]', arguments[0]);
  514.         //     yt_pubsub_publish.apply(this, arguments);
  515.         // };
  516.  
  517.         // Subscribe
  518.         for (var eventName in ytwp.pubsubListeners) {
  519.             var eventListener = ytwp.pubsubListeners[eventName];
  520.             yt.pubsub.instance_.subscribe(eventName, eventListener);
  521.         }
  522.     };
  523.  
  524.     ytwp.main = function() {
  525.         ytwp.initLogging();
  526.         try {
  527.             ytwp.registerYoutubeListeners();
  528.         } catch(e) {
  529.             ytwp.error("Could not hook yt.pubsub");
  530.         }
  531.     };
  532.  
  533.     ytwp.main();
  534. })(unsafeWindow);