☰

Greasy Fork is available in English.

YouTube Customizable Subtitles / Youtube Subtitulos Personalizables

Allows you to customize YouTube subtitles / Le permite personalizar los subtítulos de YouTube.

Stan na 18-08-2024. Zobacz najnowsza wersja.

// ==UserScript==
// @name         YouTube Customizable Subtitles / Youtube Subtitulos Personalizables
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Allows you to customize YouTube subtitles / Le permite personalizar los subtítulos de YouTube.
// @author       Eterve Nallo - Diam
// @license      MIT
// @match        *://*.youtube.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';

    // Configuración personalizable
    const defaultConfig = {
        outlineColor: 'black',    // Color del contorno
        outlineWidth: '1px',      // Grosor del contorno (predeterminado de YouTube)
        textColor: 'white',       // Color del texto
        showPanel: false          // Mostrar el panel de configuración
    };

    // Cargar configuración
    function loadConfig() {
        const savedConfig = GM_getValue('ytSubtitleConfig');
        if (savedConfig) {
            return JSON.parse(savedConfig);
        }
        return defaultConfig;
    }

    // Guardar configuración
    function saveConfig(config) {
        GM_setValue('ytSubtitleConfig', JSON.stringify(config));
    }

    const config = loadConfig();

    function applySubtitleStyles() {
        // Ajuste del tamaño de sombra para que el borde sea hacia el centro
        const shadowOffset = `${parseFloat(config.outlineWidth) / 2}px`;

        GM_addStyle(`
            .ytp-caption-segment {
                color: ${config.textColor} !important;
                text-shadow:
                    ${shadowOffset} ${shadowOffset} 0 ${config.outlineColor},
                    -${shadowOffset} -${shadowOffset} 0 ${config.outlineColor},
                    ${shadowOffset} -${shadowOffset} 0 ${config.outlineColor},
                    -${shadowOffset} ${shadowOffset} 0 ${config.outlineColor};
                background: transparent !important; /* Fondo invisible */
                font-weight: bold; /* Hacer que las letras se vean más nítidas */
                font-size: calc(16px + 1vw); /* Ajuste dinámico del tamaño según la pantalla */
            }
        `);
    }

    function createConfigPanel() {
        const panel = document.createElement('div');
        panel.id = 'subtitleConfigPanel';
        panel.style.position = 'fixed';
        panel.style.bottom = '10px';
        panel.style.right = '10px';
        panel.style.padding = '10px';
        panel.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        panel.style.color = 'white';
        panel.style.borderRadius = '5px';
        panel.style.zIndex = '9999';
        panel.style.display = 'block';

        panel.innerHTML = `
            <h4>Configuración de Subtítulos</h4>
            <label>Color del Contorno:
                <input type="color" id="outlineColor" value="${config.outlineColor}">
            </label><br>
            <label>Grosor del Contorno:
                <input type="number" id="outlineWidth" min="1" max="10" step="1" value="${parseFloat(config.outlineWidth)}">
            </label><br>
            <label>Color del Texto:
                <input type="color" id="textColor" value="${config.textColor}">
            </label><br>
            <button id="saveConfig">Guardar</button>
            <button id="closePanel" style="margin-top: 10px;">X</button>
        `;

        document.body.appendChild(panel);

        document.getElementById('saveConfig').addEventListener('click', () => {
            config.outlineColor = document.getElementById('outlineColor').value;
            config.outlineWidth = `${Math.max(1, Math.min(parseFloat(document.getElementById('outlineWidth').value), 10))}px`;
            config.textColor = document.getElementById('textColor').value;
            applySubtitleStyles();
            saveConfig(config);
        });

        document.getElementById('closePanel').addEventListener('click', () => {
            panel.style.display = 'none'; // Ocultar panel con 'X'
            config.showPanel = false;
            saveConfig(config);
        });
    }

    function toggleConfigPanel() {
        const panel = document.getElementById('subtitleConfigPanel');
        if (panel) {
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
            config.showPanel = panel.style.display === 'block';
            saveConfig(config);
        } else {
            createConfigPanel();
        }
    }

    // Agregar un comando al menú de Tampermonkey
    GM_registerMenuCommand('Mostrar/Ocultar Configuración de Subtítulos', toggleConfigPanel);

    // Aplicar estilos y crear panel si la opción está habilitada
    applySubtitleStyles();
    if (config.showPanel) {
        createConfigPanel();
    }
})();