Add fonts (Lazer, Green Machine, Inferno), fix fiont previews, add save message

client/scss/_dropzone.scss

@@ -73,6 +73,12 @@
   z-index: 3;
 }
 
+.dropzone-memeify-saveMessage {
+  padding-top: .25em;
+  position: relative;
+  top: .5em;
+}
+
 .dropzone-memeify-toolbar {
   /* TODO: Cleanup `!important` */
   background: $primary-color !important;

client/src/components/Creatify/EditableFontface/index.js

@@ -7,32 +7,48 @@ export default class EditableFontface extends Component {
     super(props);
 
     this.state = {
+      blinkSelection: props.blinkSelection == false ? false : true,
       value: props.value,
     };
+
+    this.textInput = React.createRef();
+  }
+
+  componentDidMount() {
+    const textInput = this.textInput.current;
+
+    if(textInput) {
+      textInput.focus();
+    }
   }
 
   render() {
     const me = this;
 
     const {
+      blinkSelection,
       value
     } = me.state;
 
     const {
       editable = true,
       fontFace,
+      preview,
     } = me.props;
 
     const textRender = fontFace.textRender || DEFAULT_TEXT_RENDER;
 
     const textStyles = Object.assign({
+      ...(blinkSelection ? {
+        animation: 'textBlink 1s infinite',
+      } : {}),
       minHeight: '20px',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
-    }, fontFace.text);
+    }, fontFace.text, preview ? fontFace.previewOverrides : {});
 
     const fontInput = (editable === true) ? (
-      <input type="text" onKeyPress={(e) => me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{
+      <input ref={this.textInput} type="text" onKeyPress={(e) => me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{
         ...{
           bottom: 0,
           opacity: 0,
@@ -49,6 +65,7 @@ export default class EditableFontface extends Component {
 
     return (
       <div style={{ position: 'relative' }}>
+        <style scoped>{'@keyframes textBlink { 0% { opacity: 1 } 30% { opacity: 0.6 } 60% { opacity: 1 } }'}</style>
         {fontInput}
         <div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
       </div>
@@ -56,18 +73,26 @@ export default class EditableFontface extends Component {
   }
 
   onKeyPress(e) {
-    this.setState({ value: e.target.value });
+    this.setState({
+      blinkSelection: false,
+      value: e.target.value
+    });
   }
 
   onChange(e) {
-    this.setState({ value: e.target.value });
+    this.setState({
+      blinkSelection: false,
+      value: e.target.value
+    });
   }
 };
 
 export const PRESETS = {
-  'Retro Rainbow': require('../FontFaces/RetroRainbow'),
+  'Inferno': require('../FontFaces/Inferno'),
   'Green Machine': require('../FontFaces/GreenMachine'),
-  'vapor wave': require('../FontFaces/VaporWave'),
-  'The Special': require('../FontFaces/TheSpecial'),
+  'Lazer': require('../FontFaces/Lazer'),
   'Old Blue': require('../FontFaces/OldBlue'),
+  'Retro Rainbow': require('../FontFaces/RetroRainbow'),
+  'The Special': require('../FontFaces/TheSpecial'),
+  'Vapor Wave': require('../FontFaces/VaporWave'),
 }

client/src/components/Creatify/FontFaces/GreenMachine.js

@@ -1,6 +1,10 @@
 module.exports = {
   container: {},
   text: {
-    color: 'green',
+    color: '#00b700',
+    fontFamily: 'courier, Courier New',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+    textShadow: '1px 1px 2px #003605',
   },
 };

client/src/components/Creatify/FontFaces/Inferno.js

@@ -0,0 +1,22 @@
+module.exports = {
+  container: {},
+  editorStyle: {
+    fontFamily: 'helvetica, Helvetica Nue',
+    fontWeight: 'bold',
+    fontSize: '2em',
+    padding: '4rem 2rem 1rem 2rem',
+  },
+  text: {
+    fontFamily: 'helvetica, Helvetica Nue',
+    fontWeight: 'bold',
+    fontSize: '2em',
+    color: '#fff',
+    paddingBottom: '.25em',
+    padding: '4rem 2rem 1rem 2rem',
+    textShadow: '0px 0px 3px #c20000, 0px 0px 3px #e0f2ff, 0px 0px 5px #532761, 0px 0px 20px #670606, 0 0 10px rgba(0, 0, 0, .8), 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffae34, 10px -20px 25px #ec760c, -10px -30px 30px #cd4606, 0 -40px 35px #973716, 5px -45px 40px #451b0e, 0 -2px 15px rgba(255, 200, 160, .5)',
+  },
+  previewOverrides: {
+    fontSize: '1.5em',
+    padding: '0 1rem 0 1rem',
+  },
+};

client/src/components/Creatify/FontFaces/Lazer.js

@@ -0,0 +1,27 @@
+module.exports = {
+  container: {},
+  editorStyle: {
+    fontFamily: 'helvetica, Helvetica Nue',
+    fontWeight: 'bold',
+    fontSize: '2em',
+    padding: '.05rem',
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap',
+  },
+  text: {
+    fontFamily: 'helvetica, Helvetica Nue',
+    fontWeight: 'bold',
+    backgroundImage: 'linear-gradient(180deg, #249bff 0%, #e1f8ff 44%, #3a006b 44%, #ff57d6 100%)',
+    backgroundClip: 'text',
+    fontSize: '2em',
+    color: 'transparent',
+    paddingBottom: '.25em',
+    paddingTop: '.1em',
+    filter: 'drop-shadow(0 0 .05rem black)',
+    padding: '.05rem',
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap',
+    WebkitBackgroundClip: 'text',
+    WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)',
+  },
+};

client/src/components/Creatify/FontFaces/OldBlue.js

@@ -15,6 +15,9 @@ module.exports = {
   text: {
     fontFamily: 'Segoe UI,Helvetica,Arial',
   },
+	previewOverrides: {
+		height: '2.6rem',
+	},
   textRender: (text) => {
     const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
     return (

client/src/components/Creatify/FontFaces/VaporWave.js

@@ -15,6 +15,12 @@ module.exports = {
   text: {
     fontFamily: 'Segoe UI,Helvetica,Arial',
   },
+	previewOverrides: {
+		transform: 'rotate(39deg)',
+    height: '7rem',
+    paddingLeft: '2rem',
+	  margin: '-2rem 0',
+	},
   textRender: (text) => {
     const formattedText = text.toLowerCase().split('').map((char) => {
       const c = char.charCodeAt( 0 )

client/src/components/Creatify/RichDraggable/index.js

@@ -41,15 +41,15 @@ export default class RichDraggable extends Component {
     } = props.bounds;
 
     const bounds = {
-      top: 0,
-      left: 0,
+      //top: 0,
+      //left: 0,
       right: right - state.width,
       bottom: bottom - state.height,
     };
 
     return (
       <Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
-        <div ref={me.contents} style={{ padding: '10px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
+        <div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
           <div className="no-drag" style={{ overflow: 'hidden', position: 'relative', cursor: 'auto' }}>
             {props.children}
           </div>

client/src/components/Creatify/index.js

@@ -95,7 +95,7 @@ export default class Creatify extends Component {
           value: fontName,
           label: (
             <div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px', overflow: 'hidden' }}>
-              <EditableFontface key={fontName} fontFace={FontPresets[fontName]} value={fontName} editable="false" />
+              <EditableFontface key={fontName} fontFace={FontPresets[fontName]} preview={true} value={fontName} editable={false} blinkSelection={false} />
             </div>
           ),
           fontName,
@@ -140,7 +140,7 @@ export default class Creatify extends Component {
 
     const newElement = (
       <RichDraggable key={newElementKey} bounds={state.bounds} onStart={() => this.setActiveElement(newElement)}>
-        <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
+        <EditableFontface fontFace={FontPresets[state.fontName]} value="Start Typing!" />
       </RichDraggable>
     );
 

client/src/containers/Dropzone/view.jsx

@@ -130,7 +130,7 @@ class Dropzone extends React.Component {
     const destinationFormat = 'image/jpeg';
 
     canvas.toBlob((blob) => {
-      const file = new File([blob], 'memeify.jpg', {
+      const file = new File([blob], `memeify-${Math.random().toString(36).substring(7)}.jpg`, {
         type: destinationFormat,
       });
 
@@ -172,7 +172,7 @@ class Dropzone extends React.Component {
 
     const memeifyContent = memeify && file && filePreview ? (
       <Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
-        <div style={{ background: '#fff', flex: 1 }}>
+        <div style={{ background: '#fff', flex: 1, pointerEvents: 'none' }}>
           <img style={{ width: '100%' }} src={filePreview} />
         </div>
       </Creatify>
@@ -186,7 +186,7 @@ class Dropzone extends React.Component {
           <p>Video updates are currently disabled. This feature will be available soon. You can edit metadata.</p>
         ) : (
           <div className={'dropzone-wrapper'}>
-            { hasContent && !memeify && (
+            { hasContent && !memeify && fileExt !== 'mp4' && (
               <div className={'dropzone-memeify-button'} onClick={() => this.setState({ memeify: !memeify })}>
                 <FontAwesomeIcon icon={faEdit} /> Memeify
               </div>
@@ -222,6 +222,7 @@ class Dropzone extends React.Component {
                   <DropzoneInstructionsDisplay fileError={fileError} />
                 )
               )}
+              {memeifyContent ? <div className={'dropzone-memeify-saveMessage'}>{`Don't forget to save before you publish.`}</div> : null}
             </div>
           </div>
         )}