YouTube Live DateTime Tooltip

Make a tooltip to show the actual date and time for livestream

// ==UserScript==
// @name        YouTube Live DateTime Tooltip
// @namespace   UserScript
// @match       https://www.youtube.com/*
// @version     0.1.5
// @license     MIT
// @author      CY Fung
// @run-at      document-start
// @grant       none
// @unwrap
// @inject-into page
// @description Make a tooltip to show the actual date and time for livestream
// ==/UserScript==

((__CONTEXT__) => {

  const { Promise, requestAnimationFrame } = __CONTEXT__;

  const isPassiveArgSupport = (typeof IntersectionObserver === 'function');
  const bubblePassive = isPassiveArgSupport ? { capture: false, passive: true } : false;
  const capturePassive = isPassiveArgSupport ? { capture: true, passive: true } : true;

  const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);

  let pageFetchedDataLocal = null;
  document.addEventListener('yt-page-data-fetched', (evt) => {
    pageFetchedDataLocal = evt.detail;


  }, bubblePassive);

  function getFormatDates() {

    if (!pageFetchedDataLocal) return null;

    const formatDates = {}
    try {
      formatDates.publishDate = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.publishDate
    } catch (e) { }
    // 2022-12-30

    try {
      formatDates.uploadDate = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.uploadDate
    } catch (e) { }
    // 2022-12-30

    try {
      formatDates.publishDate2 = pageFetchedDataLocal.pageData.response.contents.twoColumnWatchNextResults.results.results.contents[0].videoPrimaryInfoRenderer.dateText.simpleText
    } catch (e) { }
    // 2022/12/31

    if (typeof formatDates.publishDate2 === 'string' && formatDates.publishDate2 !== formatDates.publishDate) {
      formatDates.publishDate = formatDates.publishDate2
      formatDates.uploadDate = null
    }

    try {
      formatDates.broadcastBeginAt = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.startTimestamp
    } catch (e) { }
    try {
      formatDates.broadcastEndAt = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.endTimestamp
    } catch (e) { }
    try {
      formatDates.isLiveNow = pageFetchedDataLocal.pageData.playerResponse.microformat.playerMicroformatRenderer.liveBroadcastDetails.isLiveNow
    } catch (e) { }


    return formatDates;
  }



  function createElement() {

    /** @type {HTMLElement} */
    const ytdWatchFlexyElm = document.querySelector('ytd-watch-flexy');
    if (!ytdWatchFlexyElm) return;
    const ytdWatchFlexyCnt = insp(ytdWatchFlexyElm);
    let newPanel = ytdWatchFlexyCnt.createComponent_({
      "component": "ytd-button-renderer",
      "params": {
        buttonTooltipPosition: "top",
        systemIcons: false,
        modern: true,
        forceIconButton: false,

      }
    }, "ytd-engagement-panel-section-list-renderer", true) || 0;
    const newPanelHostElement = newPanel.hostElement || newPanel || 0;
    const newPanelCnt = insp(newPanelHostElement) || 0;

    newPanelCnt.data = {
      "style": "STYLE_DEFAULT",
      "size": "SIZE_DEFAULT",
      "isDisabled": false,
      "serviceEndpoint": {
      },
      "icon": {
      },
      "tooltip": "My ToolTip",
      "trackingParams": "",
      "accessibilityData": {
        "accessibilityData": {
          "label": "My ToolTip"
        }
      }
    };

    newPanelHostElement.classList.add('style-scope', 'ytd-watch-flexy');
    // $0.appendChild(newPanel);

    // window.ss3 = newPanel
    // console.log(HTMLElement.prototype.querySelector.call(newPanel,'tp-yt-paper-tooltip'))
    return newPanelHostElement;

  }



  const formatDateFn = (d) => {

    let y = d.getFullYear()
    let m = d.getMonth() + 1
    let date = d.getDate()

    let sy = y < 1000 ? (`0000${y}`).slice(-4) : '' + y

    let sm = m < 10 ? '0' + m : '' + m
    let sd = date < 10 ? '0' + date : '' + date

    return `${sy}.${sm}.${sd}`

  }

  const formatTimeFn = (d) => {

    let h = d.getHours()
    let m = d.getMinutes()
    let s = d.getSeconds()

    const k = this.dayBack

    if (k) h += 24

    let sh = h < 10 ? '0' + h : '' + h
    let sm = m < 10 ? '0' + m : '' + m

    let ss = s < 10 ? '0' + s : '' + s;


    return `${sh}:${sm}:${ss}`

  }


  function onYtpTimeDisplayHover(evt) {

    const promiseReady = new Promise((resolve) => {

      if (document.querySelector('#live-time-display-dom')) {
        resolve()
        return;
      }

      // evt.target.style.position='relative';
      let p = createElement();
      p.id = 'live-time-display-dom';
      p.setAttribute('hidden', '');
      let events = {}
      let controller = null;
      let running = false;
      const loop = async (o) => {
        const { formatDates, video } = o;

        if (!formatDates || !video) return;

        while (true) {


          if (!running) return;




          let k = formatDates.broadcastBeginAt;
          if (k) {
            let dt = new Date(k);
            dt.setTime(dt.getTime() + video.currentTime * 1000);

            let t = formatDateFn(dt) + ' ' + formatTimeFn(dt);
            if (controller.data.tooltip !== t) {

              controller.data.tooltip = t;
              controller.data = Object.assign({}, controller.data);
            }
          }



          // controller.data.tooltip=Date.now()+"";
          //  controller.data = Object.assign({}, controller.data);

          if (!running) return;
          await new Promise(requestAnimationFrame);


        }
      }
      let pres = {
        'mouseenter': function (evt) {

          if (!controller) return -1;
          running = true;
          const formatDates = getFormatDates();
          const video = document.querySelector('#movie_player video');


          // controller.data.tooltip=Date.now()+"";
          // controller.data = Object.assign({}, controller.data);

          if (formatDates && video && formatDates.broadcastBeginAt) {
            loop({ formatDates, video });

          } else {
            if (controller.data.tooltip) {

              controller.data.tooltip = '';
              controller.data = Object.assign({}, controller.data);
            }

            return -1;
          }



        }, 'mouseleave': function () {



          if (!controller) return -1;
          if (!running) return -1;
          running = false;



        }
      };

      const eventHandler = function (evt) {
        const res = pres[evt.type].apply(this, arguments);
        if (res === -1) return;
        return events[evt.type].apply(this, arguments);
      };

      p.addEventListener = function (type, fn, opts) {
        if (type === 'mouseenter' || type === 'mouseleave') {
          if (controller === null) {
            let cnt = insp(this);
            if (cnt.data !== null) {
              controller = cnt;
              if (!('data' in evt.target)) evt.target.data = controller.data;
            }
          }
          events[type] = fn;
          evt.target.addEventListener(type, eventHandler, opts);
        }
        // console.log(155, type, fn, opts)
      }
      // p.style.position='relative';
      p.style.position = 'absolute'
      evt.target.insertBefore(p, evt.target.firstChild);

      Promise.resolve().then(() => {
        if (!events.mouseenter || !events.mouseleave) {
          return p.remove();
        }
        HTMLElement.prototype.querySelector.call(p, 'yt-button-shape').remove();

        let tooltip = HTMLElement.prototype.querySelector.call(p, 'tp-yt-paper-tooltip');
        if (!tooltip) return p.remove();

        const rect = evt.target.getBoundingClientRect()
        p.style.width = rect.width + 'px';
        p.style.height = rect.height + 'px';

        let tooltipCnt = insp(tooltip);
        if (tooltip && tooltipCnt.position === 'bottom') {
          tooltipCnt.position = 'top';
        }

        tooltip.removeAttribute('fit-to-visible-bounds');
        tooltip.setAttribute('offset', '0');
        p.removeAttribute('hidden')

        if (evt.target.matches(':hover')) {
          eventHandler.call(evt.target, { type: 'mouseenter', target: evt.target });
        }

      }).then(resolve);

    });

    promiseReady.then(() => {
      let dom = document.querySelector('#live-time-display-dom');
      if (!dom) return;
      // evt.target.data.tooltip=
    })

  }

  document.addEventListener('animationstart', (evt) => {

    if (evt.animationName === 'ytpTimeDisplayHover') onYtpTimeDisplayHover(evt);

  }, capturePassive);

  const styleOpts = {
    id: 'vEXik',
    textContent: `

    @keyframes ytpTimeDisplayHover {
      0% {
        background-position-x: 3px;
      }
    
      100% {
        background-position-x: 4px;
      }
    
    }
    
    ytd-watch-flexy #movie_player .ytp-time-display:hover {
      animation: ytpTimeDisplayHover 1ms linear 120ms 1 normal forwards;
    }
    
    #live-time-display-dom {
      position: absolute;
      pointer-events: none;
    }
    
    #live-time-display-dom yt-button-shape {
      display: none;
    }
    
    @supports (-webkit-text-stroke:0.5px #000) {
      #live-time-display-dom tp-yt-paper-tooltip #tooltip {
        background: transparent;
        color: #fff;
        -webkit-text-stroke: 0.5px #000;
        font-weight: 700;
        font-size: 12pt;
      }
    
    }

  `

  };

  function onReady() {

    document.head.appendChild(Object.assign(document.createElement('style'), styleOpts));

  }

  Promise.resolve().then(() => {

    if (document.readyState !== 'loading') {
      onReady();
    } else {
      window.addEventListener("DOMContentLoaded", onReady, false);
    }

  });

})({ Promise, requestAnimationFrame });