// ==UserScript==
// @name         视频左上显示视频剩余时长
// @author       He
// @version      1.3
// @description  显示视频剩余时间和内置进度条
// @match        *://*/*
// @exclude      *://*live*/*
// @exclude     *://www.huya.com/*
// @exclude     *://www.douyu.com/*
// @namespace https://greasyfork.org/users/808960
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 创建显示容器的缓存，避免重复创建
    const containerCache = new WeakMap();

    /**
     * 设置视频时间显示组件
     * @param {HTMLVideoElement} video - 目标视频元素
     */
    function setupVideoTimeDisplay(video) {
        // 如果已经初始化过则跳过
        if (containerCache.has(video)) return;

        // 创建主容器
        const container = document.createElement('div');
        container.className = 'video-time-display-container';
        container.style.cssText = `
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 1000;
        `;

        // 时间显示容器 - 固定宽度确保数字居中
        const timeDisplay = document.createElement('div');
        timeDisplay.className = 'video-time-display';
        timeDisplay.style.cssText = `
            width: 100px; /* 固定宽度保证数字居中 */
            color: #C8DCC8;
            background: rgba(0, 0, 0, 0.5);
            padding: 3px 1px 8px 1px; /* 下边距预留进度条空间 */
            font-size: 15px;
            text-align: center;
            border-radius: 5px;
            position: relative; /* 用于子元素绝对定位 */
        `;

        // 剩余时间显示元素
        const timeText = document.createElement('div');
        timeText.className = 'video-time-text';
        timeText.style.cssText = `
            line-height: 1.2;
            user-select: none;
        `;

        // 进度条容器 (整合到时间容器内部)
        const progressBar = document.createElement('div');
        progressBar.className = 'video-progress-bar';
        progressBar.style.cssText = `
            width: 100%;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            position: absolute;
            bottom: 3px;
            left: 0;
            overflow: hidden;
        `;

        // 缓冲进度条
        const bufferedBar = document.createElement('div');
        bufferedBar.className = 'video-buffered-bar';
        bufferedBar.style.cssText = `
            width: 0%;
            height: 100%;
            background: #FF6A00;
            position: absolute;
            left: 0;
            transition: width 0.3s ease; /* 平滑过渡效果 */
        `;

        // 播放进度条
        const progressBarInner = document.createElement('div');
        progressBarInner.className = 'video-progress-bar-inner';
        progressBarInner.style.cssText = `
            width: 0%;
            height: 100%;
            background: skyblue;
            position: absolute;
            left: 0;
            transition: width 0.3s ease;
        `;

        // 组装DOM结构
        progressBar.append(bufferedBar, progressBarInner);
        timeDisplay.append(timeText, progressBar);
        container.append(timeDisplay);

        // 寻找最近的relative定位父容器
        let parent = video.parentElement;
        while (parent && getComputedStyle(parent).position !== 'relative') {
            parent = parent.parentElement;
        }
        (parent || document.body).append(container);

        // 缓存容器引用
        containerCache.set(video, container);

        // 优化：使用requestAnimationFrame进行更新
        let isUpdating = false;

        /**
         * 更新时间和进度条显示
         */
        const updateDisplay = () => {
            if (isUpdating) return;
            isUpdating = true;

            requestAnimationFrame(() => {
                // 确保视频时长有效
                if (!isFinite(video.duration)) {
                    isUpdating = false;
                    return;
                }

                // 计算剩余时间
                const remaining = video.duration - video.currentTime;
                const mins = String(Math.floor(remaining / 60)).padStart(2, '0');
                const secs = String(Math.floor(remaining % 60)).padStart(2, '0');
                timeText.textContent = `${mins}:${secs}`;

                // 更新播放进度
                const progressPercent = (video.currentTime / video.duration) * 100;
                progressBarInner.style.width = `${progressPercent}%`;

                // 更新缓冲进度 (优化算法)
                if (video.buffered.length > 0) {
                    // 获取最后一个时间区间
                    const lastBuffer = video.buffered.end(video.buffered.length - 1);
                    const bufferPercent = (lastBuffer / video.duration) * 100;
                    bufferedBar.style.width = `${bufferPercent}%`;
                }

                isUpdating = false;
            });
        };

        // 绑定事件监听 (使用被动事件优化滚动性能)
        const events = ['timeupdate', 'progress', 'loadedmetadata'];
        events.forEach(e => video.addEventListener(e, updateDisplay, { passive: true }));

        // 初始显示
        updateDisplay();
    }

    /* DOM观察器配置 */
    const observer = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            // 仅处理新增节点
            for (const node of mutation.addedNodes) {
                // 深度扫描video元素
                if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.tagName === 'VIDEO') {
                        setupVideoTimeDisplay(node);
                    }
                    // 扫描子节点中的video元素
                    else if (node.querySelector('video')) {
                        node.querySelectorAll('video').forEach(setupVideoTimeDisplay);
                    }
                }
            }
        }
    });

    // 启动观察 (优化：仅观察子节点变化)
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });

    // 初始化已存在的视频
    document.querySelectorAll('video').forEach(setupVideoTimeDisplay);
})();