☰

Youtube Live Clock

Show present time of the livestream!

As of 19.10.2022. See ბოლო ვერსია.

// ==UserScript==
// @name         Youtube Live Clock
// @namespace    https://greasyfork.org/scripts/453367
// @version      1.0
// @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 checkNode = () => {
    if (document.querySelector('.present-time')) {
      return document.querySelector('.present-time')
    } else {
      let timeDisplay = document.querySelector('.ytp-time-display').childNodes[1]
      let liveClock = document.createElement('span')
      liveClock.setAttribute('class', 'present-time')
      timeDisplay.appendChild(liveClock)
      return document.querySelector('.present-time')
    }
  }
  let updateNewTime = () => {
    let json = JSON.parse(document.querySelector('.ytd-player-microformat-renderer').textContent)
    let startTime = Date.parse(json.publication[0].startDate)
    let endTime = json.publication[0].endDate
    let progressTime = document.querySelector('.ytp-progress-bar').getAttribute('aria-valuenow')

    if (endTime) {
      let presentTime = startTime + progressTime*1000
      let date = new Date(presentTime).toString().split(' ')
      return ` (${date[3]}/${shortenToNum[date[1]]}/${date[2]} ${date[4]})  `
    } else {
      let presentTime = progressTime*1000+57600000
      let date = new Date(presentTime).toString().split(' ')
      return `${date[4]}  `
    }
  }

  let main = () => {
    setTimeout(() => {
      let liveClock = checkNode()
      liveClock.textContent = updateNewTime()

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

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