30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
 
|
import { assetsApi, blobUrl } from "../api/assets";
|
||
|
|
import { Sheet } from "../components/Sheet";
|
||
|
|
import { useLoad } from "../lib/useLoad";
|
||
|
|
|
||
|
|
/** Shows an MTR file: a PDF in a frame, an image as itself, and a link to open it in a new tab. */
|
||
|
|
export function MtrViewer({ assetId, title, onClose }: { assetId: string; title: string; onClose: () => void }) {
|
||
|
|
const [meta] = useLoad((s) => assetsApi.get(assetId, s), assetId);
|
||
|
|
const url = blobUrl(assetId);
|
||
|
|
const mime = meta.state === "ok" ? meta.data.mime : null;
|
||
|
|
return (
|
||
|
|
<Sheet title={title} onClose={onClose} wide>
|
||
|
|
<div className="sheet-acts start">
|
||
|
|
<a className="btn sm" href={url} target="_blank" rel="noopener noreferrer">
|
||
|
|
Open in new tab
|
||
|
|
</a>
|
||
|
|
<span className="grow" />
|
||
|
|
<button className="btn sm ghost" type="button" onClick={onClose}>
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{meta.state === "loading" ? <div className="empty slim">Loading</div> : null}
|
||
|
|
{mime?.startsWith("image/") ? (
|
||
|
|
<img className="mtrimg" src={url} alt={title} />
|
||
|
|
) : meta.state !== "loading" ? (
|
||
|
|
<iframe className="mtrframe" src={url} title={title} />
|
||
|
|
) : null}
|
||
|
|
</Sheet>
|
||
|
|
);
|
||
|
|
}
|