refactor: narrow intake to audio-first workflow

This commit is contained in:
2026-05-17 12:55:45 +08:00
parent b02bc3f583
commit 3b9e74f0a2
9 changed files with 395 additions and 220 deletions

View File

@@ -1,7 +1,7 @@
"use client"
import { useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react"
import { ChevronDown, ChevronUp, GripHorizontal, Mic2, Volume2, X } from "lucide-react"
import { ChevronDown, ChevronUp, GripHorizontal, Mic2, X } from "lucide-react"
import { apiAssetUrl, sourceAudioUrl, type Job, type TranscriptSegment } from "@/lib/api"
const STORAGE_KEY = "skg.audio-strip.height"
@@ -151,7 +151,6 @@ export function AudioStrip({ job, open, onClose }: { job: Job | null; open: bool
const audioRef = useRef<HTMLAudioElement>(null)
const transcript = job?.transcript ?? []
const audioScript = job?.audio_script
const voiceUrl = apiAssetUrl(audioScript?.voice_url)
const sourceUrl = job ? apiAssetUrl(job.source_audio_url || sourceAudioUrl(job.id)) : ""
const processing = !!job && (job.status === "transcribing" || audioScript?.status === "rewriting")
const activeSegment = transcript.find((segment) => currentTime >= segment.start && currentTime <= Math.max(segment.end, segment.start + 0.2))
@@ -248,12 +247,6 @@ export function AudioStrip({ job, open, onClose }: { job: Job | null; open: bool
<span className="rounded-full border border-white/10 px-2 py-0.5 text-[10px] text-white/45">{transcript.length || 0} </span>
</div>
<div className="flex items-center gap-2">
{voiceUrl && (
<div className="hidden items-center gap-1.5 text-[10px] text-emerald-200/80 sm:flex">
<Volume2 className="h-3.5 w-3.5" />
English VO ready
</div>
)}
<button
type="button"
onClick={() => setCollapsed((v) => !v)}
@@ -332,18 +325,24 @@ export function AudioStrip({ job, open, onClose }: { job: Job | null; open: bool
</div>
</div>
<div className="min-h-0 overflow-y-auto rounded-lg border border-emerald-300/20 bg-emerald-300/[0.07] p-3 max-lg:hidden">
<div className="mb-2 text-[10px] uppercase tracking-widest text-emerald-100/70">English product VO · SKG intro</div>
<p className="text-[12.5px] leading-relaxed text-white/90">
{audioScript?.rewritten_text || "Waiting for the source audio length to become a natural English SKG product voice-over."}
</p>
{voiceUrl && (
<audio controls src={voiceUrl} className="mt-3 h-8 w-full" />
)}
{audioScript?.product_brief && (
<div className="mt-3 border-t border-white/10 pt-2 text-[11px] leading-relaxed text-white/55">
{audioScript.product_brief}
<div className="mb-2 text-[10px] uppercase tracking-widest text-emerald-100/70">Original audio analysis</div>
<div className="space-y-3 text-[12px] leading-relaxed text-white/86">
<div>
<div className="mb-1 text-[10px] font-semibold uppercase tracking-widest text-white/38"></div>
<p>{audioScript?.source_text || "Waiting for transcript extraction."}</p>
</div>
)}
{audioScript?.source_zh && (
<div>
<div className="mb-1 text-[10px] font-semibold uppercase tracking-widest text-white/38"></div>
<p>{audioScript.source_zh}</p>
</div>
)}
<div className="border-t border-white/10 pt-3 text-[11px] text-white/60">
{audioScript?.speaker_profile && <p><span className="text-white/36"></span>{audioScript.speaker_profile}</p>}
{audioScript?.rhythm_profile && <p className="mt-1"><span className="text-white/36"></span>{audioScript.rhythm_profile}</p>}
{audioScript?.background_audio_profile && <p className="mt-1"><span className="text-white/36"></span>{audioScript.background_audio_profile}</p>}
</div>
</div>
</div>
</div>
)}