Greasy Fork 还支持 简体中文。

Resize YT To Window Size

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

目前為 2016-07-07 提交的版本,檢視 最新版本

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