☰

Serieslan Enhancements

Select video provider option automatically and change the background color of the page to improve visibility and reduce eye strain

// ==UserScript==
// @name         Serieslan Enhancements
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  Select video provider option automatically and change the background color of the page to improve visibility and reduce eye strain
// @author       JJJ
// @match        https://serieslan.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=serieslan.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // Constants
    const CLASS_SELECTOR = 'div.sels > button.selop';
    const STORAGE_KEY = 'selectedOption';

    // CSS styles for the custom menu and page background
    const menuStyles = `
            /* Set background color to #2F353A for all elements */
            body,div, li, ul, header, footer {
                background-color: #2F353A !important;
            }
            
            /* Set text color to white for all text elements */
            body, p, h1, h2, h3, h4, h5, h6, span, a, li, div:not(#customMenu div), button:not(#customMenu button) {
                color: white !important;
            }
            
            /* Additional styles to improve visibility on links, if needed */
            a:not(#customMenu a) {
                text-decoration: underline !important;
            }
    
            #customMenu {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: rgba(255, 255, 255, 0.95) !important; /* Ensure background color is not overridden */
                border: 2px solid #000;
                padding: 15px;
                z-index: 9999;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                border-radius: 8px;
                font-family: Arial, sans-serif;
                width: 300px;
                text-align: center;
                color: black !important; /* Ensure text color is not overridden */
            }
    
            #customMenu select {
                width: 100% !important;
                padding: 10px !important;
                margin-bottom: 10px !important;
                border: 1px solid #ccc !important;
                border-radius: 4px !important;
                background-color: #FFFFFF !important; /* Ensure background color is white */
                color: black !important; /* Ensure text color is not overridden */
                -webkit-appearance: none !important; /* Disable default styling */
                -moz-appearance: none !important; /* Disable default styling */
                appearance: none !important; /* Disable default styling */
            }
    
            #customMenu button {
                padding: 10px 20px;
                border: none;
                background-color: #007bff !important; /* Ensure background color is not overridden */
                color: white !important; /* Ensure text color is not overridden */
                font-size: 14px;
                cursor: pointer;
                border-radius: 4px;
            }
    
            #customMenu button:hover {
                background-color: #0056b3 !important; /* Ensure hover background color is not overridden */
            }
        `;

    // Function to create the dropdown menu
    function createDropdownMenu(options) {
        const dropdownMenu = document.createElement('select');
        dropdownMenu.id = 'optionDropdown';

        options.forEach((option) => {
            const dropdownOption = document.createElement('option');
            dropdownOption.value = option.getAttribute('title') || option.textContent.trim();
            dropdownOption.textContent = option.getAttribute('title') || option.textContent.trim();
            dropdownMenu.appendChild(dropdownOption);
        });

        return dropdownMenu;
    }

    // Function to toggle the menu visibility
    function toggleMenu() {
        const menu = document.getElementById('customMenu');
        if (menu) {
            menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
            console.log('Menu toggled, new display:', menu.style.display);
        } else {
            console.log('Menu element not found.');
        }
    }

    // Function to handle option selection
    function handleOptionSelection() {
        const selectedOptionValue = document.getElementById('optionDropdown').value;
        const options = document.querySelectorAll(CLASS_SELECTOR);

        options.forEach((option) => {
            if ((option.getAttribute('title') || option.textContent.trim()) === selectedOptionValue) {
                option.click();
                localStorage.setItem(STORAGE_KEY, selectedOptionValue);
                toggleMenu();
            }
        });
    }

    // Function to create the custom menu
    function createCustomMenu() {
        const options = document.querySelectorAll(CLASS_SELECTOR);

        const dropdownMenu = createDropdownMenu(options);
        const selectedOptionValue = localStorage.getItem(STORAGE_KEY);
        if (selectedOptionValue !== null) {
            dropdownMenu.value = selectedOptionValue;
        }

        const confirmButton = document.createElement('button');
        confirmButton.textContent = 'Confirm';
        confirmButton.addEventListener('click', handleOptionSelection);

        const customMenu = document.createElement('div');
        customMenu.id = 'customMenu';
        customMenu.style.display = 'none';
        customMenu.appendChild(dropdownMenu);
        customMenu.appendChild(confirmButton);

        document.body.appendChild(customMenu);
        console.log('Custom menu created and added to the body');
    }

    // Function to automatically select the saved option
    function autoSelectOption() {
        const selectedOptionValue = localStorage.getItem(STORAGE_KEY);
        if (selectedOptionValue !== null) {
            const options = document.querySelectorAll(CLASS_SELECTOR);
            options.forEach((option) => {
                if ((option.getAttribute('title') || option.textContent.trim()) === selectedOptionValue) {
                    option.click();
                }
            });
        }
    }

    // Function to initialize the script
    function init() {
        const styleElement = document.createElement('style');
        styleElement.textContent = menuStyles;
        document.head.appendChild(styleElement);
        console.log('Styles added to the head');

        createCustomMenu();

        document.addEventListener('keydown', function (event) {
            if (event.key === 'F2') {
                console.log('F2 key pressed');
                toggleMenu();
            }
        });

        setTimeout(autoSelectOption, 100); // Delay execution to allow page load

        console.log('Script initialized');
    }

    // Run the script
    init();
})();