MediaOverlay -> SourceOverlay

src/components/Dashboard.jsx

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as actions from '../actions';
 
-import MediaOverlay from './MediaOverlay.jsx';
+import SourceOverlay from './SourceOverlay.jsx';
 import LoadingOverlay from './presentational/LoadingOverlay';
 import Map from './Map.jsx';
 import Toolbar from './Toolbar.jsx';
@@ -132,7 +132,8 @@ class Dashboard extends React.Component {
           onToggle={this.props.actions.markNotificationsRead}
         />
         {this.props.app.source ? (
-          <MediaOverlay
+          <SourceOverlay
+            source={this.props.app.source}
             onCancel={() => {
               this.props.actions.updateSource(null)}
             }

src/components/MediaOverlay.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-class MediaOverlay extends React.Component {
-  render() {
-    return (
-      <div className="mo-overlay">
-        <div className="mo-container" onClick={this.props.onCancel}>
-          <div className="mo-media-container">
-            <iframe
-              className="vimeo-iframe"
-              src="https://player.vimeo.com/video/33044546"
-              frameborder="0"
-              webkitallowfullscreen
-              mozallowfullscreen
-              allowfullscreen
-            ></iframe>
-          </div>
-          {/* <div className="mo-controls"> */}
-          {/*   ciao ciao */}
-          {/* </div> */}
-        </div>
-      </div>
-    )
-  }
-}
-
-export default MediaOverlay

src/components/SourceOverlay.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+class SourceOverlay extends React.Component {
+
+
+  renderVideo() {
+    <iframe
+      className="vimeo-iframe"
+      src="https://player.vimeo.com/video/33044546"
+      frameborder="0"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen
+    ></iframe>
+  }
+
+  renderImage() {
+    console.log(this.props.source)
+    return (
+      <div>This is the image</div>
+    )
+  }
+
+  renderError() {
+    return (
+      <div>ERROR: no support for this sourcee</div>
+    )
+  }
+
+  _renderSwitch() {
+    switch(this.props.source.type) {
+      case 'Video':
+        return this.renderVideo()
+      case 'Photo':
+        return this.renderImage()
+      default:
+        return this.renderError()
+    }
+  }
+
+  render() {
+    return (
+      <div className="mo-overlay">
+        <div className="mo-container" onClick={this.props.onCancel}>
+          <div className="mo-media-container">
+            {this._renderSwitch()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default SourceOverlay