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();
});
})();