Merge 5dae46e into 397840d

src/common/iiif.js

@@ -44,6 +44,12 @@ class Rotation {
     return `${this.mirror ? symbol : ''}${this.angle}`
   }
 
+  mode({ width, height }, h = this.isHorizontal) {
+    return (width < height) ?
+      (h ? 'portrait' : 'landscape') :
+      (h ? 'landscape' : 'portrait')
+  }
+
   get isHorizontal() {
     return isHorizontal(this.angle)
   }

src/components/item/cover-image.js

@@ -4,45 +4,38 @@ const React = require('react')
 const { Thumbnail } = require('../photo')
 const { TagColors } = require('../colors')
 const { pick, get } = require('../../common/util')
-const { arrayOf, bool, number, object, shape } = require('prop-types')
+const { arrayOf, number, object, shape } = require('prop-types')
 
-const ThumbProps = Object.keys(Thumbnail.propTypes)
-
-const StackLines = ({ isStack }) => isStack && (
-  <div className="stack-lines">
-    <div className="line line-2"/>
-    <div className="line line-1"/>
-  </div>
-)
+const StackLines = ({ count }) => (
+  (count > 1) && (
+    <div className="stack-lines">
+      <div className="line line-2"/>
+      <div className="line line-1"/>
+    </div>
+  ))
 
 StackLines.propTypes = {
-  isStack: bool
+  isStack: number
 }
 
 class CoverImage extends React.PureComponent {
-  get isStack() {
-    return this.props.item.photos.length > 1
-  }
-
-  get cover() {
+  get id() {
     return this.props.item.cover || this.props.item.photos[0]
   }
 
-  getPhotoProps() {
-    return pick(get(this.props.photos, [this.cover]), [
-      'angle', 'consolidated', 'mirror', 'mimetype', 'orientation', 'broken'
-    ])
+  get photo() {
+    return get(this.props.photos, [this.id]) || {}
   }
 
   render() {
     return (
       <div className="cover-image">
-        <StackLines isStack={this.isStack}/>
-        <Thumbnail {...pick(this.props, ThumbProps)}
-          id={this.cover}
-          {...this.getPhotoProps()}
-          onLoad={this.props.onLoad}
-          onError={this.props.onError}/>
+        <StackLines
+          count={this.props.item.photos.length}/>
+        <Thumbnail
+          {...pick(this.props, Thumbnail.keys)}
+          {...pick(this.photo, Thumbnail.keys)}
+          id={this.id}/>
         <TagColors
           selection={this.props.item.tags}
           tags={this.props.tags}/>
@@ -55,7 +48,7 @@ class CoverImage extends React.PureComponent {
     tags: object,
     photos: object,
     item: shape({
-      photos: arrayOf(number),
+      photos: arrayOf(number).isRequired,
       tags: arrayOf(number),
       cover: number
     }).isRequired

src/components/item/drag-preview.js

@@ -21,17 +21,15 @@ class ItemDragPreview extends React.PureComponent {
   }
 
   render() {
-    const { cache, photos, size, tags, onPhotoError } = this.props
-
     return (
       <div className={cx(...this.classes)}>
         <CoverImage
-          cache={cache}
-          photos={photos}
-          size={size}
+          cache={this.props.cache}
+          photos={this.props.photos}
+          size={this.props.size}
           item={this.item}
-          tags={tags}
-          onError={onPhotoError}/>
+          tags={this.props.tags}
+          onError={this.props.onPhotoError}/>
         {this.count > 1 &&
           <div className="badge">{this.count}</div>
         }

src/components/item/table-cell.js

@@ -92,12 +92,14 @@ class ItemTableCell extends React.PureComponent {
 
   renderCoverImage() {
     return this.props.isMainColumn && (
-      <CoverImage
-        item={this.props.item}
-        cache={this.props.cache}
-        photos={this.props.photos}
-        size={this.props.size}
-        onError={this.props.onPhotoError}/>
+      <div className="cover-image-container">
+        <CoverImage
+          item={this.props.item}
+          cache={this.props.cache}
+          photos={this.props.photos}
+          size={this.props.size}
+          onError={this.props.onPhotoError}/>
+      </div>
     )
   }
 

src/components/photo/drag-preview.js

@@ -8,7 +8,9 @@ const { arrayOf, func, number, shape, string } = require('prop-types')
 
 class PhotoDragPreview extends React.PureComponent {
   get classes() {
-    return ['photo', 'drag-preview', 'center', { multiple: this.count > 1 }]
+    return ['photo', 'drag-preview', 'center', {
+      multiple: this.count > 1
+    }]
   }
 
   get item() {
@@ -20,17 +22,15 @@ class PhotoDragPreview extends React.PureComponent {
   }
 
   render() {
-    const { id, angle, broken, mimetype, mirror, orientation } = this.item
-
     return (
       <div className={cx(this.classes)}>
         <Thumbnail
-          id={id}
-          angle={angle}
-          broken={broken}
-          mimetype={mimetype}
-          mirror={mirror}
-          orientation={orientation}
+          id={this.item.id}
+          angle={this.item.angle}
+          broken={this.item.broken}
+          mimetype={this.item.mimetype}
+          mirror={this.item.mirror}
+          orientation={this.item.orientation}
           size={this.props.size}
           cache={this.props.cache}/>
         {this.count > 1 &&

src/components/photo/iterable.js

@@ -117,6 +117,8 @@ class PhotoIterable extends React.PureComponent {
         mimetype: photo.mimetype,
         mirror: photo.mirror,
         orientation: photo.orientation,
+        width: photo.width,
+        height: photo.height,
         adj: getAdjacent(photo).map(p => p && p.id)
       }
     },

src/components/photo/thumbnail.js

@@ -30,7 +30,11 @@ class Thumbnail extends React.Component {
       (!(hasImageChanged || isBroken) || state.hasFinishedLoading)
 
     return {
-      src, rotation, consolidated, hasFinishedLoading, isBroken
+      src,
+      rotation,
+      consolidated,
+      hasFinishedLoading,
+      isBroken
     }
   }
 
@@ -106,6 +110,8 @@ class Thumbnail extends React.Component {
   static defaultProps = {
     size: ICON.SIZE
   }
+
+  static keys = Object.keys(this.propTypes)
 }
 
 module.exports = {

src/components/print/photo.js

@@ -25,7 +25,7 @@ const Photo = ({ canOverflow, item, hasMetadata, hasNotes, photo }) => {
 
   return (
     <div className={cx('photo', 'container',
-      o(photo.width < photo.height, rotation.isHorizontal),
+      rotation.mode(photo),
       { overflow: canOverflow, metadata: hasMetadata || hasNotes })}>
       <div className="photo-container">
         <img
@@ -75,11 +75,6 @@ Photo.propTypes = {
   })
 }
 
-const o = (isPortrait, isHorizontal) =>
-  isPortrait ?
-    (isHorizontal ? 'portrait' : 'landscape') :
-    (isHorizontal ? 'landscape' : 'portrait')
-
 module.exports = {
   Photo
 }

src/image/image.js

@@ -278,31 +278,19 @@ class Image {
   }
 
   variants(isSelection = false) {
-    let SIZE = isSelection ? Image.SELECTION_SIZE : Image.PHOTO_SIZE
     let variants = [48, 512]
 
     if (!isSelection || this.isRemote || !IMAGE.WEB[this.mimetype]) {
       variants.push('full')
     }
 
-    return variants.map(name => ({ name, size: SIZE[name] }))
+    return variants.map(name => ({ name, size: Image.SIZE[name] }))
   }
 }
 
-const transparent = { r: 0, g: 0, b: 0, alpha: 0 }
-
-Image.PHOTO_SIZE = {
-  48: { width: 48, height: 48, fit: 'cover', position: 'center' },
-  512: { width: 512, height: 512, fit: 'cover', position: 'center' }
-}
-
-Image.SELECTION_SIZE = {
-  48: {
-    width: 48, height: 48, fit: 'contain', background: transparent
-  },
-  512: {
-    width: 512, height: 512, fit: 'contain', background: transparent
-  }
+Image.SIZE = {
+  48: { width: 48, height: 48, fit: 'inside' },
+  512: { width: 512, height: 512, fit: 'inside' }
 }
 
 const Orientation = (o) => (o > 0 && o < 9) ? Number(o) : 1

src/stylesheets/components/_cover-image.scss

@@ -4,7 +4,12 @@
 
 .cover-image {
   box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   position: relative;
+  contain: content;
 
   .tag-colors {
     position: absolute;
@@ -43,11 +48,8 @@
 }
 
 .stack-lines {
-  position: absolute;
-  top: 0;
-  left: 0;
+  flex: 0 0 auto;
   width: 100%;
-  z-index: 1;
 
   .line {
     background: $stack-color;
@@ -137,17 +139,33 @@
             opacity: $gap-opacity;
           }
         }
+
+        & + .thumbnail {
+          min-width: #{round($size * 0.375)}px;
+          min-height: #{round($size * 0.375)}px;
+
+          img,
+          .icon-photo {
+            max-width: #{$size}px;
+            max-height: #{$size - 2 * round($size / 32)}px;
+          }
+        }
       }
     }
   }
 }
 
 .item-table {
-  .cover-image {
-    position: absolute;
-    left: $space-xs;
-    top: ($row-height - $thumbnail-size) / 2;
+  .cover-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: $thumbnail-size;
+    height: $thumbnail-size;
+    margin-right: $space-xs;
+  }
 
+  .cover-image {
     .stack-lines {
       .line {
         height: 1px;
@@ -163,20 +181,22 @@
       }
 
       & + .thumbnail {
-        -webkit-clip-path: inset(4px 0 0 0);
+        min-width: $space-sm;
+        min-height: $space-sm;
 
+        img,
         .icon-photo {
-          g {
-            transform: translateY(2px);
-          }
+          max-height: $thumbnail-size - $space-min;
         }
       }
     }
-  }
 
-  .td:first-child {
-    .cover-image {
-      left: $default-padding-horizontal;
+    .thumbnail {
+      img,
+      .icon-photo {
+        max-width: $thumbnail-size;
+        max-height: $thumbnail-size;
+      }
     }
   }
 

src/stylesheets/components/_drag-layer.scss

@@ -42,7 +42,11 @@
 
   .thumbnail {
     opacity: $drag-preview-thumbnail-opacity;
-    width: $drag-preview-size;
-    height: $drag-preview-size;
+
+    img,
+    .icon-photo {
+      max-width: $drag-preview-size;
+      max-height: $drag-preview-size;
+    }
   }
 }