Merge pull request #112 from AVAnnotate/lwj/target-canvases

Manifest generation improvements
AVAnnotate · Nov 19, 2024 · 277e088 · 277e088
2 parents 2416055 + 5148ecd
commit 277e088
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 47 deletions.
diff --git a/generate-iiif-3-manifests.ts b/generate-iiif-3-manifests.ts
@@ -19,7 +19,7 @@ export const createAnnotationPage = (
   pageId: string,
   targetCanvas: string,
   id: string,
-  avFile: string
+  timeOffset: number
 ) => {
   let output: AnnotationPage[] = [];
   // Iterate all  annotations and look for this event
@@ -46,7 +46,7 @@ export const createAnnotationPage = (
           const item: Annotation = {
             '@context': 'http://www.w3.org/ns/anno.jsonld',
             type: 'Annotation',
-            motivation: 'supplementing',
+            motivation: ['commenting', 'tagging'],
             id: id,
             body: [
               {
@@ -55,10 +55,12 @@ export const createAnnotationPage = (
                   .map((n) => Node.string(n))
                   .join('\n'),
                 format: 'text/plain',
-                motivation: ['commenting', 'tagging'],
+                motivation: 'commenting',
               },
             ],
-            target: `${avFile}#t=${annotation.start_time},${annotation.end_time}`,
+            target: `${targetCanvas}#t=${timeOffset + annotation.start_time},${
+              timeOffset + annotation.end_time
+            }`,
           };
 
           annotation.tags.forEach((tag) => {
@@ -126,21 +128,27 @@ export const createManifest = (
 
       const eventId = `${siteURL}/${snakeCase(
         eventData.label
-      )}/canvas-${canvasCount}/canvas`;
+      )}/canvas/${canvasCount}`;
 
       let pageCount = 1;
+      const avFiles = [];
+      let duration = 0;
       for (const [_key, avFile] of Object.entries(
         eventData.audiovisual_files
       )) {
-        const type = mime.lookup(avFile.file_url);
-        const event: Canvas = {
-          id: eventId,
-          type: 'Canvas',
-          duration: avFile.duration,
-          annotations: [],
-          items: [],
-        };
-
+        avFiles.push(avFile);
+        duration += avFile.duration;
+      }
+      const event: Canvas = {
+        id: eventId,
+        type: 'Canvas',
+        duration: duration,
+        annotations: [],
+        items: [],
+      };
+
+      let timeOffset = 0;
+      avFiles.forEach((avFile) => {
         const annos = createAnnotationPage(
           dataDir,
           siteURL,
@@ -152,8 +160,9 @@ export const createManifest = (
           }`,
           eventId,
           `${eventId}/page${pageCount}`,
-          avFile.file_url
+          timeOffset
         );
+        timeOffset += avFile.duration;
 
         if (annos.length > 0) {
           if (allowSubPages === 'true' || allowSubPages === 'TRUE') {
@@ -182,37 +191,39 @@ export const createManifest = (
               ...annos,
             ];
           }
+        }
 
-          event.items?.push({
-            id: `${siteURL}/${snakeCase(
-              eventData.label
-            )}-canvas${canvasCount}/paintings`,
-            type: 'AnnotationPage',
-            items: [
-              {
-                id: `${siteURL}/${snakeCase(
-                  eventData.label
-                )}-canvas${canvasCount}/paintings`,
-                type: 'Annotation',
-                motivation: 'painting',
-                body: {
-                  id: avFile.file_url,
-                  type: eventData.item_type === 'Audio' ? 'Sound' : 'Video',
-                  format: type ? type : 'unknown',
-                },
-                target: `${siteURL}/${snakeCase(
-                  `${eventData.label}`
-                )}-canvas${canvasCount}`,
+        const source = avFile.file_url.split('?');
+        const type = mime.lookup(source[0]);
+
+        event.items?.push({
+          id: `${siteURL}/${snakeCase(
+            eventData.label
+          )}-canvas${canvasCount}/paintings`,
+          type: 'AnnotationPage',
+          items: [
+            {
+              id: `${siteURL}/${snakeCase(
+                eventData.label
+              )}-canvas${canvasCount}/paintings`,
+              type: 'Annotation',
+              motivation: 'painting',
+              body: {
+                id: avFile.file_url,
+                type: eventData.item_type === 'Audio' ? 'Sound' : 'Video',
+                format: type ? type : 'unknown',
+                duration: avFile.duration,
               },
-            ],
-          });
+              target: eventId,
+            },
+          ],
+        });
 
-          output.items.push(event);
-          pageCount++;
-        }
-      }
+        output.items.push(event);
+        pageCount++;
+      });
+      canvasCount++;
     }
-    canvasCount++;
   });
 
   writeFileSync(

diff --git a/src/components/EventViewer/AnnotationUI/TagFilter.tsx b/src/components/EventViewer/AnnotationUI/TagFilter.tsx
@@ -44,18 +44,20 @@ const TagFilter = (props: TagFilterProps) => {
 
     const setsToShow =
       thisPlayer.sets?.length > 0
-        ? props.annotationSets.filter((set) => thisPlayer.sets.includes(set.id))
+        ? props.annotationSets.filter((set: any) =>
+            thisPlayer.sets.includes(set.id)
+          )
         : props.annotationSets;
 
-    setsToShow.forEach((set) => {
-      set?.data.annotations.forEach((ann) => {
+    setsToShow.forEach((set: any) => {
+      set?.data.annotations.forEach((ann: any) => {
         if (ann.tags && ann.tags.length) {
           ann.tags.forEach((tag: { category: string; tag: string }) => {
             const cat = tag.category.toLowerCase();
             tagsObj[cat] ||= {
               tags: [],
               color:
-                tagGroups.find((grp) => grp.category.toLowerCase() === cat)
+                tagGroups.find((grp: any) => grp.category.toLowerCase() === cat)
                   ?.color || '#FFF',
             };
             if (!tagsObj[cat].tags.includes(tag.tag)) {
@@ -105,7 +107,7 @@ const TagFilter = (props: TagFilterProps) => {
                   </div>
                 )}
               </div>
-              {props.annotationSets.map((set) => (
+              {props.annotationSets.map((set: any) => (
                 <div className='block' key={set.id}>
                   <div className='flex flex-row gap-3 py-1'>
                     <Checkbox