☰

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.4.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. let $ = (element) => document.querySelector(element)
  14. let $$ = (element) => document.querySelectorAll(element)
  15. let twoDigit = (num) => {
  16.   if (String(num).length === 2) return num
  17.   else return '0' + String(num)
  18. }
  19. let formatTime = (time) => {
  20.   let second = time % 60
  21.   let minute = (time - second) % 3600 / 60
  22.   let hour = (time - minute * 60 - second) / 3600
  23.  
  24.   if (time < 3600) return `${minute}:${twoDigit(second)}  `
  25.   else return `${hour}:${twoDigit(minute)}:${twoDigit(second)}  `
  26. }
  27. let getClock = () => {
  28.   let liveClock = $('.present-time')
  29.   if (!liveClock) {
  30.       let timeDisplay = $$('.ytp-time-display')
  31.       let clockElement = document.createElement('span')
  32.       clockElement.setAttribute('class', 'present-time')
  33.       timeDisplay[timeDisplay.length - 1].childNodes[1].appendChild(clockElement)
  34.       liveClock = $('.present-time')
  35.   }
  36.   return liveClock
  37. }
  38. let updateTime = () => {
  39.   let isLive = JSON.parse($('.ytd-player-microformat-renderer').textContent).publication
  40.   if (isLive && !$('.html5-ypc-overlay')) {
  41.       let progressBar = $$('.ytp-progress-bar')
  42.       let progressTime = progressBar[progressBar.length - 1].getAttribute('aria-valuenow')
  43.       if (isLive[0].endDate) {
  44.           let presentTime = new Date(Date.parse(isLive[0].startDate) + progressTime * 1000)
  45.           let date = (presentTime).toString().split(' ')
  46.           return ` (${date[3]}/${twoDigit(presentTime.getMonth() + 1)}/${date[2]} ${date[4]})  `
  47.       } else return formatTime(progressTime)
  48.   } else return ''
  49. }
  50.  
  51. let main = () => {
  52.   if (window.location.href.includes('/watch?v=')) {
  53.     let liveClock = getClock()
  54.     let liveBadge = $('.ytp-live-badge')
  55.     liveBadge.style = 'margin-left: 10px'
  56.     let progressBar = $('.ytp-progress-bar')
  57.     let observer = new MutationObserver(() => { liveClock.textContent = updateTime() })
  58.     observer.observe(progressBar, { attributes: true })
  59.   }
  60. }
  61.  
  62. document.addEventListener('yt-navigate-finish', main)