video-enhancement-control-panel.user.js

// ==UserScript==
// @name         Video Enhancement Control Panel
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Advanced video sharpening and enhancement with real-time controls
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Configuration
    const DEFAULT_ENABLED = true;
    const DEFAULT_CONTRAST = 1.0;
    const DEFAULT_SATURATION = 1.0;

    // Shared panel variable
    let enhancementPanel = null;

    // Create enhancement control panel
    function createEnhancementPanel() {
        // If panel already exists, just show it
        if (enhancementPanel) {
            enhancementPanel.style.display = 'block';
            return enhancementPanel;
        }

        // Create panel container
        const panel = document.createElement('div');
        panel.id = 'video-enhancement-panel';
        panel.innerHTML = `
            <div class="panel-header">Video Enhancement Controls</div>
            <div class="panel-content">
                <div class="control-group">
                    <label>Sharpening:</label>
                    <input type="checkbox" id="sharpening-toggle">
                </div>
                <div class="control-group">
                    <label>Contrast:</label>
                    <input type="range" id="contrast-slider" min="0.5" max="2.0" step="0.1" value="${DEFAULT_CONTRAST}">
                    <span id="contrast-value">${DEFAULT_CONTRAST}</span>
                </div>
                <div class="control-group">
                    <label>Saturation:</label>
                    <input type="range" id="saturation-slider" min="0.0" max="2.0" step="0.1" value="${DEFAULT_SATURATION}">
                    <span id="saturation-value">${DEFAULT_SATURATION}</span>
                </div>
                <div class="panel-actions">
                    <button id="save-settings">Save</button>
                    <button id="close-panel">Close</button>
                </div>
            </div>
        `;

        // Add styles
        GM_addStyle(`
            #video-enhancement-panel {
                position: fixed;
                top: 20px;
                right: 20px;
                width: 300px;
                background: white;
                border: 2px solid #333;
                border-radius: 8px;
                z-index: 10000;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                font-family: Arial, sans-serif;
            }
            #video-enhancement-panel .panel-header {
                background: #f0f0f0;
                padding: 10px;
                font-weight: bold;
                text-align: center;
            }
            #video-enhancement-panel .panel-content {
                padding: 15px;
            }
            #video-enhancement-panel .control-group {
                margin-bottom: 15px;
                display: flex;
                align-items: center;
            }
            #video-enhancement-panel label {
                flex: 1;
                margin-right: 10px;
            }
            #video-enhancement-panel input[type="range"] {
                flex: 2;
                margin-right: 10px;
            }
            #video-enhancement-panel .panel-actions {
                display: flex;
                justify-content: space-between;
            }
            #video-enhancement-panel button {
                padding: 5px 10px;
                cursor: pointer;
            }
        `);

        // Append to body
        document.body.appendChild(panel);

        // Setup event listeners
        setupPanelEventListeners(panel);

        // Store reference
        enhancementPanel = panel;

        return panel;
    }

    // Setup event listeners for the panel
    function setupPanelEventListeners(panel) {
        // Get control elements
        const sharpeningToggle = panel.querySelector('#sharpening-toggle');
        const contrastSlider = panel.querySelector('#contrast-slider');
        const contrastValue = panel.querySelector('#contrast-value');
        const saturationSlider = panel.querySelector('#saturation-slider');
        const saturationValue = panel.querySelector('#saturation-value');
        const saveButton = panel.querySelector('#save-settings');
        const closeButton = panel.querySelector('#close-panel');

        // Initialize control states
        sharpeningToggle.checked = GM_getValue('videoEnhancementEnabled', DEFAULT_ENABLED);
        contrastSlider.value = GM_getValue('videoContrast', DEFAULT_CONTRAST);
        contrastValue.textContent = contrastSlider.value;
        saturationSlider.value = GM_getValue('videoSaturation', DEFAULT_SATURATION);
        saturationValue.textContent = saturationSlider.value;

        // Real-time preview for contrast
        contrastSlider.addEventListener('input', () => {
            contrastValue.textContent = contrastSlider.value;
            processVideos();
        });

        // Real-time preview for saturation
        saturationSlider.addEventListener('input', () => {
            saturationValue.textContent = saturationSlider.value;
            processVideos();
        });

        // Sharpening toggle
        sharpeningToggle.addEventListener('change', () => {
            processVideos();
        });

        // Save button
        saveButton.addEventListener('click', () => {
            GM_setValue('videoEnhancementEnabled', sharpeningToggle.checked);
            GM_setValue('videoContrast', parseFloat(contrastSlider.value));
            GM_setValue('videoSaturation', parseFloat(saturationSlider.value));
            processVideos();
        });

        // Close button
        closeButton.addEventListener('click', () => {
            panel.style.display = 'none';
        });
    }

    // Create SVG filter
    function createSharpeningFilter() {
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('style', 'display:none');

        const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
        filter.setAttribute('id', 'video-enhancement-filter');

        const feConvolveMatrix = document.createElementNS('http://www.w3.org/2000/svg', 'feConvolveMatrix');
        feConvolveMatrix.setAttribute('order', '3');
        feConvolveMatrix.setAttribute('kernelMatrix', '1 -1 1 -1 -1 -1 1 -1 1');

        filter.appendChild(feConvolveMatrix);
        svg.appendChild(filter);

        return svg;
    }

    // Apply filter to video
    function applyVideoFilter(video, contrast, saturation, isEnabled) {
        if (isEnabled) {
            video.style.filter = `url(#video-enhancement-filter) contrast(${contrast}) saturate(${saturation})`;
            video.videoEnhancementApplied = true;
        } else {
            video.style.filter = '';
            video.videoEnhancementApplied = false;
        }
    }

    // Main function to process videos
    function processVideos() {
        const isEnabled = GM_getValue('videoEnhancementEnabled', DEFAULT_ENABLED);
        const contrast = GM_getValue('videoContrast', DEFAULT_CONTRAST);
        const saturation = GM_getValue('videoSaturation', DEFAULT_SATURATION);

        const videos = document.querySelectorAll('video');
        videos.forEach(video => {
            applyVideoFilter(video, contrast, saturation, isEnabled);
        });
    }

    // Initialization
    function init() {
        // Append SVG filter to document
        document.body.appendChild(createSharpeningFilter());

        // Initial video processing
        processVideos();

        // MutationObserver to handle dynamically added videos
        const observer = new MutationObserver(processVideos);
        observer.observe(document.body, { childList: true, subtree: true });

        // Register Tampermonkey menu commands
        GM_registerMenuCommand('Open Video Enhancement Panel', () => {
            createEnhancementPanel();
        });

        GM_registerMenuCommand('Toggle Video Enhancement', () => {
            const currentState = GM_getValue('videoEnhancementEnabled', DEFAULT_ENABLED);
            GM_setValue('videoEnhancementEnabled', !currentState);
            processVideos();
        });

        GM_registerMenuCommand('Reset to Default Settings', () => {
            GM_setValue('videoEnhancementEnabled', DEFAULT_ENABLED);
            GM_setValue('videoContrast', DEFAULT_CONTRAST);
            GM_setValue('videoSaturation', DEFAULT_SATURATION);
            processVideos();
        });
    }

    // Run initialization
    init();
})();