// ==UserScript==
// @name         左上显示视频剩余时长
// @author        He
// @version      1.0
// @description    此脚本支持大多数视频网站，自行添加网址到下方即可
// @match        *://www.youtube.com/*
// @match        *://www.bilibili.com/*
// @namespace https://greasyfork.org/users/808960
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const updateRemainingTimeAndProgressBar = () => {
        const videoElements = document.getElementsByTagName('video');
        for (const video of videoElements) {
            if (video && video.duration) {
                const currentTime = video.currentTime;
                const remainingTime = video.duration - currentTime;
                const minutes = Math.floor(remainingTime / 60);
                const seconds = Math.floor(remainingTime % 60);
                const timeString = `${minutes}:${seconds < 10? '0' : ''}${seconds}`;
                const progress = currentTime / video.duration;

                let displayElement = document.getElementById('remainingTimeDisplay');
                if (!displayElement) {
                    displayElement = document.createElement('div');
                    displayElement.style.position = 'absolute';
                    displayElement.style.top = '10px';
                    displayElement.style.left = '10px';
                    displayElement.style.color = 'black';
                    displayElement.style.backgroundColor = 'rgba(200, 221, 200, 0.5)';
                    displayElement.style.padding = '5px';
                    displayElement.style.borderRadius = '5px';
                    displayElement.style.fontSize = '16px';
                    video.parentElement.appendChild(displayElement);
                    displayElement.id = 'remainingTimeDisplay';
                }

                displayElement.textContent = `Remaining Time: ${timeString}`;

                let progressBar = displayElement.querySelector('div');
                if (!progressBar) {
                    progressBar = document.createElement('div');
                    const textWidth = displayElement.offsetWidth;
                    progressBar.style.width = `${textWidth - 10}px`;
                    progressBar.style.height = '3px';
                    progressBar.style.backgroundColor = 'gray';
                    progressBar.style.marginTop = '5px';
                    const progressIndicator = document.createElement('div');
                    progressIndicator.style.width = `${progress * 100}%`;
                    progressIndicator.style.height = '100%';
                    progressIndicator.style.backgroundColor = 'skyblue';
                    progressBar.appendChild(progressIndicator);
                    displayElement.appendChild(progressBar);
                } else {
                    progressBar.querySelector('div').style.width = `${progress * 100}%`;
                }
            }
        }
    };

    setInterval(updateRemainingTimeAndProgressBar, 3000);
})();