YouTube Speed-Adjusted Time Display

Shows speed-adjusted time for YouTube videos

当前为 2024-11-18 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Speed-Adjusted Time Display
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.1
  5. // @description Shows speed-adjusted time for YouTube videos
  6. // @author kavinned
  7. // @match https://www.youtube.com/*
  8. // @grant none
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
  10. // @license MIT
  11. // ==/UserScript==
  12. (function() {
  13. 'use strict';
  14. function updateTimeDisplay() {
  15. const video = document.querySelector('video');
  16. if (!video) return;
  17. const currentTimeDisplay = document.querySelector('.ytp-time-current');
  18. const durationDisplay = document.querySelector('.ytp-time-duration');
  19. const remainingTimeDisplay = document.querySelector('.speed-adjusted-time');
  20. if (!currentTimeDisplay || !durationDisplay || !remainingTimeDisplay) return;
  21.  
  22. const currentTime = video.currentTime;
  23. const duration = video.duration;
  24. const playbackRate = video.playbackRate;
  25.  
  26. const adjustedCurrentTime = currentTime / playbackRate;
  27. const adjustedDuration = duration / playbackRate;
  28. const remainingTime = adjustedDuration - adjustedCurrentTime;
  29.  
  30. function formatTime(seconds) {
  31. const hours = Math.floor(seconds / 3600);
  32. const minutes = Math.floor((seconds % 3600) / 60);
  33. const secs = Math.floor(seconds % 60);
  34. if (hours > 0) {
  35. return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  36. } else {
  37. return `${minutes}:${secs.toString().padStart(2, '0')}`;
  38. }
  39. }
  40.  
  41. currentTimeDisplay.textContent = formatTime(adjustedCurrentTime);
  42. durationDisplay.textContent = formatTime(adjustedDuration);
  43. remainingTimeDisplay.textContent = `(-${formatTime(remainingTime)})`;
  44. }
  45.  
  46. function createSpeedTimeDisplay() {
  47. const timeContainer = document.querySelector('.ytp-time-wrapper');
  48. if (!timeContainer || document.querySelector('.speed-adjusted-time')) return;
  49.  
  50. const speedTimeDiv = document.createElement('div');
  51. speedTimeDiv.className = 'speed-adjusted-time ytp-time-display';
  52. speedTimeDiv.style.color = 'inherit';
  53. speedTimeDiv.style.fontSize = 'inherit';
  54.  
  55. timeContainer.append(speedTimeDiv);
  56. }
  57.  
  58. const observer = new MutationObserver((mutations) => {
  59. if (document.querySelector('video')) {
  60. createSpeedTimeDisplay();
  61. updateTimeDisplay();
  62. }
  63. });
  64.  
  65. observer.observe(document.body, {
  66. childList: true,
  67. subtree: true
  68. });
  69.  
  70. setInterval(updateTimeDisplay, 1000);
  71. document.addEventListener('ratechange', updateTimeDisplay, true);
  72. })();