feat: Improve scrolling behavior

Author: dmtrKovalenko

src/bindings/Web.gen.tsx

@@ -34,6 +34,14 @@ let isFocusable = el =>
     }
   }
 
+// Returns true only for elements where typing text would conflict with shortcuts
+@genType
+let isTextInput = el =>
+  switch el->Webapi.Dom.Element.tagName {
+  | "TEXTAREA" | "INPUT" => true
+  | _ => el->Webapi.Dom.Element.getAttribute("contenteditable")->Option.isSome
+  }
+
 let isFocusingInteractiveElement = () =>
   Webapi.Dom.document
   ->Webapi.Dom.Document.activeElement

src/bindings/Web.res

@@ -357,7 +357,32 @@ function updateWordAnimationLayer(
     popScale = calculatePopScale(animationProgress, wordAnim.pop.scale);
   }
 
-  // for background calculate interpolated position
+  // Render non-active words first (below)
+  for (const pos of positions) {
+    if (pos.index === activeWordIndex) continue; // Skip active word, render it last
+
+    let wordTextContent = pos.word.text.trim();
+    if (ctx.style.hidePunctuation) {
+      wordTextContent = stripPunctuation(wordTextContent);
+    }
+
+    const wordText = new Text({
+      x: pos.x,
+      y: pos.y,
+      text: wordTextContent,
+      fill: ctx.style.color,
+      fontSize: ctx.style.fontSizePx,
+      fontStyle: ctx.style.fontWeight >= 700 ? "bold" : "normal",
+      fontFamily: ctx.style.fontFamily,
+      stroke: ctx.style.strokeColor,
+      strokeWidth: ctx.style.strokeWidth,
+      strokeEnabled: ctx.style.strokeColor !== ctx.style.color,
+      fillAfterStrokeEnabled: true,
+    });
+    ctx.wordGroup.add(wordText);
+  }
+
+  // for background calculate interpolated position (render after non-active words)
   if (activePos && wordAnim.showBackground) {
     const isNewWord = ctx.lastActiveWordIndex !== activeWordIndex;
     const bgPos = interpolateBackgroundPosition(
@@ -395,38 +420,38 @@ function updateWordAnimationLayer(
     };
   }
 
-  for (const pos of positions) {
-    const isActive = pos.index === activeWordIndex;
-
+  // Render active word last (on top)
+  if (activePos) {
     let fillColor = ctx.style.color;
     let fontWeight = ctx.style.fontWeight;
+    let scale = 1;
     let offsetX = 0;
     let offsetY = 0;
 
-    if (isActive) {
-      // Font effect: change text color and/or font weight (fallback to main style)
-      if (wordAnim.showFont) {
-        fillColor = wordAnim.font.color ?? ctx.style.color;
-        fontWeight = wordAnim.font.fontWeight ?? ctx.style.fontWeight;
-      }
+    // Font effect: change text color and/or font weight (fallback to main style)
+    if (wordAnim.showFont) {
+      fillColor = wordAnim.font.color ?? ctx.style.color;
+      fontWeight = wordAnim.font.fontWeight ?? ctx.style.fontWeight;
+    }
 
-      if (wordAnim.showPop) {
-        // Offset to scale from center of the word
-        offsetX = (pos.width * (popScale - 1)) / 2;
-        offsetY = (ctx.style.fontSizePx * (popScale - 1)) / 2;
-      }
+    // Pop effect: scale animation (only for active word)
+    if (wordAnim.showPop) {
+      scale = popScale;
+      // Offset to scale from center of the word
+      offsetX = (activePos.width * (scale - 1)) / 2;
+      offsetY = (ctx.style.fontSizePx * (scale - 1)) / 2;
     }
 
-    let wordTextContent = pos.word.text.trim();
+    let wordTextContent = activePos.word.text.trim();
     if (ctx.style.hidePunctuation) {
       wordTextContent = stripPunctuation(wordTextContent);
     }
 
     const wordText = new Text({
-      x: pos.x - offsetX,
-      y: pos.y - offsetY,
-      scaleX: popScale,
-      scaleY: popScale,
+      x: activePos.x - offsetX,
+      y: activePos.y - offsetY,
+      scaleX: scale,
+      scaleY: scale,
       text: wordTextContent,
       fill: fillColor,
       fontSize: ctx.style.fontSizePx,

src/bindings/Web.res.mjs

@@ -34,3 +34,8 @@ let useToggle = default => {
     }),
   )
 }
+
+@module("./useMediaQuery")
+external useContainerBreakpoint: (
+  ~threshold: int=?,
+) => (React.ref<Js.nullable<Dom.element>>, bool) = "useContainerBreakpoint"

src/codecs/subtitle-renderer.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect, useRef } from "react";
+
+export function useContainerBreakpoint(
+  threshold: number = 672
+): [React.RefObject<HTMLDivElement | null>, boolean] {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isAboveThreshold, setIsAboveThreshold] = useState(false);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsAboveThreshold(entry.contentRect.width >= threshold);
+      }
+    });
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return [containerRef, isAboveThreshold];
+}

