YouTube ProgressBar Preserver

让你恒常地显示油管上的进度条(显示播放时间比例的红色条)。

当前为 2020-01-31 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube ProgressBar Preserver
  3. // @name:ja YouTube ProgressBar Preserver
  4. // @name:zh-CN YouTube ProgressBar Preserver
  5. // @description It preserves YouTube's progress bar always visible even if the controls are hidden.
  6. // @description:ja YouTubeのプログレスバー(再生時刻の割合を示す赤いバー)を、隠さず常に表示させるようにします。
  7. // @description:zh-CN 让你恒常地显示油管上的进度条(显示播放时间比例的红色条)。
  8. // @namespace knoa.jp
  9. // @include https://www.youtube.com/*
  10. // @version 0.10.1
  11. // @grant none
  12. // ==/UserScript==
  13.  
  14. (function(){
  15. const SCRIPTID = 'YouTubeProgressBarPreserver';
  16. const SCRIPTNAME = 'YouTube ProgressBar Preserver';
  17. const DEBUG = false;/*
  18. [update] 0.10.1
  19. fix for advertisements.
  20.  
  21. [todo]
  22. カスタマイズ(color, height, opacity, 各表示モードでのオンオフ)
  23. うっすら時刻表示オプションほしい?
  24.  
  25. [research]
  26. 広告時のバーがトランジションしない...
  27.  
  28. [memo]
  29. YouTubeによって隠されているときはオリジナルのバーは更新されないので、独自に作るほうがラク。
  30. 0.9完成後、youtube progressbar で検索したところすでに存在していることを発見\(^o^)/
  31. https://addons.mozilla.org/ja/firefox/addon/progress-bar-for-youtube/
  32. カスタマイズできるしロード済みバッファにも対応するが、生放送に対応していない。プログレスが最低0.5秒単位でtransitionもない。
  33. */
  34. if(window === top && console.time) console.time(SCRIPTID);
  35. const INTERVAL = 1000;/*for core.checkUrl*/
  36. const STARTSWITH = [/*for core.checkUrl*/
  37. 'https://www.youtube.com/watch?v=',
  38. ];
  39. const RETRY = 10;
  40. let site = {
  41. targets: {
  42. player: () => $('#movie_player'),
  43. video: () => $('video[src]'),
  44. time: () => $('.ytp-time-display'),
  45. },
  46. is: {
  47. live: (time) => time.classList.contains('ytp-live'),
  48. },
  49. };
  50. let html, elements = {}, timers = {};
  51. let core = {
  52. initialize: function(){
  53. html = document.documentElement;
  54. html.classList.add(SCRIPTID);
  55. core.checkUrl();
  56. core.addStyle();
  57. },
  58. checkUrl: function(){
  59. let previousUrl = '';
  60. timers.checkUrl = setInterval(function(){
  61. if(document.hidden) return;
  62. /* The page is visible, so... */
  63. if(location.href === previousUrl) return;
  64. else previousUrl = location.href;
  65. /* The URL has changed, so... */
  66. if(STARTSWITH.some(url => location.href.startsWith(url)) === false) return;
  67. /* This page should be modified, so... */
  68. core.ready();
  69. }, INTERVAL);
  70. },
  71. ready: function(){
  72. core.getTargets(site.targets, RETRY).then(() => {
  73. log("I'm ready.");
  74. core.appendBar();
  75. });
  76. },
  77. appendBar: function(){
  78. if(elements.bar && elements.bar.isConnected) return;
  79. let bar = elements.bar = createElement(core.html.bar());
  80. let progress = elements.progress = bar.firstElementChild;
  81. elements.player.appendChild(bar);
  82. core.observeTime(elements.time, bar);
  83. core.observeVideo(elements.video, progress);
  84. },
  85. observeTime: function(time, bar){
  86. let detect = function(time, bar){
  87. if(site.is.live(time)) bar.classList.remove('active');
  88. else bar.classList.add('active');
  89. };
  90. detect(time, bar);
  91. let observer = observe(time, function(records){
  92. detect(time, bar);
  93. }, {attributes: true});
  94. },
  95. observeVideo: function(video, progress){
  96. progress.style.transform = 'scaleX(0)';
  97. video.addEventListener('timeupdate', function(e){
  98. progress.style.transform = `scaleX(${video.currentTime / video.duration})`;
  99. });
  100. },
  101. getTargets: function(targets, retry = 0){
  102. const get = function(resolve, reject, retry){
  103. for(let i = 0, keys = Object.keys(targets), key; key = keys[i]; i++){
  104. let selected = targets[key]();
  105. if(selected){
  106. if(selected.length) selected.forEach((s) => s.dataset.selector = key);
  107. else selected.dataset.selector = key;
  108. elements[key] = selected;
  109. }else{
  110. if(--retry < 0) return reject(log(`Not found: ${key}, I give up.`));
  111. log(`Not found: ${key}, retrying... (left ${retry})`);
  112. return setTimeout(get, 1000, resolve, reject, retry);
  113. }
  114. }
  115. resolve();
  116. };
  117. return new Promise(function(resolve, reject){
  118. get(resolve, reject, retry);
  119. });
  120. },
  121. addStyle: function(name = 'style'){
  122. if(core.html[name] === undefined) return;
  123. let style = createElement(core.html[name]());
  124. document.head.appendChild(style);
  125. if(elements[name] && elements[name].isConnected) document.head.removeChild(elements[name]);
  126. elements[name] = style;
  127. },
  128. html: {
  129. bar: () => `<div id="${SCRIPTID}-bar"><div id="${SCRIPTID}-progress"></div></div>`,
  130. style: () => `
  131. <style type="text/css">
  132. #${SCRIPTID}-bar{
  133. --height: 3px;
  134. --background: rgba(255,255,255,.2);
  135. --color: #f00;
  136. --ad-color: #fc0;
  137. --transition-bar: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
  138. --transition-progress: transform .25s linear;
  139. --z-index: 100;
  140. }
  141. #${SCRIPTID}-bar{
  142. width: 100%;
  143. height: var(--height);
  144. background: var(--background);
  145. position: absolute;
  146. bottom: 0;
  147. transition: var(--transition-bar);
  148. opacity: 0;
  149. z-index: var(--z-index);
  150. }
  151. #${SCRIPTID}-progress{
  152. width: 100%;
  153. height: var(--height);
  154. background: var(--color);
  155. transition: var(--transition-progress);
  156. transform-origin: 0 0;
  157. }
  158. .ad-interrupting/*advertisement*/ #${SCRIPTID}-progress{
  159. background: var(--ad-color);
  160. }
  161. .ytp-autohide #${SCRIPTID}-bar.active{
  162. opacity: 1;
  163. }
  164. .ytp-ad-persistent-progress-bar-container/*YouTube offers progress bar only when an ad is showing, but it doesn't have transition animation*/{
  165. display: none
  166. }
  167. </style>
  168. `,
  169. },
  170. };
  171. const setTimeout = window.setTimeout, clearTimeout = window.clearTimeout, setInterval = window.setInterval, clearInterval = window.clearInterval, requestAnimationFrame = window.requestAnimationFrame;
  172. const alert = window.alert, confirm = window.confirm, getComputedStyle = window.getComputedStyle, fetch = window.fetch;
  173. if(!('isConnected' in Node.prototype)) Object.defineProperty(Node.prototype, 'isConnected', {get: function(){return document.contains(this)}});
  174. class Storage{
  175. static key(key){
  176. return (SCRIPTID) ? (SCRIPTID + '-' + key) : key;
  177. }
  178. static save(key, value, expire = null){
  179. key = Storage.key(key);
  180. localStorage[key] = JSON.stringify({
  181. value: value,
  182. saved: Date.now(),
  183. expire: expire,
  184. });
  185. }
  186. static read(key){
  187. key = Storage.key(key);
  188. if(localStorage[key] === undefined) return undefined;
  189. let data = JSON.parse(localStorage[key]);
  190. if(data.value === undefined) return data;
  191. if(data.expire === undefined) return data;
  192. if(data.expire === null) return data.value;
  193. if(data.expire < Date.now()) return localStorage.removeItem(key);
  194. return data.value;
  195. }
  196. static delete(key){
  197. key = Storage.key(key);
  198. delete localStorage.removeItem(key);
  199. }
  200. static saved(key){
  201. key = Storage.key(key);
  202. if(localStorage[key] === undefined) return undefined;
  203. let data = JSON.parse(localStorage[key]);
  204. if(data.saved) return data.saved;
  205. else return undefined;
  206. }
  207. }
  208. const $ = function(s, f){
  209. let target = document.querySelector(s);
  210. if(target === null) return null;
  211. return f ? f(target) : target;
  212. };
  213. const $$ = function(s){return document.querySelectorAll(s)};
  214. const animate = function(callback, ...params){requestAnimationFrame(() => requestAnimationFrame(() => callback(...params)))};
  215. const wait = function(ms){return new Promise((resolve) => setTimeout(resolve, ms))};
  216. const createElement = function(html = '<span></span>'){
  217. let outer = document.createElement('div');
  218. outer.innerHTML = html;
  219. return outer.firstElementChild;
  220. };
  221. const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
  222. let observer = new MutationObserver(callback.bind(element));
  223. observer.observe(element, options);
  224. return observer;
  225. };
  226. const secondsToTime = function(seconds){
  227. let floor = Math.floor, zero = (s) => s.toString().padStart(2, '0');
  228. let h = floor(seconds/3600), m = floor(seconds/60)%60, s = floor(seconds%60);
  229. if(h) return h + '時間' + zero(m) + '分' + zero(s) + '秒';
  230. if(m) return m + '分' + zero(s) + '秒';
  231. if(s) return s + '秒';
  232. };
  233. const timeToSeconds = function(time){
  234. let parts = time.split(':').map(p => parseFloat(p));
  235. switch(parts.length){
  236. case(1): return parts[0];
  237. case(2): return parts[0]*60 + parts[1];
  238. case(3): return parts[0]*60*60 + parts[1]*60 + parts[2];
  239. default: return 0;
  240. }
  241. };
  242. const atLeast = function(min, b){
  243. return Math.max(min, b);
  244. };
  245. const atMost = function(a, max){
  246. return Math.min(a, max);
  247. };
  248. const between = function(min, b, max){
  249. return Math.min(Math.max(min, b), max);
  250. };
  251. const toMetric = function(number, decimal = 1){
  252. switch(true){
  253. case(number < 1e3 ): return (number);
  254. case(number < 1e6 ): return (number/1e3 ).toFixed(decimal) + 'K';
  255. case(number < 1e9 ): return (number/1e6 ).toFixed(decimal) + 'M';
  256. case(number < 1e12): return (number/1e9 ).toFixed(decimal) + 'G';
  257. default: return (number/1e12).toFixed(decimal) + 'T';
  258. }
  259. };
  260. const log = function(){
  261. if(!DEBUG) return;
  262. let l = log.last = log.now || new Date(), n = log.now = new Date();
  263. let error = new Error(), line = log.format.getLine(error), callers = log.format.getCallers(error);
  264. //console.log(error.stack);
  265. console.log(
  266. (SCRIPTID || '') + ':',
  267. /* 00:00:00.000 */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
  268. /* +0.000s */ '+' + ((n-l)/1000).toFixed(3) + 's',
  269. /* :00 */ ':' + line,
  270. /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
  271. /* caller */ (callers[1] || '') + '()',
  272. ...arguments
  273. );
  274. };
  275. log.formats = [{
  276. name: 'Firefox Scratchpad',
  277. detector: /MARKER@Scratchpad/,
  278. getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  279. getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  280. }, {
  281. name: 'Firefox Console',
  282. detector: /MARKER@debugger/,
  283. getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  284. getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  285. }, {
  286. name: 'Firefox Greasemonkey 3',
  287. detector: /\/gm_scripts\//,
  288. getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  289. getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  290. }, {
  291. name: 'Firefox Greasemonkey 4+',
  292. detector: /MARKER@user-script:/,
  293. getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 500,
  294. getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  295. }, {
  296. name: 'Firefox Tampermonkey',
  297. detector: /MARKER@moz-extension:/,
  298. getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 6,
  299. getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  300. }, {
  301. name: 'Chrome Console',
  302. detector: /at MARKER \(<anonymous>/,
  303. getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
  304. getCallers: (e) => e.stack.match(/[^ ]+(?= \(<anonymous>)/gm),
  305. }, {
  306. name: 'Chrome Tampermonkey',
  307. detector: /at MARKER \(chrome-extension:.*?\/userscript.html\?id=/,
  308. getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1] - 6,
  309. getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
  310. }, {
  311. name: 'Chrome Extension',
  312. detector: /at MARKER \(chrome-extension:/,
  313. getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
  314. getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
  315. }, {
  316. name: 'Edge Console',
  317. detector: /at MARKER \(eval/,
  318. getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  319. getCallers: (e) => e.stack.match(/[^ ]+(?= \(eval)/gm),
  320. }, {
  321. name: 'Edge Tampermonkey',
  322. detector: /at MARKER \(Function/,
  323. getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 4,
  324. getCallers: (e) => e.stack.match(/[^ ]+(?= \(Function)/gm),
  325. }, {
  326. name: 'Safari',
  327. detector: /^MARKER$/m,
  328. getLine: (e) => 0,/*e.lineが用意されているが最終呼び出し位置のみ*/
  329. getCallers: (e) => e.stack.split('\n'),
  330. }, {
  331. name: 'Default',
  332. detector: /./,
  333. getLine: (e) => 0,
  334. getCallers: (e) => [],
  335. }];
  336. log.format = log.formats.find(function MARKER(f){
  337. if(!f.detector.test(new Error().stack)) return false;
  338. //console.log('////', f.name, 'wants', 0/*line*/, '\n' + new Error().stack);
  339. return true;
  340. });
  341. const time = function(label){
  342. if(!DEBUG) return;
  343. const BAR = '|', TOTAL = 100;
  344. switch(true){
  345. case(label === undefined):/* time() to output total */
  346. let total = 0;
  347. Object.keys(time.records).forEach((label) => total += time.records[label].total);
  348. Object.keys(time.records).forEach((label) => {
  349. console.log(
  350. BAR.repeat((time.records[label].total / total) * TOTAL),
  351. label + ':',
  352. (time.records[label].total).toFixed(3) + 'ms',
  353. '(' + time.records[label].count + ')',
  354. );
  355. });
  356. time.records = {};
  357. break;
  358. case(!time.records[label]):/* time('label') to create and start the record */
  359. time.records[label] = {count: 0, from: performance.now(), total: 0};
  360. break;
  361. case(time.records[label].from === null):/* time('label') to re-start the lap */
  362. time.records[label].from = performance.now();
  363. break;
  364. case(0 < time.records[label].from):/* time('label') to add lap time to the record */
  365. time.records[label].total += performance.now() - time.records[label].from;
  366. time.records[label].from = null;
  367. time.records[label].count += 1;
  368. break;
  369. }
  370. };
  371. time.records = {};
  372. core.initialize();
  373. if(window === top && console.timeEnd) console.timeEnd(SCRIPTID);
  374. })();

QingJ © 2025

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