Resize YT To Window Size

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

当前为 2015-12-17 提交的版本,查看 最新版本

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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址