☰

Greasy Fork is available in English.

YouTube Shorts Addiction Helper

Monitors and displays the count of YouTube shorts watched, providing visual cues to encourage moderation. Allows watch one video without blocking element

// ==UserScript==
// @name         YouTube Shorts Addiction Helper
// @namespace    http://tampermonkey.net/
// @version      1.1.1
// @description  Monitors and displays the count of YouTube shorts watched, providing visual cues to encourage moderation. Allows watch one video without blocking element
// @author       ktonel475
// @match        https://www.youtube.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function () {
    'use strict';

    // Function to update the total count
    function updateShortsCount() {
        const currentDate = new Date().toLocaleDateString();
        const lastUpdateDate = GM_getValue('lastUpdateDate', '');

        // Check if one calendar day has passed since the last update
        if (currentDate !== lastUpdateDate) {
            // Reset count and update the date
            GM_setValue('shortsWatchedCount', 0);
            GM_setValue('lastUpdateDate', currentDate);
        } else {
            if(window.location.href.includes('/shorts')){
            // Increment the count
                const currentCount = getShortsWatchedCount();
                GM_setValue('shortsWatchedCount', currentCount + 1);
            }
        }

        // Display count based on the URL
        displayCountBasedOnURL();
    }

    function getShortsWatchedCount() {
        return GM_getValue('shortsWatchedCount', 0);
    }

    // Function to display count near the video display with a slight delay
            // Function to display count near the video display with a loop
    // Function to display count near the video display with dynamic font size and vertical Shorts shape
    function displayCountAtmiddle() {
        // Create a new element for displaying count
        const newElement = document.createElement('div');
        newElement.id = 'shorts-watch-count-display';
        newElement.style.position = 'fixed';
        newElement.style.bottom = '10px';
        newElement.style.right = '500px';
        newElement.style.backgroundColor = '#333'; // Dark background color
        newElement.style.color = '#fff'; // White text color
        newElement.style.padding = '10px'; // Increased padding for larger size
        newElement.style.border = '2px solid #555'; // Dark border color
        newElement.style.fontSize = '16px'; // Increased font size
        newElement.textContent = `Shorts Watched: ${getShortsWatchedCount()}`;

        const count = getShortsWatchedCount();
        const rectangleElement = document.createElement('div');
        rectangleElement.id = 'shorts-watch-rectangle';
        rectangleElement.style.position = 'fixed';
        rectangleElement.style.bottom = '10px';
        rectangleElement.style.right = '20%';
        rectangleElement.style.width = '813px'; // Initial width
        rectangleElement.style.height = `${4 * count}%`; // Dynamic height based on the count
        rectangleElement.style.backgroundColor = '#555'; // Dark color
        rectangleElement.style.display = 'flex';
        rectangleElement.style.alignItems = 'center';
        rectangleElement.style.justifyContent = 'center';
        rectangleElement.style.textAlign = 'center';

        const existingCountElement = document.getElementById('shorts-watch-count-display');
        if (existingCountElement) {
            existingCountElement.remove();
        }

        // Create a new element for the text content
        if (count > 0){
            const textElement = document.createElement('div');
            textElement.style.color = '#fff'; // White text color
            textElement.style.fontSize = '16px'; // Base font size
            textElement.textContent = 'You are wasting time on Shorts\nPlease stop right now';
            rectangleElement.appendChild(textElement);
        }

        // Remove existing counter and rectangle elements if they exist

        const existingRectangleElement = document.getElementById('shorts-watch-rectangle');
        if (existingRectangleElement) {
            existingRectangleElement.remove();
        }

        // Append both elements to the document body
        document.body.appendChild(rectangleElement);
        document.body.appendChild(newElement);
    }

    function displayCountAtBottomRight() {
        // Create a new element for displaying count
        const newElement = document.createElement('div');
        newElement.id = 'shorts-watch-count-display';
        newElement.style.position = 'fixed';
        newElement.style.bottom = '10px';
        newElement.style.right = '10px';
        newElement.style.backgroundColor = '#333'; // Dark background color
        newElement.style.color = '#fff'; // White text color
        newElement.style.padding = '10px'; // Increased padding for larger size
        newElement.style.border = '2px solid #555'; // Dark border color
        newElement.style.fontSize = '16px'; // Increased font size
        newElement.textContent = `Shorts Watched: ${getShortsWatchedCount()}`;

        // Remove existing counter element if it exists
        const existingElement = document.getElementById('shorts-watch-count-display');
        if (existingElement) {
            existingElement.remove();
        }

        document.body.appendChild(newElement);
    }

    function displayCountAtBottomLeft() {
        // Create a new element for displaying count
        const newElement = document.createElement('div');
        newElement.id = 'shorts-watch-count-display';
        newElement.style.position = 'fixed';
        newElement.style.bottom = '10px';
        newElement.style.left = '10px';
        newElement.style.backgroundColor = '#333'; // Dark background color
        newElement.style.color = '#fff'; // White text color
        newElement.style.padding = '10px'; // Increased padding for larger size
        newElement.style.border = '2px solid #555'; // Dark border color
        newElement.style.fontSize = '16px'; // Increased font size
        newElement.textContent = `Shorts Watched: ${getShortsWatchedCount()}`;

        // Remove existing counter element if it exists
        const existingElement = document.getElementById('shorts-watch-count-display');
        if (existingElement) {
            existingElement.remove();
        }

        document.body.appendChild(newElement);
    }

    // Function to display count based on the URL
    function displayCountBasedOnURL() {
        const currentURL = window.location.href;

        if (currentURL.includes('/shorts/')) {
            displayCountAtmiddle();
        } else if (currentURL.includes('/watch')) {
            displayCountAtBottomLeft();
            removeElementById('shorts-watch-rectangle');
        } else {
            displayCountAtBottomRight();
            removeElementById('shorts-watch-rectangle');
        }
    }

    function removeElementById(elementId) {
        var targetElement = document.getElementById(elementId);

        if (targetElement) {
            targetElement.parentNode.removeChild(targetElement);
            console.log('Element with ID ' + elementId + ' removed successfully.');
        } else {
            console.log('Element with ID ' + elementId + ' not found.');
        }
    }
    function RemoveElementButton() {
        const resetButton = document.createElement('button');
        resetButton.id = 'watch-this-only-button';
        resetButton.textContent = 'Watch this one only';
        resetButton.style.position = 'fixed';
        resetButton.style.top = '60px'; // Adjust the position as needed
        resetButton.style.right = '10px';
        resetButton.style.padding = '10px';
        resetButton.style.fontSize = '14px';

        // Event listener to reset the counter when the button is clicked
        resetButton.addEventListener('click', function () {
            removeElementById('shorts-watch-rectangle'); // Update the display after resetting
        });

        document.body.appendChild(resetButton);
    }

     RemoveElementButton();
    // Display count near the video display initially
    displayCountBasedOnURL();
    function removeElementOnFullScreen() {
        var elementToRemove = document.getElementById('shorts-watch-count-display');
        if (elementToRemove) {
            elementToRemove.remove();
        }
        var elementToRemove1 = document.getElementById('watch-this-only-button');
        if (elementToRemove1) {
            elementToRemove1.remove();
        }
    }

// Event listener for fullscreenchange event
    document.addEventListener('fullscreenchange', function () {
        if (document.fullscreenElement) {
            removeElementOnFullScreen();
        } else {
            displayCountBasedOnURL();
            RemoveElementButton();
        }
    });
    // Event listener for video end and URL change
    document.addEventListener('yt-navigate-finish', function () {
        // Update the count whenever a video finishes playing or URL changes
        updateShortsCount();
    });
    // Event listener for DOM content loaded
    document.addEventListener('DOMContentLoaded', function () {
        // Display count based on the URL when the DOM content is loaded
        displayCountBasedOnURL();
    });
})();