WIP Checkpoint, spaghetti code!

lbryio · Apr 9, 2019 · 017c1a6 · 017c1a6
1 parent 5ea7dde
commit 017c1a6
Show file tree

Hide file tree

Showing 25 changed files with 2,122 additions and 868 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,8 @@
 {
   "presets": ["@babel/react", "@babel/flow"],
   "plugins": [
+    "import-glob",
+    "@babel/plugin-transform-runtime",
     "@babel/plugin-syntax-dynamic-import",
     "react-hot-loader/babel",
     ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "compile": "cross-env NODE_ENV=production yarn compile:electron && cross-env NODE_ENV=production yarn compile:web",
     "dev": "yarn dev:electron",
     "dev:electron": "cross-env NODE_ENV=development node ./src/platforms/electron/devServer.js",
-    "dev:web": "NODE_ENV=development webpack-dev-server --open --hot --progress --config webpack.web.config.js",
+    "dev:web": "cross-env NODE_ENV=development webpack-dev-server --open --hot --progress --config webpack.web.config.js",
     "dev:internal-apis": "LBRY_API_URL='http://localhost:9090' yarn dev:electron",
     "run:web": "cross-env NODE_ENV=production yarn compile:web && node ./dist/web/server.js",
     "pack": "electron-builder --dir",
@@ -52,6 +52,7 @@
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-flow-strip-types": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -64,8 +65,11 @@
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-add-module-exports": "^1.0.0",
+    "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-transform-imports": "^1.5.1",
     "bluebird": "^3.5.1",
+    "butterchurn": "^2.6.7",
+    "butterchurn-presets": "^2.4.7",
     "chalk": "^2.4.2",
     "classnames": "^2.2.5",
     "codemirror": "^5.39.2",
@@ -74,6 +78,7 @@
     "country-data": "^0.0.31",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.0",
+    "cssnano": "^4.1.10",
     "dat.gui": "^0.7.2",
     "decompress": "^4.2.0",
     "del": "^3.0.0",
@@ -106,12 +111,14 @@
     "hast-util-sanitize": "^1.1.2",
     "history": "^4.9.0",
     "husky": "^0.14.3",
+    "jsmediatags": "^3.8.1",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#86f1340f834d0f5cd5365492a8ff15d4b213a050",
-    "lbryinc": "lbryio/lbryinc#d9f9035113c8b9ab3b0ee7ffbd38f910086a665e",
+    "lbry-redux": "lbryio/lbry-redux#d4c7dea65f7179974e9b96c863022fe7b049ff7d",
+    "lbryinc": "lbryio/lbryinc#4f2d4a50986bffab0b05d9f6cd7c2f0a856a0e02",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
+    "lodash-es": "^4.17.11",
     "make-runnable": "^1.3.6",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",
@@ -121,6 +128,8 @@
     "node-libs-browser": "^2.1.0",
     "node-loader": "^0.6.0",
     "node-sass": "^4.11.0",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "preprocess-loader": "^0.3.0",
     "prettier": "^1.11.1",
     "prop-types": "^15.6.2",
@@ -156,9 +165,10 @@
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.2.3",
     "three": "^0.93.0",
-    "three-full": "^11.3.2",
+    "three-full": "^17.1.0",
     "tree-kill": "^1.1.0",
     "video.js": "^7.2.2",
+    "wavesurfer.js": "^2.2.1",
     "webpack": "^4.28.4",
     "webpack-bundle-analyzer": "^3.1.0",
     "webpack-config-utils": "^2.3.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,16 @@
+module.exports = ({ file, options, env }) => {
+  env = env || {};
+  file = file || {};
+  options = options || {};
+  options.cssnext = options.cssnext || null;
+  options.autoprefixer = options.autoprefixer || null;
+  options.cssnano = options.cssnano || null;
+
+  return {
+    parser: file.extname === '.sss' ? 'sugarss' : false,
+    plugins: {
+      'postcss-import': { root: file.dirname },
+      'cssnano': env === 'production' ? options.cssnano : false
+    }
+  };
+};
diff --git a/src/platforms/electron/index.js b/src/platforms/electron/index.js
@@ -40,12 +40,8 @@ app.setName('LBRY');
 app.setAppUserModelId('io.lbry.LBRY');
 
 if (isDev) {
-  // Enable WEBGL
-  app.commandLine.appendSwitch('ignore-gpu-blacklist');
-  app.commandLine.appendSwitch('--disable-gpu-process-crash-limit');
-  app.disableDomainBlockingFor3DAPIs();
-
-  // Disable security warnings in dev mode - https://github.com/electron/electron/blob/master/docs/tutorial/security.md#electron-security-warnings
+  // Disable security warnings in dev mode:
+  // https://github.com/electron/electron/blob/master/docs/tutorial/security.md#electron-security-warnings
   process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;
 }
 

diff --git a/src/ui/component/common/form-components/form-field.jsx b/src/ui/component/common/form-components/form-field.jsx
@@ -1,12 +1,16 @@
 // @flow
-import * as React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import MarkdownPreview from 'component/common/markdown-preview';
-import SimpleMDE from 'react-simplemde-editor';
 import 'easymde/dist/easymde.min.css';
 import Toggle from 'react-toggle';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
 
+const SimpleMDE = React.lazy(() => import(
+  /* webpackChunkName: "SimpleMDE" */
+  'react-simplemde-editor'
+));
+
 type Props = {
   name: string,
   label?: string,
@@ -132,19 +136,21 @@ export class FormField extends React.PureComponent<Props> {
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
               <label htmlFor={name}>{label}</label>
-              <SimpleMDE
-                {...inputProps}
-                id={name}
-                type="textarea"
-                events={handleEvents}
-                options={{
-                  hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
-                  previewRender(plainText) {
-                    const preview = <MarkdownPreview content={plainText} />;
-                    return ReactDOMServer.renderToString(preview);
-                  },
-                }}
-              />
+              <Suspense fallback={<div></div>}>
+                <SimpleMDE
+                  {...inputProps}
+                  id={name}
+                  type="textarea"
+                  events={handleEvents}
+                  options={{
+                    hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
+                    previewRender(plainText) {
+                      const preview = <MarkdownPreview content={plainText} />;
+                      return ReactDOMServer.renderToString(preview);
+                    },
+                  }}
+                />
+              </Suspense>
             </fieldset-section>
           </div>
         );

diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
@@ -0,0 +1,55 @@
+// @flow
+import * as React from 'react';
+import remark from 'remark';
+import reactRenderer from 'remark-react';
+import remarkEmoji from 'remark-emoji';
+import ExternalLink from 'component/externalLink';
+import defaultSchema from 'hast-util-sanitize/lib/github.json';
+
+type MarkdownProps = {
+  content: ?string,
+  promptLinks?: boolean,
+};
+
+type SimpleLinkProps = {
+  href?: string,
+  title?: string,
+  children?: React.Node,
+};
+
+const SimpleLink = (props: SimpleLinkProps) => {
+  const { href, title, children } = props;
+  return (
+    <a href={href} title={title}>
+      {children}
+    </a>
+  );
+};
+
+// Use github sanitation schema
+const schema = { ...defaultSchema };
+
+// Extend sanitation schema to support lbry protocol
+schema.protocols.href[3] = 'lbry';
+
+const MarkdownPreview = (props: MarkdownProps) => {
+  const { content, promptLinks } = props;
+  const remarkOptions = {
+    sanitize: schema,
+    remarkReactComponents: {
+      a: promptLinks ? ExternalLink : SimpleLink,
+    },
+  };
+  return (
+    <div className="markdown-preview">
+      {
+        remark()
+          .use(remarkEmoji)
+          .use(reactRenderer, remarkOptions)
+          .processSync(content).contents
+      }
+    </div>
+  );
+};
+
+export default MarkdownPreview;
diff --git a/src/ui/component/common/markdown-preview.jsx b/src/ui/component/common/markdown-preview.jsx
@@ -1,54 +1,16 @@
-// @flow
-import * as React from 'react';
-import remark from 'remark';
-import reactRenderer from 'remark-react';
-import remarkEmoji from 'remark-emoji';
-import ExternalLink from 'component/externalLink';
-import defaultSchema from 'hast-util-sanitize/lib/github.json';
+import React, { Suspense } from 'react';
 
-type MarkdownProps = {
-  content: ?string,
-  promptLinks?: boolean,
-};
-
-type SimpleLinkProps = {
-  href?: string,
-  title?: string,
-  children?: React.Node,
-};
-
-const SimpleLink = (props: SimpleLinkProps) => {
-  const { href, title, children } = props;
-  return (
-    <a href={href} title={title}>
-      {children}
-    </a>
-  );
-};
-
-// Use github sanitation schema
-const schema = { ...defaultSchema };
-
-// Extend sanitation schema to support lbry protocol
-schema.protocols.href[3] = 'lbry';
+const MarkdownPreviewInternal = React.lazy(() => import(
+  /* webpackChunkName: "markdownPreview" */
+  /* webpackPrefetch: true */
+  './markdown-preview-internal'
+));
 
-const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, promptLinks } = props;
-  const remarkOptions = {
-    sanitize: schema,
-    remarkReactComponents: {
-      a: promptLinks ? ExternalLink : SimpleLink,
-    },
-  };
+const MarkdownPreview = (props) => {
   return (
-    <div className="markdown-preview">
-      {
-        remark()
-          .use(remarkEmoji)
-          .use(reactRenderer, remarkOptions)
-          .processSync(content).contents
-      }
-    </div>
+    <Suspense fallback={<div className="markdown-preview"></div>}>
+      <MarkdownPreviewInternal {...props} />
+    </Suspense>
   );
 };
 

diff --git a/src/ui/component/common/qr-code.jsx b/src/ui/component/common/qr-code.jsx
@@ -1,8 +1,12 @@
 // @flow
-import React from 'react';
-import QRCodeElement from 'qrcode.react';
+import React, { Suspense } from 'react';
 import classnames from 'classnames';
 
+const LazyQRCodeElement = React.lazy(() => import(
+  /* webpackChunkName: "qrCode" */
+  'qrcode.react'
+));
+
 type Props = {
   value: string,
   paddingRight?: boolean,
@@ -24,7 +28,9 @@ class QRCode extends React.Component<Props> {
           'qr-code--top-padding': paddingTop,
         })}
       >
-        <QRCodeElement value={value} />
+        <Suspense fallback={<div></div>}>
+          <LazyQRCodeElement value={value} />
+        </Suspense>
       </div>
     );
   }

