YouTube Speed-Adjusted Time Display

Shows speed-adjusted time for YouTube videos

Verze ze dne 18. 11. 2024. Zobrazit nejnovější verzi.

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

// ==UserScript==
// @name         YouTube Speed-Adjusted Time Display
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Shows speed-adjusted time for YouTube videos
// @author       kavinned
// @match        https://www.youtube.com/*
// @grant        none
// @icon         https://www.google.com/s2/favicons?sz=64&domain=YouTube.com
// @license      MIT
// ==/UserScript==
(function() {
    'use strict';
    function updateTimeDisplay() {
        const video = document.querySelector('video');
        if (!video) return;
        const currentTimeDisplay = document.querySelector('.ytp-time-current');
        const durationDisplay = document.querySelector('.ytp-time-duration');
        const remainingTimeDisplay = document.querySelector('.speed-adjusted-time');
        if (!currentTimeDisplay || !durationDisplay || !remainingTimeDisplay) return;

        const currentTime = video.currentTime;
        const duration = video.duration;
        const playbackRate = video.playbackRate;

        const adjustedCurrentTime = currentTime / playbackRate;
        const adjustedDuration = duration / playbackRate;
        const remainingTime = adjustedDuration - adjustedCurrentTime;

        function formatTime(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const secs = Math.floor(seconds % 60);
            if (hours > 0) {
                return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
            } else {
                return `${minutes}:${secs.toString().padStart(2, '0')}`;
            }
        }

        currentTimeDisplay.textContent = formatTime(adjustedCurrentTime);
        durationDisplay.textContent = formatTime(adjustedDuration);
        remainingTimeDisplay.textContent = `(-${formatTime(remainingTime)})`;
    }

    function createSpeedTimeDisplay() {
        const timeContainer = document.querySelector('.ytp-time-wrapper');
        if (!timeContainer || document.querySelector('.speed-adjusted-time')) return;

        const speedTimeDiv = document.createElement('div');
        speedTimeDiv.className = 'speed-adjusted-time ytp-time-display';
        speedTimeDiv.style.color = 'inherit';
        speedTimeDiv.style.fontSize = 'inherit';

        timeContainer.append(speedTimeDiv);
    }

    const observer = new MutationObserver((mutations) => {
        if (document.querySelector('video')) {
            createSpeedTimeDisplay();
            updateTimeDisplay();
        }
    });

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

    setInterval(updateTimeDisplay, 1000);
    document.addEventListener('ratechange', updateTimeDisplay, true);
})();