ニコ生TS、追っかけ再生時に時刻を表示

nicolive_datetime.user.js

// ==UserScript==
// @name         ニコ生時刻表示
// @namespace    http://tampermonkey.net/
// @version      0.2.2
// @description  ニコ生TS、追っかけ再生時に時刻を表示
// @author       hetima
// @match        https://live.nicovideo.jp/watch/*
// @grant        
// @run-at       document-end
// @noframes
// ==/UserScript==

(function () {
    'use strict';

    const onairTime = document.querySelector("[class^='___onair-time___']").dateTime;
    const elapsed = document.querySelector("[class^='___elapsed-time___'] span");
    const view=addView();
    var min = 0;

    setInterval(function () {
        var time = elapsedToMin(elapsed.textContent);
        if (isNaN(time)) {
            view.textContent = '';
        }else if (time != min) {
            min = time;
            var dt = new Date(onairTime);
            dt.setMinutes(dt.getMinutes() + time);
            var text = formatDateTime(dt);
            view.textContent = text;
        }
    }, 2000);

    mutateSeekBar();

    function formatDateTime(dt) {
        return zFill(dt.getMonth() + 1) + '/' + zFill(dt.getDate()) + getDayOfTheWeek(dt) + ' ' + zFill(dt.getHours()) + ':' + zFill(dt.getMinutes());
    }

    function zFill(s) {
        return ("0" + s).slice(-2);
    }

    function getDayOfTheWeek(dt) {
        return '(' + ["日", "月", "火", "水", "木", "金", "土"][dt.getDay()] + ')';
    }

    function elapsedToMin(elapsed) {
        if (elapsed.includes('/')) {
            elapsed = elapsed.split('/')[0];
        }
        var ary = elapsed.split(':');
        if (ary.length < 2) {
            return 0;
        }
        //min
        var minStr = ary[ary.length - 2];
        var min = Number(minStr);
        if (minStr.startsWith('-')){
            min = min -1;
        }
        //hour
        if (ary.length>=3) {
            min = min + Number(ary[ary.length - 3])*60;
        }
        return min;
    }

    function addView() {
        const e = document.querySelector("[class^='___addon-controller___']");
        const view = document.createElement('span');
        view.style.color = '#fff';
        view.style.fontSize = '12px';
        view.style.paddingRight = '4px';
        e.style.alignItems = 'center';
        view.textContent = '';
        e.insertBefore(view, e.firstChild);
        return view;
    }

    //シークバーにも日付と時刻
    function mutateSeekBar() {
        const si = document.querySelector("[class^='___seek-information___']");
        const timeSpan = si.lastChild;
        const dateTimeSpan = document.createElement('span');
        dateTimeSpan.style.color = '#ffd';
        dateTimeSpan.style.fontSize = '12px';
        dateTimeSpan.textContent = '';
        si.appendChild(document.createElement('br'));
        si.appendChild(dateTimeSpan);

        const config = { characterData: true, attributes: false, childList: true, subtree: false };
        const callback = function (mutationsList, observer) {
            if (window.getComputedStyle(si).visibility == 'visible') {
                const time = elapsedToMin(timeSpan.textContent);
                if (!isNaN(time)) {
                    var dt = new Date(onairTime);
                    dt.setMinutes(dt.getMinutes() + time);
                    var text = formatDateTime(dt);
                    dateTimeSpan.textContent = text;
                }
            }
        };

        const observer = new MutationObserver(callback);
        observer.observe(timeSpan, config);
    }

})();