103 lines
3.3 KiB
TypeScript
Executable File
103 lines
3.3 KiB
TypeScript
Executable File
import React from "react"
|
|
import type { CoverConfig } from "../../editing-planner/types"
|
|
import { useStep6Cover } from "../hooks/useStep6Cover"
|
|
import { CoverModeSelector } from "./cover-settings/CoverModeSelector"
|
|
import { FrameCoverPicker } from "./cover-settings/FrameCoverPicker"
|
|
import { UploadCoverPicker } from "./cover-settings/UploadCoverPicker"
|
|
|
|
interface Step6CoverSettingsProps {
|
|
coverSettings: CoverConfig
|
|
onCoverSettingsChange: (settings: CoverConfig) => void
|
|
duration: number
|
|
}
|
|
|
|
const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
|
|
const {
|
|
coverSettings,
|
|
formatTime,
|
|
toggleEnabled,
|
|
setMode,
|
|
setFrameTime,
|
|
handleUpload,
|
|
totalDuration,
|
|
COVER_MODE_LABELS,
|
|
COVER_MODE_ICONS,
|
|
} = useStep6Cover(props)
|
|
|
|
return (
|
|
<div className="xx-form-section">
|
|
<h3>🖼️ 选择封面</h3>
|
|
|
|
<div className="xx-cover-header">
|
|
<span className="xx-cover-header-label">启用自定义封面</span>
|
|
<label className="xx-switch">
|
|
<input
|
|
type="checkbox"
|
|
checked={coverSettings.enabled}
|
|
onChange={(e) => toggleEnabled(e.target.checked)}
|
|
/>
|
|
<span className="xx-switch-slider" />
|
|
</label>
|
|
</div>
|
|
|
|
{coverSettings.enabled && (
|
|
<>
|
|
<div className="xx-section-title">封面来源</div>
|
|
<CoverModeSelector
|
|
mode={coverSettings.mode}
|
|
onModeChange={setMode}
|
|
modeLabels={COVER_MODE_LABELS}
|
|
modeIcons={COVER_MODE_ICONS}
|
|
/>
|
|
|
|
{coverSettings.mode === "auto" && (
|
|
<div className="xx-cover-auto">
|
|
<div className="xx-cover-auto-desc">
|
|
AI 将分析视频内容，自动选择最具吸引力的画面作为封面。
|
|
</div>
|
|
<div className="xx-cover-auto-badge">
|
|
<span style={{ fontSize: 24 }}>🤖</span>
|
|
<span>AI 智能选帧</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{coverSettings.mode === "frame" && (
|
|
<FrameCoverPicker
|
|
frameTime={coverSettings.frame_time}
|
|
totalDuration={totalDuration}
|
|
formatTime={formatTime}
|
|
onFrameTimeChange={setFrameTime}
|
|
/>
|
|
)}
|
|
|
|
{coverSettings.mode === "upload" && (
|
|
<UploadCoverPicker uploadUrl={coverSettings.upload_url} onUpload={handleUpload} />
|
|
)}
|
|
|
|
<div className="xx-section-title">封面预览</div>
|
|
<div className="xx-cover-preview-box">
|
|
{coverSettings.upload_url ? (
|
|
<img src={coverSettings.upload_url} alt="封面预览" className="xx-cover-preview-img" />
|
|
) : (
|
|
<div className="xx-cover-preview-placeholder">
|
|
<span style={{ fontSize: 28 }}>🖼️</span>
|
|
<span>
|
|
{coverSettings.mode === "auto"
|
|
? "AI 智能选择"
|
|
: coverSettings.mode === "frame"
|
|
? `帧 ${formatTime(coverSettings.frame_time)}`
|
|
: "未上传封面"}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="xx-cover-preview-ratio">16:9</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Step6CoverSettings
|