client/src/components/Creatify/index.js

@@ -124,8 +124,8 @@ export default class Creatify extends Component {
 
   render() {
     const me = this;
-
     const {
+      props,
       state,
     } = this;
 
@@ -139,6 +139,7 @@ export default class Creatify extends Component {
           <RichDraggable bounds={state.bounds}>
             <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
           </RichDraggable>
+          {props.children}
         </div>
       </div>
     );

client/src/containers/Dropzone/view.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { validateFile } from '../../utils/file';
+import Creatify from '@components/Creatify';
 import DropzonePreviewImage from '@components/DropzonePreviewImage';
 import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
 import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
@@ -7,11 +8,21 @@ import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay
 class Dropzone extends React.Component {
   constructor (props) {
     super(props);
+
     this.state = {
-      dragOver  : false,
-      mouseOver : false,
-      dimPreview: false,
+      dragOver   : false,
+      mouseOver  : false,
+      dimPreview : false,
+      filePreview: null,
     };
+
+    if(props.file) {
+      // No side effects allowed with `getDerivedStateFromProps`, so
+      // we must use `componentDidUpdate` and `constructor` routines.
+      // Note: `FileReader` has an `onloadend` side-effect
+      this.updateFilePreview();
+    }
+
     this.handleDrop = this.handleDrop.bind(this);
     this.handleDragOver = this.handleDragOver.bind(this);
     this.handleDragEnd = this.handleDragEnd.bind(this);
@@ -23,6 +34,25 @@ class Dropzone extends React.Component {
     this.handleFileInput = this.handleFileInput.bind(this);
     this.chooseFile = this.chooseFile.bind(this);
   }
+
+  componentDidUpdate(prevProps) {
+    if(prevProps.file !== this.props.file) {
+      this.updateFilePreview();
+    }
+  }
+
+  updateFilePreview() {
+    if (this.props.file) {
+      const fileReader = new FileReader();
+      fileReader.readAsDataURL(this.props.file);
+      fileReader.onloadend = () => {
+        this.setState({
+          filePreview: fileReader.result
+        });
+      };
+    }
+  }
+
   handleDrop (event) {
     event.preventDefault();
     this.setState({dragOver: false});
@@ -35,9 +65,11 @@ class Dropzone extends React.Component {
       }
     }
   }
+
   handleDragOver (event) {
     event.preventDefault();
   }
+
   handleDragEnd (event) {
     var dt = event.dataTransfer;
     if (dt.items) {
@@ -48,27 +80,34 @@ class Dropzone extends React.Component {
       event.dataTransfer.clearData();
     }
   }
+
   handleDragEnter () {
     this.setState({dragOver: true, dimPreview: true});
   }
+
   handleDragLeave () {
     this.setState({dragOver: false, dimPreview: false});
   }
+
   handleMouseEnter () {
     this.setState({mouseOver: true, dimPreview: true});
   }
+
   handleMouseLeave () {
     this.setState({mouseOver: false, dimPreview: false});
   }
+
   handleClick (event) {
     event.preventDefault();
     document.getElementById('file_input').click();
   }
+
   handleFileInput (event) {
     event.preventDefault();
     const fileList = event.target.files;
     this.chooseFile(fileList[0]);
   }
+
   chooseFile (file) {
     if (file) {
       try {
@@ -80,9 +119,49 @@ class Dropzone extends React.Component {
       this.props.selectFile(file);
     }
   }
+
   render () {
-    const { dragOver, mouseOver, dimPreview } = this.state;
+    const { dragOver, mouseOver, dimPreview, filePreview } = this.state;
     const { file, thumbnail, fileError, isUpdate, sourceUrl, fileExt } = this.props;
+
+    const hasContent = !!(file || isUpdate);
+
+    const dropZoneHooks = file ? {} : {
+      onDrop: this.handleDrop,
+      onDragOver: this.handleDragOver,
+      onDragEnd: this.handleDragEnd,
+      onDragEnter: this.handleDragEnter,
+      onDragLeave: this.handleDragLeave,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onClick: this.handleClick,
+    };
+
+    const dropZonePreviewProps = file ? {
+      dimPreview,
+      file,
+      thumbnail,
+    } : {
+      dimPreview: true,
+      isUpdate: true,
+      sourceUrl,
+    };
+
+    let memeify = file && filePreview ? (
+      <Creatify>
+        <img src={filePreview} />
+      </Creatify>
+    ) : null;
+
+    console.log({
+      file,
+      thumbnail,
+      sourceUrl,
+      filePreview,
+    });
+
+    const dropZoneClassName = 'dropzone' + (dragOver ? ' dropzone--drag-over' : '');
+
     return (
       <React.Fragment>
         {isUpdate && fileExt === 'mp4' ? (
@@ -100,31 +179,10 @@ class Dropzone extends React.Component {
                 encType='multipart/form-data'
               />
             </form>
-            <div
-              className={'dropzone' + (dragOver ? ' dropzone--drag-over' : '')}
-              onDrop={this.handleDrop}
-              onDragOver={this.handleDragOver}
-              onDragEnd={this.handleDragEnd}
-              onDragEnter={this.handleDragEnter}
-              onDragLeave={this.handleDragLeave}
-              onMouseEnter={this.handleMouseEnter}
-              onMouseLeave={this.handleMouseLeave}
-              onClick={this.handleClick}>
-              {file || isUpdate ? (
+            <div className={dropZoneClassName} {...dropZoneHooks}>
+              {hasContent ? (
                 <div className={'dropzone-preview-wrapper'}>
-                  {file ? (
-                    <DropzonePreviewImage
-                      dimPreview={dimPreview}
-                      file={file}
-                      thumbnail={thumbnail}
-                    />
-                  ) : (
-                    <DropzonePreviewImage
-                      dimPreview
-                      isUpdate
-                      sourceUrl={sourceUrl}
-                    />
-                  )}
+                  <DropzonePreviewImage {...dropZonePreviewProps} />
                   <div className={'dropzone-preview-overlay'}>
                     { dragOver ? <DropzoneDropItDisplay /> : null }
                     { mouseOver ? (
@@ -133,13 +191,12 @@ class Dropzone extends React.Component {
                         message={fileExt === 'mp4' ? 'Drag & drop new thumbnail' : null}
                       />
                     ) : null }
+                    {memeify}
                   </div>
                 </div>
               ) : (
                 dragOver ? <DropzoneDropItDisplay /> : (
-                  <DropzoneInstructionsDisplay
-                    fileError={fileError}
-                  />
+                  <DropzoneInstructionsDisplay fileError={fileError} />
                 )
               )}
             </div>

client/src/pages/HomePage/view.jsx

@@ -3,8 +3,6 @@ import PageLayout from '@components/PageLayout';
 import PublishTool from '@containers/PublishTool';
 import ContentPageWrapper from '@pages/ContentPageWrapper';
 
-import Creatify from '@components/Creatify';
-
 class HomePage extends React.Component {
   componentWillUnmount () {
     this.props.clearFile();
@@ -18,7 +16,6 @@ class HomePage extends React.Component {
         pageTitle={'Speech'}
         pageUri={''}
       >
-        <Creatify />
         <PublishTool />
       </PageLayout>
     );