forked from 77media/video-flow
调整工作流样式布局
This commit is contained in:
北枳
parent
09fc676a35
commit
89a3a0cc3a
@ -159,6 +159,10 @@
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
.videoContainer-qteKNi {
|
||||
flex: 1;
|
||||
@ -166,13 +170,14 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
width: max-content;
|
||||
}
|
||||
.heroVideo-FIzuK1 {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background-color: #0003;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.container-kIPoeH {
|
||||
|
||||
@ -21,7 +21,6 @@ const WorkFlow = React.memo(function WorkFlow() {
|
||||
console.log("init-WorkFlow");
|
||||
return () => console.log("unmount-WorkFlow");
|
||||
}, []);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
|
||||
const [activeEditTab, setActiveEditTab] = React.useState('1');
|
||||
@ -92,102 +91,98 @@ const WorkFlow = React.memo(function WorkFlow() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<div className="w-full overflow-hidden h-[calc(100vh-6rem)] absolute top-[4rem] left-0 right-0 px-[1rem]">
|
||||
<div className="flex h-full flex-col justify-start items-center">
|
||||
<div className="container-H2sRZG">
|
||||
<div className="splashContainer-otuV_A">
|
||||
<div className="content-vPGYx8">
|
||||
<div className="info-UUGkPJ">
|
||||
<ErrorBoundary>
|
||||
<TaskInfo
|
||||
isLoading={isLoading}
|
||||
taskObject={taskObject}
|
||||
currentLoadingText={currentLoadingText}
|
||||
dataLoadError={dataLoadError}
|
||||
roles={taskObject.roles.data}
|
||||
isPauseWorkFlow={isPauseWorkFlow}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<div className="w-full h-full">
|
||||
<div className="splashContainer-otuV_A">
|
||||
<div className="content-vPGYx8">
|
||||
<div className="info-UUGkPJ">
|
||||
<ErrorBoundary>
|
||||
<TaskInfo
|
||||
isLoading={isLoading}
|
||||
taskObject={taskObject}
|
||||
currentLoadingText={currentLoadingText}
|
||||
dataLoadError={dataLoadError}
|
||||
roles={taskObject.roles.data}
|
||||
isPauseWorkFlow={isPauseWorkFlow}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<div className="media-Ocdu1O rounded-lg">
|
||||
<div
|
||||
className="videoContainer-qteKNi"
|
||||
ref={containerRef}
|
||||
>
|
||||
{dataLoadError ? (
|
||||
</div>
|
||||
<div className="media-Ocdu1O rounded-lg">
|
||||
<div
|
||||
className="videoContainer-qteKNi"
|
||||
ref={containerRef}
|
||||
>
|
||||
{dataLoadError ? (
|
||||
<motion.div
|
||||
className="flex flex-col items-center justify-center w-full aspect-video rounded-lg bg-red-50 border-2 border-red-200"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<motion.div
|
||||
className="flex flex-col items-center justify-center w-full aspect-video rounded-lg bg-red-50 border-2 border-red-200"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex items-center gap-3 mb-4"
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className="flex items-center gap-3 mb-4"
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
>
|
||||
<AlertCircle className="w-8 h-8 text-red-500" />
|
||||
<h3 className="text-lg font-medium text-red-800">数据加载失败</h3>
|
||||
</motion.div>
|
||||
|
||||
<p className="text-red-600 text-center mb-6 max-w-md px-4">
|
||||
{dataLoadError}
|
||||
</p>
|
||||
|
||||
<motion.button
|
||||
className="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
||||
onClick={() => retryLoadData?.()}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
重试加载
|
||||
</motion.button>
|
||||
<AlertCircle className="w-8 h-8 text-red-500" />
|
||||
<h3 className="text-lg font-medium text-red-800">数据加载失败</h3>
|
||||
</motion.div>
|
||||
) : isLoading ? (
|
||||
<Skeleton className="w-full aspect-video rounded-lg" />
|
||||
) : (
|
||||
<div className="heroVideo-FIzuK1" style={{ aspectRatio: "16 / 9" }} key={currentSketchIndex}>
|
||||
<ErrorBoundary>
|
||||
<MediaViewer
|
||||
taskObject={taskObject}
|
||||
scriptData={scriptData}
|
||||
currentSketchIndex={currentSketchIndex}
|
||||
isVideoPlaying={isVideoPlaying}
|
||||
onEditModalOpen={handleEditModalOpen}
|
||||
onToggleVideoPlay={toggleVideoPlay}
|
||||
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
||||
setAnyAttribute={setAnyAttribute}
|
||||
isPauseWorkFlow={isPauseWorkFlow}
|
||||
applyScript={applyScript}
|
||||
mode={mode}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
|
||||
<div className="imageGrid-ymZV9z hide-scrollbar">
|
||||
|
||||
<p className="text-red-600 text-center mb-6 max-w-md px-4">
|
||||
{dataLoadError}
|
||||
</p>
|
||||
|
||||
<motion.button
|
||||
className="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
||||
onClick={() => retryLoadData?.()}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
重试加载
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
) : isLoading ? (
|
||||
<Skeleton className="w-full aspect-video rounded-lg" />
|
||||
) : (
|
||||
<div className={`heroVideo-FIzuK1 ${['final_video', 'script'].includes(taskObject.currentStage) ? 'h-[calc(100vh-6rem)] w-[calc((100vh-6rem)/9*16)]' : 'h-[calc(100vh-6rem-200px)] w-[calc((100vh-6rem-200px)/9*16)]'}`} style={{ aspectRatio: "16 / 9" }} key={currentSketchIndex}>
|
||||
<ErrorBoundary>
|
||||
<ThumbnailGrid
|
||||
isEditModalOpen={isEditModalOpen}
|
||||
<MediaViewer
|
||||
taskObject={taskObject}
|
||||
isLoading={isLoading}
|
||||
scriptData={scriptData}
|
||||
currentSketchIndex={currentSketchIndex}
|
||||
taskSketch={taskSketch}
|
||||
taskVideos={taskVideos}
|
||||
isGeneratingSketch={isGeneratingSketch}
|
||||
isGeneratingVideo={isGeneratingVideo}
|
||||
sketchCount={sketchCount}
|
||||
totalSketchCount={totalSketchCount}
|
||||
onSketchSelect={setCurrentSketchIndex}
|
||||
isVideoPlaying={isVideoPlaying}
|
||||
onEditModalOpen={handleEditModalOpen}
|
||||
onToggleVideoPlay={toggleVideoPlay}
|
||||
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
||||
setAnyAttribute={setAnyAttribute}
|
||||
isPauseWorkFlow={isPauseWorkFlow}
|
||||
applyScript={applyScript}
|
||||
mode={mode}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
|
||||
<div className="h-[112px] w-[calc((100vh-6rem-200px)/9*16)]">
|
||||
<ThumbnailGrid
|
||||
isEditModalOpen={isEditModalOpen}
|
||||
taskObject={taskObject}
|
||||
isLoading={isLoading}
|
||||
currentSketchIndex={currentSketchIndex}
|
||||
taskSketch={taskSketch}
|
||||
taskVideos={taskVideos}
|
||||
isGeneratingSketch={isGeneratingSketch}
|
||||
isGeneratingVideo={isGeneratingVideo}
|
||||
sketchCount={sketchCount}
|
||||
totalSketchCount={totalSketchCount}
|
||||
onSketchSelect={setCurrentSketchIndex}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@ export const MediaViewer = React.memo(function MediaViewer({
|
||||
return (
|
||||
<video
|
||||
ref={finalVideoRef}
|
||||
className="w-[auto] h-full object-cover rounded-lg"
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
src={taskObject.final.url}
|
||||
autoPlay={isFinalVideoPlaying}
|
||||
loop
|
||||
@ -305,7 +305,7 @@ export const MediaViewer = React.memo(function MediaViewer({
|
||||
transition={{ duration: 0.8, ease: "easeInOut" }}
|
||||
>
|
||||
<video
|
||||
className="w-[auto] h-full rounded-lg object-cover object-center"
|
||||
className="w-full h-full rounded-lg object-cover object-center"
|
||||
src={taskObject.final.url}
|
||||
loop
|
||||
playsInline
|
||||
|
||||
@ -366,7 +366,7 @@ export function ThumbnailGrid({
|
||||
<div
|
||||
ref={thumbnailsRef}
|
||||
tabIndex={0}
|
||||
className="w-full grid grid-flow-col auto-cols-[20%] gap-4 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none"
|
||||
className="w-full h-full grid grid-flow-col auto-cols-[20%] gap-4 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none"
|
||||
autoFocus
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user