Merge pull request #804 from lbryio/staging

Cut release from staging

client/scss/all.scss

@@ -1,44 +1,44 @@
-@import '_variables';
-@import '_reset';
-@import 'font/_font.scss';
-@import '_html';
-@import '_body';
-@import '_react-app';
-@import '_text';
+@import '~scss/_variables';
+@import '~scss/_reset';
+@import '~scss/font/_font.scss';
+@import '~scss/_html';
+@import '~scss/_body';
+@import '~scss/_react-app';
+@import '~scss/_text';
 
-@import '_link';
-@import '_input';
-@import '_select';
-@import '_textarea';
-@import '_video';
-@import '_form';
+@import '~scss/_link';
+@import '~scss/_input';
+@import '~scss/_select';
+@import '~scss/_textarea';
+@import '~scss/_video';
+@import '~scss/_form';
 
-@import '_asset-display';
-@import '_asset-preview';
-@import '_button';
-@import '_button-primary';
-@import '_button-secondary';
-@import '_click-to-copy';
-@import '_form-feedback';
-@import '_horizontal-split';
-@import '_label';
-@import '_nav-bar';
-@import '_page-layout';
-@import '_page-layout-show-lite';
-@import '_page-content';
-@import '_progress-bar';
-@import '_publish-preview';
-@import '_share-buttons';
-@import '_space-between';
-@import '_space-around';
-@import '_row';
-@import '_tooltip';
-@import '_social-share-link';
+@import '~scss/_asset-display';
+@import '~scss/_asset-preview';
+@import '~scss/_button';
+@import '~scss/_button-primary';
+@import '~scss/_button-secondary';
+@import '~scss/_click-to-copy';
+@import '~scss/_form-feedback';
+@import '~scss/_horizontal-split';
+@import '~scss/_label';
+@import '~scss/_nav-bar';
+@import '~scss/_page-layout';
+@import '~scss/_page-layout-show-lite';
+@import '~scss/_page-content';
+@import '~scss/_progress-bar';
+@import '~scss/_publish-preview';
+@import '~scss/_share-buttons';
+@import '~scss/_space-between';
+@import '~scss/_space-around';
+@import '~scss/_row';
+@import '~scss/_tooltip';
+@import '~scss/_social-share-link';
 
-@import '_channel-claims-display';
-@import '_dropzone';
-@import '_publish-url-input';
-@import '_publish-status';
-@import '_publish-disabled-message';
+@import '~scss/_channel-claims-display';
+@import '~scss/_dropzone';
+@import '~scss/_publish-url-input';
+@import '~scss/_publish-status';
+@import '~scss/_publish-disabled-message';
 
-@import '_media-queries';
+@import '~scss/_media-queries';

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

@@ -64,7 +64,7 @@ export default class EditableFontface extends Component {
     ) : null;
 
     return (
-      <div style={{ position: 'relative' }}>
+      <div style={{ position: 'relative', ...(fontFace.container || {}) }}>
         <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>
@@ -93,6 +93,7 @@ export const PRESETS = {
   'Lazer': require('../FontFaces/Lazer'),
   'Neon': require('../FontFaces/Neon'),
   'Old Blue': require('../FontFaces/OldBlue'),
+  'Outline': require('../FontFaces/Outline'),
   'Retro Rainbow': require('../FontFaces/RetroRainbow'),
   'The Special': require('../FontFaces/TheSpecial'),
   'Vapor Wave': require('../FontFaces/VaporWave'),

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

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'courier, Courier New',
     fontWeight: 'bold',
@@ -12,4 +11,7 @@ module.exports = {
     fontWeight: 'bold',
     textShadow: '1px 1px 2px #003605',
   },
+  previewOverrides: {
+    fontSize: '1.6em',
+  },
 };

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

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',
@@ -14,6 +13,7 @@ module.exports = {
   },
   previewOverrides: {
     fontSize: '1.5em',
+    overflow: 'hidden',
     padding: '0 1rem 0 1rem',
   },
 };

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

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',
@@ -20,4 +19,7 @@ module.exports = {
     WebkitBackgroundClip: 'text',
     WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)',
   },
+  previewOverrides: {
+    fontSize: '1.8em',
+  },
 };

client/src/components/Memeify/FontFaces/Neon.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Helvetica, Arial',
     fontWeight: 'bold',

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

