☰

Youtube Live Clock

Show present time of the livestream!

当前为 2022-10-20 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Youtube Live Clock
// @namespace    https://greasyfork.org/scripts/453367
// @version      1.3
// @description  Show present time of the livestream!
// @author       Derek
// @match        https://www.youtube.com/*
// @grant        none
// @noframes
// ==/UserScript==

(function() {
  'use strict'

  let shortenToNum = {
    'Jan': '01', 'Feb': '02', 'Mar': '03', 'Apr': '04', 'May': '05', 'Jun': '06',
    'Jul': '07', 'Aug': '08', 'Sep': '09', 'Oct': '10', 'Nov': '11', 'Dec': '12'
  }

  let main = () => {
    setTimeout(() => {
      let liveClock = document.querySelector('.present-time')
      if (!liveClock) {
        let timeDisplay = document.querySelector('.ytp-time-display').childNodes[1]
        let clockElement = document.createElement('span')
        clockElement.setAttribute('class', 'present-time')
        timeDisplay.appendChild(clockElement)
        liveClock = document.querySelector('.present-time')
      }

      let progressBar = document.querySelector('.ytp-progress-bar')
      let observer = new MutationObserver(() => {
        let isLive = JSON.parse(document.querySelector('.ytd-player-microformat-renderer').textContent).publication
        let progressTime = document.querySelector('.ytp-progress-bar').getAttribute('aria-valuenow')

        if (isLive) {
          if (isLive[0].endDate) {
            let presentTime = new Date(Date.parse(isLive[0].startDate) + progressTime * 1000)
            let date = (presentTime).toString().split(' ')
            liveClock.textContent = ` (${date[3]}/${shortenToNum[date[1]]}/${date[2]} ${date[4]})  `
          } else {
            let second = progressTime % 60
            let minute = (progressTime - second) % 3600 / 60
            let hour = (progressTime - minute * 60 - second) / 3600
            liveClock.textContent = `${hour}:${minute}:${second}  `
          }
        } else liveClock.textContent = ''
      })
      observer.observe(progressBar, {attributes: true})
    }, 1000)
  }

  document.addEventListener('yt-navigate-finish', main)
})();