Spaces:
Running
Running
| import { ArrowSquareOutIcon, FileIcon, HourglassIcon } from "@phosphor-icons/react"; | |
| import type { DataType, FileRef, OutputValue } from "../lib/types"; | |
| const isRef = (v: unknown): v is FileRef => !!v && typeof v === "object" && typeof (v as FileRef).url === "string"; | |
| const isImageUrl = (u: string) => /\.(png|jpe?g|webp|gif|avif|bmp|svg)(\?|$)/i.test(u); | |
| const isAudioUrl = (u: string) => /\.(mp3|wav|ogg|flac|m4a|aac|opus)(\?|$)/i.test(u); | |
| const isVideoUrl = (u: string) => /\.(mp4|webm|mov|mkv)(\?|$)/i.test(u); | |
| const kindOf = (ref: FileRef, hint: DataType): "image" | "audio" | "video" | "file" => { | |
| const m = ref.mime ?? ""; | |
| if (m.startsWith("image/") || isImageUrl(ref.url)) return "image"; | |
| if (m.startsWith("audio/") || isAudioUrl(ref.url)) return "audio"; | |
| if (m.startsWith("video/") || isVideoUrl(ref.url)) return "video"; | |
| if (hint === "image" || hint === "audio" || hint === "video") return hint; | |
| return "file"; | |
| }; | |
| function FileView({ file, hint }: { file: FileRef; hint: DataType }) { | |
| const kind = kindOf(file, hint); | |
| const open = ( | |
| <a className="node-output__open nodrag" href={file.url} target="_blank" rel="noreferrer" title="Open in a new tab" onClick={(e) => e.stopPropagation()}> | |
| <ArrowSquareOutIcon size={12} weight="bold" /> | |
| </a> | |
| ); | |
| switch (kind) { | |
| case "image": | |
| return ( | |
| <> | |
| <img src={file.url} alt={file.name ?? ""} draggable={false} /> | |
| {open} | |
| </> | |
| ); | |
| case "audio": | |
| return ( | |
| <> | |
| <audio src={file.url} controls className="nodrag" preload="metadata" /> | |
| {open} | |
| </> | |
| ); | |
| case "video": | |
| return ( | |
| <> | |
| <video src={file.url} controls className="nodrag" preload="metadata" /> | |
| {open} | |
| </> | |
| ); | |
| default: | |
| return ( | |
| <a className="node-output__file nodrag" href={file.url} target="_blank" rel="noreferrer"> | |
| <FileIcon size={13} /> | |
| <span className="truncate">{file.name ?? file.url.split("/").pop()}</span> | |
| </a> | |
| ); | |
| } | |
| } | |
| /** Renders one output port's value. */ | |
| export function OutputView({ value, type, pending }: { value: OutputValue | undefined; type: DataType; pending?: boolean }) { | |
| if (value === undefined || value === null || value === "") { | |
| return ( | |
| <div className="node-output"> | |
| <div className="node-output__empty"> | |
| {pending ? <HourglassIcon size={12} /> : null} | |
| <span>{pending ? "Waiting…" : "No output yet"}</span> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| if (isRef(value)) { | |
| return ( | |
| <div className="node-output"> | |
| <FileView file={value} hint={type} /> | |
| </div> | |
| ); | |
| } | |
| if (Array.isArray(value) && value.length && value.every(isRef)) { | |
| const refs = value as FileRef[]; | |
| if (refs.length === 1 || (type === "image" && refs.every((r) => kindOf(r, type) === "image"))) | |
| return ( | |
| <div className="node-output"> | |
| <FileView file={refs[refs.length - 1]} hint={type} /> | |
| </div> | |
| ); | |
| return ( | |
| <div className="node-output"> | |
| <div className="node-output__grid"> | |
| {refs.slice(0, 9).map((r, i) => | |
| kindOf(r, "image") === "image" ? ( | |
| <a key={i} href={r.url} target="_blank" rel="noreferrer" className="nodrag"> | |
| <img src={r.url} alt="" draggable={false} /> | |
| </a> | |
| ) : ( | |
| <FileView key={i} file={r} hint="file" /> | |
| ), | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| const text = typeof value === "string" ? value : typeof value === "number" || typeof value === "boolean" ? String(value) : JSON.stringify(value, null, 1); | |
| return ( | |
| <div className="node-output"> | |
| <pre className="node-output__text nodrag nowheel">{text.length > 2000 ? `${text.slice(0, 2000)}…` : text}</pre> | |
| </div> | |
| ); | |
| } | |
| /** First image URL in a value, for thumbnails. */ | |
| export const thumbOf = (value: OutputValue | undefined): string | null => { | |
| if (isRef(value)) return kindOf(value, "image") === "image" ? value.url : null; | |
| if (Array.isArray(value)) for (const v of value) if (isRef(v) && kindOf(v, "image") === "image") return v.url; | |
| return null; | |
| }; | |