diff --git a/docs/source-analysis.html b/docs/source-analysis.html index db8a867..ad81098 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -588,7 +588,7 @@ web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。 web/app/globals.css全局主题变量、登录页视觉样式、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。 web/app/page.tsx产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 音频解析工作表；“开始”编排状态只负责在下载完成后自动触发 triggerTranscribe，不再默认触发抽帧、Vision 扫描或分镜初稿保存；底部吸附音频条不再从主界面渲染。 - web/components/ad-recreation-board.tsx信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及统一的音频解析结果面板；面板顶部是一行讲话人/节奏/背景音摘要，下方左侧为原视频播放器、右侧为逐句时间轴，底部横向音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点。视频播放会同步高亮并滚动当前句，点击音频波形或字幕行会跳转原视频时间。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 + web/components/ad-recreation-board.tsx信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及统一的音频解析结果面板；面板顶部是一行讲话人/节奏/背景音摘要，下方左侧为原视频播放器、右侧为逐句时间轴，底部横向音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。 web/app/login/layout.tsx登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 /login 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。 web/components/login/oasis-canvas.tsx登录页全屏动态视觉层：用 iframe 直接承载下载包 web/public/oasis-source/index.html 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 postMessage 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。 @@ -941,6 +941,18 @@ SubjectAsset {

变更记录

这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。

+
+
+

2026-05-17 · 平滑音频波形播放线

+ UI + Workflow +
+
+

问题：波形上的播放线只跟随 video.timeupdate 刷新，浏览器触发频率较低，播放时会一顿一顿。

+

改动：web/components/ad-recreation-board.tsx 在原视频播放期间启用 requestAnimationFrame 同步 currentTime，暂停、结束和卸载时停止帧循环；波形 SVG 点位用 useMemo 缓存，避免播放时重复计算整条包络。

+

影响：web/components/ad-recreation-board.tsx、docs/source-analysis.html。后续调整波形交互时，播放线应继续走帧同步，不要只依赖 timeupdate。

+
+

2026-05-17 · 增加原视频与连续波形联动审片

diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx index 8bb2e5b..cf20709 100644 --- a/web/components/ad-recreation-board.tsx +++ b/web/components/ad-recreation-board.tsx @@ -595,6 +595,7 @@ function AudioIntakePanel({ job }: { job: Job | null }) { const [audioFeatureStatus, setAudioFeatureStatus] = useState("idle") const videoRef = useRef(null) const rowRefs = useRef>({}) + const syncFrameRef = useRef(null) const script = job?.audio_script const audioSrcUrl = job ? apiAssetUrl(job.source_audio_url) || sourceAudioUrl(job.id) : "" const profiles = [ @@ -646,6 +647,34 @@ function AudioIntakePanel({ job }: { job: Job | null }) { if (activeSegment) rowRefs.current[activeSegment.index]?.scrollIntoView({ block: "nearest" }) }, [activeSegment?.index]) + useEffect(() => { + return () => { + if (syncFrameRef.current !== null) cancelAnimationFrame(syncFrameRef.current) + } + }, []) + + const stopFrameSync = () => { + if (syncFrameRef.current !== null) { + cancelAnimationFrame(syncFrameRef.current) + syncFrameRef.current = null + } + if (videoRef.current) setCurrentTime(videoRef.current.currentTime) + } + + const startFrameSync = () => { + if (syncFrameRef.current !== null) cancelAnimationFrame(syncFrameRef.current) + const tick = () => { + const video = videoRef.current + if (!video || video.paused || video.ended) { + stopFrameSync() + return + } + setCurrentTime(video.currentTime) + syncFrameRef.current = requestAnimationFrame(tick) + } + syncFrameRef.current = requestAnimationFrame(tick) + } + const seekTo = (time: number) => { const next = clampNumber(time, 0, timelineDuration) if (videoRef.current) videoRef.current.currentTime = next @@ -706,6 +735,10 @@ function AudioIntakePanel({ job }: { job: Job | null }) { src={videoSrcUrl} onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)} onSeeked={(event) => setCurrentTime(event.currentTarget.currentTime)} + onPlay={startFrameSync} + onPlaying={startFrameSync} + onPause={stopFrameSync} + onEnded={stopFrameSync} onLoadedMetadata={(event) => { setMediaDuration(Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0) setCurrentTime(event.currentTarget.currentTime) @@ -778,16 +811,18 @@ function AudioWaveform({ }) { const pointerPct = clampNumber((currentTime / Math.max(duration, 1)) * 100, 0, 100) const hasFeatures = features.length > 0 - const topPoints = features.map((feature, index) => { - const x = features.length <= 1 ? 0 : (index / (features.length - 1)) * 100 - return `${x.toFixed(2)},${(50 - feature.loudness * 32).toFixed(2)}` - }).join(" ") - const bottomPoints = [...features].reverse().map((feature, index) => { - const originalIndex = features.length - 1 - index - const x = features.length <= 1 ? 0 : (originalIndex / (features.length - 1)) * 100 - return `${x.toFixed(2)},${(50 + feature.loudness * 32).toFixed(2)}` - }).join(" ") - const envelopePoints = `${topPoints} ${bottomPoints}` + const { topPoints, bottomPoints, envelopePoints } = useMemo(() => { + const top = features.map((feature, index) => { + const x = features.length <= 1 ? 0 : (index / (features.length - 1)) * 100 + return `${x.toFixed(2)},${(50 - feature.loudness * 32).toFixed(2)}` + }).join(" ") + const bottom = [...features].reverse().map((feature, index) => { + const originalIndex = features.length - 1 - index + const x = features.length <= 1 ? 0 : (originalIndex / (features.length - 1)) * 100 + return `${x.toFixed(2)},${(50 + feature.loudness * 32).toFixed(2)}` + }).join(" ") + return { topPoints: top, bottomPoints: bottom, envelopePoints: `${top} ${bottom}` } + }, [features]) return (
))}