☰

YouTube Gui 4 Fun

a small GUI with checkboxes and other elements matching YouTube's style with a dark mode background, drag functionality,

// ==UserScript==
// @name         YouTube Gui 4 Fun
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  a small GUI with checkboxes and other elements matching YouTube's style with a dark mode background, drag functionality, 
// @author       LianoVz
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

/* global confetti */

(function() {
    'use strict';

    // Declare the confetti variable to prevent ESLint errors
    let confetti;

    // Function to create the GUI
    function createGUI() {
        // Inject CSS for special effects
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes glow {
                0% {
                    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
                }
                50% {
                    box-shadow: 0 0 20px rgba(255, 0, 0, 1);
                }
                100% {
                    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
                }
            }

            .glow {
                animation: glow 1s infinite;
            }

            .container-dragging {
                transition: border-color 0.2s ease;
            }

            .container-dragging:hover {
                border-color: rgba(255, 0, 0, 0.8);
            }

            .high-priority {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 2147483647; /* Max possible z-index value */
                pointer-events: none; /* Allow pointer events to pass through */
            }

            .high-priority > div {
                pointer-events: auto; /* Enable pointer events for the container */
            }

            .joke-container {
                margin-top: 10px;
                padding: 10px;
                background-color: #333;
                border-radius: 5px;
                color: #fff;
                font-size: 14px;
            }
        `;
        document.head.appendChild(style);

        // Create the high-priority container
        const highPriorityContainer = document.createElement('div');
        highPriorityContainer.classList.add('high-priority');

        // Create the GUI container div
        const container = document.createElement('div');
        container.style.position = 'absolute';
        container.style.top = '100px';
        container.style.right = '20px';
        container.style.width = '200px';
        container.style.padding = '10px';
        container.style.backgroundColor = '#868686';
        container.style.border = '2px solid #333';
        container.style.boxShadow = '0px 0px 10px rgba(0,0,0,0.5)';
        container.style.borderRadius = '10px';
        container.style.cursor = 'move'; // Change cursor to indicate draggable area
        container.style.zIndex = '2147483647'; // Ensure the container is on top

        // Add a title
        const title = document.createElement('h3');
        title.innerText = 'YouTube GUI';
        title.style.fontSize = '16px';
        title.style.marginBottom = '10px';
        title.style.color = '#000';
        container.appendChild(title);

        // Add checkboxes
        const checkboxes = [
            { id: 'checkbox1', label: 'ExploreWithUs', action: () => { window.location.href = 'https://www.youtube.com/@ExploreWithUs'; } },
            { id: 'checkbox2', label: 'Display a joke', action: toggleJoke },
            { id: 'checkbox3', label: 'Confetti Effect', action: toggleConfetti },
            { id: 'checkbox4', label: 'Dark Mode', action: toggleDarkMode },
            { id: 'checkbox5', label: 'Dark 4 YT', action: toggleYouTubeDarkMode }
        ];

        checkboxes.forEach(checkboxInfo => {
            const checkboxContainer = document.createElement('div');
            checkboxContainer.style.marginBottom = '5px';

            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = checkboxInfo.id;
            checkbox.style.marginRight = '5px';

            const label = document.createElement('label');
            label.htmlFor = checkboxInfo.id;
            label.innerText = checkboxInfo.label;
            label.style.fontSize = '14px';
            label.style.color = '#000';

            checkbox.addEventListener('click', checkboxInfo.action);

            checkboxContainer.appendChild(checkbox);
            checkboxContainer.appendChild(label);
            container.appendChild(checkboxContainer);
        });

        // Add a button
        const button = document.createElement('button');
        button.innerText = 'Click Me';
        button.style.backgroundColor = '#ff0000';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.padding = '10px 15px';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';

        // Button click event
        button.addEventListener('click', () => {
            alert('Ty you for using my GUI');
        });

        container.appendChild(button);

        // Append the container to the high-priority container
        highPriorityContainer.appendChild(container);
        // Append the high-priority container to the body
        document.body.appendChild(highPriorityContainer);

        // Make the container draggable with special effects
        let isDragging = false;
        let offsetX, offsetY;

        container.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - container.getBoundingClientRect().left;
            offsetY = e.clientY - container.getBoundingClientRect().top;
            container.classList.add('glow');
            container.style.cursor = 'grabbing';
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                container.style.left = `${e.clientX - offsetX}px`;
                container.style.top = `${e.clientY - offsetY}px`;
                container.style.right = 'auto'; // Reset right to auto when dragging
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            container.classList.remove('glow');
            container.style.cursor = 'move';
        });

        // Check the state of the dark mode checkbox and set the theme accordingly
        const darkModeCheckbox = document.getElementById('checkbox5');
        if (localStorage.getItem('yt-dark-mode') === 'true') {
            darkModeCheckbox.checked = true;
            document.documentElement.setAttribute('dark', 'true');
        }
    }

    // Function to fetch a joke from the API and display it
    function fetchJoke() {
        fetch('https://official-joke-api.appspot.com/jokes/random')
            .then(response => response.json())
            .then(data => {
                displayJoke(data.setup, data.punchline);
            })
            .catch(error => {
                console.error('Error fetching joke:', error);
                displayJoke('Oops!', 'Failed to fetch a joke.');
            });
    }

    // Function to display the fetched joke
    function displayJoke(setup, punchline) {
        // Create the joke container if it doesn't exist
        let jokeContainer = document.getElementById('jokeContainer');
        if (!jokeContainer) {
            jokeContainer = document.createElement('div');
            jokeContainer.id = 'jokeContainer';
            jokeContainer.className = 'joke-container';
            document.querySelector('.high-priority > div').appendChild(jokeContainer);
        }
        // Update the joke container with the new joke
        jokeContainer.innerHTML = `<strong>${setup}</strong><br>${punchline}`;
    }

    // Function to toggle the joke display on checkbox change
    function toggleJoke() {
        const checkbox = document.getElementById('checkbox2');
        if (checkbox.checked) {
            fetchJoke();
        } else {
            removeJoke();
        }
    }

    // Function to remove the displayed joke
    function removeJoke() {
        const jokeContainer = document.getElementById('jokeContainer');
        if (jokeContainer) {
            jokeContainer.remove();
        }
    }

    // Load the canvas-confetti library and call a callback function once loaded
    function loadConfettiLibrary(callback) {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js';
        script.onload = () => {
            confetti = window.confetti;
            callback();
        };
        document.head.appendChild(script);
    }

    // Function to toggle the confetti effect
    function toggleConfetti() {
        const checkbox = document.getElementById('checkbox3');
        if (checkbox.checked) {
            startConfetti();
        } else {
            stopConfetti();
        }
    }

    // Function to start the confetti effect
    function startConfetti() {
        loadConfettiLibrary(() => {
            confetti({
                particleCount: 100,
                spread: 70,
                origin: { y: 0.6 }
            });
        });
    }

    // Function to stop the confetti effect
    function stopConfetti() {
        if (confetti) {
            confetti.reset();
        }
    }

    // Function to toggle the background color to dark mode
    function toggleDarkMode() {
        const checkbox = document.getElementById('checkbox4');
        const container = document.querySelector('.high-priority > div');
        const labels = container.querySelectorAll('h3, label');

        if (checkbox.checked) {
            container.style.backgroundColor = '#171717';
            container.style.color = '#fff';
            labels.forEach(label => {
                label.style.color = '#fff';
            });
        } else {
            container.style.backgroundColor = '#868686';
            container.style.color = '#000';
            labels.forEach(label => {
                label.style.color = '#000';
            });
        }
    }

    // Function to toggle YouTube's appearance theme to dark mode
    function toggleYouTubeDarkMode() {
        const checkbox = document.getElementById('checkbox5');
        const isDarkMode = checkbox.checked;
        localStorage.setItem('yt-dark-mode', isDarkMode ? 'true' : 'false');
        document.documentElement.setAttribute('dark', isDarkMode ? 'true' : 'false');
        if (isDarkMode) {
            document.querySelector('html').setAttribute('dark', 'true');
        } else {
            document.querySelector('html').removeAttribute('dark');
        }
    }

    // Wait for the page to load before creating the GUI
    window.addEventListener('load', createGUI);

})();