#1888: use default width if no information is provided by the manifest

src/components/ThumbnailNavigation.js

@@ -82,6 +82,7 @@ export class ThumbnailNavigation extends Component {
               >
                 <CanvasThumbnail
                   imageUrl={manifestoCanvas.thumbnail(null, height)}
+                  isValid={manifestoCanvas.hasValidDimensions}
                   maxHeight={config.thumbnailNavigation.height}
                   maxWidth={style.width}
                   aspectRatio={manifestoCanvas.aspectRatio}
@@ -101,10 +102,11 @@ export class ThumbnailNavigation extends Component {
    */
   calculateScaledWidth(options) {
     const { config, canvasGroupings } = this.props;
-    return canvasGroupings
+    const ret = canvasGroupings
       .getCanvases(options.index)
-      .map(canvas => new ManifestoCanvas(canvas).aspectRatio)
-      .reduce((acc, current) => acc + Math.floor(config.thumbnailNavigation.height * current), 8);
+      .map(canvas => new ManifestoCanvas(canvas))
+      .reduce((acc, currentCanvas) => { return acc + (currentCanvas.hasValidDimensions ? Math.floor(config.thumbnailNavigation.height * currentCanvas.aspectRatio) : config.thumbnailNavigation.width); }, 8); // eslint-disable-line arrow-body-style, max-len
+    return ret;
   }
 
   /**

src/components/WindowSideBarCanvasPanel.js

@@ -21,7 +21,6 @@ export class WindowSideBarCanvasPanel extends Component {
     } = this.props;
 
     const canvasesIdAndLabel = getIdAndLabelOfCanvases(canvases);
-
     return (
       <>
         <Typography variant="h2" className={classes.windowSideBarH2}>{t('canvasIndex')}</Typography>

src/config/settings.js

@@ -38,6 +38,7 @@ export default {
   thumbnailNavigation: {
     defaultPosition: 'bottom',
     height: 150,
+    width: 100,
   },
   workspace: {
     type: 'mosaic',

src/lib/ManifestoCanvas.js

@@ -109,34 +109,4 @@ export default class ManifestoCanvas {
 
     return desiredAspectRatio < aspectRatio ? 'sizeByW' : 'sizeByH';
   }
-
-  /**
-   * checks whether the canvas has a valid height
-   */
-  get hasValidHeight() {
-    return (
-      typeof this.canvas.getHeight() === 'number'
-      && this.canvas.getHeight() > 0
-    );
-  }
-
-  /**
-   * checks whether the canvas has a valid height
-   */
-  get hasValidWidth() {
-    return (
-      typeof this.canvas.getHeight() === 'number'
-      && this.canvas.getHeight() > 0
-    );
-  }
-
-  /**
-   * checks whether the canvas has valid dimensions
-   */
-  get hasValidDimensions() {
-    return (
-      this.hasValidHeight
-      && this.hasValidWidth
-    );
-  }
 }