From 73e84b58e7bb13b3de0c310f00d975cfd859d026 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 14 Jun 2021 09:58:09 +0800 Subject: [PATCH 1/7] Add: source-map-analyze --- package.json | 2 ++ yarn.lock | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 98 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 49e40ba03..316cb226b 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "main": "./dist/electron/main.js", "scripts": { + "analyze": "source-map-explorer --only-mapped dist/electron/webpack/ui*.js --html dist/sourceMap.html", "compile:electron": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.electron.config.js", "compile:web": "yarn copyenv && cd web && node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.config.js", "compile": "cross-env NODE_ENV=production yarn compile:electron && cross-env NODE_ENV=production yarn compile:web", @@ -55,6 +56,7 @@ "if-env": "^1.0.4", "react-datetime-picker": "^3.2.1", "remove-markdown": "^0.3.0", + "source-map-explorer": "^2.5.2", "tempy": "^0.6.0", "videojs-logo": "^2.1.4" }, diff --git a/yarn.lock b/yarn.lock index 8fe471bb0..a3a415fe5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2755,6 +2755,11 @@ btoa-lite@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337" +btoa@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73" + integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g== + buffer-alloc-unsafe@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0" @@ -4316,6 +4321,11 @@ duplexer@^0.1.1, duplexer@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" +duplexer@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" + integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== + duplexify@^3.4.2, duplexify@^3.6.0: version "3.7.1" resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309" @@ -4703,7 +4713,7 @@ escape-goat@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675" -escape-html@~1.0.3: +escape-html@^1.0.3, escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" @@ -5665,6 +5675,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: once "^1.3.0" path-is-absolute "^1.0.0" +glob@^7.1.6: + version "7.1.7" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" + integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + global-agent@^2.0.2: version "2.1.12" resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-2.1.12.tgz#e4ae3812b731a9e81cbf825f9377ef450a8e4195" @@ -5856,6 +5878,13 @@ gzip-size@^5.0.0: duplexer "^0.1.1" pify "^4.0.1" +gzip-size@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462" + integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q== + dependencies: + duplexer "^0.1.2" + handle-thing@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754" @@ -6627,6 +6656,11 @@ is-directory@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1" +is-docker@^2.0.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa" + integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ== + is-extendable@^0.1.0, is-extendable@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89" @@ -6877,6 +6911,13 @@ is-wsl@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" +is-wsl@^2.1.1: + version "2.2.0" + resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271" + integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww== + dependencies: + is-docker "^2.0.0" + is-yarn-global@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232" @@ -7434,7 +7475,7 @@ lodash.unset@^4.5.2: version "4.5.2" resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed" -lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.6.1: +lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.6.1: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -8357,6 +8398,14 @@ onetime@^2.0.0: dependencies: mimic-fn "^1.0.0" +open@^7.3.1: + version "7.4.2" + resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321" + integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q== + dependencies: + is-docker "^2.0.0" + is-wsl "^2.1.1" + opencollective-postinstall@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89" @@ -10194,7 +10243,7 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2. dependencies: glob "^7.1.3" -rimraf@2.6.3: +rimraf@2.6.3, rimraf@~2.6.2: version "2.6.3" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab" dependencies: @@ -10661,6 +10710,24 @@ source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" +source-map-explorer@^2.5.2: + version "2.5.2" + resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.5.2.tgz#857cab5dd9d1d7175e9c5c2739dc9ccfb99f2dc5" + integrity sha512-gBwOyCcHPHcdLbgw6Y6kgoH1uLKL6hN3zz0xJcNI2lpnElZliIlmSYAjUVwAWnc7+HscoTyh1ScR7ITtFuEnxg== + dependencies: + btoa "^1.2.1" + chalk "^4.1.0" + convert-source-map "^1.7.0" + ejs "^3.1.5" + escape-html "^1.0.3" + glob "^7.1.6" + gzip-size "^6.0.0" + lodash "^4.17.20" + open "^7.3.1" + source-map "^0.7.3" + temp "^0.9.4" + yargs "^16.2.0" + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -11170,6 +11237,14 @@ temp-file@^3.3.7: async-exit-hook "^2.0.1" fs-extra "^8.1.0" +temp@^0.9.4: + version "0.9.4" + resolved "https://registry.yarnpkg.com/temp/-/temp-0.9.4.tgz#cd20a8580cb63635d0e4e9d4bd989d44286e7620" + integrity sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA== + dependencies: + mkdirp "^0.5.1" + rimraf "~2.6.2" + tempy@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3" @@ -12474,6 +12549,11 @@ y18n@^5.0.2: resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.3.tgz#978115b82befe2b5c762bf55980b7b01a4a2d5d9" integrity sha512-JeFbcHQ/7hVmMBXW6UB6Tg7apStHd/ztGz1JN78y3pFi/q0Ht1eA6PVkvw56gm7UA8fcJR/ziRlYEDMGoju0yQ== +y18n@^5.0.5: + version "5.0.8" + resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55" + integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA== + yaku@^0.16.6: version "0.16.7" resolved "https://registry.yarnpkg.com/yaku/-/yaku-0.16.7.tgz#1d195c78aa9b5bf8479c895b9504fd4f0847984e" @@ -12622,6 +12702,19 @@ yargs@^16.0.3: y18n "^5.0.2" yargs-parser "^20.2.2" +yargs@^16.2.0: + version "16.2.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66" + integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== + dependencies: + cliui "^7.0.2" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.0" + y18n "^5.0.5" + yargs-parser "^20.2.2" + yarnhook@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/yarnhook/-/yarnhook-0.2.0.tgz#291e49db6066df2d8f745087c407362042a0d055" -- 2.45.3 From 3539031e5a9dba8538a625e805a4bf07dfacef89 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Fri, 11 Jun 2021 14:06:29 +0800 Subject: [PATCH 2/7] CodeSplit: Initial work --- ui/component/app/view.jsx | 87 +++-- ui/component/claimLink/view.jsx | 2 +- ui/component/claimPreview/view.jsx | 9 +- .../common/form-components/form-field.jsx | 34 +- ui/component/errorBoundary/view.jsx | 57 ++-- ui/component/fileRender/view.jsx | 55 +++- ui/component/fileRenderFloating/view.jsx | 131 ++++---- ui/component/fileRenderInline/view.jsx | 11 +- ui/component/page/view.jsx | 5 +- ui/component/previewLink/view.jsx | 2 +- ui/component/router/view.jsx | 309 +++++++++--------- ui/component/viewers/videoViewer/view.jsx | 27 +- ui/component/wunderbar/view.jsx | 30 +- ui/constants/classnames.js | 2 + ui/modal/modalRouter/view.jsx | 264 ++++++++------- ui/page/embedWrapper/view.jsx | 7 +- ui/page/file/view.jsx | 9 +- ui/page/show/view.jsx | 17 +- ui/scss/component/_content.scss | 1 + ui/scss/component/_file-render.scss | 4 +- ui/scss/component/_videojs.scss | 5 + web/webpack.config.js | 1 + 22 files changed, 598 insertions(+), 471 deletions(-) create mode 100644 ui/constants/classnames.js diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 8f3244af1..1c3f6d91f 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -6,31 +6,20 @@ import analytics from 'analytics'; import { buildURI, parseURI } from 'lbry-redux'; import { SIMPLE_SITE } from 'config'; import Router from 'component/router/index'; -import ModalRouter from 'modal/modalRouter'; import ReactModal from 'react-modal'; import { openContextMenu } from 'util/context-menu'; import useKonamiListener from 'util/enhanced-layout'; -import Yrbl from 'component/yrbl'; import FileRenderFloating from 'component/fileRenderFloating'; import { withRouter } from 'react-router'; import usePrevious from 'effects/use-previous'; -import Nag from 'component/common/nag'; import REWARDS from 'rewards'; import usePersistedState from 'effects/use-persisted-state'; -import FileDrop from 'component/fileDrop'; -import NagContinueFirstRun from 'component/nagContinueFirstRun'; import Spinner from 'component/spinner'; -import SyncFatalError from 'component/syncFatalError'; // @if TARGET='app' import useZoom from 'effects/use-zoom'; import useHistoryNav from 'effects/use-history-nav'; // @endif // @if TARGET='web' -import OpenInAppLink from 'web/component/openInAppLink'; -import YoutubeWelcome from 'web/component/youtubeReferralWelcome'; -import NagDegradedPerformance from 'web/component/nag-degraded-performance'; -import NagDataCollection from 'web/component/nag-data-collection'; -import NagNoUser from 'web/component/nag-no-user'; import { useDegradedPerformance, STATUS_OK, @@ -40,6 +29,24 @@ import { } from 'web/effects/use-degraded-performance'; // @endif import LANGUAGE_MIGRATIONS from 'constants/language-migrations'; + +const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */)); +const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "modalRouter" */)); +const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "nag" */)); +const NagContinueFirstRun = React.lazy(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagContinueFirstRun" */)); +const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "openInAppLink" */)); +const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */)); +const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */)); + +// @if TARGET='web' +const NagDataCollection = React.lazy(() => import('web/component/nag-data-collection' /* webpackChunkName: "nag-data-collection" */)); +const NagDegradedPerformance = React.lazy(() => import('web/component/nag-degraded-performance' /* webpackChunkName: "nag-degraded-performance" */)); +const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */)); +const YoutubeWelcome = React.lazy(() => import('web/component/youtubeReferralWelcome' /* webpackChunkName: "youtubeReferralWelcome" */)); +// @endif + +// **************************************************************************** + export const MAIN_WRAPPER_CLASS = 'main-wrapper'; export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1; @@ -377,11 +384,13 @@ function App(props: Props) { if (syncFatalError) { return ( + + ); } @@ -397,42 +406,48 @@ function App(props: Props) { onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)} > {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? ( + + ) : ( - - + + + + - {isEnhancedLayout && } + + {isEnhancedLayout && } - {/* @if TARGET='app' */} - {showUpgradeButton && ( - setUpgradeNagClosed(true)} - /> - )} - {/* @endif */} + {/* @if TARGET='app' */} + {showUpgradeButton && ( + setUpgradeNagClosed(true)} + /> + )} + {/* @endif */} - {/* @if TARGET='web' */} - - {!SIMPLE_SITE && !shouldHideNag && } - {!shouldHideNag && } - {(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && ( - setLbryTvApiStatus(STATUS_OK)} /> - )} - {!SIMPLE_SITE && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && ( - - )} - {user === null && } - {/* @endif */} + {/* @if TARGET='web' */} + + {!SIMPLE_SITE && !shouldHideNag && } + {!shouldHideNag && } + {(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && ( + setLbryTvApiStatus(STATUS_OK)} /> + )} + {!SIMPLE_SITE && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && ( + + )} + {user === null && } + {/* @endif */} + )} diff --git a/ui/component/claimLink/view.jsx b/ui/component/claimLink/view.jsx index f5e7ee69c..c67a1fd82 100644 --- a/ui/component/claimLink/view.jsx +++ b/ui/component/claimLink/view.jsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import EmbedPlayButton from 'component/embedPlayButton'; import Button from 'component/button'; import UriIndicator from 'component/uriIndicator'; -import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view'; +import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames'; import { SIMPLE_SITE } from 'config'; type Props = { diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 6a8c0e14a..b1d75d512 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -18,7 +18,6 @@ import ClaimPreviewTitle from 'component/claimPreviewTitle'; import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle'; import ClaimRepostAuthor from 'component/claimRepostAuthor'; import FileDownloadLink from 'component/fileDownloadLink'; -import AbandonedChannelPreview from 'component/abandonedChannelPreview'; import PublishPending from 'component/publishPending'; import ClaimMenuList from 'component/claimMenuList'; import ClaimPreviewLoading from './claim-preview-loading'; @@ -28,6 +27,8 @@ import { ENABLE_NO_SOURCE_CLAIMS } from 'config'; import Button from 'component/button'; import * as ICONS from 'constants/icons'; +const AbandonedChannelPreview = React.lazy(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)); + type Props = { uri: string, claim: ?Claim, // maybe? @@ -254,7 +255,11 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { } if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && isChannelUri && claim === null) { - return ; + return ( + + + + ); } if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) { return null; diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx index 68cd85230..83e01f85d 100644 --- a/ui/component/common/form-components/form-field.jsx +++ b/ui/component/common/form-components/form-field.jsx @@ -274,22 +274,24 @@ export class FormField extends React.PureComponent { {...inputProps} />
- {!noEmojis &&
- {QUICK_EMOJIS.map((emoji) => ( -
} + {!noEmojis && ( +
+ {QUICK_EMOJIS.map((emoji) => ( +
+ )} {countInfo}
diff --git a/ui/component/errorBoundary/view.jsx b/ui/component/errorBoundary/view.jsx index 6c064d719..65e090fe8 100644 --- a/ui/component/errorBoundary/view.jsx +++ b/ui/component/errorBoundary/view.jsx @@ -1,18 +1,19 @@ // @flow import type { Node } from 'react'; import React from 'react'; -import Yrbl from 'component/yrbl'; -import Button from 'component/button'; import { withRouter } from 'react-router'; import analytics from 'analytics'; -import I18nMessage from 'component/i18nMessage'; import Native from 'native'; import { Lbry } from 'lbry-redux'; +const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */)); +const I18nMessage = React.lazy(() => import('component/i18nMessage' /* webpackChunkName: "i18nMessage" */)); +const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */)); + type Props = { children: Node, history: { - replace: string => void, + replace: (string) => void, }, }; @@ -36,7 +37,7 @@ class ErrorBoundary extends React.Component { componentDidCatch(error, errorInfo) { // @if TARGET='web' - analytics.sentryError(error, errorInfo).then(sentryEventId => { + analytics.sentryError(error, errorInfo).then((sentryEventId) => { this.setState({ sentryEventId }); }); // @endif @@ -49,7 +50,7 @@ class ErrorBoundary extends React.Component { errorMessage += `sdk version: ${sdkVersion}\n`; errorMessage += `page: ${window.location.href.split('.html')[1]}\n`; errorMessage += `${error.stack}`; - analytics.error(errorMessage).then(isSharingData => { + analytics.error(errorMessage).then((isSharingData) => { this.setState({ desktopErrorReported: isSharingData }); }); }); @@ -74,27 +75,29 @@ class ErrorBoundary extends React.Component { if (hasError) { return (
- - ), - }} - > - There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing - Ctrl+R/Cmd+R. - - } - /> + + + ), + }} + > + There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing + Ctrl+R/Cmd+R. + + } + /> + {!errorWasReported && (
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx index 55cc914c8..cca685813 100644 --- a/ui/component/fileRender/view.jsx +++ b/ui/component/fileRender/view.jsx @@ -3,16 +3,11 @@ import { remote } from 'electron'; import React from 'react'; import classnames from 'classnames'; import * as RENDER_MODES from 'constants/file_render_modes'; -import VideoViewer from 'component/viewers/videoViewer'; -import ImageViewer from 'component/viewers/imageViewer'; -import AppViewer from 'component/viewers/appViewer'; import { withRouter } from 'react-router-dom'; import fs from 'fs'; import analytics from 'analytics'; import DocumentViewer from 'component/viewers/documentViewer'; -import PdfViewer from 'component/viewers/pdfViewer'; -import HtmlViewer from 'component/viewers/htmlViewer'; // @if TARGET='app' // should match @@ -21,6 +16,18 @@ import ComicBookViewer from 'component/viewers/comicBookViewer'; import ThreeViewer from 'component/viewers/threeViewer'; // @endif +const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "viewers/appViewer" */)); +const HtmlViewer = React.lazy(() => + import('component/viewers/htmlViewer' /* webpackChunkName: "viewers/htmlViewer" */) +); +const ImageViewer = React.lazy(() => + import('component/viewers/imageViewer' /* webpackChunkName: "viewers/imageViewer" */) +); +const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "viewers/pdfViewer" */)); +const VideoViewer = React.lazy(() => + import('component/viewers/videoViewer' /* webpackChunkName: "viewers/videoViewer" */) +); + type Props = { uri: string, streamingUrl: string, @@ -85,17 +92,27 @@ class FileRender extends React.PureComponent { case RENDER_MODES.AUDIO: case RENDER_MODES.VIDEO: return ( - + + + ); case RENDER_MODES.IMAGE: - return ; + return ( + + ; + + ); case RENDER_MODES.HTML: - return ; + return ( + + ; + + ); case RENDER_MODES.DOCUMENT: case RENDER_MODES.MARKDOWN: return ( @@ -115,7 +132,11 @@ class FileRender extends React.PureComponent { case RENDER_MODES.DOCX: return ; case RENDER_MODES.PDF: - return ; + return ( + + ; + + ); case RENDER_MODES.CAD: return ( { /> ); case RENDER_MODES.APPLICATION: - return ; + return ( + + ; + + ); } return null; diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index 24c1002bc..81dc6d9ec 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -1,23 +1,24 @@ // @flow import * as ICONS from 'constants/icons'; import * as RENDER_MODES from 'constants/file_render_modes'; +import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames'; import React, { useEffect, useState } from 'react'; import Button from 'component/button'; import classnames from 'classnames'; import LoadingScreen from 'component/common/loading-screen'; -import FileRender from 'component/fileRender'; import UriIndicator from 'component/uriIndicator'; import usePersistedState from 'effects/use-persisted-state'; import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view'; -import Draggable from 'react-draggable'; import { onFullscreenChange } from 'util/full-screen'; import { useIsMobile } from 'effects/use-screensize'; import debounce from 'util/debounce'; import { useHistory } from 'react-router'; +const Draggable = React.lazy(() => import('react-draggable' /* webpackChunkName: "draggable" */)); +const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */)); + const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false; const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60; -export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper'; type Props = { isFloating: boolean, @@ -243,72 +244,76 @@ export default function FileRenderFloating(props: Props) { } return ( - -
+
- {isFloating && ( -
+
- -
- )} + )} +
- - + + ); } diff --git a/ui/component/fileRenderInline/view.jsx b/ui/component/fileRenderInline/view.jsx index 534ff4814..0e91d8e07 100644 --- a/ui/component/fileRenderInline/view.jsx +++ b/ui/component/fileRenderInline/view.jsx @@ -1,9 +1,10 @@ // @flow import React, { useState, useEffect } from 'react'; -import FileRender from 'component/fileRender'; import LoadingScreen from 'component/common/loading-screen'; import { NON_STREAM_MODES } from 'constants/file_render_modes'; +const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */)); + type Props = { isPlaying: boolean, fileInfo: FileListItem, @@ -69,5 +70,11 @@ export default function FileRenderInline(props: Props) { return null; } - return renderContent ? : ; + return renderContent ? ( + + + + ) : ( + + ); } diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx index 99ff67299..e02e822dd 100644 --- a/ui/component/page/view.jsx +++ b/ui/component/page/view.jsx @@ -4,7 +4,6 @@ import React, { Fragment } from 'react'; import classnames from 'classnames'; import SideNavigation from 'component/sideNavigation'; import Header from 'component/header'; -import Footer from 'web/component/footer'; /* @if TARGET='app' */ import StatusBar from 'component/common/status-bar'; /* @endif */ @@ -13,6 +12,8 @@ import { useHistory } from 'react-router'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; import { parseURI } from 'lbry-redux'; +const Footer = React.lazy(() => import('web/component/footer' /* webpackChunkName: "component/footer" */)); + export const MAIN_CLASS = 'main'; type Props = { children: Node | Array, @@ -126,7 +127,7 @@ function Page(props: Props) { {/* @endif */} {/* @if TARGET='web' */} - {!noFooter &&