61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { client } from "@/client";
|
|
import { useLoading } from "@/hooks/useLoading.ts";
|
|
import { AttachmentId, PieceId } from "common";
|
|
import { OpenSheetMusicDisplay } from "opensheetmusicdisplay";
|
|
import { useEffect, useRef } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
export default 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" />;
|
|
};
|