src/hooks/Hooks.res

@@ -144,32 +144,47 @@ let make = React.memo((
   let textAreaRef = React.useRef(null)
   let previousWasCurrentRef = React.useRef(current)
 
-  // Call hook unconditionally at the top level
-  let editorInputHandler = useEditorInputHandler()
+  // Handler for textarea keydown - handles Escape to exit, seek to start, and play
+  let textareaKeyDownHandler = Hooks.useEvent(event => {
+    let key = ReactEvent.Keyboard.key(event)
+
+    switch key {
+    | "Escape" =>
+      let _ = ReactEvent.Keyboard.target(event)["blur"]()
+      ctx.playerImmediateDispatch(Seek(start))
+      ctx.playerImmediateDispatch(Play)
+    | " "
+      if event->ReactEvent.Keyboard.shiftKey ||
+      event->ReactEvent.Keyboard.ctrlKey ||
+      event->ReactEvent.Keyboard.metaKey =>
+      ctx.playerImmediateDispatch(Play)
+    | _ => ()
+    }
+  })
 
   // Don't auto-scroll when split preview is active or user is interacting with menus
   React.useEffect2(() => {
+    // Always update the ref when this cue is current
     if current {
-      // Always update the ref when this cue is current
       globalCurrentCueTextAreaRef := Some(textAreaRef)
+    }
 
-      // Only auto-scroll on transition to current
-      if !previousWasCurrentRef.current {
-        // Skip scroll if ANY split preview is active (user is in split menu)
-        // or if user is focusing any interactive element
-        let shouldScroll = !isAnySplitPreviewActive && !Web.isFocusingInteractiveElement()
+    // Only scroll on transition to current (not already current)
+    if current && !previousWasCurrentRef.current {
+      // Skip scroll if ANY split preview is active (user is in split menu)
+      // or if user is focusing any interactive element
+      let shouldScroll = !isAnySplitPreviewActive && !Web.isFocusingInteractiveElement()
 
-        if shouldScroll {
-          ref.current
-          ->Js.Nullable.toOption
-          ->Option.forEach(
-            el =>
-              el->Webapi.Dom.Element.scrollIntoViewWithOptions({
-                "behavior": "smooth",
-                "block": "nearest",
-              }),
-          )
-        }
+      if shouldScroll {
+        ref.current
+        ->Js.Nullable.toOption
+        ->Option.forEach(
+          el =>
+            el->Webapi.Dom.Element.scrollIntoViewWithOptions({
+              "behavior": "instant",
+              "block": "nearest",
+            }),
+        )
       }
     }
 
@@ -286,7 +301,7 @@ let make = React.memo((
         key={chunk.text}
         rows={chunk.text === "" ? 2 : 3}
         onBlur={handleBlur}
-        onKeyDown={editorInputHandler}
+        onKeyDown={textareaKeyDownHandler}
         id={current ? "current-cue-textarea" : ""}
         className={Cx.cx([
           "col-span-2 block w-full resize-none rounded-lg border-none bg-white/10 py-1.5 px-3 text-sm/6 text-white",

src/hooks/Hooks.res.mjs

@@ -715,7 +715,7 @@ let make = React.memo((~subtitlesManager, ~title: React.element) => {
       ->Array.mapWithIndex((chunk, index) =>
         <ChunkEditor
           index
-          current={currentPlayingCueIndex->Option.map(i => i === index)->Option.getOr(false)}
+          current={currentPlayingCueIndex->Option.map(i => i === index)->Option.getOr(index === 0)}
           readonly={subtitlesManager.transcriptionState == TranscriptionInProgress}
           chunk
           key={switch chunk.id {