Attachment form and table, MusicXML renderer

packages/frontend/src/routes/Attachment.tsx

@@ -0,0 +1,62 @@
+import { AttachmentId, PieceId } from "common";
+import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";
+import { useEffect, useRef } from "react";
+import { useParams } from "react-router-dom";
+import { client } from "../client";
+import { useLoading } from "../loading";
+
+// TODO: Lazy load `opensheetmusicdisplay` (don't bundle into main script).
+
+export function Attachment() {
+
+	const params = useParams();
+	const pieceId = PieceId(params.pieceId!);
+	const attachmentId = AttachmentId(params.attachmentId!);
+
+	const { isLoading, error, data } = useLoading(() => client.piece({ pieceId }).attachment({ attachmentId }).get());
+
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (isLoading || error !== null) return;
+
+		const url = URL.createObjectURL(data?.data);
+
+		const render = () => osmd.render();
+
+		const osmd = new OpenSheetMusicDisplay(containerRef.current!, {
+			autoResize: false,
+			drawTitle: false,
+			drawComposer: false,
+			drawMeasureNumbers: true,
+			drawMeasureNumbersOnlyAtSystemStart: true,
+			//measureNumberInterval: 5,
+			//renderSingleHorizontalStaffline: true,
+		});
+
+		osmd.load(url).then(render);
+
+		window.addEventListener("resize", render);
+
+		return () => {
+			URL.revokeObjectURL(url);
+			window.removeEventListener("resize", render);
+		};
+	}, [isLoading, data]);
+
+	if (isLoading) {
+		return (
+			<div className="w-full h-full overflow-hidden flex items-center justify-center">
+				<div>Ładowanie…</div>
+			</div>
+		);
+	}
+
+	if (error !== null) {
+		<div className="w-full h-full overflow-hidden flex items-center justify-center">
+			<div>Wystąpił błąd: {error.value}</div>
+		</div>
+	}
+
+	return <div ref={containerRef} className="w-full h-full overflow-scroll sheet-music-display" />;
+}