feat(player): add real-time video filters with presets and quick-toggle button (#4071)

[Monu01123]

Summary

Resolves #4071

Adds comprehensive real-time Video Filters directly to the YouTube player. Users can customize brightness, contrast, saturation, hue, sharpness, and gamma on the fly, cycle through curated cinematic presets, or quickly toggle filters on/off directly from the player control bar without changing monitor settings.

---

Features Implemented

1. Player Control Bar Button (#it-video-filters-button)

   • Added an equalizer/sliders icon toggle button directly on the YouTube player controls bar.
   • Click: Instantly toggles Video Filters ON / OFF with an on-screen status confirmation (Filters: ON / Filters: OFF).
   • Shift + Click: Instantly cycles through preset filters (NORMAL ➔ VIVID ➔ CINEMA ➔ WARM ➔ COOL) live on the player without opening any menus.

2. Full-Range Sliders in Extension Menu (Player -> Video Filters)

   • Brightness: 50% to 200%
   • Contrast: 50% to 200%
   • Saturation: 0% (Grayscale) to 300%
   • Hue Rotate: -180° to +180°
   • Sharpness: 0 to 5.0 (Hardware-accelerated spatial 3x3 sharpening convolution matrix via SVG <feConvolveMatrix>)
   • Gamma: 0.5 to 2.5 (Luminance curve adjustment via SVG <feComponentTransfer>)

3. Curated Presets

   • Vivid: Richer colors and crisp detail (140% Saturation, 115% Contrast, 105% Brightness, 1.0 Sharpness).
   • Cinema: Dramatic film tone (120% Contrast, 85% Saturation, 95% Brightness, 1.1 Gamma).
   • Warm: Cozy sunset tones (-10° Hue, 115% Saturation).
   • Cool: Crisp studio tone (+10° Hue, 102% Brightness).

4. High-Performance Architecture

   • Dynamically injects <style id="it-video-filters-style"> and <svg id="it-video-filters-svg"> into document.documentElement.
   • Ensures filters apply universally across all playback modes (Standard, Cinema, Fullscreen, and Miniplayer) and persist seamlessly across YouTube SPA page navigations.

---

UI & Localization

• Added comprehensive menu settings under Player -> Video Filters and Player -> Buttons.
• Added localization strings (videoFilters, videoFiltersButton, preset, vivid, cinema, warm, cool, brightness, contrast, saturation, hue, sharpness, gamma) to _locales/en/messages.json.

---

Verification & Testing

• ✔ Tested slider reactivity and real-time color matrix rendering on HTML5 <video> elements.
• ✔ Verified SVG convolution sharpening and gamma transfer curves across different resolutions.
• ✔ Verified player control button click and Shift+Click cycling behavior.
• ✔ Verified persistence across page reloads and playlist transitions.

[ImprovedTube2]

thank you! @Monu01123
the feature function in ‎js&css/web-accessible/www.youtube.com/appearance.js can check (in the first) if any option is enabled or else skip / return

[ImprovedTube2]

thank you! @Monu01123
&& !document.getElementById('it-video-filters-style') is not required to run for all users.
This hardly matters unless we add 1000s of features like it.
But your UI can call it like videoFilters(true).
We also ca react on changes of extension settings /js&css/web-accessible/core.js Line 213

[Monu01123]

@ImprovedTube2 i did required changes