Youtube Live Clock

show present time of the livestream

当前为 2022-12-05 提交的版本,查看 最新版本

  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.2
  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: { Sun: 'Sunday', Mon: 'Monday', Tue: 'Tuesday', Wed: 'Wednesday', Thu: 'Thursday', Fri: 'Friday', Sat: 'Saturday' },
  27. month: { Jan: 'January', Feb: 'February', Mar: 'March', Apr: 'April', May: 'May', Jun: 'June', Jul: 'July', Aug: 'August', Sep: 'September', Oct: 'October', Nov: 'November', Dec: 'December' }
  28. }
  29. let twoDigit = (num) => {
  30. if (String(num).length === 2) return String(num)
  31. else return '0' + String(num)
  32. }
  33. let formatTime = (time) => {
  34. let second = time % 60
  35. let minute = (time - second) % 3600 / 60
  36. let hour = (time - minute * 60 - second) / 3600
  37. if (time < 3600) return `${minute}:${twoDigit(second)}`
  38. else return `${hour}:${twoDigit(minute)}:${twoDigit(second)}`
  39. }
  40. let dateFormat = (presentTime) => {
  41. let date = (presentTime).toString().split(' ')
  42. let year = date[3], month = twoDigit(presentTime.getMonth() + 1), day = date[2], week = date[0], time = date[4]
  43. switch (FORMAT) {
  44. case 1: return ` (${year}/${month}/${day} ${time})`
  45. case 2: return ` (${month}/${day}/${year} ${time})`
  46. case 3: return ` (${day}/${month}/${year} ${time})`
  47. case 4: return ` (${week} ${day}/${month}/${year} ${time})`
  48. case 5: return ` (${abbr.week[week]} ${day}/${month}/${year} ${time})`
  49. }
  50. }
  51. let getClock = () => {
  52. let liveClock = $('.present-time')
  53. if (!liveClock) {
  54. let timeDisplay = $$('.ytp-time-display')
  55. let clockElement = document.createElement('span')
  56. clockElement.setAttribute('class', 'present-time')
  57. timeDisplay[timeDisplay.length - 1].childNodes[1].appendChild(clockElement)
  58. liveClock = $('.present-time')
  59. }
  60. return liveClock
  61. }
  62. let updateTime = () => {
  63. try {
  64. let liveData = JSON.parse($('.ytd-player-microformat-renderer').textContent).publication
  65. if (liveData && !$('.html5-ypc-overlay')) {
  66. let progressBar = $$('.ytp-progress-bar')
  67. let progressTime = progressBar[progressBar.length - 1].getAttribute('aria-valuenow')
  68. if (liveData[0].endDate) {
  69. let presentTime = new Date(Date.parse(liveData[0].startDate) + progressTime * 1000)
  70. return dateFormat(presentTime)
  71. } else return formatTime(progressTime)
  72. } else return ''
  73. } catch { console.log('Youtube Live Clock: can\'t get liveData') }
  74. }
  75.  
  76. let main = () => {
  77. if (window.location.href.includes('/watch?v=')) {
  78. $('.ytp-live-badge').style = 'margin-left: 10px'
  79. let observer = new MutationObserver(() => { getClock().textContent = updateTime() })
  80. observer.observe($('.ytp-progress-bar'), { attributes: true })
  81. }
  82. }
  83.  
  84. document.addEventListener('yt-navigate-finish', main)