Youtube Live Clock

show present time of the livestream

当前为 2022-11-03 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube Live Clock
  3. // @name:zh-TW Youtube Live Clock
  4. // @namespace https://greasyfork.org/scripts/453367
  5. // @version 1.5.1
  6. // @description show present time of the livestream
  7. // @description:zh-TW 顯示直播當下的時間
  8. // @author Derek
  9. // @match *://www.youtube.com/*
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. //you can choose your ideal date format by changing the FORMAT's value below
  14. let FORMAT = 1
  15. /*
  16. 1: 2022/10/31 06:37:10
  17. 2: 10/31/2022 06:37:10
  18. 3: 31/10/2022 06:37:10
  19. 4: Mon 31/10/2022 06:37:10
  20. 5: Monday 31/10/2022 06:37:10
  21. */
  22.  
  23. let $ = (element) => document.querySelector(element)
  24. let $$ = (element) => document.querySelectorAll(element)
  25. let abbr = {
  26. week: {
  27. Sun: 'Sunday',
  28. Mon: 'Monday',
  29. Tue: 'Tuesday',
  30. Wed: 'Wednesday',
  31. Thu: 'Thursday',
  32. Fri: 'Friday',
  33. Sat: 'Saturday'
  34. }
  35. }
  36. let twoDigit = (num) => {
  37. if (String(num).length === 2) return num
  38. else return '0' + String(num)
  39. }
  40. let formatTime = (time) => {
  41. let second = time % 60
  42. let minute = (time - second) % 3600 / 60
  43. let hour = (time - minute * 60 - second) / 3600
  44.  
  45. if (time < 3600) return `${minute}:${twoDigit(second)} `
  46. else return `${hour}:${twoDigit(minute)}:${twoDigit(second)} `
  47. }
  48. let dateFormat = (presentTime) => {
  49. let date = (presentTime).toString().split(' ')
  50. let year = date[3], month = twoDigit(presentTime.getMonth() + 1), day = date[2], week = date[0], time = date[4]
  51. if (FORMAT === 1) return ` (${year}/${twoDigit(presentTime.getMonth() + 1)}/${day} ${time}) `
  52. else if (FORMAT === 2) return ` (${month}/${day}/${year} ${time}) `
  53. else if (FORMAT === 3) return ` (${day}/${month}/${year} ${time}) `
  54. else if (FORMAT === 4) return ` (${week} ${day}/${month}/${year} ${time}) `
  55. else if (FORMAT === 5) return ` (${abbr.week[week]} ${day}/${month}/${year} ${time}) `
  56. }
  57. let getClock = () => {
  58. let liveClock = $('.present-time')
  59. if (!liveClock) {
  60. let timeDisplay = $$('.ytp-time-display')
  61. let clockElement = document.createElement('span')
  62. clockElement.setAttribute('class', 'present-time')
  63. timeDisplay[timeDisplay.length - 1].childNodes[1].appendChild(clockElement)
  64. liveClock = $('.present-time')
  65. }
  66. return liveClock
  67. }
  68. let updateTime = () => {
  69. let isLive = JSON.parse($('.ytd-player-microformat-renderer').textContent).publication
  70. if (isLive && !$('.html5-ypc-overlay')) {
  71. let progressBar = $$('.ytp-progress-bar')
  72. let progressTime = progressBar[progressBar.length - 1].getAttribute('aria-valuenow')
  73. if (isLive[0].endDate) {
  74. let presentTime = new Date(Date.parse(isLive[0].startDate) + progressTime * 1000)
  75. return dateFormat(presentTime)
  76. } else return formatTime(progressTime)
  77. } else return ''
  78. }
  79.  
  80. let main = () => {
  81. if (window.location.href.includes('/watch?v=')) {
  82. let liveClock = getClock()
  83. let liveBadge = $('.ytp-live-badge')
  84. liveBadge.style = 'margin-left: 10px'
  85. let progressBar = $('.ytp-progress-bar')
  86. let observer = new MutationObserver(() => { liveClock.textContent = updateTime() })
  87. observer.observe(progressBar, { attributes: true })
  88. }
  89. }
  90.  
  91. document.addEventListener('yt-navigate-finish', main)