fix crash when null source path

src/components/SourceOverlay.jsx

@@ -7,28 +7,32 @@ import NoSource from './presentational/NoSource'
 class SourceOverlay extends React.Component {
   constructor(props) {
     super(props)
+    this.renderVideo = this.renderVideo.bind(this)
     this.renderPhoto = this.renderPhoto.bind(this)
   }
 
-  renderVideo() {
-    // return (
-    //   <Media>
-    //     <div className="media">
-    //       <div className="media-player">
-    //         <Player src="http://localhost:8000/Anna News - Horbatenko Tanks Video.mp4" />
-    //       </div>
-    //       <div className="media-controls">
-    //         <controls.PlayPause/>
-    //         <controls.MuteUnmute/>
-    //       </div>
-    //     </div>
-    //   </Media>
-    // )
+  renderPlaceholder() {
     return (
       <NoSource failedUrls={["NOT ALL SOURCES AVAILABLE IN APPLICATION YET"]} />
     )
   }
 
+  renderVideo() {
+    return (
+      <Media>
+        <div className="media">
+          <div className="media-player">
+            <Player src={`${this.props.source.path}.mp4`} />
+          </div>
+          <div className="media-controls">
+            <controls.PlayPause/>
+            <controls.MuteUnmute/>
+          </div>
+        </div>
+      </Media>
+    )
+  }
+
   renderPhoto() {
     const imageExts = ['.jpg', '.png']
     const possibleUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
@@ -54,7 +58,7 @@ class SourceOverlay extends React.Component {
   }
 
   _renderSwitch() {
-    console.table(this.props.source)
+    // console.table(this.props.source)
     switch(this.props.source.type) {
       case 'Video':
         return this.renderVideo()
@@ -68,6 +72,9 @@ class SourceOverlay extends React.Component {
   }
 
   render() {
+    if (typeof(this.props.source) !== 'object') {
+      return this.renderPlaceholder();
+    }
     const {id, url, title, date, type, affil_1, affil_2} = this.props.source
     return (
       <div className="mo-overlay">

src/scss/mediaoverlay.scss

@@ -47,7 +47,7 @@ $header-inset: 10px;
 }
 
 .mo-container {
-  background-color: rgba(239, 239, 239, 0.8);
+  background-color: rgba(239, 239, 239, 0.9);
   max-width: $panel-width;
   min-width: $panel-width;
   max-height: $panel-height;

src/selectors/index.js

@@ -166,10 +166,12 @@ export const selectSelected = createSelector(
     if (selected.length === 0) {
       return []
     }
+
+    // NB: return source object if exists, otherwise null
     const srcs = selected
       .map(e => e.sources)
       .map(_sources =>
-        _sources.map(id => sources[id])
+        _sources.map(id => (sources.hasOwnProperty(id) ? sources[id] : null))
       )
 
     return selected.map((s, idx) => ({