From d4e4b5384b9adec885aaa05dae11547628afbaea Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Fri, 23 Aug 2019 09:57:08 -0400
Subject: [PATCH] display no image mediaview

---
 src/components/base/MediaView.jsx         | 2 ++
 src/components/base/NoImage.jsx           | 7 ++++++-
 src/components/projects/CreateProject.jsx | 9 +++++----
 src/utils/images.js                       | 2 ++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/base/MediaView.jsx b/src/components/base/MediaView.jsx
index bfc73d9..e7b4b6a 100644
--- a/src/components/base/MediaView.jsx
+++ b/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 &&
diff --git a/src/components/base/NoImage.jsx b/src/components/base/NoImage.jsx
index 15ba53d..a7f03c4 100644
--- a/src/components/base/NoImage.jsx
+++ b/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)
diff --git a/src/components/projects/CreateProject.jsx b/src/components/projects/CreateProject.jsx
index f6e0e00..3423a1e 100644
--- a/src/components/projects/CreateProject.jsx
+++ b/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
diff --git a/src/utils/images.js b/src/utils/images.js
index a020fe3..b917556 100644
--- a/src/utils/images.js
+++ b/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')