display no image mediaview

src/components/base/MediaView.jsx

@@ -2,10 +2,12 @@ import React from 'react'
 import ReactPlayer from 'react-player'
 import { withStyles } from '@material-ui/core/styles'
 import CardMedia from '@material-ui/core/CardMedia'
+import NoImage from './NoImage'
 
 const styles = () => ({})
 
 function MediaView({ className, isVideo, source, playing, imgClass }) {
+  if (!source) return <NoImage />
   return (
     <div className={className} >
       {isVideo &&

src/components/base/NoImage.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import PropTypes from 'prop-types'
 import PhotoIcon from './icons/Photo.jsx'
 
 const styles = theme => ({
@@ -11,7 +12,7 @@ const styles = theme => ({
     justifyContent: 'center',
     background: 'rgba(147, 155, 161, 0.1)',
     minHeight: '15em',
-    gridColumn: '1 / 13'
+    gridColumn: '1 / 7'
   },
   icon: {},
   subText: {
@@ -31,4 +32,8 @@ function NoImage({ classes }){
   )
 }
 
+NoImage.propTypes = {
+  classes: PropTypes.object
+}
+
 export default withStyles(styles)(NoImage)

src/components/projects/CreateProject.jsx

@@ -15,7 +15,9 @@ import IconTextField from '../base/IconTextField'
 import Icon from '../base/icons/IconByName'
 import { convertTokenAmountUsd } from '../../utils/prices'
 import { setMediaType } from '../../utils/project'
-import NoImage from '../base/NoImage'
+import MediaView from '../base/MediaView'
+import { isVideo } from '../../utils/images'
+
 
 const { addProject } = LiquidPledging.methods
 
@@ -115,8 +117,7 @@ const styles = theme => ({
     fontSize: '2rem'
   },
   fullWidth: {
-    gridColumnStart: '1',
-    gridColumnEnd: '13'
+    gridColumn: '1 / 13'
   },
   breadCrumb: {
     color: '#939BA1'
@@ -336,7 +337,7 @@ const SubmissionSection = ({ classes, history }) => {
                 onBlur={handleBlur}
                 value={values.media || ''}
               />
-              <NoImage />
+              {values.media && <MediaView isVideo={isVideo(uploads.media[0])} className={fullWidth} source={URL.createObjectURL(uploads.media[0])} />}
               {status && status.showPreview &&
                <div className={classnames(classes.markdown, fullWidth)}>
                  <div

src/utils/images.js

@@ -9,3 +9,5 @@ export const getImageType = file => {
   const suffix = file.split('.').slice(-1)[0].toLowerCase()
   return typeMap[suffix] ? typeMap[suffix] : 'image/jpeg'
 }
+
+export const isVideo = file => file.type.includes('video')