fix: 3 critical bugs — audio corruption, blob URLs, static duration
1. Audio/Video sync: During playback, let the browser handle media naturally and only force-seek when drift > 250ms. Prevents audio glitching caused by setting currentTime 30x/sec. When paused/scrubbing, sync precisely. 2. Blob URLs → Server uploads: All media uploads (BrandTabMedia, SceneFieldEditor, TemplateFieldInput) now POST to /api/upload and use persistent server URLs instead of blob: URLs that vanish on refresh. 3. Dynamic duration: Added useVideoDurations hook that probes actual video durations from uploaded form videos. getTemplateDuration and compileExpressToTimeline now accept videoDurations to override static durationSeconds for form-sourced scenes.
This commit is contained in:
@@ -8,6 +8,7 @@ import { StoryboardView } from './StoryboardView';
|
||||
import { SceneFieldEditor } from './SceneFieldEditor';
|
||||
import { ExpressStylePanel } from './ExpressStylePanel';
|
||||
import { compileExpressToTimeline, getAspectDimensions, getTemplateDuration } from '../../utils/expressCompiler';
|
||||
import { useVideoDurations } from '../../hooks/useVideoDurations';
|
||||
|
||||
interface ExpressEditorProps {
|
||||
designMD: DesignMD;
|
||||
@@ -62,13 +63,16 @@ export const ExpressEditor: React.FC<ExpressEditorProps> = ({
|
||||
setFieldData(prev => ({ ...prev, [fieldId]: value }));
|
||||
}, []);
|
||||
|
||||
// Probe actual video durations for form-sourced scenes
|
||||
const videoDurations = useVideoDurations(selectedTemplate, fieldData);
|
||||
|
||||
// Compile template to timeline
|
||||
const compiled = useMemo(() => {
|
||||
if (!selectedTemplate) return null;
|
||||
return compileExpressToTimeline(selectedTemplate, fieldData, designMD, company);
|
||||
}, [selectedTemplate, fieldData, designMD, company]);
|
||||
return compileExpressToTimeline(selectedTemplate, fieldData, designMD, company, videoDurations);
|
||||
}, [selectedTemplate, fieldData, designMD, company, videoDurations]);
|
||||
|
||||
const totalDuration = selectedTemplate ? getTemplateDuration(selectedTemplate) : 0;
|
||||
const totalDuration = selectedTemplate ? getTemplateDuration(selectedTemplate, videoDurations) : 0;
|
||||
const fps = 30;
|
||||
const totalFrames = Math.max(30, totalDuration * fps);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user