Do not display timer when last item is inaccessible

src/components/MediaPlayer/MediaPlayer.test.js

@@ -473,6 +473,31 @@ describe('MediaPlayer component', () => {
         expect(screen.queryByTestId('inaccessible-previous-button')).toBeInTheDocument();
       });
 
+      test('displays timer and previous button when last item is an inaccessible item', () => {
+        // Stub loading HTMLMediaElement for jsdom
+        window.HTMLMediaElement.prototype.load = () => { };
+
+        const PlayerWithManifest = withManifestAndPlayerProvider(MediaPlayer, {
+          initialManifestState: {
+            manifest: playlistManifest,
+            canvasIndex: 5,
+            playlist: { isPlaylist: true },
+            autoAdvance: true,
+          },
+          initialPlayerState: {},
+        });
+        render(
+          <ErrorBoundary>
+            <PlayerWithManifest />
+          </ErrorBoundary>
+        );
+        expect(screen.queryByTestId('inaccessible-message-display')).toBeInTheDocument();
+        expect(screen.getByText('You do not have permission to playback this item.')).toBeInTheDocument();
+        expect(screen.queryByTestId('inaccessible-message-timer')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('inaccessible-next-button')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('inaccessible-previous-button')).toBeInTheDocument();
+      });
+
       test('enables navigation to next item with next button', () => {
         // Stub loading HTMLMediaElement for jsdom
         window.HTMLMediaElement.prototype.load = () => { };

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -981,10 +981,11 @@ function VideoJSPlayer({
                 </button>
               }
             </div>
-            <p data-testid="inaccessible-message-timer"
-              className={`ramp--media-player_inaccessible-message-timer ${autoAdvanceRef.current ? '' : 'hidden'}`}>
-              {`Next item in ${messageTime} second${messageTime === 1 ? '' : 's'}`}
-            </p>
+            {canvasIndex != lastCanvasIndex &&
+              <p data-testid="inaccessible-message-timer"
+                className={`ramp--media-player_inaccessible-message-timer ${autoAdvanceRef.current ? '' : 'hidden'}`}>
+                {`Next item in ${messageTime} second${messageTime === 1 ? '' : 's'}`}
+              </p>}
           </div>
         )}
         <video

src/components/StructuredNavigation/StructuredNavigation.test.js

@@ -324,7 +324,7 @@ describe('StructuredNavigation component', () => {
     });
 
     test('renders all playlist items', () => {
-      expect(screen.queryAllByTestId('list-item')).toHaveLength(5);
+      expect(screen.queryAllByTestId('list-item')).toHaveLength(6);
       expect(screen.queryAllByTestId('list-item')[2]).toHaveTextContent('Playlist Item 1');
     });
 

src/services/iiif-parser.test.js

@@ -36,7 +36,7 @@ describe('iiif-parser', () => {
     describe('with a playlist manifest', () => {
       it('returns summary for all canvases', () => {
         const canvases = iiifParser.canvasesInManifest(playlistManifest);
-        expect(canvases).toHaveLength(5);
+        expect(canvases).toHaveLength(6);
         // Empty Canvas => for inaccessible items
         expect(canvases[0]).toHaveProperty('summary');
         expect(canvases[0].summary).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua');
@@ -50,7 +50,7 @@ describe('iiif-parser', () => {
 
       test('returns positional homepage for all canvases', () => {
         const canvases = iiifParser.canvasesInManifest(playlistManifest);
-        expect(canvases).toHaveLength(5);
+        expect(canvases).toHaveLength(6);
         // Empty Canvas => for inaccessible items
         expect(canvases[0]).toHaveProperty('homepage');
         expect(canvases[0].homepage).toEqual('https://example.com/playlists/1?position=1');
@@ -502,26 +502,26 @@ describe('iiif-parser', () => {
       it('canvas with metadata returns a list of key, value pairs', () => {
         const { manifestMetadata, canvasMetadata } = iiifParser.getMetadata(playlistManifest, true);
         expect(manifestMetadata.length).toBeGreaterThan(0);
-        expect(canvasMetadata.length).toEqual(5);
+        expect(canvasMetadata.length).toEqual(6);
         expect(canvasMetadata[2].metadata[0]).toEqual({ label: "Title", value: "Second Playlist Item" });
         expect(canvasMetadata[2]).toHaveProperty('rights');
         expect(canvasMetadata[2].rights[0]).toEqual(
           {
             label: "Attribution",
             value: "<span>Creative commons <a href=\"https://creativecommons.org/licenses/by-sa/3.0\">CC BY-SA 3.0</a></span>"
           });
-        // console.log is called twice for the 4 canvases without metadata
-        expect(console.log).toBeCalledTimes(4);
+        // console.log is called twice for the 5 canvases without metadata
+        expect(console.log).toBeCalledTimes(5);
       });
 
 
       it('canvas without metadata returns []', () => {
         const { manifestMetadata, canvasMetadata } = iiifParser.getMetadata(playlistManifest, true);
         expect(manifestMetadata.length).toBeGreaterThan(0);
-        expect(canvasMetadata.length).toEqual(5);
+        expect(canvasMetadata.length).toEqual(6);
         expect(canvasMetadata[0].metadata).toEqual([]);
-        // console.log is called twice for the 4 canvases without metadata
-        expect(console.log).toBeCalledTimes(4);
+        // console.log is called twice for the 5 canvases without metadata
+        expect(console.log).toBeCalledTimes(5);
       });
     });
 
@@ -684,8 +684,8 @@ describe('iiif-parser', () => {
 
     it('returns canvas summary with structure for playlist manifests', () => {
       const { structures, timespans } = iiifParser.getStructureRanges(playlistManifest, true);
-      expect(structures).toHaveLength(5);
-      expect(timespans).toHaveLength(5);
+      expect(structures).toHaveLength(6);
+      expect(timespans).toHaveLength(6);
 
       const firstStructCanvas = structures[2];
       expect(firstStructCanvas.label).toEqual('Playlist Item 1');

src/test_data/playlist.js

@@ -449,6 +449,53 @@ export default {
           ]
         }
       ]
+    }, {
+      id: 'http://example.com/playlists/1/canvas/6',
+      type: 'Canvas',
+      label: {
+        en: ["Restricted Item - Last"]
+      },
+      summary: {
+        none: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"]
+      },
+      homepage: [
+        {
+          id: 'https://example.com/playlists/1?position=6',
+          type: 'Text',
+          label: { none: ['View in Repository'] },
+          format: 'text/html'
+        }
+      ],
+      placeholderCanvas: {
+        id: 'http://example.com/playlists/1/canvas/6/placeholder',
+        type: "Canvas",
+        items: [
+          {
+            id: 'http://example.com/playlists/1/canvas/6/placeholder/1',
+            type: "AnnotationPage",
+            items: [
+              {
+                id: 'http://example.com/playlists/1/canvas/6/placeholder/1-image',
+                type: "Annotation",
+                motivation: "painting",
+                body: {
+                  type: "Text",
+                  format: "text/plain",
+                  label: { en: ['You do not have permission to playback this item.'] }
+                },
+                target: 'http://example.com/playlists/1/canvas/6/placeholder'
+              }
+            ]
+          }
+        ]
+      },
+      items: [
+        {
+          id: 'http://example.com/playlists/1/canvas/6/page',
+          type: 'AnnotationPage',
+        },
+      ],
+      annotations: [],
     }
   ],
   structures: [
@@ -514,6 +561,17 @@ export default {
             }
           ]
         },
+        {
+          id: 'http://example.com/playlists/1/range/5',
+          type: 'Range',
+          label: { en: ['Restricted Item - Last'] },
+          items: [
+            {
+              type: "Canvas",
+              id: 'http://example.com/playlists/1/canvas/5#t=0,'
+            }
+          ]
+        },
       ]
     }
   ]