fix(rendering): synchronize FPS, implement render locks, respect brand segment duration, and fix local audio path resolving for ffmpeg

src/components/shared/LivePreviewCanvas.tsx

@@ -79,7 +79,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
   const isScrubbing = useRef(false);
 
   const fps = 30;
-  const totalDuration = getTemplateDuration(template, videoDurations);
+  const totalDuration = getTemplateDuration(template, videoDurations, designMD);
   const totalFrames = Math.max(30, totalDuration * fps);
   const dimensions = getAspectDimensions(template.aspectRatio);
 
@@ -144,19 +144,35 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
   const sceneSegments = useMemo(() => {
     let offset = 0;
     return template.scenes.map(scene => {
-      const durFrames = scene.durationSeconds * fps;
+      let actualDuration = scene.durationSeconds;
+      
+      if (scene.segmentSource === 'brand') {
+        if (scene.type === 'intro') {
+          if (!designMD.introVideoUrl) { actualDuration = 0; }
+          else { actualDuration = (designMD.introDurationFrames || (scene.durationSeconds * 30)) / 30; }
+        }
+        if (scene.type === 'outro') {
+          if (!designMD.outroVideoUrl) { actualDuration = 0; }
+          else { actualDuration = (designMD.outroDurationFrames || (scene.durationSeconds * 30)) / 30; }
+        }
+      } else if (videoDurations && videoDurations[scene.id]) {
+        // Use actual video duration if user uploaded one
+        actualDuration = videoDurations[scene.id];
+      }
+        
+      const durFrames = actualDuration * fps;
       const seg = {
         id: scene.id,
         name: scene.type === 'intro' ? 'INTRO' : scene.type === 'outro' ? 'OUTRO' : scene.name,
         type: scene.type || 'content',
         startFrame: offset,
         endFrame: offset + durFrames,
-        widthPct: (durFrames / totalFrames) * 100,
+        widthPct: totalFrames > 0 ? (durFrames / totalFrames) * 100 : 0,
       };
       offset += durFrames;
       return seg;
     });
-  }, [template, fps, totalFrames]);
+  }, [template, fps, totalFrames, videoDurations, designMD]);
 
   const handlePlayToggle = useCallback(() => {
     if (playerRef.current) {