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

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+const DEFAULT_TEXT_RENDER = (text) => text;
+
+export default class EditableFontface extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value,
+    };
+  }
+
+  render() {
+    const me = this;
+
+    const {
+      value
+    } = me.state;
+
+    const {
+      fontFace,
+    } = me.props;
+
+    const textRender = fontFace.textRender || DEFAULT_TEXT_RENDER;
+
+    const textStyles = {
+      ...{
+        minHeight: '30px',
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+      },
+      ...(fontFace.text),
+    };
+
+    return (
+      <div style={{ position: 'relative' }}>
+        <input type="text" onKeyPress={(e) => me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{
+          ...{
+            bottom: 0,
+            opacity: 0,
+            padding: 0,
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+            zIndex: 1,
+          },
+          ...(fontFace.editorStyle || {}),
+        }} />
+        <div style={textStyles} title={value}>{textRender(value)}</div>
+      </div>
+    );
+  }
+
+  onKeyPress(e) {
+    this.setState({ value: e.target.value });
+  }
+
+  onChange(e) {
+    this.setState({ value: e.target.value });
+  }
+};
+
+export const PRESETS = {
+  'Retro Rainbow': require('./FontFaces/RetroRainbow'),
+  'Green Machine': require('./FontFaces/GreenMachine'),
+}

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

@@ -0,0 +1,6 @@
+export default const GreenMachine = {
+  container: {},
+  text: {
+    color: 'green',
+  },
+};

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

@@ -0,0 +1,18 @@
+export default const RetroRainbow = {
+  container: {},
+  editorStyle: {
+    fontFamily: 'Arial, sans-serif',
+    fontWeight: 'bold',
+    transform: 'scale(1, 1.5)',
+  },
+  text: {
+    fontFamily: 'Arial, sans-serif',
+    fontWeight: 'bold',
+    background: 'linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af)',
+    textFillColor: 'transparent',
+    backgroundClip: 'text',
+    transform: 'scale(1, 1.5)',
+    WebkitTextFillColor: 'transparent',
+    WebkitBackgroundClip: 'text',
+  },
+};

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

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class RichDraggable extends Component {
+  render() {
+    return (
+      <div style={{ margin: '-2px', position: 'absolute', border: '2px dashed blue' }}>
+        {this.props.children}
+      </div>
+    );
+  }
+};

client/src/components/Creatify/index.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+import RichDraggable from './RichDraggable';
+import EditableFontface, { PRESETS as FontPresets } from './EditableFontface';
+
+export default class Creatify extends Component {
+  constructor(props) {
+    super(props);
+
+    const fontKeys = Object.keys(FontPresets);
+
+    this.state = {
+      fontName: fontKeys[0],
+      fontOptions: fontKeys.map((fontName) => (
+        <option value={fontName}>{fontName}</option>
+      )),
+    };
+  }
+
+  render() {
+    const {
+      state,
+    } = this;
+
+    return (
+      <div style={{ flex: 1 }}>
+        <select value={state.fontName} onChange={(e) => this.onChangeFont(e)}>
+          {state.fontOptions}
+        </select>
+        <RichDraggable>
+          <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
+        </RichDraggable>
+      </div>
+    );
+  }
+
+  onChangeFont(event) {
+   this.setState({
+     fontName: event.target.value,
+   });
+  }
+};

client/src/pages/HomePage/view.jsx

@@ -3,6 +3,8 @@ 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();
@@ -16,6 +18,7 @@ class HomePage extends React.Component {
         pageTitle={'Speech'}
         pageUri={''}
       >
+        <Creatify />
         <PublishTool />
       </PageLayout>
     );