Add photo print component

src/common/iiif.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const { URL } = require('url')
-const { rotate } = require('./math')
+const { rotate, isHorizontal } = require('./math')
 
 
 class Rotation {
@@ -44,6 +44,10 @@ class Rotation {
     return `${this.mirror ? symbol : ''}${this.angle}`
   }
 
+  get isHorizontal() {
+    return isHorizontal(this.angle)
+  }
+
   get orientation() {
     switch (this.angle) {
       case 0:

src/components/print/item.js

@@ -1,14 +1,15 @@
 'use strict'
 
 const React = require('react')
+const { Photo } = require('./photo')
 const { arrayOf, object } = require('prop-types')
 
 const Item = ({ photos }) => (
-  <div className="item page">
+  <div className="item">
     {photos.map(photo =>
-      <img
-        key={photo.id}
-        src={photo.path}/>)}
+      <Photo
+        {...photo}
+        key={photo.id}/>)}
   </div>
 )
 

src/components/print/photo.js

@@ -0,0 +1,41 @@
+'use strict'
+
+const React = require('react')
+const cx = require('classnames')
+const { Rotation } = require('../../common/iiif')
+const { bool, number, string } = require('prop-types')
+
+const Photo = ({ angle, height, mirror, orientation, path, width }) => {
+  let rotation = Rotation
+    .fromExifOrientation(orientation)
+    .add({ angle, mirror })
+
+  return (
+    <div className={classes(width < height, rotation.isHorizontal)}>
+      <img
+        className={`iiif rot-${rotation.format('x')}`}
+        src={path}/>
+    </div>
+  )
+}
+
+Photo.propTypes = {
+  angle: number.isRequired,
+  height: number.isRequired,
+  mirror: bool.isRequired,
+  orientation: number.isRequired,
+  path: string.isRequired,
+  width: number.isRequired
+}
+
+const classes = (isPortrait, isHorizontal) => cx(
+  'photo',
+  'page',
+  isPortrait ?
+    (isHorizontal ? 'portrait' : 'landscape') :
+    (isHorizontal ? 'landscape' : 'portrait')
+)
+
+module.exports = {
+  Photo
+}