small loading spinner for thumbnail; restructure source overlay content

src/components/SourceOverlay.jsx

@@ -62,6 +62,12 @@ class SourceOverlay extends React.Component {
     )
   }
 
+  renderNoSupport(ext) {
+    return (
+      <NoSource failedUrls={[`Application does not support this extension: ${ext}`]} />
+    )
+  }
+
   renderTestimony() {
     return (
       <div>
@@ -70,21 +76,44 @@ class SourceOverlay extends React.Component {
     )
   }
 
-  _renderSwitch() {
-    switch(this.props.source.type) {
-      case 'Video':
-        return this.renderVideo()
-      case 'Photo':
-        return this.renderPhoto()
-      case 'Photobook':
-        return this.renderPhotobook()
-      case 'Eyewitness Testimony':
-        return this.renderTestimony()
+  _renderPath(path) {
+    // render conditionally based on the extension
+    switch (true) {
+      case /\.(png|jpg)$/.test(path):
+        console.log('image')
+        return <div>{path}</div>
+      case /\.(mp4)$/.test(path):
+        console.log('video')
+        return <div>{path}</div>
+      case /\.(md)$/.test(path):
+        console.log('text')
+        return <div>{path}</div>
       default:
-        return this.renderError()
+        console.log('unsupported extension')
+        return this.renderNoSupport(path.split('.')[1])
     }
   }
 
+  _renderContent() {
+    return (
+      <div className='media-content'>
+        {this.props.source.paths.map(this._renderPath)}
+      </div>
+    )
+    // switch(this.props.source.type) {
+    //   case 'Video':
+    //     return this.renderVideo()
+    //   case 'Photo':
+    //     return this.renderPhoto()
+    //   case 'Photobook':
+    //     return this.renderPhotobook()
+    //   case 'Eyewitness Testimony':
+    //     return this.renderTestimony()
+    //   default:
+    //     return this.renderError()
+    // }
+  }
+
   render() {
     if (typeof(this.props.source) !== 'object') {
       return this.renderError()
@@ -100,7 +129,7 @@ class SourceOverlay extends React.Component {
             <div className="mo-header-text">{this.props.source.id}</div>
           </div>
           <div className="mo-media-container">
-            {this._renderSwitch()}
+            {this._renderContent()}
           </div>
           <div className="mo-meta-container">
             <div className="mo-box">

src/components/presentational/CardSource.js

@@ -35,12 +35,21 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
     )
   }
 
+  const isImgUrl = /\.(jpg|png)$/
   let thumbnail = source.thumbnail
-  if (!thumbnail || thumbnail === '') {
+
+  if (!thumbnail || thumbnail === '' || !thumbnail.match(isImgUrl)) {
     // default to first image in paths, null if no images
-    const imgs = source.paths.filter(p => p.match(/\.(jpg|png)$/))
+    const imgs = source.paths.filter(p => p.match(isImgUrl))
     thumbnail = imgs.length > 0 ? imgs[0] : null
   }
+  console.log(thumbnail)
+
+  const fallbackIcon = (
+    <i className="material-icons source-icon">
+      {renderIconText(source.type)}
+    </i>
+  )
 
   return (
     <div className="card-source">
@@ -49,12 +58,15 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
           : (
             <div className="source-row" onClick={() => onClickHandler(source)}>
               {!!thumbnail ? (
-                <img className="source-icon" src={thumbnail} width={30} height={30} />
-              ) : (
-                <i className="material-icons source-icon">
-                  {renderIconText(source.type)}
-                </i>
-              )}
+                <Img
+                  className="source-icon"
+                  src={thumbnail}
+                  loader={<Spinner small />}
+                  unloader={fallbackIcon}
+                  width={30}
+                  height={30}
+                />
+              ) : fallbackIcon}
              <p>{source.id}</p>
             </div>
           )}

src/components/presentational/Spinner.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Spinner = () => {
+const Spinner = ({ small }) => {
   return (
-    <div className="spinner">
+    <div className={`spinner ${small ? 'small' : ''}`}>
       <div className="double-bounce-overlay"></div>
       <div className="double-bounce"></div>
     </div>

src/scss/loading.scss

@@ -42,6 +42,12 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
 
   position: relative;
   margin: 10px auto;
+
+  &.small {
+    width: 15px;
+    height: 15px;
+    margin: 5px 20px 5px 10px;
+  }
 }
 
 .double-bounce, .double-bounce-overlay {