xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

视频比例占位

Browse Source
This commit is contained in:
北枳 2025-10-04 17:11:46 +08:00
parent de9b28e935
commit 761beb799d
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/pages/work-flow.tsx
View File

@ -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) && (

20
components/pages/work-flow/media-viewer.tsx
View File

@ -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<HTMLVideoElement>(null);
const finalVideoRef = useRef<HTMLVideoElement>(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({
<video
className="w-full h-full rounded-lg object-contain object-center"
style={{
aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16"
aspectRatio: aspectRatio
}}
src={taskObject.final.url}
loop
@ -463,7 +465,7 @@ export const MediaViewer = React.memo(function MediaViewer({
{/* 编辑和剪辑按钮 */}
<div className="absolute top-2 right-2 z-[21] flex items-center gap-2 transition-right duration-100"
style={{
right: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? toosBtnRight : ''
right: aspectRatio === '16:9' ? toosBtnRight : ''
}}>
<Tooltip placement="top" title='Edit'>
<GlassIconButton
@ -514,7 +516,7 @@ export const MediaViewer = React.memo(function MediaViewer({
key={`render-video-${urls}`}
ref={videoContentRef}
style={{
width: taskObject.videos.data[currentSketchIndex].video_status !== 1 ? 'calc(100vw - 8rem)' : '100%'
width: taskObject.videos.data[currentSketchIndex].video_status !== 1 ? placeholderWidth : '100%'
}}
>
{/* 背景模糊的图片 */}
@ -562,7 +564,7 @@ export const MediaViewer = React.memo(function MediaViewer({
key={taskObject.videos.data[currentSketchIndex].urls[0]}
className="w-full h-full rounded-lg object-contain object-center relative z-10"
style={{
aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16"
aspectRatio: aspectRatio
}}
src={taskObject.videos.data[currentSketchIndex].urls[0]}
poster={getFirstFrame(taskObject.videos.data[currentSketchIndex].urls[0])}
@ -597,7 +599,7 @@ export const MediaViewer = React.memo(function MediaViewer({
{/* 跳转剪辑按钮 */}
<div className="absolute top-2 right-2 z-[21] flex items-center gap-2 transition-right duration-100" style={{
right: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? toosBtnRight : ''
right: aspectRatio === '16:9' ? toosBtnRight : ''
}}>
{/* 视频编辑模式切换按钮 - 通过服务器配置控制显示 */}
{enableVideoEdit && showVideoModification && (
@ -689,7 +691,7 @@ export const MediaViewer = React.memo(function MediaViewer({
className="relative w-full h-full rounded-lg group overflow-hidden"
key={`render-sketch-${currentSketch.url}`}
style={{
width: currentSketch.status === 1 ? '100%' : 'calc(100vw - 8rem)'
width: currentSketch.status === 1 ? '100%' : placeholderWidth
}}
>
{/* 状态 */}