Преглед на файлове

fix: annotation canvas always reads size from boundingRect

Canvas was getting 0×0 on first render because the parent div with
aspect-ratio CSS hadn't resolved yet. Now getBoundingClientRect()
is called directly on the canvas element each time.
kingkong преди 1 месец
родител
ревизия
edbe0f2591
променени са 2 файла, в които са добавени 8 реда и са изтрити 5 реда
  1. 3 3
      src/app/share/[token]/page.tsx
  2. 5 2
      src/components/video-player/AnnotationCanvas.tsx

+ 3 - 3
src/app/share/[token]/page.tsx

@@ -50,9 +50,9 @@ export default function SharePage() {
   useEffect(() => {
     const el = videoContainerRef.current;
     if (!el) return;
-    const obs = new ResizeObserver(() => {
-      setVideoDims({ width: el.offsetWidth, height: el.offsetHeight });
-    });
+    const update = () => setVideoDims({ width: el.offsetWidth, height: el.offsetHeight });
+    update();
+    const obs = new ResizeObserver(update);
     obs.observe(el);
     return () => obs.disconnect();
   }, []);

+ 5 - 2
src/components/video-player/AnnotationCanvas.tsx

@@ -131,8 +131,11 @@ export function AnnotationCanvas({
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    canvas.width = width;
-    canvas.height = height;
+    // Read real size from bounding rect — not the stale width/height props
+    const { width: w, height: h } = canvas.getBoundingClientRect();
+    if (w === 0 || h === 0) return;
+    canvas.width = w;
+    canvas.height = h;
     redraw();
   }, [width, height, pendingStrokes]);