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} onGotoCut={generateEditPlan}
isSmartChatBoxOpen={isSmartChatBoxOpen} isSmartChatBoxOpen={isSmartChatBoxOpen}
onRetryVideo={(video_id) => handleRetryVideo(video_id)} 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) && ( {['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; enableVideoEdit?: boolean;
onVideoEditDescriptionSubmit?: (editPoint: EditPointType, description: string) => void; onVideoEditDescriptionSubmit?: (editPoint: EditPointType, description: string) => void;
projectId?: string; projectId?: string;
aspectRatio: AspectRatioValue; aspectRatio: string;
placeholderWidth: string;
} }
export const MediaViewer = React.memo(function MediaViewer({ export const MediaViewer = React.memo(function MediaViewer({
@ -65,7 +66,8 @@ export const MediaViewer = React.memo(function MediaViewer({
enableVideoEdit = true, enableVideoEdit = true,
onVideoEditDescriptionSubmit, onVideoEditDescriptionSubmit,
projectId, projectId,
aspectRatio aspectRatio,
placeholderWidth
}: MediaViewerProps) { }: MediaViewerProps) {
const mainVideoRef = useRef<HTMLVideoElement>(null); const mainVideoRef = useRef<HTMLVideoElement>(null);
const finalVideoRef = useRef<HTMLVideoElement>(null); const finalVideoRef = useRef<HTMLVideoElement>(null);
@ -217,7 +219,7 @@ export const MediaViewer = React.memo(function MediaViewer({
ref={finalVideoRef} ref={finalVideoRef}
className="w-full h-full object-contain rounded-lg" className="w-full h-full object-contain rounded-lg"
style={{ style={{
aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16" aspectRatio: aspectRatio
}} }}
src={taskObject.final.url} src={taskObject.final.url}
autoPlay={isFinalVideoPlaying} autoPlay={isFinalVideoPlaying}
@ -436,7 +438,7 @@ export const MediaViewer = React.memo(function MediaViewer({
<video <video
className="w-full h-full rounded-lg object-contain object-center" className="w-full h-full rounded-lg object-contain object-center"
style={{ style={{
aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16" aspectRatio: aspectRatio
}} }}
src={taskObject.final.url} src={taskObject.final.url}
loop 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" <div className="absolute top-2 right-2 z-[21] flex items-center gap-2 transition-right duration-100"
style={{ style={{
right: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? toosBtnRight : '' right: aspectRatio === '16:9' ? toosBtnRight : ''
}}> }}>
<Tooltip placement="top" title='Edit'> <Tooltip placement="top" title='Edit'>
<GlassIconButton <GlassIconButton
@ -514,7 +516,7 @@ export const MediaViewer = React.memo(function MediaViewer({
key={`render-video-${urls}`} key={`render-video-${urls}`}
ref={videoContentRef} ref={videoContentRef}
style={{ 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]} key={taskObject.videos.data[currentSketchIndex].urls[0]}
className="w-full h-full rounded-lg object-contain object-center relative z-10" className="w-full h-full rounded-lg object-contain object-center relative z-10"
style={{ style={{
aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16" aspectRatio: aspectRatio
}} }}
src={taskObject.videos.data[currentSketchIndex].urls[0]} src={taskObject.videos.data[currentSketchIndex].urls[0]}
poster={getFirstFrame(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={{ <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 && ( {enableVideoEdit && showVideoModification && (
@ -689,7 +691,7 @@ export const MediaViewer = React.memo(function MediaViewer({
className="relative w-full h-full rounded-lg group overflow-hidden" className="relative w-full h-full rounded-lg group overflow-hidden"
key={`render-sketch-${currentSketch.url}`} key={`render-sketch-${currentSketch.url}`}
style={{ style={{
width: currentSketch.status === 1 ? '100%' : 'calc(100vw - 8rem)' width: currentSketch.status === 1 ? '100%' : placeholderWidth
}} }}
> >
{/* 状态 */} {/* 状态 */}