@@ -17,6 +17,7 @@ module.exports = {
   },
 	previewOverrides: {
 		height: '2.6rem',
+		overflow: 'hidden',
 	},
   textRender: (text) => {
     const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
@@ -24,12 +25,12 @@ module.exports = {
       <svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
 				<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
         <text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>
 				<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>

client/src/components/Memeify/FontFaces/Outline.js

@@ -0,0 +1,18 @@
+module.exports = {
+  editorStyle: {
+    fontFamily: 'arial',
+    fontWeight: 'bold',
+    fontSize: '2em',
+  },
+  text: {
+    color: '#fff',
+    fontFamily: 'arial',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+    textShadow: '2px 2px .1px #000, -1px -1px .1px #000, 1px -1px .1px #000, -1px 1px .1px #000, 1px 1px .1px #000',
+  },
+  previewOverrides: {
+    fontSize: '1.6rem',
+    padding: '0 .04rem',
+  },
+};

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

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/TheSpecial.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

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

@@ -10,7 +10,9 @@ const charToFullWidth = char => {
 const stringToFullWidth =
 
 module.exports = {
-  container: {},
+  container: {
+		overflow: 'hidden',
+	},
   editorStyle: {},
   text: {
     fontFamily: 'Segoe UI,Helvetica,Arial',
@@ -33,7 +35,7 @@ module.exports = {
       <svg viewBox="0 0 500 160" style={{ height: '10em' }}>
         <path id={id} fill="transparent" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
         <text x="10">
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {formattedText}
           </textPath>
         </text>

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

@@ -49,11 +49,13 @@ export default class RichDraggable extends Component {
 
     return (
       <Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
-        <div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
+        <div ref={me.contents} style={{ border: '4px dashed rgba(0, 0, 0, .7)', cursor: 'move', position: 'absolute' }} className="creatifyDecor">
+          <div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }} className="creatifyDecor">
             <div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
               {props.children}
             </div>
           </div>
+        </div>
       </Draggable>
     );
   }

client/src/components/Memeify/index.js

@@ -28,9 +28,14 @@ const getRasterizedCanvas = (contents, width, height) => {
       );
     }
 
+    // Fix busted SVG images in Safari
+    if(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+      contents = contents.replace(/\<img\s/g, '<xhtml:img ');
+    }
+
     // Attempt to match font kerning with the DOM.
     const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>';
-    const svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
+    let svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
 <foreignObject x="0" y="0" width="${width * 2}" height="${height * 2}" externalResourcesRequired="true">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
 </foreignObject></svg>`;
@@ -81,7 +86,7 @@ const getRasterizedCanvas = (contents, width, height) => {
   });
 };
 
-export default class Creatify extends Component {
+export default class Memeify extends Component {
   constructor(props) {
     super(props);
 
@@ -94,7 +99,7 @@ export default class Creatify extends Component {
         {
           value: fontName,
           label: (
-            <div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px', overflow: 'hidden' }}>
+            <div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px' }}>
               <EditableFontface key={fontName} fontFace={FontPresets[fontName]} preview={true} value={fontName} editable={false} blinkSelection={false} />
             </div>
           ),

client/src/containers/AssetInfo/view.jsx

@@ -2,22 +2,20 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Label from '@components/Label';
 import RowLabeled from '@components/RowLabeled';
-import Row from '@components/Row';
 import SpaceBetween from '@components/SpaceBetween';
 import AssetShareButtons from '@components/AssetShareButtons';
 import ClickToCopy from '@components/ClickToCopy';
 import HorizontalSplit from '@components/HorizontalSplit';
-
 import siteConfig from '@config/siteConfig.json';
-const { details: { host } } = siteConfig;
 import createCanonicalLink from '../../../../utils/createCanonicalLink';
 import AssetInfoFooter from '../../components/AssetInfoFooter/index';
+const { details: { host } } = siteConfig;
 
 class AssetInfo extends React.Component {
   render () {
     const { editable, asset } = this.props;
     const { claimViews, claimData } = asset;
-    const { channelName, claimId, channelShortId, description, name, fileExt, contentType, host } = claimData;
+    const { channelName, claimId, channelShortId, description, name, fileExt, contentType, host, certificateId } = claimData;
 
     const canonicalUrl = createCanonicalLink({ asset: { ...claimData, shortId: asset.shortId }});
     const assetCanonicalUrl = `${host}${canonicalUrl}`;
@@ -25,7 +23,7 @@ class AssetInfo extends React.Component {
     let channelCanonicalUrl;
     if (channelName) {
       const channel = {
-        name: channelName,
+        name   : channelName,
         shortId: channelShortId,
       };
       channelCanonicalUrl = `${createCanonicalLink({channel})}`;
@@ -116,6 +114,18 @@ class AssetInfo extends React.Component {
                 }
               />
 
+              <RowLabeled
+                label={
+                  <Label value={'ID for Robots'} />
+                }
+                content={
+                  <ClickToCopy
+                    id={'short-link'}
+                    value={`${channelName}#${certificateId}/${name}`}
+                  />
+                }
+              />
+
               <SpaceBetween>
                 <a
                   className='link--primary'
@@ -130,6 +140,13 @@ class AssetInfo extends React.Component {
                 >
                   Download
                 </a>
+                <a
+                  className={'link--primary'}
+                  href={`https://open.lbry.io/${channelName}#${certificateId}/${name}`}
+                  download={name}
+                >
+                  LBRY URL
+                </a>
                 <a
                   className={'link--primary'}
                   target='_blank'
@@ -140,7 +157,7 @@ class AssetInfo extends React.Component {
               </SpaceBetween>
             </div>
           } />
-        <AssetInfoFooter/>
+        <AssetInfoFooter />
       </div>
     );
   }

client/src/containers/Dropzone/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { validateFile } from '../../utils/file';
-import Creatify from '@components/Creatify';
+import Memeify from '@components/Memeify';
 import DropzonePreviewImage from '@components/DropzonePreviewImage';
 import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
 import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
@@ -187,11 +187,11 @@ class Dropzone extends React.Component {
     };
 
     const memeifyContent = memeify && file && filePreview ? (
-      <Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
+      <Memeify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
         <div style={{ background: '#fff', flex: 1, pointerEvents: 'none' }}>
           <img style={{ width: '100%' }} src={filePreview} />
         </div>
-      </Creatify>
+      </Memeify>
     ) : null;
 
     const dropZoneClassName = 'dropzone' + (dragOver ? ' dropzone--drag-over' : '');

package.json

@@ -123,6 +123,7 @@
     "ndb": "^1.0.26",
     "node-sass": "^4.10.0",
     "nodemon": "^1.18.6",
+    "react-color": "^2.14.1",
     "redux-devtools": "^3.4.1",
     "regenerator-transform": "^0.13.3",
     "rollup": "^0.67.0",

utils/createModuleAliases.js

@@ -2,6 +2,7 @@ const { statSync, existsSync, readdirSync } = require('fs');
 const { join, resolve } = require('path');
 const DEFAULT_ROOT = 'client/build';
 const CUSTOM_ROOT = 'site/custom/build';
+const DEFAULT_SCSS_ROOT = 'client/scss';
 const CUSTOM_SCSS_ROOT = 'site/custom/scss';
 
 const getFolders = path => {
@@ -23,17 +24,6 @@ const addAliasesForCustomComponentFolder = (name, aliasObject) => {
   return aliasObject;
 };
 
-const addAlliasesForSCSS = (aliasObject) => { // scss
-  // creates an alias for every folder found in the custom scss folder
-  const customScssRoot = resolve(`${CUSTOM_SCSS_ROOT}`);
-  const customFolders = getFolders(customScssRoot);
-  for (let i = 0; i < customFolders.length; i++) {
-    let folderName = customFolders[i];
-    aliasObject[folderName] = resolve(`${CUSTOM_SCSS_ROOT}/${folderName}`);
-  }
-  return aliasObject;
-};
-
 module.exports = () => {
   let moduleAliases = {};
 
@@ -58,9 +48,6 @@ module.exports = () => {
   moduleAliases['@sagas'] = resolve(`${DEFAULT_ROOT}/sagas`);
   moduleAliases['@app'] = resolve(`${DEFAULT_ROOT}/app.js`);
 
-  // scss aliases
-  moduleAliases = addAlliasesForSCSS(moduleAliases);
-
   // return finished aliases
   return moduleAliases;
 };

webpack.config.js

@@ -2,6 +2,8 @@ const Path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const createModuleAliases = require('./utils/createModuleAliases.js');
 const SCSS_ROOT = Path.join(__dirname, 'client/scss/');
+const CLIENT_ROOT = Path.join(__dirname, 'client/');
+const CUSTOM_CLIENT_ROOT = Path.join(__dirname, 'site/custom/');
 
 const customAliases = createModuleAliases();
 
@@ -38,6 +40,8 @@ module.exports = {
   },
   resolve: {
     modules: [
+      CUSTOM_CLIENT_ROOT,
+      CLIENT_ROOT,
       SCSS_ROOT,
       'node_modules',
       __dirname,