Add vault helper hook for the rendering @id.

src/hooks/useGetVaultEntityId.tsx

@@ -0,0 +1,25 @@
+import { NormalizedEntity } from "@iiif/vault/*";
+import { useViewerState } from "src/context/viewer-context";
+
+declare type ExtendedNormalizedEntity = NormalizedEntity & { id: string };
+
+export default function useGetVaultEntityId(id?: string): string | undefined {
+ const { vault } = useViewerState();
+
+ try {
+ const entity: ExtendedNormalizedEntity | undefined | "" =
+ id && vault.get(id);
+
+ if (!entity) throw new Error(`Vault entity ${id} not found.`);
+
+ /**
+ * Vault seems to handle storage `id` and `@id` differently based on the entity type.
+ * Ex: Manifest level rendering items use `id` while Canvas level rendering items use `@id`.
+ * The following logic returns `@id` if it exists, otherwise falls back to `id`.
+ */
+ return entity?.["@id"] || entity?.id;
+ } catch (error) {
+ console.error(error);
+ return id;
+ }
+}

src/hooks/useViewerDownload.tsx

@@ -1,5 +1,6 @@
 import { RenderingItem } from "src/types/presentation-3";
 import { getLabelAsString } from "src/lib/label-helpers";
+import useGetVaultEntityId from "src/hooks/useGetVaultEntityId";
 import useRendering from "src/hooks/use-iiif/useRendering";
 
 type DownloadItem = {
@@ -12,11 +13,14 @@ function prepareDownloadLinks(
  items: RenderingItem[],
  defaultLabel: string,
 ): DownloadItem[] {
- return items.map(({ format, id, label }) => ({
- format,
- id,
- label: getLabelAsString(label) || defaultLabel,
- }));
+ return items.map(({ format, id, label }) => {
+ const resourceId = useGetVaultEntityId(id);
+ return {
+ format,
+ id: resourceId,
+ label: getLabelAsString(label) || defaultLabel,
+ };
+ });
 }
 
 export default function useViewerDownload() {