basic photobook support

src/components/Photobook.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+class Photobook extends React.Component {
+
+
+  constructor(props) {
+    super(props)
+    this.state ={
+      isLoading: true,
+      isLoaded: false
+    }
+    this.loadImgs = this.loadImgs.bind(this)
+  }
+
+  loadImgs() {
+    console.log(this.props.src)
+    Promise.resolve()
+      .then(fetch(this.props.src))
+      .then(res => {
+        console.log(res)
+      })
+      .then(() => {
+        this.setState({ isLoading: false, isLoaded: true })
+      })
+  }
+
+  componentDidMount() {
+    if (this.state.isLoading) this.loadImgs()
+  }
+
+  // componentWillReceiveProps(nextProps) {
+  //
+  //   if (!src.length) return this.setState({ isLoading: false, isLoaded: false })
+  //   this.setState({ isLoading: true, isLoaded: false })
+  // }
+
+  render() {
+    if (this.state.isLoading) {
+      return <div>Loading</div>
+    }
+    return <div>Ciao</div>
+  }
+}
+
+Photobook.propTypes = {
+  loader: false,
+  unloader: false,
+  src: []
+}
+
+export default Photobook

src/components/SourceOverlay.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Img from 'react-image'
+import Photobook from './Photobook.jsx'
 import { Player } from 'video-react'
 import Spinner from './presentational/Spinner'
 import NoSource from './presentational/NoSource'
@@ -25,23 +26,33 @@ class SourceOverlay extends React.Component {
   }
 
   renderPhoto() {
-    const imageExts = ['.jpg', '.png']
-    const extraUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
-    const possibleUrls = [ this.props.source.path, ...extraUrls ]
     return (
       <div className='source-image-container'>
         <Img
           className='source-image'
-          src={possibleUrls}
+          src={this.props.source.paths}
           loader={<Spinner />}
-          unloader={<NoSource failedUrls={possibleUrls} />}
+          unloader={<NoSource failedUrls={this.props.source.paths} />}
         />
       </div>
     )
   }
 
   renderPhotobook() {
-    return this.renderError()
+    return (
+      <div className='source-image-container'>
+        {this.props.source.paths.map((url, idx) => (
+          <Img
+            key={idx}
+            className='source-image'
+            src={url}
+            loader={<Spinner />}
+            unloader={<NoSource failedUrls={[this.props.source.path]} />}
+          />
+
+        ))}
+      </div>
+    )
   }
 
   renderError() {

src/components/presentational/CardSource.js

@@ -20,6 +20,8 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
         return 'videocam'
       case 'Photo':
         return 'photo'
+      case 'Photobook':
+        return 'photo_album'
       default:
         return 'help'
     }

src/reducers/schema/sourceSchema.js

@@ -2,7 +2,7 @@ import Joi from 'joi';
 
 const sourceSchema = Joi.object().keys({
   id:             Joi.string().required(),
-  path:           Joi.string().required(),
+  paths:          Joi.array().required(),
   type:           Joi.string().allow(''),
   affil_1:        Joi.string().allow(''),
   affil_2:        Joi.string().allow(''),

src/scss/mediaoverlay.scss

@@ -70,6 +70,7 @@ $header-inset: 10px;
   font-family: "Lato", Helvetica, sans-serif;
   // max-height: $vimeo-height;
   min-width: 100%;
+  max-height: 500px;
 
   .media-player {
     width: 100%;
@@ -145,9 +146,12 @@ $header-inset: 10px;
 
 .source-image-container {
   padding: 0 25px;
+  overflow-y: scroll;
+  max-height: 100%;
   .source-image {
-    max-width: 100%;
+    max-width: calc(100% - 20px);
     max-height: 100%;
+    padding: 10px;
   }
 }