YouTube ProgressBar Preserver

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

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

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

QingJ © 2025

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