☰

Youtube Live Clock

show duration for livestreams and present time for archives

当前为 2025-01-07 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name               Youtube Live Clock
  3. // @name:zh-TW         Youtube Live Clock
  4. // @namespace          https://greasyfork.org/scripts/453367
  5. // @version            1.7.0
  6. // @description        show duration for livestreams and present time for archives
  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. const FORMAT = 1
  15. /*
  16.   1: 2022/10/31 06:37:10 (default)
  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.   6: Monday 31 October 2022 06:37:10
  22. */
  23.  
  24. const $ = (element) => document.querySelector(element)
  25. const $$ = (element) => document.querySelectorAll(element)
  26.  
  27. const abbr = {
  28.   week: { Sun: 'Sunday', Mon: 'Monday', Tue: 'Tuesday', Wed: 'Wednesday', Thu: 'Thursday', Fri: 'Friday', Sat: 'Saturday' },
  29.   monthFull: { Jan: 'January', Feb: 'February', Mar: 'March', Apr: 'April', May: 'May', Jun: 'June', Jul: 'July', Aug: 'August', Sep: 'September', Oct: 'October', Nov: 'November', Dec: 'December' },
  30.   month: { Jan: '01', Feb: '02', Mar: '03', Apr: '04', May: '05', Jun: '06', Jul: '07', Aug: '08', Sep: '09', Oct: '10', Nov: '11', Dec: '12' }
  31. }
  32.  
  33. const twoDigit = (num) => num.toString().padStart(2, '0')
  34.  
  35. const timeFormat = (time) => {
  36.   const second = time % 60
  37.   const minute = Math.floor((time / 60) % 60)
  38.   const hour = Math.floor(time / 3600)
  39.   return hour > 0 ? `${hour}:${twoDigit(minute)}:${twoDigit(second)}` : `${minute}:${twoDigit(second)}`
  40. }
  41.  
  42. const dateFormat = (presentTime) => {
  43.   const [week, month, day, year, time] = presentTime.toString().split(' ')
  44.   return {
  45.     1: ` (${year}/${abbr.month[month]}/${day} ${time})`,
  46.     2: ` (${abbr.month[month]}/${day}/${year} ${time})`,
  47.     3: ` (${day}/${abbr.month[month]}/${year} ${time})`,
  48.     4: ` (${week} ${day}/${abbr.month[month]}/${year} ${time})`,
  49.     5: ` (${abbr.week[week]} ${day}/${abbr.month[month]}/${year} ${time})`,
  50.     6: ` (${abbr.week[week]} ${day} ${abbr.monthFull[month]} ${year} ${time})`
  51.   } [FORMAT]
  52. }
  53.  
  54. let liveBadge, timeDisplay, progressBar, videoId, observer
  55. let videoData = null
  56.  
  57. const waitElements = async () => {
  58.  
  59.   return new Promise((resolve) => {
  60.     const observer = new MutationObserver(() => {
  61.       liveBadge = $('.ytp-chrome-bottom .ytp-live-badge')
  62.       timeDisplay = $('.ytp-chrome-bottom .ytp-time-display')
  63.       progressBar = $('.ytp-chrome-bottom .ytp-progress-bar')
  64.  
  65.       if (liveBadge && timeDisplay && progressBar) {
  66.         if (videoData !== $('#microformat script')) {
  67.           videoData = $('#microformat script')
  68.           observer.disconnect()
  69.           resolve()
  70.         }
  71.       }
  72.     })
  73.     observer.observe(document.body, { attributes: false, childList: true, subtree: true })
  74.   })
  75. }
  76.  
  77. const getLiveClock = () => {
  78.   let clockElement = $('#present-time')
  79.   if (!clockElement) {
  80.     clockElement = document.createElement('span')
  81.     clockElement.setAttribute('id', 'present-time')
  82.     timeDisplay.insertBefore(clockElement, timeDisplay.childNodes[1])
  83.   } else clockElement.textContent = ''
  84.   return clockElement
  85. }
  86.  
  87. const updateLiveTime = () => {
  88.   let liveData = JSON.parse(videoData.textContent)
  89.   if (!liveData.publication) return ''
  90.  
  91.   liveData = liveData.publication[0]
  92.   const progressTime = progressBar.getAttribute('aria-valuenow')
  93.   return liveData.endDate ? dateFormat(new Date(Date.parse(liveData.startDate) + progressTime * 1000)) : timeFormat(progressTime)
  94. }
  95.  
  96. const main = async (vid) => {
  97.   if (videoId === vid) return
  98.   videoId = vid
  99.  
  100.   await waitElements()
  101.   liveBadge.style = 'margin-left: 10px'
  102.   let liveClock = getLiveClock()
  103.   liveClock.textContent = updateLiveTime()
  104.  
  105.   if (!observer) {
  106.     observer = new MutationObserver(() => { liveClock.textContent = updateLiveTime() })
  107.     observer.observe(progressBar, { characterData: true, attributeFilter: ['aria-valuenow'] })
  108.   }
  109. }
  110.  
  111. document.addEventListener('yt-navigate-finish', (event) => {
  112.   const url = event.detail.endpoint.commandMetadata.webCommandMetadata.url
  113.   if (url.startsWith('/watch?v=') || url.startsWith('/live/')) main(url.match(/[A-z0-9_-]{11}/)[0])
  114. })