show dimmed image preview for updates -- not working for videos yet

client/src/components/DropzonePreviewImage/index.jsx

@@ -10,7 +10,12 @@ class PublishPreview extends React.Component {
     };
   }
   componentDidMount () {
-    this.setPreviewImageSource(this.props.file);
+    const { isUpdate, sourceUrl, file } = this.props;
+    if (isUpdate && sourceUrl) {
+      this.setState({ imgSource: sourceUrl });
+    } else {
+      this.setPreviewImageSource(file);
+    }
   }
   componentWillReceiveProps (newProps) {
     if (newProps.file !== this.props.file) {
@@ -54,8 +59,10 @@ class PublishPreview extends React.Component {
 
 PublishPreview.propTypes = {
   dimPreview: PropTypes.bool.isRequired,
-  file      : PropTypes.object.isRequired,
+  file      : PropTypes.object,
   thumbnail : PropTypes.object,
+  isUpdate  : PropTypes.bool,
+  sourceUrl : PropTypes.string,
 };
 
 export default PublishPreview;

client/src/containers/Dropzone/index.js

@@ -1,12 +1,18 @@
 import { connect } from 'react-redux';
 import { selectFile, updateError, clearFile } from '../../actions/publish';
+import { selectAsset } from '../../selectors/show';
 import View from './view';
 
-const mapStateToProps = ({ publish }) => {
+const mapStateToProps = ({ publish, show }) => {
+  const asset = selectAsset(show);
+  const { name, claimData: { claimId, fileExt, outpoint } } = asset;
+  const sourceUrl = `/${claimId}/${name}.${fileExt}?${outpoint}`;
   return {
     file     : publish.file,
     thumbnail: publish.thumbnail,
     fileError: publish.error.file,
+    isUpdate : publish.isUpdate,
+    sourceUrl,
   };
 };
 

client/src/containers/Dropzone/view.jsx

@@ -81,6 +81,8 @@ class Dropzone extends React.Component {
     }
   }
   render () {
+    const { dragOver, mouseOver, dimPreview } = this.state;
+    const { file, thumbnail, fileError, isUpdate, sourceUrl } = this.props;
     return (
       <div className='dropzone-wrapper'>
         <form>
@@ -95,7 +97,7 @@ class Dropzone extends React.Component {
           />
         </form>
         <div
-          className={'dropzone' + (this.state.dragOver ? ' dropzone--drag-over' : '')}
+          className={'dropzone' + (dragOver ? ' dropzone--drag-over' : '')}
           onDrop={this.handleDrop}
           onDragOver={this.handleDragOver}
           onDragEnd={this.handleDragEnd}
@@ -104,26 +106,34 @@ class Dropzone extends React.Component {
           onMouseEnter={this.handleMouseEnter}
           onMouseLeave={this.handleMouseLeave}
           onClick={this.handleClick}>
-          {this.props.file ? (
+          {file || isUpdate ? (
             <div className={'dropzone-preview-wrapper'}>
-              <DropzonePreviewImage
+              {file ? (
-                dimPreview={this.state.dimPreview}
+                <DropzonePreviewImage
-                file={this.props.file}
+                  dimPreview={dimPreview}
-                thumbnail={this.props.thumbnail}
+                  file={file}
-              />
+                  thumbnail={thumbnail}
+                />
+              ) : (
+                <DropzonePreviewImage
+                  dimPreview
+                  isUpdate
+                  sourceUrl={sourceUrl}
+                />
+              )}
               <div className={'dropzone-preview-overlay'}>
-                { this.state.dragOver ? <DropzoneDropItDisplay /> : null }
+                { dragOver ? <DropzoneDropItDisplay /> : null }
-                { this.state.mouseOver ? (
+                { mouseOver ? (
                   <DropzoneInstructionsDisplay
-                    fileError={this.props.fileError}
+                    fileError={fileError}
                   />
                 ) : null }
               </div>
             </div>
           ) : (
-            this.state.dragOver ? <DropzoneDropItDisplay /> : (
+            dragOver ? <DropzoneDropItDisplay /> : (
               <DropzoneInstructionsDisplay
-                fileError={this.props.fileError}
+                fileError={fileError}
               />
             )
           )}