⚡ Bolt: Use binary search in onTimeUpdate for better playback performance

.jules/bolt.md

@@ -13,3 +13,6 @@
 ## 2024-05-20 - Cache external API clients across function calls
 **Learning:** Instantiating new API clients (like `OpenAI()` or `ElevenLabs()`) inside frequently called functions (e.g., inside a loop during synthesis) destroys connection pooling. Each instantiation sets up a new HTTP session, adding significant overhead and slowing down requests.
 **Action:** Cache API clients at the module level or within a singleton when they are designed for reuse, using lazy initialization to configure them only when needed.
+## 2025-01-30 - O(log N) binary search for video playback events
+**Learning:** High-frequency event handlers like `<video onTimeUpdate>` iterating over large ordered arrays (like timestamps) using O(N) linear search can block the main thread and degrade performance.
+**Action:** Use O(log N) algorithms like binary search when looking up values in large ordered arrays in high-frequency event handlers to maintain smooth UI performance.

frontend/src/App.jsx

@@ -525,11 +525,18 @@ function App() {
     const time = videoRef.current.currentTime;
 
     let active = -1;
-    for (let i = 0; i < parsedTimestamps.length; i++) {
-      if (time >= parsedTimestamps[i]) {
-        active = i;
+    let low = 0;
+    let high = parsedTimestamps.length - 1;
+
+    // ⚡ Bolt: Replace O(N) linear search with O(log N) binary search
+    // Expected impact: Reduces CPU overhead in high-frequency event handler to prevent jank
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      if (parsedTimestamps[mid] <= time) {
+        active = mid;
+        low = mid + 1;
       } else {
-        break;
+        high = mid - 1;
       }
     }