WIP: more defined modal for sources

package.json

@@ -21,6 +21,7 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-portal": "^4.2.0",
+    "react-image": "^1.5.1",
     "react-redux": "^5.0.4",
     "react-tabs": "^1.0.0",
     "redux": "^3.6.0",

src/components/Dashboard.jsx

@@ -155,6 +155,13 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(
+  // state => ({
+  //   ...state,
+  //   app: {
+  //     ...state.app,
+  //     source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
+  //   }
+  // }),
   state => state,
   mapDispatchToProps,
 )(Dashboard);

src/components/SourceOverlay.jsx

@@ -1,29 +1,44 @@
 import React from 'react'
+import Img from 'react-image'
 
 class SourceOverlay extends React.Component {
-
-
-  renderVideo() {
-    <iframe
-      className="vimeo-iframe"
-      src="https://player.vimeo.com/video/33044546"
-      frameborder="0"
-      webkitallowfullscreen
-      mozallowfullscreen
-      allowfullscreen
-    ></iframe>
+  constructor(props) {
+    super(props)
+    this.renderPhoto = this.renderPhoto.bind(this)
   }
 
-  renderImage() {
-    console.log(this.props.source)
+  renderVideo() {
     return (
-      <div>This is the image</div>
+      <iframe
+        className="vimeo-iframe"
+        src="https://player.vimeo.com/video/33044546"
+        frameborder="0"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen
+      ></iframe>
+    )
+  }
+
+  renderPhoto() {
+    const imageExts = ['.jpg', '.png']
+    const possibleUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
+    return (
+      <div>
+        <Img src={possibleUrls} />
+      </div>
     )
   }
 
   renderError() {
     return (
-      <div>ERROR: no support for this sourcee</div>
+      <div>ERROR: no support for this source</div>
+    )
+  }
+
+  renderTestimony() {
+    return (
+      <div>Eyewitness</div>
     )
   }
 
@@ -32,7 +47,9 @@ class SourceOverlay extends React.Component {
       case 'Video':
         return this.renderVideo()
       case 'Photo':
-        return this.renderImage()
+        return this.renderPhoto()
+      case 'Eyewitness Testimony':
+        return this.renderTestimony()
       default:
         return this.renderError()
     }
@@ -42,6 +59,12 @@ class SourceOverlay extends React.Component {
     return (
       <div className="mo-overlay">
         <div className="mo-container" onClick={this.props.onCancel}>
+          <div className="mo-header">
+            <div className="mo-header-close" onClick={this.props.onCancel}>
+              <button className="side-menu-burg is-active"><span></span></button>
+            </div>
+            <div className="mo-header-text">{this.props.source.id}</div>
+          </div>
           <div className="mo-media-container">
             {this._renderSwitch()}
           </div>

src/scss/mediaoverlay.scss

@@ -3,6 +3,7 @@ $vimeo-width: 1000px;
 
 .mo-overlay {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   position: absolute;
@@ -14,18 +15,41 @@ $vimeo-width: 1000px;
   z-index: 20;
 }
 
+.mo-header {
+  min-height: 4em;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  .mo-header-close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 4em;
+  }
+
+  .mo-header-text {
+    flex: 1;
+    margin-left: -4em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .mo-container {
-  background-color: transparent;
-  max-width: 80vw;
-  min-width: 80vw;
-  max-height: 90vh;
-  min-height: 90vh;
+  background-color: rgba(230,230,230,0.98);
+  max-width: 800px;
+  min-width: 800px;
+  max-height: 600px;
+  min-height: 600px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
-  .mo-controls, .mo-media-container {
+  .mo-media-container {
     flex: 1;
     display: flex;
     justify-content: center;

src/store/initial.js

@@ -11,6 +11,7 @@ const initial = {
     narratives: [],
     locations: [],
     categories: [],
+    sources: {},
     sites: [],
     tags: {},
     notifications: [],