Merge pull request #685 from samvera-labs/bug-emptymanifest

Regression bug: display error for empty Manifest w/o crashing
samvera-labs · Oct 25, 2024 · 5d3df62 · 5d3df62
2 parents c866d88 + 0e10257
commit 5d3df62
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/src/components/MediaPlayer/MediaPlayer.test.js b/src/components/MediaPlayer/MediaPlayer.test.js
@@ -8,6 +8,7 @@ import videoManifest from '@TestData/lunchroom-manners';
 import noCaptionManifest from '@TestData/multiple-canvas-auto-advance';
 import emptyCanvasManifest from '@TestData/transcript-annotation';
 import playlistManifest from '@TestData/playlist';
+import emptyManifest from '@TestData/empty-manifest';
 import * as hooks from '@Services/ramp-hooks';
 
 describe('MediaPlayer component', () => {
@@ -465,6 +466,23 @@ describe('MediaPlayer component', () => {
       }));
       return switchPlayerMock;
     };
+
+    test('for empty Manifest', () => {
+      const PlayerWithManifest = withManifestAndPlayerProvider(MediaPlayer, {
+        initialManifestState: { ...manifestState(emptyManifest) },
+        initialPlayerState: {},
+      });
+      render(
+        <ErrorBoundary>
+          <PlayerWithManifest />
+        </ErrorBoundary>
+      );
+      expect(screen.queryByTestId('inaccessible-message-display')).toBeInTheDocument();
+      expect(screen.getByTestId('inaccessible-message-content').textContent)
+        .toEqual('No media resource(s). Please check your Manifest.');
+      expect(screen.queryByTestId('inaccessible-message-buttons')).not.toBeInTheDocument();
+    });
+
     test('with HTML from placeholderCanvas for an empty canvas', () => {
       // Stub loading HTMLMediaElement for jsdom
       window.HTMLMediaElement.prototype.load = () => { };

diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -777,25 +777,28 @@ function VideoJSPlayer({
             <p className="ramp--media-player_inaccessible-message-content" data-testid="inaccessible-message-content"
               dangerouslySetInnerHTML={{ __html: placeholderText }}>
             </p>
-            <div className="ramp--media-player_inaccessible-message-buttons">
-              {canvasIndex >= 1 &&
-                <button aria-label="Go back to previous item"
-                  onClick={() => handlePrevNextClick(canvasIndex - 1)}
-                  onKeyDown={(e) => handlePrevNextKeydown(e, canvasIndex - 1, 'previousBtn')}
-                  data-testid="inaccessible-previous-button">
-                  <SectionButtonIcon flip={true} /> Previous
-                </button>
-              }
-              {canvasIndex != lastCanvasIndex &&
-                <button aria-label="Go to next item"
-                  onClick={() => handlePrevNextClick(canvasIndex + 1)}
-                  onKeyDown={(e) => handlePrevNextKeydown(e, canvasIndex + 1, 'nextBtn')}
-                  data-testid="inaccessible-next-button">
-                  Next <SectionButtonIcon />
-                </button>
-              }
-            </div>
-            {canvasIndex != lastCanvasIndex &&
+            {lastCanvasIndex > 0 &&
+              <div className="ramp--media-player_inaccessible-message-buttons"
+                data-testid="inaccessible-message-buttons">
+                {canvasIndex >= 1 &&
+                  <button aria-label="Go back to previous item"
+                    onClick={() => handlePrevNextClick(canvasIndex - 1)}
+                    onKeyDown={(e) => handlePrevNextKeydown(e, canvasIndex - 1, 'previousBtn')}
+                    data-testid="inaccessible-previous-button">
+                    <SectionButtonIcon flip={true} /> Previous
+                  </button>
+                }
+                {canvasIndex != lastCanvasIndex &&
+                  <button aria-label="Go to next item"
+                    onClick={() => handlePrevNextClick(canvasIndex + 1)}
+                    onKeyDown={(e) => handlePrevNextKeydown(e, canvasIndex + 1, 'nextBtn')}
+                    data-testid="inaccessible-next-button">
+                    Next <SectionButtonIcon />
+                  </button>
+                }
+              </div>
+            }
+            {canvasIndex != lastCanvasIndex && lastCanvasIndex > 0 &&
               <p data-testid="inaccessible-message-timer"
                 className={cx(
                   'ramp--media-player_inaccessible-message-timer',

diff --git a/src/services/iiif-parser.js b/src/services/iiif-parser.js
@@ -113,10 +113,9 @@ export function getMediaInfo({ manifest, canvasIndex, startTime, srcIndex = 0, i
   let canvas = null;
   let sources, tracks = [];
   let info = {
-    canvas: null,
     sources: [],
     tracks: [],
-    canvasTargets: []
+    canvasTargets: [],
   };
 
   // return empty object when canvasIndex is undefined

diff --git a/src/services/iiif-parser.test.js b/src/services/iiif-parser.test.js
@@ -170,7 +170,6 @@ describe('iiif-parser', () => {
         })
       ).toEqual({
         error: 'Error fetching content',
-        canvas: null,
         sources: [],
         tracks: [],
         canvasTargets: []
@@ -187,7 +186,6 @@ describe('iiif-parser', () => {
         sources: [],
         tracks: [],
         poster: 'No media resource(s). Please check your Manifest.',
-        canvas: null,
         canvasTargets: [],
       });
     });

diff --git a/src/services/ramp-hooks.js b/src/services/ramp-hooks.js
@@ -203,7 +203,8 @@ export const useSetupPlayer = ({
     });
 
     const currentCanvas = allCanvases.find((c) => c.canvasIndex === canvasId);
-    if (!currentCanvas.isEmpty) {
+    // When Manifest is empty currentCanvas is null
+    if (currentCanvas && !currentCanvas.isEmpty) {
       // Manifest is taken from manifest state, and is a basic object at this point
       // lacking the getLabel() function so we manually retrieve the first label.
       let manifestLabel = manifest.label ? Object.values(manifest.label)[0][0] : '';