Filter out non-image resources

__tests__/src/components/OpenSeadragonViewer.test.js

@@ -38,6 +38,7 @@ describe('OpenSeadragonViewer', () => {
           },
         }]}
         nonTiledImages={[{
+          getProperty: () => {},
           id: 'http://foo',
         }]}
         windowId="base"
@@ -119,7 +120,14 @@ describe('OpenSeadragonViewer', () => {
       wrapper.instance().viewer = {
         close: () => {},
       };
-      wrapper.setProps({ nonTiledImages: [1, 2, 3, 4] });
+      wrapper.setProps({
+        nonTiledImages: [
+          { getProperty: () => 'Image' },
+          { getProperty: () => 'Image' },
+          { getProperty: () => 'Image' },
+          { getProperty: () => 'Image' },
+        ],
+      });
       const mockAddNonTiledImage = jest.fn();
       wrapper.instance().addNonTiledImage = mockAddNonTiledImage;
       wrapper.instance().addAllImageSources();
@@ -138,6 +146,28 @@ describe('OpenSeadragonViewer', () => {
     });
   });
 
+  describe('addNonTiledImage', () => {
+    it('calls addSimpleImage asynchronously on the OSD viewer', () => {
+      const viewer = {};
+      viewer.addSimpleImage = ({ success }) => { success('event'); };
+      wrapper.instance().setState({ viewer });
+
+      return wrapper.instance()
+        .addNonTiledImage({ getProperty: () => 'Image' })
+        .then((event) => {
+          expect(event).toBe('event');
+        });
+    });
+
+    it('calls addSimpleImage asynchronously on the OSD viewer', () => (
+      wrapper.instance()
+        .addNonTiledImage({ getProperty: () => 'Video' })
+        .then((event) => {
+          expect(event).toBe(undefined);
+        })
+    ));
+  });
+
   describe('refreshTileProperties', () => {
     it('updates the index and opacity of the OSD tiles from the canvas world', () => {
       const setOpacity = jest.fn();

src/components/OpenSeadragonViewer.js

@@ -153,10 +153,17 @@ export class OpenSeadragonViewer extends Component {
   addNonTiledImage(contentResource) {
     const { canvasWorld } = this.props;
     const { viewer } = this.state;
+
+    const type = contentResource.getProperty('type');
+    const format = contentResource.getProperty('format') || '';
+
+    if (!(type === 'Image' || type === 'dctypes:Image' || format.startsWith('image/'))) return Promise.resolve();
+
     return new Promise((resolve, reject) => {
       if (!viewer) {
-        return;
+        reject();
       }
+
       viewer.addSimpleImage({
         error: event => reject(event),
         fitBounds: new OpenSeadragon.Rect(
@@ -177,7 +184,7 @@ export class OpenSeadragonViewer extends Component {
     const { viewer } = this.state;
     return new Promise((resolve, reject) => {
       if (!viewer) {
-        return;
+        reject();
       }
 
       const tileSource = infoResponse.json;

src/lib/CanvasWorld.js

@@ -89,6 +89,8 @@ export default class CanvasWorld {
       c.imageResources.find(r => r.id === contentResource.id)
     ));
     const canvas = this.canvases[miradorCanvasIndex];
+    if (!canvas) return [];
+
     const [x, y, w, h] = this.canvasToWorldCoordinates(canvas.id);
 
     const fragmentOffset = canvas.onFragment(contentResource.id);