Parse rendering prop at manifest/canvas levels

samvera-labs · May 31, 2022 · 760ba54 · 760ba54
1 parent 9fa3c76
commit 760ba54
Show file tree

Hide file tree

Showing 23 changed files with 498 additions and 172 deletions.
diff --git a/docs/build/bundle.42dd1c4d.js b/docs/build/bundle.42dd1c4d.js
diff --git a/docs/build/bundle.dfdeb5db.js b/docs/build/bundle.dfdeb5db.js
diff --git a/docs/build/bundle.42dd1c4d.js.LICENSE.txt → docs/build/bundle.dfdeb5db.js.LICENSE.txt b/docs/build/bundle.42dd1c4d.js.LICENSE.txt → docs/build/bundle.dfdeb5db.js.LICENSE.txt
@@ -30,6 +30,13 @@ object-assign
  * @license  MIT
  */
 
+/*!
+ * mime-db
+ * Copyright(c) 2014 Jonathan Ong
+ * Copyright(c) 2015-2022 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
 /*!
  * regjsgen 0.5.2
  * Copyright 2014-2020 Benjamin Tan <https://ofcr.se/>

diff --git a/docs/index.html b/docs/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.42dd1c4d.js"></script>
+    <script src="build/bundle.dfdeb5db.js"></script>
   </body>
 </html>
diff --git a/docs/manifests/development/invalid-annotation.json b/docs/manifests/development/invalid-annotation.json
@@ -0,0 +1,96 @@
+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "http://localhost:6060/manifests/invalid-annotation.json",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Beginning Reponsibility: Lunchroom Manners [motion picture] Coronet Films"
+    ]
+  },
+  "items": [
+    {
+      "id": "http://localhost:6060/manifests/invalid-annotation/canvas/1",
+      "type": "Canvas",
+      "height": 360,
+      "width": 480,
+      "duration": 572.034,
+      "items": [
+        {
+          "id": "http://localhost:6060/manifests/invalid-annotation/canvas/1/page/1",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "http://localhost:6060/manifests/invalid-annotation/canvas/1/page/1/annotation/1",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": [
+                {
+                  "type": "Choice",
+                  "choiceHint": "user",
+                  "items": [
+                    {
+                      "id": "http://localhost:6060/lunchroom_manners/high/lunchroom_manners_1024kb.mp4",
+                      "type": "Video",
+                      "format": "video/mp4",
+                      "label": {
+                        "en": [
+                          "High"
+                        ]
+                      }
+                    },
+                    {
+                      "id": "http://localhost:6060/lunchroom_manners/medium/lunchroom_manners_512kb.mp4",
+                      "type": "Video",
+                      "format": "video/mp4",
+                      "label": {
+                        "en": [
+                          "Medium"
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "http://localhost:6060/lunchroom_manners/lunchroom_manners.vtt",
+                  "type": "Text",
+                  "format": "text/vtt",
+                  "label": {
+                    "en": [
+                      "Captions in WebVTT format"
+                    ]
+                  },
+                  "language": "en"
+                }
+              ],
+              "target": "http://localhost:6060/manifests/invalid-annotation/canvas/1"
+            }
+          ]
+        }
+      ],
+      "annotations": [
+        {
+          "id": "http://localhost:6060/manifests/invalid-annotation/canvas/1/page/2",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "http://localhost:6060/manifests/invalid-annotation/canvas/1/page/2/annotation/1",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "http://localhost:6060/lunchroom_manners/lunchroom_manners_poster.jpg",
+                "type": "Image"
+              },
+              "target": "http://localhost:6060/manifests/invalid-annotation/canvas/1"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "thumbnail": [
+    {
+      "id": "http://localhost:6060/lunchroom_manners/lunchroom_manners_poster.jpg",
+      "type": "Image"
+    }
+  ]
+}
diff --git a/docs/manifests/production/invalid-annotation.json b/docs/manifests/production/invalid-annotation.json
@@ -0,0 +1,96 @@
+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation.json",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Beginning Reponsibility: Lunchroom Manners [motion picture] Coronet Films"
+    ]
+  },
+  "items": [
+    {
+      "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1",
+      "type": "Canvas",
+      "height": 360,
+      "width": 480,
+      "duration": 572.034,
+      "items": [
+        {
+          "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1/page/1",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1/page/1/annotation/1",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": [
+                {
+                  "type": "Choice",
+                  "choiceHint": "user",
+                  "items": [
+                    {
+                      "id": "https://samvera-labs.github.io/iiif-react-media-player/lunchroom_manners/high/lunchroom_manners_1024kb.mp4",
+                      "type": "Video",
+                      "format": "video/mp4",
+                      "label": {
+                        "en": [
+                          "High"
+                        ]
+                      }
+                    },
+                    {
+                      "id": "https://samvera-labs.github.io/iiif-react-media-player/lunchroom_manners/medium/lunchroom_manners_512kb.mp4",
+                      "type": "Video",
+                      "format": "video/mp4",
+                      "label": {
+                        "en": [
+                          "Medium"
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "https://samvera-labs.github.io/iiif-react-media-player/lunchroom_manners/lunchroom_manners.vtt",
+                  "type": "Text",
+                  "format": "text/vtt",
+                  "label": {
+                    "en": [
+                      "Captions in WebVTT format"
+                    ]
+                  },
+                  "language": "en"
+                }
+              ],
+              "target": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1"
+            }
+          ]
+        }
+      ],
+      "annotations": [
+        {
+          "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1/page/2",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1/page/2/annotation/1",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://samvera-labs.github.io/iiif-react-media-player/lunchroom_manners/lunchroom_manners_poster.jpg",
+                "type": "Image"
+              },
+              "target": "https://samvera-labs.github.io/iiif-react-media-player/manifests/invalid-annotation/canvas/1"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "thumbnail": [
+    {
+      "id": "https://samvera-labs.github.io/iiif-react-media-player/lunchroom_manners/lunchroom_manners_poster.jpg",
+      "type": "Image"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "@silvermine/videojs-quality-selector": "^1.2.4",
     "mammoth": "^1.4.19",
     "manifesto.js": "^4.1.0",
+    "mime-db": "^1.52.0",
     "videojs-markers-plugin": "^1.0.2"
   },
   "peerDependencies": {

diff --git a/src/components/ListItem.test.js b/src/components/ListItem.test.js
@@ -8,61 +8,61 @@ import {
 } from '../services/testing-helpers';
 
 const singleItem = {
-  id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/range/1-1',
+  id: 'http://example.com/mahler-symphony-3/range/1-1',
   type: 'Range',
   label: {
     en: ['Track 1. I. Kraftig'],
   },
   items: [
     {
-      id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/1#t=0,374',
+      id: 'http://example.com/mahler-symphony-3/canvas/1#t=0,374',
       type: 'Canvas',
     },
   ],
 };
 
 const multiItem = {
-  id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/range/2',
+  id: 'http://example.com/mahler-symphony-3/range/2',
   type: 'Range',
   label: {
     en: ['CD2 - Mahler, Symphony No.3 (cont.)'],
   },
   items: [
     {
-      id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/range/2-1',
+      id: 'http://example.com/mahler-symphony-3/range/2-1',
       type: 'Range',
       label: {
         en: ['Track 1. II. Tempo di Menuetto'],
       },
       items: [
         {
-          id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/2#t=0,566',
+          id: 'http://example.com/mahler-symphony-3/canvas/2#t=0,566',
           type: 'Canvas',
         },
       ],
     },
     {
-      id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/range/2-2',
+      id: 'http://example.com/mahler-symphony-3/range/2-2',
       type: 'Range',
       label: {
         en: ['Track 2. III. Comodo'],
       },
       items: [
         {
-          id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/2#t=566,1183',
+          id: 'http://example.com/mahler-symphony-3/canvas/2#t=566,1183',
           type: 'Canvas',
         },
       ],
     },
     {
-      id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/range/2-3',
+      id: 'http://example.com/mahler-symphony-3/range/2-3',
       type: 'Range',
       label: {
         en: ['Track 3. Tempo I'],
       },
       items: [
         {
-          id: 'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/2#t=1183,1635',
+          id: 'http://example.com/mahler-symphony-3/canvas/2#t=1183,1635',
           type: 'Canvas',
         },
       ],
@@ -120,7 +120,7 @@ describe('ListItem component', () => {
       expect(anchorElement.tagName).toEqual('A');
       expect(anchorElement).toHaveAttribute(
         'href',
-        'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/2#t=0,566'
+        'http://example.com/mahler-symphony-3/canvas/2#t=0,566'
       );
 
       expect(screen.queryByTestId('list')).not;

diff --git a/src/components/MediaPlayer/VideoJSComponents/VideoJSFileDownload.js b/src/components/MediaPlayer/VideoJSComponents/VideoJSFileDownload.js
@@ -52,15 +52,19 @@ function Downloader({ manifest, canvasIndex }) {
   if (files && files.length > 0) {
     return (
       <div className="vjs-button vjs-control vjs-file-download">
-        <button className="vjs-download-btn vjs-button" title="Supplementing File Download">
+        <button className="vjs-download-btn vjs-button" title="Alternate Resource Download">
           <VideoJSDownloadIcon width="1rem" />
         </button>
-        <div className="vjs-menu-content file-download-menu">
-          {files.map((f, index) => {
-            return <a href={f.id} key={index} download>{getLabelValue(f.label)}</a>;
-          })}
+        <div className='vjs-menu'>
+          <ul className="vjs-menu-content file-download-menu">
+            {files.map((f, index) => {
+              return <li className='vjs-menu-item' key={index}>
+                <a href={f.id} className='vjs-menu-item-text' download>{f.label}</a>
+              </li>;
+            })}
+          </ul>
         </div>
-      </div>
+      </div >
     );
   } else {
     return null;

diff --git a/src/components/MediaPlayer/VideoJSComponents/VideoJSFileDownload.scss b/src/components/MediaPlayer/VideoJSComponents/VideoJSFileDownload.scss
@@ -1,8 +1,5 @@
 .vjs-download-btn {
-  background-color: #04AA6D;
   color: white;
-  // padding: 16px;
-  font-size: 16px;
   border: none;
   cursor: pointer;
   width: 2rem;
@@ -27,12 +24,12 @@
 
 .vjs-menu-content a {
   color: white;
-  padding: 0.5rem 1.5rem;
+  padding: 0 1.5rem;
   text-decoration: none;
   display: block;
 }
 
-.vjs-menu-content a:hover {
+.vjs-menu-content li:hover {
   background-color: rgba(115, 133, 159, 0.5);
 }
 

diff --git a/src/components/MediaPlayer/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJSPlayer.js
@@ -220,7 +220,7 @@ function VideoJSPlayer({
       switchPlayer();
     }
     setCIndex(canvasIndex);
-    setCanvasSegments(getSegmentMap({ manifest, canvasIndex }));
+    setCanvasSegments(getSegmentMap({ manifest }));
   }, [canvasIndex]);
 
   /**

diff --git a/src/components/StructuredNavigation/StructuredNavigation.js b/src/components/StructuredNavigation/StructuredNavigation.js
@@ -13,8 +13,8 @@ import {
   getCanvasId,
   canvasesInManifest,
   getCustomStart,
-  getCanvasTarget,
 } from '@Services/iiif-parser';
+import { getCanvasTarget } from '@Services/utility-helpers';
 import './StructuredNavigation.scss';
 
 const StructuredNavigation = () => {

diff --git a/src/components/StructuredNavigation/StructuredNavigation.test.js b/src/components/StructuredNavigation/StructuredNavigation.test.js
@@ -88,7 +88,7 @@ describe('StructuredNavigation component', () => {
           initialManifestState: { manifest },
           initialPlayerState: {
             clickedUrl:
-              'https://dlib.indiana.edu/iiif_av/mahler-symphony-3/canvas/2t=0,566',
+              'http://example.com/mahler-symphony-3/canvas/2t=0,566',
             isClicked: true,
             playerRange: { start: 0, end: 1985 },
           },