☰

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.1
// @description  Show present time of the livestream!
// @author       Derek
// @match        https://www.youtube.com/*
// @grant        none
// @noframes
// ==/UserScript==

(function() {
  'use strict'

  let twoDigit = (num) => {
    if (String(num).length === 2) return num
    else return '0' + String(num)
  }
  let formatTime = (time) => {
    let second = time % 60
    let minute = (time - second) % 3600 / 60
    let hour = (time - minute * 60 - second) / 3600
    let day = (time - hour * 3600 - minute * 60 - second) / 86400

    if (time < 3600) return `${minute}:${twoDigit(second)}  `
    else if (3600 <= time < 86400) return `${hour}:${twoDigit(minute)}:${twoDigit(second)}  `
    else return `${day}:${twoDigit(hour)}:${twoDigit(minute)}:${twoDigit(second)}  `
  }
  let getClock = () => {
    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')
    }
    return liveClock
  }
  let updateTime = () => {
    let isLive = JSON.parse(document.querySelector('.ytd-player-microformat-renderer').textContent).publication
    if (isLive) {
      let progressTime = document.querySelector('.ytp-progress-bar').getAttribute('aria-valuenow')
      if (isLive[0].endDate) {
        let presentTime = new Date(Date.parse(isLive[0].startDate) + progressTime * 1000)
        let date = (presentTime).toString().split(' ')
        return ` (${date[3]}/${twoDigit(presentTime.getMonth() + 1)}/${date[2]} ${date[4]})  `
      } else return formatTime(progressTime)
    } else return ''
  }

  let main = () => {
    setTimeout(() => {
      let liveClock = getClock()
      let progressBar = document.querySelector('.ytp-progress-bar')
      let observer = new MutationObserver(() => { liveClock.textContent = updateTime() })
      observer.observe(progressBar, {attributes: true})
    }, 1000)
  }

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