Spaces:
Runtime error
Runtime error
| import { useEffect, useState, type ReactNode } from "react"; | |
| import { Link } from "react-router-dom"; | |
| import { artifactsApi, videosApi } from "../api/endpoints"; | |
| import type { Artifact, Citation } from "../api/types"; | |
| import { useJob } from "../hooks/useJob"; | |
| import { Body } from "./ArtifactCard"; | |
| import { SlideDeckViewer } from "./SlideDeck"; | |
| import { TrashIcon } from "./icons/Icons"; | |
| import { errorMessage, formatDate, formatDuration, JobProgress } from "./ui"; | |
| function statusOf(a: Artifact, running: boolean): { label: string; tone: "done" | "busy" | "failed" } { | |
| if (a.status === "failed") return { label: "Failed", tone: "failed" }; | |
| if (running || a.status !== "ready") return { label: "Generating", tone: "busy" }; | |
| return { label: "Ready", tone: "done" }; | |
| } | |
| /** One generated item as a full-width row (like the Videos list): its type, title, status and date. A video opens its | |
| * editor, a finished slide deck its viewer (to read, edit, present or download it); anything else expands in place | |
| * to its player or image. */ | |
| export function ArtifactRow({ | |
| artifact: initial, | |
| onCite, | |
| onRemoved, | |
| onChanged, | |
| actions, | |
| }: { | |
| artifact: Artifact; | |
| onCite?: (c: Citation) => void; | |
| onRemoved?: (id: string) => void; | |
| onChanged?: (a: Artifact) => void; | |
| actions?: (a: Artifact) => ReactNode; | |
| }) { | |
| const [artifact, setArtifact] = useState(initial); | |
| const [openRow, setOpenRow] = useState(false); | |
| const [armed, setArmed] = useState(false); | |
| const [error, setError] = useState<string | null>(null); | |
| const job = useJob(artifact.job, () => { | |
| artifactsApi.get(artifact.id).then((a) => { | |
| setArtifact(a); | |
| onChanged?.(a); | |
| }); | |
| }); | |
| const running = !!job && (job.status === "queued" || job.status === "running"); | |
| const st = statusOf(artifact, running); | |
| const isEditorVideo = artifact.provider === "blog2video"; | |
| const isDeck = artifact.type === "slide_deck" && artifact.status === "ready"; | |
| const [viewing, setViewing] = useState(false); | |
| useEffect(() => { | |
| if (!armed) return; | |
| const t = setTimeout(() => setArmed(false), 4000); | |
| return () => clearTimeout(t); | |
| }, [armed]); | |
| async function remove() { | |
| if (!armed) return setArmed(true); | |
| setArmed(false); | |
| try { | |
| // A blog2video video is also removed from blog2video. | |
| await (isEditorVideo ? videosApi.remove(artifact.id) : artifactsApi.remove(artifact.id)); | |
| onRemoved?.(artifact.id); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } | |
| } | |
| async function retry() { | |
| setError(null); | |
| try { | |
| setArtifact(await artifactsApi.retry(artifact.id)); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } | |
| } | |
| const main = ( | |
| <> | |
| <span className="vw-list-title"> | |
| <span className={`type-chip ${artifact.type}`}>{artifact.type_label}</span> | |
| {/* A deck's title starts "Slide deck: ", which its chip already says */} | |
| <strong>{artifact.type === "slide_deck" ? artifact.title.replace(/^Slide deck: /, "") : artifact.title}</strong> | |
| <span className={`vw-dot ${st.tone}`} aria-hidden="true" /> | |
| <span className="muted">{st.label}</span> | |
| </span> | |
| <span className="vw-list-meta muted"> | |
| {artifact.created_at && <span>{formatDate(artifact.created_at, true)}</span>} | |
| {artifact.content.duration_s ? <span>{formatDuration(artifact.content.duration_s)}</span> : null} | |
| {artifact.content.aspect_ratio && <span>{artifact.content.aspect_ratio === "portrait" ? "Portrait" : "Landscape"}</span>} | |
| </span> | |
| </> | |
| ); | |
| return ( | |
| <li className={`vw-list-row artifact-row${openRow ? " open" : ""}`}> | |
| <div className="artifact-row-head"> | |
| {isEditorVideo ? ( | |
| <Link to={`/app/videos/${artifact.id}`} className="vw-list-main">{main}</Link> | |
| ) : isDeck ? ( | |
| <button type="button" className="vw-list-main artifact-row-toggle" onClick={() => setViewing(true)}> | |
| {main} | |
| </button> | |
| ) : ( | |
| <button type="button" className="vw-list-main artifact-row-toggle" aria-expanded={openRow} | |
| onClick={() => setOpenRow((o) => !o)}> | |
| {main} | |
| </button> | |
| )} | |
| {isDeck && actions?.(artifact)} | |
| {artifact.status === "failed" && ( | |
| <button type="button" className="btn btn-small" onClick={retry}>Retry</button> | |
| )} | |
| {onRemoved && ( | |
| <button type="button" className={`icon-btn vw-list-delete${armed ? " armed" : ""}`} | |
| aria-label={armed ? "Click again to delete" : `Delete ${artifact.title}`} | |
| title={armed ? "Click again to delete" : "Delete"} onClick={remove}> | |
| {armed ? <span className="small">Delete?</span> : <TrashIcon size={18} />} | |
| </button> | |
| )} | |
| </div> | |
| {running && job && <JobProgress job={job} compact />} | |
| {error && <p className="error-text">{error}</p>} | |
| {viewing && ( | |
| <SlideDeckViewer artifact={artifact} onClose={() => setViewing(false)} onSaved={(a) => { | |
| setArtifact(a); | |
| onChanged?.(a); | |
| }} onDelete={async () => { | |
| await artifactsApi.remove(artifact.id); | |
| setViewing(false); | |
| onRemoved?.(artifact.id); | |
| }} /> | |
| )} | |
| {openRow && !isEditorVideo && !isDeck && ( | |
| <div className="artifact-row-body"> | |
| {artifact.status === "failed" && artifact.content.error && <p className="error-text">{artifact.content.error}</p>} | |
| <Body artifact={artifact} onCite={onCite} /> | |
| <div className="artifact-actions"> | |
| {actions?.(artifact)} | |
| {artifact.download_url && <a className="btn btn-small" href={artifact.download_url}>Download</a>} | |
| </div> | |
| </div> | |
| )} | |
| </li> | |
| ); | |
| } | |