Control video brightness (#13)

Author: Aaron Cooper

src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["devtools"] }
 tauri-plugin-opener = "2"
 tauri-plugin-store = "2"
 serde = { version = "1", features = ["derive"] }

src-tauri/build.rs

@@ -38,6 +38,7 @@ fn import_js_scripts_to_rust() -> PathBuf {
         ("PIP_SCRIPT", "pip_script.js"),
         ("PIP_OVERLAY_SCRIPT", "pip_overlay_script.js"),
         ("ZOOM_SCRIPT", "zoom_script.js"),
+        ("BRIGHTNESS_SCRIPT", "brightness_script.js"),
     ];
 
     // Generate Rust code for each script

src-tauri/src/scripts/js/brightness_script.js

@@ -0,0 +1,72 @@
+let brightnessOverlay = null;
+let overlayTimeout = null;
+
+function showBrightnessOverlay(value) {
+    if (!brightnessOverlay) {
+        brightnessOverlay = document.createElement('div');
+        brightnessOverlay.id = 'brightness-overlay';
+        Object.assign(brightnessOverlay.style, {
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            color: 'white',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            zIndex: '10000',
+            opacity: '0',
+            transition: 'opacity 0.3s ease-in-out',
+            pointerEvents: 'none', // Allow clicks to pass through
+            fontSize: '2em'
+        });
+        document.body.appendChild(brightnessOverlay);
+    }
+
+    brightnessOverlay.textContent = `Video Brightness: ${Math.round(value * 100)}%`;
+    brightnessOverlay.style.opacity = '1';
+
+    if (overlayTimeout) {
+        clearTimeout(overlayTimeout);
+    }
+
+    overlayTimeout = setTimeout(() => {
+        brightnessOverlay.style.opacity = '0';
+    }, 2000); // Hide after 2 seconds
+}
+
+
+document.addEventListener('keydown', (event) => {
+    const video = document.querySelector('video');
+    if (!video) return;
+
+    let currentBrightness = 1;
+    const filter = video.style.filter;
+    const brightnessMatch = filter.match(/brightness\(([^)]+)\)/);
+
+    if (brightnessMatch?.[1]) {
+        currentBrightness = Number.parseFloat(brightnessMatch[1]);
+    }
+
+    let newBrightness = currentBrightness;
+
+    if (event.ctrlKey && event.key === '[') {
+        // Decrease brightness
+        newBrightness = Math.max(0.1, currentBrightness - 0.1);
+        event.preventDefault(); // Prevent default browser action
+    } else if (event.ctrlKey && event.key === ']') {
+        // Increase brightness
+        newBrightness = currentBrightness + 0.1;
+        event.preventDefault(); // Prevent default browser action
+    }
+
+    if (newBrightness !== currentBrightness) {
+        // Update the filter property, preserving other filters if any
+        if (brightnessMatch) {
+            video.style.filter = filter.replace(brightnessMatch[0], `brightness(${newBrightness})`);
+        } else {
+            video.style.filter = `${filter} brightness(${newBrightness})`;
+        }
+        showBrightnessOverlay(newBrightness);
+    }
+});

src-tauri/src/scripts/script.rs

@@ -1,15 +1,16 @@
 // The constants are now directly available from the parent module
-use super::{FULLSCREEN_SCRIPT, PIP_OVERLAY_SCRIPT, PIP_SCRIPT, ZOOM_SCRIPT};
+use super::{BRIGHTNESS_SCRIPT, FULLSCREEN_SCRIPT, PIP_OVERLAY_SCRIPT, PIP_SCRIPT, ZOOM_SCRIPT};
 
 pub fn init_script() -> String {
     format!(
-        "{}{}{}{}{}",
+        "{}{}{}{}{}{}",
         FULLSCREEN_SCRIPT,
         ZOOM_SCRIPT,
         PIP_SCRIPT,
         PIP_OVERLAY_SCRIPT,
+        BRIGHTNESS_SCRIPT,
         r#"
-    console.log('Plex event listeners injected (fullscreen, zoom, PiP, and draggable overlay)');
+    console.log('Plex event listeners injected (fullscreen, zoom, PiP, draggable overlay, and brightness)');
 "#
     )
 }

src-tauri/tauri.conf.json

@@ -16,7 +16,8 @@
         "width": 1024,
         "height": 768,
         "visible": false,
-        "maximized": false
+        "maximized": false,
+        "devtools": true
       }
     ]
   },

src/App.tsx

@@ -115,6 +115,9 @@ function App() {
                     <p className="control-instruction">
                         Use Alt + P to toggle Picture In Picture mode.
                     </p>
+                    <p className="control-instruction">
+                        Use Ctrl + [ and Ctrl + ] to adjust video brightness.
+                    </p>
                 </div>
 
                 <div className="url-input-container">