YouTube 显示当前时间

Greasy Fork is available in English.
YouTube 显示当前时间

在 YouTube 视频右上角显示当前系统时间，支持自定义透明度、颜色、是否显示秒、是否使用 24 小时制。
换行
// ==UserScript==
// @name         YouTube 显示当前时间 / Show Current Time on YouTube
// @name:en      Show Current Time on YouTube
// @name:zh-CN   YouTube 显示当前时间
// @description  在 YouTube 视频右上角显示当前系统时间，支持自定义透明度、颜色、是否显示秒、是否使用 24 小时制。
// @description:zh-CN  在 YouTube 视频右上角显示当前系统时间，支持自定义透明度、颜色、是否显示秒、是否使用 24 小时制。
// @description:en  Displays current system time on the top-right corner of YouTube videos. Customizable opacity, color, seconds display, and 24-hour format support.
// @version      1.0
// @author       Me
// @namespace    http://tampermonkey.net/
// @match        https://www.youtube.com/watch*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // Configuration options
    const config = {
        opacity: 1,               // Opacity (0 ~ 1)
        color: '#00FF00',         // Clock text color
        showSecond: false,        // Whether to show seconds
        TFFormat: true            // Use 24-hour format
    };

    // Clock style
    const style = {
        position: 'absolute',
        bottom: '0',
        left: '0',
        zIndex: '9999',
        fontSize: '3rem',
        fontWeight: 'bold',
        margin: '1rem',
        color: config.color,
        opacity: config.opacity,
        pointerEvents: 'none' // Allow mouse interaction to pass through
    };

    let timerId = null;
    let clockEl = null;

    // Format a Date object into time string
    function formatTime(date) {
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();

        if (!config.TFFormat && h > 12) h -= 12;

        h = h.toString();
        m = m < 10 ? '0' + m : m.toString();
        s = s < 10 ? '0' + s : s.toString();

        return config.showSecond ? `${h}:${m}:${s}` : `${h}:${m}`;
    }

    // Insert the clock element into YouTube player
    function insertClock() {
        const container = document.querySelector('.html5-video-player');
        if (!container || document.getElementById('cur-time')) return;

        clockEl = document.createElement('span');
        clockEl.id = 'cur-time';

        Object.assign(clockEl.style, style);

        container.appendChild(clockEl);

        timerId = setInterval(() => {
            clockEl.textContent = formatTime(new Date());
        }, 1000);
    }

    // Observe DOM changes to re-insert clock if necessary
    function observePlayerWithStabilityCheck() {
        const observer = new MutationObserver(() => {
            insertClock(); // Retry on DOM change
        });

        observer.observe(document.body, { childList: true, subtree: true });

        // Periodically check if the clock is properly mounted
        const stabilityCheck = setInterval(() => {
            const el = document.getElementById('cur-time');
            const player = document.querySelector('.html5-video-player');

            if (el && player && player.contains(el)) {
                observer.disconnect();
                clearInterval(stabilityCheck);
            }
        }, 10000);
    }

    // Initial insertion
    insertClock();

    // Fallback mechanism for dynamic loading
    observePlayerWithStabilityCheck();
})();