diff --git a/src/ui/component/fileRender/view.jsx b/src/ui/component/fileRender/view.jsx
@@ -1,13 +1,35 @@
 // @flow
 import type { Claim } from 'types/claim';
 import { remote } from 'electron';
-import React from 'react';
+import React, { Suspense } from 'react';
 import LoadingScreen from 'component/common/loading-screen';
-import PdfViewer from 'component/viewers/pdfViewer';
-import DocumentViewer from 'component/viewers/documentViewer';
-import DocxViewer from 'component/viewers/docxViewer';
-import HtmlViewer from 'component/viewers/htmlViewer';
-import AudioVideoViewer from 'component/viewers/audioVideoViewer';
+import VideoViewer from 'component/viewers/videoViewer';
+
+const AudioViewer = React.lazy(() => import(
+  /* webpackChunkName: "audioViewer" */
+  'component/viewers/audioViewer'
+));
+
+const DocumentViewer = React.lazy(() => import(
+  /* webpackChunkName: "documentViewer" */
+  'component/viewers/documentViewer'
+));
+
+const DocxViewer = React.lazy(() => import(
+  /* webpackChunkName: "docxViewer" */
+  'component/viewers/docxViewer'
+));
+
+const HtmlViewer = React.lazy(() => import(
+  /* webpackChunkName: "htmlViewer" */
+  'component/viewers/htmlViewer'
+));
+
+const PdfViewer = React.lazy(() => import(
+  /* webpackChunkName: "pdfViewer" */
+  'component/viewers/pdfViewer'
+));
+
 // @if TARGET='app'
 const ThreeViewer = React.lazy(() => import(
   /* webpackChunkName: "threeViewer" */
@@ -97,6 +119,8 @@ class FileRender extends React.PureComponent<Props> {
   renderViewer() {
     const { source, mediaType, currentTheme, poster, claim } = this.props;
 
+    console.log('mediaType', mediaType);
+
     // Extract relevant data to render file
     const { stream, fileType, contentType, downloadPath, fileName } = source;
 
@@ -123,15 +147,15 @@ class FileRender extends React.PureComponent<Props> {
         />
       ),
       video: (
-        <AudioVideoViewer
+        <VideoViewer
           claim={claim}
           source={{ downloadPath, fileName }}
           contentType={contentType}
           poster={poster}
         />
       ),
       audio: (
-        <AudioVideoViewer
+        <AudioViewer
           claim={claim}
           source={{ downloadPath, fileName }}
           contentType={contentType}
@@ -176,6 +200,7 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   render() {
+    console.log('RENDER')
     return (
       <div className="file-render">
         <React.Suspense fallback={<div></div>}>