☰

Youtube Tracker

Counts youtube watchtime

// ==UserScript==
// @name         Youtube Tracker
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Counts youtube watchtime
// @author       Kaanium
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_setClipboard
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    function secondsToTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;

        const formattedHours = hours.toString().padStart(2, '0');
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

        if (hours > 0) {
            return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        } else {
            return `${formattedMinutes}:${formattedSeconds}`;
        }
    }

    function secondsToMoe(seconds) {
        const minutes = Math.floor(seconds / 60);
        const fractionalMinutes = (seconds % 60) / 60;
        return (minutes + fractionalMinutes).toFixed(2);
    }

    function timeToSeconds(timeString) {
        const timeParts = timeString.split(':').map(Number);
        const totalParts = timeParts.length;

        if (totalParts === 2) {
            // Format: mm:ss
            const [minutes, seconds] = timeParts;
            if (isNaN(minutes) || isNaN(seconds) || minutes < 0 || seconds < 0) {
                throw new Error('Invalid time format. Please use numeric values for minutes and seconds.');
            }
            return minutes * 60 + seconds;
        } else if (totalParts === 3) {
            // Format: hh:mm:ss
            const [hours, minutes, seconds] = timeParts;
            if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || hours < 0 || minutes < 0 || seconds < 0) {
                throw new Error('Invalid time format. Please use numeric values for hours, minutes, and seconds.');
            }
            return hours * 3600 + minutes * 60 + seconds;
        } else {
            throw new Error('Invalid time format. Expected format: hh:mm:ss or mm:ss');
        }
    }

    function handleTextbox1Change() {
        timeTextbox2.value = secondsToMoe(timeToSeconds(timeTextbox1.value));
        totalWatchedTime = timeToSeconds(timeTextbox1.value);
        localStorage.setItem('totalWatchedTime', totalWatchedTime);
    }

    function createStyledButton(text, onClickHandler) {
        const button = document.createElement("button");
        button.textContent = text;
        applyCommonStyles(button);
        button.onclick = onClickHandler;
        return button;
    }

    function createStyledTextbox(type, value) {
        const textbox = document.createElement("input");
        textbox.setAttribute("type", type);
        textbox.setAttribute("value", value);
        applyCommonStyles(textbox);
        return textbox;
    }

    function applyCommonStyles(element) {
        element.style.fontSize = "10px";
        element.style.backgroundColor = "hsl(0, 0%, 7%)";
        element.style.color = "#ffffffe0";
        element.style.borderColor = "hsla(0, 0%, 53.3%, 0.4)";
        element.style.borderWidth = "1px";
        element.style.borderRadius = "40px";
        element.style.fontFamily = '"Roboto","Arial",sans-serif';
        element.style.fontSize = "1.4rem";
        element.style.lineHeight = "2rem";
        element.style.fontWeight = "500";
        element.style.textAlign = "center";
        element.style.width = "5%";
        element.style.margin = "3px"
    }

    var container = document.querySelector("#masthead > div:nth-child(5)");

    const timeTextbox1 = createStyledTextbox("text", "00:00:00");
    container.insertBefore(timeTextbox1, document.getElementById("end"));

    timeTextbox1.addEventListener("input", handleTextbox1Change);

    const timeTextbox2 = createStyledTextbox("text", "0.0");
    container.insertBefore(timeTextbox2, document.getElementById("end"));

    const newButton = createStyledButton("Clipboard", function () {
    GM_setClipboard(".log listening " + timeTextbox2.value);
    });
    container.insertBefore(newButton, document.getElementById("end"));

      const resetButton = createStyledButton("Reset", function () {
    totalWatchedTime = 0;
    bufferSum = 0;
    bufferTime = 0;
    timeTextbox1.value = "00:00:00";
    timeTextbox2.value = "0.0";
    localStorage.removeItem('totalWatchedTime');
  });
  container.insertBefore(resetButton, document.getElementById("end"));

    let startTime = new Date();
    let totalWatchedTime = parseInt(localStorage.getItem('totalWatchedTime')) || 0;
    let isVideoPlaying = true;
    let bufferTime = 0;
    let bufferSum = 0;
    let seconds = 0;
    var videoPlayer = document.querySelector("video");
    var moviePlayer = null;


    function updateTimeSpent() {
        if (isVideoPlaying && !moviePlayer.classList.contains("buffering-mode")) {
            bufferSum += bufferTime
            bufferTime = 0
            seconds = parseInt((new Date() - startTime) / 1000, 10);
            var temp = parseInt(localStorage.getItem('totalWatchedTime'))
            if (temp > totalWatchedTime + seconds - bufferSum) {
                totalWatchedTime = temp
                bufferSum = 0
                startTime = new Date()
                seconds = parseInt((new Date() - startTime) / 1000, 10);
            }
            timeTextbox2.value = secondsToMoe(totalWatchedTime + seconds - bufferSum);
            timeTextbox1.value = secondsToTime(totalWatchedTime + seconds - bufferSum);
            localStorage.setItem('totalWatchedTime', totalWatchedTime + seconds - bufferSum);
        }
        else if(moviePlayer.classList.contains("buffering-mode")) {
            bufferTime = parseInt((new Date() - startTime) / 1000, 10);
            console.log("buffer time: " + bufferTime)
        }
    }

    function saveTotalWatchedTime() {
        if (videoPlayer.src) {
            let _seconds = parseInt((new Date() - startTime) / 1000, 10);
            totalWatchedTime += _seconds;
        }
    }

    const checkForVideoPlayer = () => {
        videoPlayer = document.querySelector("video");
        moviePlayer = document.querySelector("#movie_player");
        if (videoPlayer && window.location.pathname == "/watch") {
            isVideoPlaying = true;
            videoPlayer.addEventListener("timeupdate", updateTimeSpent);
            videoPlayer.addEventListener("pause", function () {
                isVideoPlaying = false;
                console.log("pause")
                saveTotalWatchedTime();
            });
            videoPlayer.addEventListener("play", function () {
                isVideoPlaying = true;
                console.log("play")
                startTime = new Date();
            });
            videoPlayer.addEventListener("canplaythrough", function () {
                console.log("video can play through");
                startTime = new Date();
        });
        } else {
            setTimeout(checkForVideoPlayer, 1000);
        }
    };

    checkForVideoPlayer();

    document.addEventListener("yt-navigate-start", function() {
        isVideoPlaying = false;
        saveTotalWatchedTime()
    });

    window.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || /^[0-9]$/.test(event.key)) {
        saveTotalWatchedTime();
        startTime = new Date();
    }
    });

    window.addEventListener('popstate', function(event) {
       totalWatchedTime = timeToSeconds(timeTextbox1.value);
       startTime = new Date();
    });

    updateTimeSpent();
})();