Improve perfr of react rerenders (#36)

Author: dmtrKovalenko

src/Main.tsx

@@ -35,6 +35,28 @@ Sentry.init({
   enabled: process.env.NODE_ENV !== 'development',
   replaysSessionSampleRate: 0.05,
   replaysOnErrorSampleRate: 1.0,
+  ignoreErrors: [
+    // Browser extension errors (password managers, etc.)
+    "ControlLooksLikePasswordCredentialField",
+    "Cannot read properties of null (reading 'ControlLooksLikePasswordCredentialField')",
+    // Other common extension-related errors
+    "ResizeObserver loop limit exceeded",
+    "ResizeObserver loop completed with undelivered notifications",
+    // Extensions injecting scripts
+    /^chrome-extension:\/\//,
+    /^moz-extension:\/\//,
+  ],
+  beforeSend(event) {
+    // Filter out errors from browser extensions
+    if (event.exception?.values?.[0]?.stacktrace?.frames?.some(
+      (frame) => frame.filename?.includes("extension") || 
+                 frame.filename?.startsWith("chrome-extension://") ||
+                 frame.filename?.startsWith("moz-extension://")
+    )) {
+      return null;
+    }
+    return event;
+  },
 });
 
 const rootElement = document.querySelector("#root");

src/Player.res.mjs

@@ -113,6 +113,30 @@ module Path = {
   }
 }
 
