75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { extname } from "path/posix.ts";
|
|
import MarkdownRenderer from "../components/MarkdownRenderer.tsx";
|
|
import { useEffect, useState } from "preact/hooks";
|
|
|
|
const TypeToExt = {
|
|
"image": new Set([".png", ".jpg", ".jpeg", ".gif", ".svg"]),
|
|
"video": new Set([".mp4", ".webm", ".ogg"]),
|
|
"audio": new Set([".mp3", ".wav", ".flac"]),
|
|
"md": new Set([".md"]),
|
|
"text": new Set([".txt"]),
|
|
"code": new Set([".json", ".js", ".ts", ".css", ".tsx", ".jsx"]),
|
|
};
|
|
|
|
function extToType(ext: string) {
|
|
for (const [type, exts] of Object.entries(TypeToExt)) {
|
|
if (exts.has(ext)) {
|
|
return type;
|
|
}
|
|
}
|
|
return "unknown";
|
|
}
|
|
|
|
function FetchAndRender(props: { src: string; type: string }) {
|
|
const src = props.src;
|
|
const ext = extname(src);
|
|
const [content, setContent] = useState("");
|
|
useEffect(() => {
|
|
(async () => {
|
|
const res = await fetch(src);
|
|
const content = await res.text();
|
|
setContent(content);
|
|
})();
|
|
}, [src]);
|
|
|
|
switch (props.type) {
|
|
case "text":
|
|
return <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>;
|
|
case "md":
|
|
return <MarkdownRenderer text={content} />;
|
|
case "code":
|
|
return (
|
|
<pre
|
|
style={{ whiteSpace: "pre-wrap" }}
|
|
><code lang={ext.slice(1)}>{content}</code></pre>
|
|
);
|
|
//case "csv":
|
|
// return <CsvRenderer content={content} />;
|
|
default:
|
|
return <p>error: invalid type: {props.type} content: {content}</p>;
|
|
}
|
|
}
|
|
|
|
export function RenderView(props: { src: string, mdbase?: string }) {
|
|
const src = props.src;
|
|
const type = extToType(extname(src));
|
|
switch (type) {
|
|
case "text":
|
|
case "md":
|
|
case "code":
|
|
return <FetchAndRender src={src} type={type}></FetchAndRender>;
|
|
//case "csv":
|
|
// return <CsvRenderer content={content} />;
|
|
case "image":
|
|
return <img style={{ width: "100%" }} src={src} />;
|
|
case "video":
|
|
return <video style={{ width: "100%" }} controls src={src} />;
|
|
case "audio":
|
|
return <audio style={{ width: "100%" }} controls src={src} />;
|
|
default:
|
|
return <p>error: invalid type: {type} src: {src}</p>;
|
|
}
|
|
}
|
|
|
|
export default RenderView;
|