☰

Resize YT To Window Size

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

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

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