+module TextUtils = {
+  /**
+   * Trims only dots and commas from the start and end of each word.
+   * Preserves all other punctuation like ?, !, apostrophes, etc.
+   * Example: "Hello, world..." -> "Hello world"
+   * Example: "What's up?" -> "What's up?"
+   * Example: "don't stop!" -> "don't stop!"
+   */
+  @genType
+  let stripPunctuation = (text: string): string => {
+    text
+    ->String.splitByRegExp(%re("/\s+/"))
+    ->Core__Array.filterMap(word => word)
+    ->Core__Array.map(word => {
+      // Trim dots and commas from start and end only
+      word
+      ->String.replaceRegExp(%re("/^[.,]+/g"), "")
+      ->String.replaceRegExp(%re("/[.,]+$/g"), "")
+    })
+    ->Core__Array.filter(word => String.length(word) > 0)
+    ->Core__Array.join(" ")
+  }
+}
+
 module Bool = {
   @inline
   let invert = a => !a

src/Utils.gen.tsx

@@ -146,6 +146,48 @@ export function calculateTotalHeight(
     : lineHeight;
 }
 
+/**
+ * Calculate the actual width of text based on word positions (widest line)
+ */
+export function calculateActualWidth(
+  positions: WordPosition[],
+  fontSizePx: number
+): number {
+  if (positions.length === 0) return 0;
+  
+  const lineHeight = fontSizePx * 1.2;
+  
+  // Group positions by line (same y value within tolerance)
+  const lineWidths: number[] = [];
+  let currentLineY = positions[0].y;
+  let currentLineMaxX = 0;
+  let currentLineMinX = Infinity;
+  
+  for (const pos of positions) {
+    // Check if this is a new line (y position changed significantly)
+    if (Math.abs(pos.y - currentLineY) > lineHeight * 0.5) {
+      // Save previous line's width
+      if (currentLineMinX !== Infinity) {
+        lineWidths.push(currentLineMaxX - currentLineMinX);
+      }
+      // Start new line
+      currentLineY = pos.y;
+      currentLineMinX = pos.x;
+      currentLineMaxX = pos.x + pos.width;
+    } else {
+      currentLineMinX = Math.min(currentLineMinX, pos.x);
+      currentLineMaxX = Math.max(currentLineMaxX, pos.x + pos.width);
+    }
+  }
+  
+  // Don't forget the last line
+  if (currentLineMinX !== Infinity) {
+    lineWidths.push(currentLineMaxX - currentLineMinX);
+  }
+  
+  return lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
+}
+
 export function interpolateBackgroundPosition(
   activePos: { x: number; y: number; width: number },
   prevPos: { x: number; y: number; width: number } | null | undefined,

src/Utils.res

@@ -746,7 +746,11 @@ export async function render({
 
     try {
       for await (const wrappedCanvas of canvasSink.canvases()) {
-        const { canvas: sourceCanvas, timestamp, duration } = wrappedCanvas;
+        const { canvas: sourceCanvas, timestamp: rawTimestamp, duration } = wrappedCanvas;
+
+        // Clamp negative timestamps to 0 - some videos have frames with slightly
+        // negative PTS values due to B-frames or encoding artifacts
+        const timestamp = Math.max(0, rawTimestamp);
 
         try {
           renderCueOnCanvas(cues, sourceCanvas, rendererCtx, timestamp);

src/Utils.res.mjs

@@ -5,6 +5,7 @@ import {
 } from "../screens/editor/Subtitles.gen";
 import { style } from "../screens/editor/Style.gen";
 import { wordChunk } from "../screens/editor/WordTimestamps.gen";
+import { TextUtils_stripPunctuation as stripPunctuation } from "../Utils.gen";
 import KonvaCore from "konva/lib/Core";
 import type Konva from "konva";
 import { Text } from "konva/lib/shapes/Text";
@@ -16,6 +17,7 @@ import {
   calculatePopScale,
   calculateWordPositions,
   calculateTotalHeight,
+  calculateActualWidth,
   interpolateBackgroundPosition,
   calculateScaledBackground,
 } from "./active-word";
@@ -26,6 +28,51 @@ export type WordAnimationData = {
   cueRanges: Array<[number, number]>;
 };
 
+function calculateActualTextDimensions(
+  text: string,
+  style: style,
+  measureText: (text: string) => number
+): { width: number; height: number } {
+  if (!text.trim()) {
+    return { width: 0, height: 0 };
+  }
+
+  const blockWidth = style.blockSize.width;
+  const lineHeight = style.fontSizePx * 1.2;
+  
+  // Split text into words and calculate line wrapping
+  const words = text.trim().split(/\s+/);
+  const lines: string[] = [];
+  let currentLine = "";
+  
+  for (const word of words) {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    const testWidth = measureText(testLine);
+    
+    if (testWidth > blockWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  
+  // Find the widest line
+  let maxWidth = 0;
+  for (const line of lines) {
+    const lineWidth = measureText(line);
+    maxWidth = Math.max(maxWidth, lineWidth);
+  }
+  
+  return {
+    width: maxWidth,
+    height: lines.length * lineHeight,
+  };
+}
+
 export type RendererContext = {
   stage: Konva.Stage;
   layer: Konva.Layer;
@@ -214,21 +261,40 @@ function updateTextLayer(
   ctx: RendererContext,
   currentCue: currentPlayingCue | undefined,
 ): void {
-  ctx.text.setAttr("text", currentCue?.currentCue?.text ?? "");
+  let text = currentCue?.currentCue?.text ?? "";
+  
+  if (ctx.style.hidePunctuation && text) {
+    text = stripPunctuation(text);
+  }
+  
+  ctx.text.setAttr("text", text);
 
   if (ctx.background) {
-    if (!currentCue) {
+    if (!currentCue || !text.trim()) {
       ctx.background.hide();
     } else {
       ctx.background.show();
-    }
+      
+      // Calculate actual text dimensions for proper background sizing
+      const measureText = createKonvaMeasureText(ctx.style);
+      const actualDims = calculateActualTextDimensions(text, ctx.style, measureText);
+      
+      // Calculate x position based on alignment
+      let bgX = ctx.text.x() - ctx.style.background.paddingX;
+      const alignLower = ctx.style.align.toLowerCase();
+      if (alignLower === "center") {
+        bgX = ctx.text.x() + (ctx.style.blockSize.width - actualDims.width) / 2 - ctx.style.background.paddingX;
+      } else if (alignLower === "right") {
+        bgX = ctx.text.x() + ctx.style.blockSize.width - actualDims.width - ctx.style.background.paddingX;
+      }
 
-    ctx.background.setAttrs({
-      x: ctx.text.x() - ctx.style.background.paddingX,
-      y: ctx.text.y() - ctx.style.background.paddingY,
-      width: ctx.text.width() + ctx.style.background.paddingX * 2,
-      height: ctx.text.height() + ctx.style.background.paddingY * 2,
-    });
+      ctx.background.setAttrs({
+        x: bgX,
+        y: ctx.text.y() - ctx.style.background.paddingY,
+        width: actualDims.width + ctx.style.background.paddingX * 2,
+        height: actualDims.height + ctx.style.background.paddingY * 2,
+      });
+    }
   }
 
   ctx.layer.draw();
@@ -351,12 +417,17 @@ function updateWordAnimationLayer(
       }
     }
 
+    let wordTextContent = pos.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,
-      text: pos.word.text.trim(),
+      text: wordTextContent,
       fill: fillColor,
       fontSize: ctx.style.fontSizePx,
       fontStyle: fontWeight >= 700 ? "bold" : "normal",
@@ -372,11 +443,21 @@ function updateWordAnimationLayer(
   // redraw background for the whole block
   if (ctx.background) {
     const totalHeight = calculateTotalHeight(positions, ctx.style.fontSizePx);
+    const actualWidth = calculateActualWidth(positions, ctx.style.fontSizePx);
+    
+    // Calculate x position based on alignment
+    let bgX = ctx.style.x - ctx.style.background.paddingX;
+    const alignLower = ctx.style.align.toLowerCase();
+    if (alignLower === "center") {
+      bgX = ctx.style.x + (ctx.style.blockSize.width - actualWidth) / 2 - ctx.style.background.paddingX;
+    } else if (alignLower === "right") {
+      bgX = ctx.style.x + ctx.style.blockSize.width - actualWidth - ctx.style.background.paddingX;
+    }
 
     ctx.background.setAttrs({
-      x: ctx.style.x - ctx.style.background.paddingX,
+      x: bgX,
       y: ctx.style.y - ctx.style.background.paddingY,
-      width: ctx.style.blockSize.width + ctx.style.background.paddingX * 2,
+      width: actualWidth + ctx.style.background.paddingX * 2,
       height: totalHeight + ctx.style.background.paddingY * 2,
     });
     ctx.background.show();

src/codecs/active-word.ts

@@ -58,13 +58,37 @@ module Pubsub = (Init: PubsubInit) => {
     let (_, forceUpdate) = React.useReducer((x, _) => x + 1, 0)
 
     React.useEffect0(() => {
-      let unsubscribe = subscribe(forceUpdate)
+      let unsubscribe = subscribe(_ => forceUpdate())
 
       Some(unsubscribe)
     })
 
     get()
   }
+
+  // Selector-based hook that only re-renders when the selected value changes
+  // This is critical for performance - components can subscribe to specific slices of state
+  @genType
+  let useObservableSelector = (selector: Init.t => 'a): 'a => {
+    let selectedRef = React.useRef(selector(get()))
+    let (_, forceUpdate) = React.useReducer((x, _) => x + 1, 0)
+
+    React.useEffect0(() => {
+      let unsubscribe = subscribe(state => {
+        let newSelected = selector(state)
+
+        // Only force update if the selected value actually changed
+        if newSelected !== selectedRef.current {
+          selectedRef.current = newSelected
+          forceUpdate()
+        }
+      })
+
+      Some(unsubscribe)
+    })
+
+    selectedRef.current
+  }
 }
 
 module MakeObserver: Observer = (Observable: Observable) => {