diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx index fcb3276..ebe86cd 100644 --- a/components/pages/work-flow.tsx +++ b/components/pages/work-flow.tsx @@ -476,7 +476,8 @@ Please process this video editing request.`; onGotoCut={generateEditPlan} isSmartChatBoxOpen={isSmartChatBoxOpen} onRetryVideo={(video_id) => handleRetryVideo(video_id)} - aspectRatio={aspectRatio} + aspectRatio={aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '16:9' : '9:16'} + placeholderWidth={aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? `calc((100vh - ${taskObject.final.url ? '8rem' : '12rem'}) / 9 * 16)` : `calc((100vh - ${taskObject.final.url ? '8rem' : '12rem'}) / 16 * 9)`} /> {['scene', 'character', 'video', 'final_video'].includes(taskObject.currentStage) && ( diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx index 134de1d..35fc2e2 100644 --- a/components/pages/work-flow/media-viewer.tsx +++ b/components/pages/work-flow/media-viewer.tsx @@ -40,7 +40,8 @@ interface MediaViewerProps { enableVideoEdit?: boolean; onVideoEditDescriptionSubmit?: (editPoint: EditPointType, description: string) => void; projectId?: string; - aspectRatio: AspectRatioValue; + aspectRatio: string; + placeholderWidth: string; } export const MediaViewer = React.memo(function MediaViewer({ @@ -65,7 +66,8 @@ export const MediaViewer = React.memo(function MediaViewer({ enableVideoEdit = true, onVideoEditDescriptionSubmit, projectId, - aspectRatio + aspectRatio, + placeholderWidth }: MediaViewerProps) { const mainVideoRef = useRef(null); const finalVideoRef = useRef(null); @@ -217,7 +219,7 @@ export const MediaViewer = React.memo(function MediaViewer({ ref={finalVideoRef} className="w-full h-full object-contain rounded-lg" style={{ - aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16" + aspectRatio: aspectRatio }} src={taskObject.final.url} autoPlay={isFinalVideoPlaying} @@ -436,7 +438,7 @@ export const MediaViewer = React.memo(function MediaViewer({