LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Code-split #6228

Merged
infinite-persistence merged 8 commits from ip/code-split into master 2021-06-25 10:26:57 +02:00
Conversation 6 Commits 8 Files changed 36 +908 -524
36 changed files with 908 additions and 524 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -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",
@ -54,7 +55,9 @@
"express": "^4.17.1",
"if-env": "^1.0.4",
"react-datetime-picker": "^3.2.1",
"react-top-loading-bar": "^2.0.1",
"remove-markdown": "^0.3.0",
"source-map-explorer": "^2.5.2",
"tempy": "^0.6.0",
"videojs-logo": "^2.1.4"
},

BIN
static/img/fileRenderPlaceholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 320 B

116
ui/component/app/view.jsx
View file

@ -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,33 @@ import {
} from 'web/effects/use-degraded-performance';
// @endif
import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "secondary" */));
const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "secondary" */));
const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "secondary" */));
const NagContinueFirstRun = React.lazy(() =>
import('component/nagContinueFirstRun' /* webpackChunkName: "secondary" */)
);
const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "secondary" */));
// @if TARGET='web'
const NagDataCollection = React.lazy(() =>
import('web/component/nag-data-collection' /* webpackChunkName: "secondary" */)
);
const NagDegradedPerformance = React.lazy(() =>
import('web/component/nag-degraded-performance' /* webpackChunkName: "secondary" */)
);
const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
const YoutubeWelcome = React.lazy(() =>
import('web/component/youtubeReferralWelcome' /* webpackChunkName: "secondary" */)
);
// @endif
const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
// ****************************************************************************
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
@ -377,11 +393,13 @@ function App(props: Props) {
if (syncFatalError) {
return (
<SyncFatalError
// @if TARGET='web'
lbryTvApiStatus={lbryTvApiStatus}
// @endif
/>
<React.Suspense fallback={null}>
<SyncFatalError
// @if TARGET='web'
lbryTvApiStatus={lbryTvApiStatus}
// @endif
/>
</React.Suspense>
);
}
@ -397,42 +415,48 @@ function App(props: Props) {
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
>
{IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
<Yrbl
className="main--empty"
title={__('lbry.tv is currently down')}
subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')}
/>
<React.Suspense fallback={null}>
<Yrbl
className="main--empty"
title={__('lbry.tv is currently down')}
subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')}
/>
</React.Suspense>
) : (
<React.Fragment>
<Router />
<ModalRouter />
<FileDrop />
<React.Suspense fallback={null}>
<ModalRouter />
<FileDrop />
</React.Suspense>
<FileRenderFloating />
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
<React.Suspense fallback={null}>
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
{/* @if TARGET='app' */}
{showUpgradeButton && (
<Nag
message={__('An upgrade is available.')}
actionText={__('Install Now')}
onClick={requestDownloadUpgrade}
onClose={() => setUpgradeNagClosed(true)}
/>
)}
{/* @endif */}
{/* @if TARGET='app' */}
{showUpgradeButton && (
<Nag
message={__('An upgrade is available.')}
actionText={__('Install Now')}
onClick={requestDownloadUpgrade}
onClose={() => setUpgradeNagClosed(true)}
/>
)}
{/* @endif */}
{/* @if TARGET='web' */}
<YoutubeWelcome />
{!SIMPLE_SITE && !shouldHideNag && <OpenInAppLink uri={uri} />}
{!shouldHideNag && <NagContinueFirstRun />}
{(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && (
<NagDegradedPerformance onClose={() => setLbryTvApiStatus(STATUS_OK)} />
)}
{!SIMPLE_SITE && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
<NagDataCollection onClose={handleAnalyticsDismiss} />
)}
{user === null && <NagNoUser />}
{/* @endif */}
{/* @if TARGET='web' */}
<YoutubeWelcome />
{!SIMPLE_SITE && !shouldHideNag && <OpenInAppLink uri={uri} />}
{!shouldHideNag && <NagContinueFirstRun />}
{(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && (
<NagDegradedPerformance onClose={() => setLbryTvApiStatus(STATUS_OK)} />
)}
{!SIMPLE_SITE && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
<NagDataCollection onClose={handleAnalyticsDismiss} />
)}
{user === null && <NagNoUser />}
{/* @endif */}
</React.Suspense>
</React.Fragment>
)}
</div>

2
ui/component/claimLink/view.jsx
View file

@ -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 = {

11
ui/component/claimPreview/view.jsx
View file

@ -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,10 @@ 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 +257,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && isChannelUri && claim === null) {
return <AbandonedChannelPreview uri={uri} type />;
return (
<React.Suspense fallback={null}>
<AbandonedChannelPreview uri={uri} type />
</React.Suspense>
);
}
if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) {
return null;

34
ui/component/common/form-components/form-field.jsx
View file

@ -274,22 +274,24 @@ export class FormField extends React.PureComponent<Props> {
{...inputProps}
/>
<div className="form-field__textarea-info">
{!noEmojis && <div className="form-field__quick-emojis">
{QUICK_EMOJIS.map((emoji) => (
<Button
key={emoji}
disabled={inputProps.disabled}
type="button"
className="button--emoji"
label={emoji}
onClick={() => {
inputProps.onChange({
target: { value: inputProps.value ? `${inputProps.value} ${emoji}` : emoji },
});
}}
/>
))}
</div>}
{!noEmojis && (
<div className="form-field__quick-emojis">
{QUICK_EMOJIS.map((emoji) => (
<Button
key={emoji}
disabled={inputProps.disabled}
type="button"
className="button--emoji"
label={emoji}
onClick={() => {
inputProps.onChange({
target: { value: inputProps.value ? `${inputProps.value} ${emoji}` : emoji },
});
}}
/>
))}
</div>
)}
{countInfo}
</div>
</fieldset-section>

2
ui/component/common/tooltip.jsx
View file

@ -2,7 +2,7 @@
import type { Node } from 'react';
import React from 'react';
import ReachTooltip from '@reach/tooltip';
import '@reach/tooltip/styles.css';
// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss'
type Props = {
label: string | Node,

57
ui/component/errorBoundary/view.jsx
View file

@ -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<Props, State> {
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<Props, State> {
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<Props, State> {
if (hasError) {
return (
<div className="main main--full-width main--empty">
<Yrbl
type="sad"
title={__('Aw shucks!')}
subtitle={
<I18nMessage
tokens={{
refreshing_the_app_link: (
<Button
button="link"
className="load-screen__button"
label={__('refreshing the app')}
onClick={this.refresh}
/>
),
}}
>
There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing
Ctrl+R/Cmd+R.
</I18nMessage>
}
/>
<React.Suspense fallback={null}>
<Yrbl
type="sad"
title={__('Aw shucks!')}
subtitle={
<I18nMessage
tokens={{
refreshing_the_app_link: (
<Button
button="link"
className="load-screen__button"
label={__('refreshing the app')}
onClick={this.refresh}
/>
),
}}
>
There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing
Ctrl+R/Cmd+R.
</I18nMessage>
}
/>
</React.Suspense>
{!errorWasReported && (
<div className="error__wrapper">
<span className="error__text">

49
ui/component/fileRender/view.jsx
View file

@ -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,12 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
import ThreeViewer from 'component/viewers/threeViewer';
// @endif
const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "appViewer" */));
const HtmlViewer = React.lazy(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */));
const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */));
const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */));
const VideoViewer = React.lazy(() => import('component/viewers/videoViewer' /* webpackChunkName: "videoViewer" */));
type Props = {
uri: string,
streamingUrl: string,
@ -85,17 +86,27 @@ class FileRender extends React.PureComponent<Props> {
case RENDER_MODES.AUDIO:
case RENDER_MODES.VIDEO:
return (
<VideoViewer
uri={uri}
source={source}
contentType={contentType}
desktopPlayStartTime={desktopPlayStartTime}
/>
<React.Suspense fallback={null}>
<VideoViewer
uri={uri}
source={source}
contentType={contentType}
desktopPlayStartTime={desktopPlayStartTime}
/>
</React.Suspense>
);
case RENDER_MODES.IMAGE:
return <ImageViewer uri={uri} source={source} />;
return (
<React.Suspense fallback={null}>
<ImageViewer uri={uri} source={source} />;
</React.Suspense>
);
case RENDER_MODES.HTML:
return <HtmlViewer source={downloadPath || source} />;
return (
<React.Suspense fallback={null}>
<HtmlViewer source={downloadPath || source} />;
</React.Suspense>
);
case RENDER_MODES.DOCUMENT:
case RENDER_MODES.MARKDOWN:
return (
@ -115,7 +126,11 @@ class FileRender extends React.PureComponent<Props> {
case RENDER_MODES.DOCX:
return <DocxViewer source={downloadPath} />;
case RENDER_MODES.PDF:
return <PdfViewer source={downloadPath || source} />;
return (
<React.Suspense fallback={null}>
<PdfViewer source={downloadPath || source} />;
</React.Suspense>
);
case RENDER_MODES.CAD:
return (
<ThreeViewer
@ -139,7 +154,11 @@ class FileRender extends React.PureComponent<Props> {
/>
);
case RENDER_MODES.APPLICATION:
return <AppViewer uri={uri} />;
return (
<React.Suspense fallback={null}>
<AppViewer uri={uri} />;
</React.Suspense>
);
}
return null;

131
ui/component/fileRenderFloating/view.jsx
View file

@ -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 (
<Draggable
onDrag={handleDragMove}
onStart={handleDragStart}
onStop={handleDragStop}
defaultPosition={position}
position={isFloating ? position : { x: 0, y: 0 }}
bounds="parent"
disabled={!isFloating}
handle=".draggable"
cancel=".button"
>
<div
className={classnames('content__viewer', {
'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': playingUriSource === 'comment',
'content__viewer--theater-mode': !isFloating && videoTheaterMode,
})}
style={
!isFloating && fileViewerRect
? {
width: fileViewerRect.width,
height: fileViewerRect.height,
left: fileViewerRect.x,
// 80px is header height in scss/init/vars.scss
top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
}
: {}
}
<React.Suspense fallback={null}>
<Draggable
onDrag={handleDragMove}
onStart={handleDragStart}
onStop={handleDragStop}
defaultPosition={position}
position={isFloating ? position : { x: 0, y: 0 }}
bounds="parent"
disabled={!isFloating}
handle=".draggable"
cancel=".button"
>
<div
className={classnames('content__wrapper', {
'content__wrapper--floating': isFloating,
className={classnames('content__viewer', {
'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': playingUriSource === 'comment',
'content__viewer--theater-mode': !isFloating && videoTheaterMode,
})}
style={
!isFloating && fileViewerRect
? {
width: fileViewerRect.width,
height: fileViewerRect.height,
left: fileViewerRect.x,
// 80px is header height in scss/init/vars.scss
top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
}
: {}
}
>
{isFloating && (
<Button
title={__('Close')}
onClick={closeFloatingPlayer}
icon={ICONS.REMOVE}
button="primary"
className="content__floating-close"
/>
)}
<div
className={classnames('content__wrapper', {
'content__wrapper--floating': isFloating,
})}
>
{isFloating && (
<Button
title={__('Close')}
onClick={closeFloatingPlayer}
icon={ICONS.REMOVE}
button="primary"
className="content__floating-close"
/>
)}
{isReadyToPlay ? (
<FileRender
className="draggable"
uri={uri}
// @if TARGET='app'
desktopPlayStartTime={desktopPlayStartTime}
// @endif
/>
) : (
<LoadingScreen status={loadingMessage} />
)}
{isFloating && (
<div className="draggable content__info">
<div className="claim-preview__title" title={title || uri}>
<Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
{isReadyToPlay ? (
<React.Suspense fallback={null}>
<FileRender
className="draggable"
uri={uri}
// @if TARGET='app'
desktopPlayStartTime={desktopPlayStartTime}
// @endif
/>
</React.Suspense>
) : (
<LoadingScreen status={loadingMessage} />
)}
{isFloating && (
<div className="draggable content__info">
<div className="claim-preview__title" title={title || uri}>
<Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
</div>
<UriIndicator link uri={uri} />
</div>
<UriIndicator link uri={uri} />
</div>
)}
)}
</div>
</div>
</div>
</Draggable>
</Draggable>
</React.Suspense>
);
}

2
ui/component/fileRenderInitiator/index.js
View file

@ -23,7 +23,7 @@ import FileRenderInitiator from './view';
import { doAnaltyicsPurchaseEvent } from 'redux/actions/app';
const select = (state, props) => ({
thumbnail: makeSelectThumbnailForUri(props.uri)(state),
claimThumbnail: makeSelectThumbnailForUri(props.uri)(state),
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
isPlaying: makeSelectIsPlaying(props.uri)(state),

33
ui/component/fileRenderInitiator/view.jsx
View file

@ -9,7 +9,10 @@ import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes';
import Button from 'component/button';
import isUserTyping from 'util/detect-typing';
import { getThumbnailCdnUrl } from 'util/thumbnail';
import Nag from 'component/common/nag';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
const SPACE_BAR_KEYCODE = 32;
@ -23,7 +26,7 @@ type Props = {
location: { search: ?string, pathname: string },
obscurePreview: boolean,
insufficientCredits: boolean,
thumbnail?: string,
claimThumbnail?: string,
autoplay: boolean,
hasCostInfo: boolean,
costInfo: any,
@ -45,7 +48,7 @@ export default function FileRenderInitiator(props: Props) {
insufficientCredits,
history,
location,
thumbnail,
claimThumbnail,
renderMode,
hasCostInfo,
costInfo,
@ -68,6 +71,29 @@ export default function FileRenderInitiator(props: Props) {
const fileStatus = fileInfo && fileInfo.status;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const containerRef = React.useRef<any>();
React.useEffect(() => {
if (claimThumbnail) {
setTimeout(() => {
let newThumbnail = claimThumbnail;
// @if TARGET='web'
if (
containerRef.current &&
containerRef.current.parentElement &&
containerRef.current.parentElement.offsetWidth
) {
const dimen = containerRef.current.parentElement.offsetWidth;
newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: dimen, height: dimen });
}
// @endif
setThumbnail(newThumbnail);
}, 200);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
function doAuthRedirect() {
history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`);
@ -131,8 +157,9 @@ export default function FileRenderInitiator(props: Props) {
return (
<div
ref={containerRef}
onClick={disabled ? undefined : shouldRedirect ? doAuthRedirect : viewFile}
style={thumbnail && !obscurePreview && !autoplay ? { backgroundImage: `url("${thumbnail}")` } : {}}
style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
className={classnames('content__cover', {
'content__cover--disabled': disabled,
'content__cover--theater-mode': videoTheaterMode,

11
ui/component/fileRenderInline/view.jsx
View file

@ -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 ? <FileRender uri={uri} /> : <LoadingScreen isDocument />;
return renderContent ? (
<React.Suspense fallback={null}>
<FileRender uri={uri} />
</React.Suspense>
) : (
<LoadingScreen isDocument />
);
}

6
ui/component/loadingBarOneOff/index.js Normal file
View file

@ -0,0 +1,6 @@
import { connect } from 'react-redux';
import LoadingBarOneOff from './view';
const select = (state, props) => ({});
export default connect(select)(LoadingBarOneOff);

20
ui/component/loadingBarOneOff/view.jsx Normal file
View file

@ -0,0 +1,20 @@
// @flow
import * as React from 'react';
import LoadingBar from 'react-top-loading-bar';
// TODO: Retrieve from CSS?
export const COLOR_LOADING_BAR = '#2bbb90';
function LoadingBarOneOff(props: any) {
const loadingBarRef = React.useRef(null);
React.useEffect(() => {
if (loadingBarRef.current) {
loadingBarRef.current.continuousStart();
}
}, []);
return <LoadingBar color={COLOR_LOADING_BAR} ref={loadingBarRef} />;
}
export default LoadingBarOneOff;

9
ui/component/page/view.jsx
View file

@ -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: "secondary" */));
export const MAIN_CLASS = 'main';
type Props = {
children: Node | Array<Node>,
@ -126,7 +127,11 @@ function Page(props: Props) {
{/* @endif */}
</div>
{/* @if TARGET='web' */}
{!noFooter && <Footer />}
{!noFooter && (
<React.Suspense fallback={null}>
<Footer />
</React.Suspense>
)}
{/* @endif */}
</Fragment>
);

2
ui/component/previewLink/view.jsx
View file

@ -13,7 +13,7 @@ type Props = {
title: ?string,
thumbnail: ?string,
description: ?string,
history: { push: string => void },
history: { push: (string) => void },
};
class PreviewLink extends React.PureComponent<Props> {

316
ui/component/router/view.jsx
View file

@ -1,66 +1,84 @@
// @flow
import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react';
import { Route, Redirect, Switch, withRouter } from 'react-router-dom';
import SettingsPage from 'page/settings';
import SettingsNotificationsPage from 'page/settingsNotifications';
import SettingsAdvancedPage from 'page/settingsAdvanced';
import SettingsCreatorPage from 'page/settingsCreator';
import HelpPage from 'page/help';
// @if TARGET='app'
import BackupPage from 'page/backup';
// @endif
// @if TARGET='web'
import Code2257Page from 'web/page/code2257';
// @endif
import ReportPage from 'page/report';
import ReportContentPage from 'page/reportContent';
import ShowPage from 'page/show';
import PublishPage from 'page/publish';
import DiscoverPage from 'page/discover';
import HomePage from 'page/home';
import InvitedPage from 'page/invited';
import RewardsPage from 'page/rewards';
import FileListPublished from 'page/fileListPublished';
import InvitePage from 'page/invite';
import SearchPage from 'page/search';
import ListsPage from 'page/lists';
import LibraryPage from 'page/library';
import WalletPage from 'page/wallet';
import TagsFollowingPage from 'page/tagsFollowing';
import ChannelsFollowingPage from 'page/channelsFollowing';
import ChannelsFollowingDiscoverPage from 'page/channelsFollowingDiscover';
import TagsFollowingManagePage from 'page/tagsFollowingManage';
import ListBlockedPage from 'page/listBlocked';
import FourOhFourPage from 'page/fourOhFour';
import SignInPage from 'page/signIn';
import SignUpPage from 'page/signUp';
import PasswordResetPage from 'page/passwordReset';
import PasswordSetPage from 'page/passwordSet';
import SignInVerifyPage from 'page/signInVerify';
import ChannelsPage from 'page/channels';
import LiveStreamSetupPage from 'page/livestreamSetup';
import LivestreamCurrentPage from 'page/livestreamCurrent';
import EmbedWrapperPage from 'page/embedWrapper';
import TopPage from 'page/top';
import Welcome from 'page/welcome';
import CreatorDashboard from 'page/creatorDashboard';
import RewardsVerifyPage from 'page/rewardsVerify';
import CheckoutPage from 'page/checkoutPage';
import ChannelNew from 'page/channelNew';
import RepostNew from 'page/repost';
import BuyPage from 'page/buy';
import ReceivePage from 'page/receive';
import SendPage from 'page/send';
import SwapPage from 'page/swap';
import NotificationsPage from 'page/notifications';
import SignInWalletPasswordPage from 'page/signInWalletPassword';
import YoutubeSyncPage from 'page/youtubeSync';
import CollectionPage from 'page/collection';
import * as PAGES from 'constants/pages';
import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
import { parseURI, isURIValid } from 'lbry-redux';
import { SITE_TITLE, WELCOME_VERSION, SIMPLE_SITE } from 'config';
import LoadingBarOneOff from 'component/loadingBarOneOff';
import HomePage from 'page/home';
// @if TARGET='app'
const BackupPage = React.lazy(() => import('page/backup' /* webpackChunkName: "backup" */));
// @endif
// @if TARGET='web'
const Code2257Page = React.lazy(() => import('web/page/code2257'));
// @endif
// Chunk: "secondary"
const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "secondary" */));
const SignInWalletPasswordPage = React.lazy(() =>
import('page/signInWalletPassword' /* webpackChunkName: "secondary" */)
);
const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "secondary" */));
const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "secondary" */));
// Chunk: "wallet/secondary"
const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "secondary" */));
const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "secondary" */));
const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "secondary" */));
const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "secondary" */));
const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "secondary" */));
// Chunk: none
const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "secondary" */));
const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "secondary" */));
const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "secondary" */));
const ChannelsFollowingDiscoverPage = React.lazy(() =>
import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */)
);
const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "secondary" */));
const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "secondary" */));
const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "secondary" */));
const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "secondary" */));
const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "secondary" */));
const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "secondary" */));
const FourOhFourPage = React.lazy(() => import('page/fourOhFour' /* webpackChunkName: "fourOhFour" */));
const HelpPage = React.lazy(() => import('page/help' /* webpackChunkName: "help" */));
const InvitePage = React.lazy(() => import('page/invite' /* webpackChunkName: "secondary" */));
const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "secondary" */));
const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "secondary" */));
const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "secondary" */));
const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "secondary" */));
const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "secondary" */));
const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "secondary" */));
const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "secondary" */));
const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "secondary" */));
const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "secondary" */));
const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "secondary" */));
const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "secondary" */));
const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */));
const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
const SettingsNotificationsPage = React.lazy(() =>
import('page/settingsNotifications' /* webpackChunkName: "secondary" */)
);
const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "secondary" */));
const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "secondary" */));
const TagsFollowingManagePage = React.lazy(() =>
import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */)
);
const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */));
const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "secondary" */));
const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "secondary" */));
const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "secondary" */));
// Tell the browser we are handling scroll restoration
if ('scrollRestoration' in history) {
@ -210,104 +228,106 @@ function AppRouter(props: Props) {
}
return (
<Switch>
{/* @if TARGET='app' */}
{welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
{/* @endif */}
<Redirect
from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`}
to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
/>
<Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING}`} to={`/$/${PAGES.CHANNELS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
{SIMPLE_SITE && <Route path={`/$/${PAGES.WILD_WEST}`} exact component={DiscoverPage} />}
{/* $FlowFixMe */}
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
key={dynamicRouteProps.route}
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
<React.Suspense fallback={<LoadingBarOneOff />}>
<Switch>
{/* @if TARGET='app' */}
{welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
{/* @endif */}
<Redirect
from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`}
to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
/>
))}
<Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING}`} to={`/$/${PAGES.CHANNELS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
<Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
{SIMPLE_SITE && <Route path={`/$/${PAGES.WILD_WEST}`} exact component={DiscoverPage} />}
{/* $FlowFixMe */}
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
key={dynamicRouteProps.route}
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
/>
))}
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
{/* @if TARGET='app' */}
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
{/* @endif */}
{/* @if TARGET='web' */}
<Route path={`/$/${PAGES.CODE_2257}`} exact component={Code2257Page} />
{/* @endif */}
<Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.SETTINGS_ADVANCED}`} exact component={SettingsAdvancedPage} />
<Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
<Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
<PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING}`}
component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
component={ChannelsFollowingDiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
<PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
{/* @if TARGET='app' */}
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
{/* @endif */}
{/* @if TARGET='web' */}
<Route path={`/$/${PAGES.CODE_2257}`} exact component={Code2257Page} />
{/* @endif */}
<Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.SETTINGS_ADVANCED}`} exact component={SettingsAdvancedPage} />
<Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING}`}
component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
component={ChannelsFollowingDiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
<PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
{/* Below need to go at the end to make sure we don't match any of our pages first */}
<Route path="/:claimName" exact component={ShowPage} />
<Route path="/:claimName/:streamName" exact component={ShowPage} />
<Route path="/*" component={FourOhFourPage} />
</Switch>
<Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
{/* Below need to go at the end to make sure we don't match any of our pages first */}
<Route path="/:claimName" exact component={ShowPage} />
<Route path="/:claimName/:streamName" exact component={ShowPage} />
<Route path="/*" component={FourOhFourPage} />
</Switch>
</React.Suspense>
);
}

2
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -4,7 +4,7 @@ import Button from 'component/button';
import * as ICONS from 'constants/icons';
import classnames from 'classnames';
import videojs from 'video.js/dist/video.min.js';
import 'video.js/dist/alt/video-js-cdn.min.css';
// import 'video.js/dist/alt/video-js-cdn.min.css'; --> 'scss/third-party.scss'
import eventTracking from 'videojs-event-tracking';
import * as OVERLAY from './overlays';
import './plugins/videojs-mobile-ui/plugin';

27
ui/component/viewers/videoViewer/view.jsx
View file

@ -5,7 +5,6 @@ import * as ICONS from 'constants/icons';
import React, { useEffect, useState, useContext, useCallback } from 'react';
import { stopContextMenu } from 'util/context-menu';
import type { Player } from './internal/videojs';
import VideoJs from './internal/videojs';
import analytics from 'analytics';
import { EmbedContext } from 'page/embedWrapper/view';
import classnames from 'classnames';
@ -21,6 +20,8 @@ import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router';
const VideoJs = React.lazy(() => import('./internal/videojs' /* webpackChunkName: "videojs" */));
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
const PLAY_TIMEOUT_LIMIT = 2000;
@ -332,17 +333,19 @@ function VideoViewer(props: Props) {
)}
{!isFetchingAd && (
<VideoJs
adUrl={adUrl}
source={adUrl || source}
sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
isAudio={isAudio}
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
onPlayerReady={onPlayerReady}
startMuted={autoplayIfEmbedded}
toggleVideoTheaterMode={toggleVideoTheaterMode}
autoplay={!embedded || autoplayIfEmbedded}
/>
<React.Suspense fallback={null}>
<VideoJs
adUrl={adUrl}
source={adUrl || source}
sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
isAudio={isAudio}
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
onPlayerReady={onPlayerReady}
startMuted={autoplayIfEmbedded}
toggleVideoTheaterMode={toggleVideoTheaterMode}
autoplay={!embedded || autoplayIfEmbedded}
/>
</React.Suspense>
)}
</div>
);

36
ui/component/wunderbar/view.jsx
View file

@ -1,9 +1,13 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Button from 'component/button';
import { useIsMobile } from 'effects/use-screensize';
import WunderbarSuggestions from 'component/wunderbarSuggestions';
const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */));
const Icon = React.lazy(() => import('component/common/icon' /* webpackChunkName: "icon" */));
const WunderbarSuggestions = React.lazy(() =>
import('component/wunderbarSuggestions' /* webpackChunkName: "secondary" */)
);
type Props = {
doOpenMobileSearch: (any) => void,
@ -18,13 +22,27 @@ export default function WunderBar(props: Props) {
const isMobile = useIsMobile();
return isMobile ? (
<Button icon={ICONS.SEARCH} className="wunderbar__mobile-search" onClick={() => doOpenMobileSearch({ ...props })} />
<React.Suspense fallback={null}>
<Button
icon={ICONS.SEARCH}
className="wunderbar__mobile-search"
onClick={() => doOpenMobileSearch({ ...props })}
/>
</React.Suspense>
) : (
<WunderbarSuggestions
channelsOnly={channelsOnly}
noTopSuggestion={noTopSuggestion}
noBottomLinks={noBottomLinks}
customSelectAction={customSelectAction}
/>
<React.Suspense
fallback={
<div className="wunderbar__wrapper wunderbar wunderbar__input" aria-disabled>
<Icon icon={ICONS.SEARCH} aria-disabled />
</div>
}
>
<WunderbarSuggestions
channelsOnly={channelsOnly}
noTopSuggestion={noTopSuggestion}
noBottomLinks={noBottomLinks}
customSelectAction={customSelectAction}
/>
</React.Suspense>
);
}

2
ui/component/wunderbarSuggestions/view.jsx
View file

@ -8,7 +8,7 @@ import classnames from 'classnames';
import Icon from 'component/common/icon';
import { isURIValid, normalizeURI, parseURI } from 'lbry-redux';
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
import '@reach/combobox/styles.css';
// import '@reach/combobox/styles.css'; --> 'scss/third-party.scss'
import useLighthouse from 'effects/use-lighthouse';
import { Form } from 'component/common/form';
import Button from 'component/button';

2
ui/constants/classnames.js Normal file
View file

@ -0,0 +1,2 @@
// component/fileRenderFloating
export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';

21
ui/index.jsx
View file

@ -37,6 +37,9 @@ import {
import { X_LBRY_AUTH_TOKEN } from 'constants/token';
import { LBRY_WEB_API, DEFAULT_LANGUAGE, LBRY_API_URL } from 'config';
// Import 3rd-party styles before ours for the current way we are code-splitting.
import 'scss/third-party.scss';
// Import our app styles
// If a style is not necessary for the initial page load, it should be removed from `all.scss`
// and loaded dynamically in the component that consumes it
@ -73,7 +76,7 @@ Lbry.setDaemonConnectionString(proxyURL);
Lbry.setOverride(
'publish',
params =>
(params) =>
new Promise((resolve, reject) => {
apiPublishCallViaWeb(
apiCall,
@ -117,7 +120,7 @@ doAuthTokenRefresh();
// We keep a local variable for authToken because `ipcRenderer.send` does not
// contain a response, so there is no way to know when it's been set
let authToken;
Lbryio.setOverride('setAuthToken', authToken => {
Lbryio.setOverride('setAuthToken', (authToken) => {
setAuthToken(authToken);
return authToken;
});
@ -125,7 +128,7 @@ Lbryio.setOverride('setAuthToken', authToken => {
Lbryio.setOverride(
'getAuthToken',
() =>
new Promise(resolve => {
new Promise((resolve) => {
const authTokenToReturn = authToken || getAuthToken();
resolve(authTokenToReturn);
})
@ -135,7 +138,7 @@ rewards.setCallback('claimFirstRewardSuccess', () => {
app.store.dispatch(doOpenModal(MODALS.FIRST_REWARD));
});
rewards.setCallback('claimRewardSuccess', reward => {
rewards.setCallback('claimRewardSuccess', (reward) => {
if (reward && reward.type === rewards.TYPE_REWARD_CODE) {
app.store.dispatch(doHideModal());
}
@ -195,11 +198,11 @@ ipcRenderer.on('devtools-is-opened', () => {
// Force exit mode for html5 fullscreen api
// See: https://github.com/electron/electron/issues/18188
remote.getCurrentWindow().on('leave-full-screen', event => {
remote.getCurrentWindow().on('leave-full-screen', (event) => {
document.webkitExitFullscreen();
});
document.addEventListener('click', event => {
document.addEventListener('click', (event) => {
let { target } = event;
while (target && target !== document) {
@ -213,10 +216,10 @@ document.addEventListener('click', event => {
});
// @endif
document.addEventListener('dragover', event => {
document.addEventListener('dragover', (event) => {
event.preventDefault();
});
document.addEventListener('drop', event => {
document.addEventListener('drop', (event) => {
event.preventDefault();
});
@ -229,7 +232,7 @@ function AppWrapper() {
// @if TARGET='app'
moment.locale(remote.app.getLocale());
autoUpdater.on('error', error => {
autoUpdater.on('error', (error) => {
console.error(error.message); // eslint-disable-line no-console
});

311
ui/modal/modalRouter/view.jsx
View file

@ -2,46 +2,94 @@
import React from 'react';
import { withRouter } from 'react-router';
import * as MODALS from 'constants/modal_types';
import ModalError from 'modal/modalError';
import ModalDownloading from 'modal/modalDownloading';
import ModalAutoGenerateThumbnail from 'modal/modalAutoGenerateThumbnail';
import ModalAutoUpdateDownloaded from 'modal/modalAutoUpdateDownloaded';
import ModalUpgrade from 'modal/modalUpgrade';
import ModalFirstReward from 'modal/modalFirstReward';
import ModalRemoveFile from 'modal/modalRemoveFile';
import ModalTransactionFailed from 'modal/modalTransactionFailed';
import ModalFileTimeout from 'modal/modalFileTimeout';
import ModalAffirmPurchase from 'modal/modalAffirmPurchase';
import ModalRevokeClaim from 'modal/modalRevokeClaim';
import ModalPhoneCollection from 'modal/modalPhoneCollection';
import ModalFirstSubscription from 'modal/modalFirstSubscription';
import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
import ModalSocialShare from 'modal/modalSocialShare';
import ModalSendTip from 'modal/modalSendTip';
import ModalPublish from 'modal/modalPublish';
import ModalPublishPreview from 'modal/modalPublishPreview';
import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
import ModalWalletUnlock from 'modal/modalWalletUnlock';
import ModalRewardCode from 'modal/modalRewardCode';
import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
import ModalSetReferrer from 'modal/modalSetReferrer';
import ModalSignOut from 'modal/modalSignOut';
import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
import ModalConfirmAge from 'modal/modalConfirmAge';
import ModalFileSelection from 'modal/modalFileSelection';
import ModalSyncEnable from 'modal/modalSyncEnable';
import ModalImageUpload from 'modal/modalImageUpload';
import ModalMobileSearch from 'modal/modalMobileSearch';
import ModalViewImage from 'modal/modalViewImage';
import ModalMassTipsUnlock from 'modal/modalMassTipUnlock';
import ModalRemoveBtcSwapAddress from 'modal/modalRemoveBtcSwapAddress';
import ModalClaimCollectionAdd from 'modal/modalClaimCollectionAdd';
import ModalDeleteCollection from 'modal/modalRemoveCollection';
import LoadingBarOneOff from 'component/loadingBarOneOff';
const ModalAffirmPurchase = React.lazy(() =>
import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */)
);
const ModalAutoGenerateThumbnail = React.lazy(() =>
import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */)
);
const ModalAutoUpdateDownloaded = React.lazy(() =>
import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */)
);
const ModalClaimCollectionAdd = React.lazy(() =>
import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */)
);
const ModalCommentAcknowledgement = React.lazy(() =>
import('modal/modalCommentAcknowledgement' /* webpackChunkName: "modalCommentAcknowledgement" */)
);
const ModalConfirmAge = React.lazy(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
const ModalConfirmThumbnailUpload = React.lazy(() =>
import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */)
);
const ModalConfirmTransaction = React.lazy(() =>
import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */)
);
const ModalDeleteCollection = React.lazy(() =>
import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */)
);
const ModalDownloading = React.lazy(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */));
const ModalError = React.lazy(() => import('modal/modalError' /* webpackChunkName: "modalError" */));
const ModalFileSelection = React.lazy(() =>
import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */)
);
const ModalFileTimeout = React.lazy(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */));
const ModalFirstReward = React.lazy(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */));
const ModalFirstSubscription = React.lazy(() =>
import('modal/modalFirstSubscription' /* webpackChunkName: "modalFirstSubscription" */)
);
const ModalImageUpload = React.lazy(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */));
const ModalMassTipsUnlock = React.lazy(() =>
import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)
);
const ModalMobileSearch = React.lazy(() =>
import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */)
);
const ModalOpenExternalResource = React.lazy(() =>
import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */)
);
const ModalPasswordUnsave = React.lazy(() =>
import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */)
);
const ModalPhoneCollection = React.lazy(() =>
import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */)
);
const ModalPublish = React.lazy(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */));
const ModalPublishPreview = React.lazy(() =>
import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)
);
const ModalRemoveBtcSwapAddress = React.lazy(() =>
import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */)
);
const ModalRemoveFile = React.lazy(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
const ModalRevokeClaim = React.lazy(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */));
const ModalRewardCode = React.lazy(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
const ModalSendTip = React.lazy(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */));
const ModalSetReferrer = React.lazy(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */));
const ModalSignOut = React.lazy(() => import('modal/modalSignOut' /* webpackChunkName: "modalSignOut" */));
const ModalSocialShare = React.lazy(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */));
const ModalSupportsLiquidate = React.lazy(() =>
import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */)
);
const ModalSyncEnable = React.lazy(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */));
const ModalTransactionFailed = React.lazy(() =>
import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */)
);
const ModalUpgrade = React.lazy(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */));
const ModalViewImage = React.lazy(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */));
const ModalWalletDecrypt = React.lazy(() =>
import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */)
);
const ModalWalletEncrypt = React.lazy(() =>
import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */)
);
const ModalWalletUnlock = React.lazy(() =>
import('modal/modalWalletUnlock' /* webpackChunkName: "modalWalletUnlock" */)
);
const ModalYoutubeWelcome = React.lazy(() =>
import('modal/modalYoutubeWelcome' /* webpackChunkName: "modalYoutubeWelcome" */)
);
type Props = {
modal: { id: string, modalProps: {} },
@ -66,92 +114,105 @@ function ModalRouter(props: Props) {
return null;
}
const { id, modalProps } = modal;
switch (id) {
case MODALS.UPGRADE:
return <ModalUpgrade {...modalProps} />;
case MODALS.DOWNLOADING:
return <ModalDownloading {...modalProps} />;
case MODALS.AUTO_GENERATE_THUMBNAIL:
return <ModalAutoGenerateThumbnail {...modalProps} />;
case MODALS.AUTO_UPDATE_DOWNLOADED:
return <ModalAutoUpdateDownloaded {...modalProps} />;
case MODALS.ERROR:
return <ModalError {...modalProps} />;
case MODALS.FILE_TIMEOUT:
return <ModalFileTimeout {...modalProps} />;
case MODALS.FIRST_REWARD:
return <ModalFirstReward {...modalProps} />;
case MODALS.TRANSACTION_FAILED:
return <ModalTransactionFailed {...modalProps} />;
case MODALS.CONFIRM_FILE_REMOVE:
return <ModalRemoveFile {...modalProps} />;
case MODALS.AFFIRM_PURCHASE:
return <ModalAffirmPurchase {...modalProps} />;
case MODALS.CONFIRM_CLAIM_REVOKE:
return <ModalRevokeClaim {...modalProps} />;
case MODALS.PHONE_COLLECTION:
return <ModalPhoneCollection {...modalProps} />;
case MODALS.FIRST_SUBSCRIPTION:
return <ModalFirstSubscription {...modalProps} />;
case MODALS.SEND_TIP:
return <ModalSendTip {...modalProps} />;
case MODALS.SOCIAL_SHARE:
return <ModalSocialShare {...modalProps} />;
case MODALS.PUBLISH:
return <ModalPublish {...modalProps} />;
case MODALS.PUBLISH_PREVIEW:
return <ModalPublishPreview {...modalProps} />;
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
return <ModalOpenExternalResource {...modalProps} />;
case MODALS.CONFIRM_TRANSACTION:
return <ModalConfirmTransaction {...modalProps} />;
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
return <ModalConfirmThumbnailUpload {...modalProps} />;
case MODALS.WALLET_ENCRYPT:
return <ModalWalletEncrypt {...modalProps} />;
case MODALS.WALLET_DECRYPT:
return <ModalWalletDecrypt {...modalProps} />;
case MODALS.WALLET_UNLOCK:
return <ModalWalletUnlock {...modalProps} />;
case MODALS.WALLET_PASSWORD_UNSAVE:
return <ModalPasswordUnsave {...modalProps} />;
case MODALS.REWARD_GENERATED_CODE:
return <ModalRewardCode {...modalProps} />;
case MODALS.COMMENT_ACKNOWEDGEMENT:
return <ModalCommentAcknowledgement {...modalProps} />;
case MODALS.YOUTUBE_WELCOME:
return <ModalYoutubeWelcome />;
case MODALS.SET_REFERRER:
return <ModalSetReferrer {...modalProps} />;
case MODALS.SIGN_OUT:
return <ModalSignOut {...modalProps} />;
case MODALS.CONFIRM_AGE:
return <ModalConfirmAge {...modalProps} />;
case MODALS.FILE_SELECTION:
return <ModalFileSelection {...modalProps} />;
case MODALS.LIQUIDATE_SUPPORTS:
return <ModalSupportsLiquidate {...modalProps} />;
case MODALS.IMAGE_UPLOAD:
return <ModalImageUpload {...modalProps} />;
case MODALS.SYNC_ENABLE:
return <ModalSyncEnable {...modalProps} />;
case MODALS.MOBILE_SEARCH:
return <ModalMobileSearch {...modalProps} />;
case MODALS.VIEW_IMAGE:
return <ModalViewImage {...modalProps} />;
case MODALS.MASS_TIP_UNLOCK:
return <ModalMassTipsUnlock {...modalProps} />;
case MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS:
return <ModalRemoveBtcSwapAddress {...modalProps} />;
case MODALS.COLLECTION_ADD:
return <ModalClaimCollectionAdd {...modalProps} />;
case MODALS.COLLECTION_DELETE:
return <ModalDeleteCollection {...modalProps} />;
default:
return null;
function getModal(id) {
switch (id) {
case MODALS.UPGRADE:
return ModalUpgrade;
case MODALS.DOWNLOADING:
return ModalDownloading;
case MODALS.AUTO_GENERATE_THUMBNAIL:
return ModalAutoGenerateThumbnail;
case MODALS.AUTO_UPDATE_DOWNLOADED:
return ModalAutoUpdateDownloaded;
case MODALS.ERROR:
return ModalError;
case MODALS.FILE_TIMEOUT:
return ModalFileTimeout;
case MODALS.FIRST_REWARD:
return ModalFirstReward;
case MODALS.TRANSACTION_FAILED:
return ModalTransactionFailed;
case MODALS.CONFIRM_FILE_REMOVE:
return ModalRemoveFile;
case MODALS.AFFIRM_PURCHASE:
return ModalAffirmPurchase;
case MODALS.CONFIRM_CLAIM_REVOKE:
return ModalRevokeClaim;
case MODALS.PHONE_COLLECTION:
return ModalPhoneCollection;
case MODALS.FIRST_SUBSCRIPTION:
return ModalFirstSubscription;
case MODALS.SEND_TIP:
return ModalSendTip;
case MODALS.SOCIAL_SHARE:
return ModalSocialShare;
case MODALS.PUBLISH:
return ModalPublish;
case MODALS.PUBLISH_PREVIEW:
return ModalPublishPreview;
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
return ModalOpenExternalResource;
case MODALS.CONFIRM_TRANSACTION:
return ModalConfirmTransaction;
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
return ModalConfirmThumbnailUpload;
case MODALS.WALLET_ENCRYPT:
return ModalWalletEncrypt;
case MODALS.WALLET_DECRYPT:
return ModalWalletDecrypt;
case MODALS.WALLET_UNLOCK:
return ModalWalletUnlock;
case MODALS.WALLET_PASSWORD_UNSAVE:
return ModalPasswordUnsave;
case MODALS.REWARD_GENERATED_CODE:
return ModalRewardCode;
case MODALS.COMMENT_ACKNOWEDGEMENT:
return ModalCommentAcknowledgement;
case MODALS.YOUTUBE_WELCOME:
return ModalYoutubeWelcome;
case MODALS.SET_REFERRER:
return ModalSetReferrer;
case MODALS.SIGN_OUT:
return ModalSignOut;
case MODALS.CONFIRM_AGE:
return ModalConfirmAge;
case MODALS.FILE_SELECTION:
return ModalFileSelection;
case MODALS.LIQUIDATE_SUPPORTS:
return ModalSupportsLiquidate;
case MODALS.IMAGE_UPLOAD:
return ModalImageUpload;
case MODALS.SYNC_ENABLE:
return ModalSyncEnable;
case MODALS.MOBILE_SEARCH:
return ModalMobileSearch;
case MODALS.VIEW_IMAGE:
return ModalViewImage;
case MODALS.MASS_TIP_UNLOCK:
return ModalMassTipsUnlock;
case MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS:
return ModalRemoveBtcSwapAddress;
case MODALS.COLLECTION_ADD:
return ModalClaimCollectionAdd;
case MODALS.COLLECTION_DELETE:
return ModalDeleteCollection;
default:
return null;
}
}
const { id, modalProps } = modal;
const SelectedModal = getModal(id);
if (SelectedModal === null) {
return null;
}
return (
<React.Suspense fallback={<LoadingBarOneOff />}>
<SelectedModal {...modalProps} />
</React.Suspense>
);
}
export default withRouter(ModalRouter);

7
ui/page/embedWrapper/view.jsx
View file

@ -1,7 +1,6 @@
// @flow
import React, { useEffect } from 'react';
import classnames from 'classnames';
import FileRender from 'component/fileRender';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import Spinner from 'component/spinner';
import Button from 'component/button';
@ -9,6 +8,8 @@ import Card from 'component/common/card';
import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
type Props = {
uri: string,
resolveUri: (string) => void,
@ -98,7 +99,9 @@ const EmbedWrapperPage = (props: Props) => {
>
<EmbedContext.Provider value>
{readyToDisplay ? (
<FileRender uri={uri} embedded />
<React.Suspense fallback={null}>
<FileRender uri={uri} embedded />
</React.Suspense>
) : (
<div className="embed__loading">
<FileViewerEmbeddedTitle uri={uri} />

9
ui/page/file/view.jsx
View file

@ -10,9 +10,10 @@ import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent';
import CollectionContent from 'component/collectionContentSidebar';
import CommentsList from 'component/commentsList';
import PostViewer from 'component/postViewer';
import Empty from 'component/common/empty';
const PostViewer = React.lazy(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
type Props = {
@ -96,7 +97,11 @@ function FilePage(props: Props) {
}
if (isMarkdown) {
return <PostViewer uri={uri} />;
return (
<React.Suspense fallback={null}>
<PostViewer uri={uri} />
</React.Suspense>
);
}
if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {

71
ui/page/home/view.jsx
View file

@ -6,9 +6,11 @@ import React from 'react';
import Page from 'component/page';
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
import ClaimPreviewTile from 'component/claimPreviewTile';
import Icon from 'component/common/icon';
import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
import WaitUntilOnPage from 'component/common/wait-until-on-page';
import useGetLivestreams from 'effects/use-get-livestreams';
type Props = {
@ -37,6 +39,48 @@ function HomePage(props: Props) {
showNsfw
);
function getRowElements(title, route, link, icon, help, options, index) {
const tilePlaceholder = (
<ul className="claim-grid">
{new Array(options.pageSize || 8).fill(1).map((x, i) => (
<ClaimPreviewTile key={i} placeholder />
))}
</ul>
);
const claimTiles = <ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />;
return (
<div key={title} className="claim-grid__wrapper">
{index !== 0 && title && typeof title === 'string' && (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
<span className="claim-grid__title">{__(title)}</span>
{help}
</Button>
</h1>
)}
{index === 0 && <>{claimTiles}</>}
{index !== 0 && (
<WaitUntilOnPage name={title} placeholder={tilePlaceholder}>
{claimTiles}
</WaitUntilOnPage>
)}
{(route || link) && (
<Button
className="claim-grid__title--secondary"
button="link"
navigate={route || link}
iconRight={ICONS.ARROW_RIGHT}
label={__('View More')}
/>
)}
</div>
);
}
return (
<Page fullWidthPage>
{IS_WEB && DOMAIN === 'lbry.tv' && (
@ -81,30 +125,9 @@ function HomePage(props: Props) {
</p>
</div>
)}
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
<div key={title} className="claim-grid__wrapper">
{index !== 0 && title && typeof title === 'string' && (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
<span className="claim-grid__title">{__(title)}</span>
{help}
</Button>
</h1>
)}
<ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />
{(route || link) && (
<Button
className="claim-grid__title--secondary"
button="link"
navigate={route || link}
iconRight={ICONS.ARROW_RIGHT}
label={__('View More')}
/>
)}
</div>
))}
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => {
return getRowElements(title, route, link, icon, help, options, index);
})}
</Page>
);
}

19
ui/page/show/view.jsx
View file

@ -5,16 +5,19 @@ import React, { useEffect } from 'react';
import { Redirect, useHistory } from 'react-router-dom';
import Spinner from 'component/spinner';
import ChannelPage from 'page/channel';
import FilePage from 'page/file';
import LivestreamPage from 'page/livestream';
import Page from 'component/page';
import Button from 'component/button';
import Card from 'component/common/card';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import Yrbl from 'component/yrbl';
import { formatLbryUrlForWeb } from 'util/url';
import { parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
const AbandonedChannelPreview = React.lazy(() =>
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
);
const FilePage = React.lazy(() => import('page/file' /* webpackChunkName: "filePage" */));
const LivestreamPage = React.lazy(() => import('page/livestream' /* webpackChunkName: "livestream" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
type Props = {
isResolvingUri: boolean,
resolveUri: (string) => void,
@ -157,7 +160,11 @@ function ShowPage(props: Props) {
/>
</div>
)}
{!isResolvingUri && isSubscribed && claim === null && <AbandonedChannelPreview uri={uri} type={'large'} />}
{!isResolvingUri && isSubscribed && claim === null && (
<React.Suspense fallback={null}>
<AbandonedChannelPreview uri={uri} type={'large'} />
</React.Suspense>
)}
</Page>
);
} else if (claim.name.length && claim.name[0] === '@') {
@ -196,7 +203,7 @@ function ShowPage(props: Props) {
}
}
return innerContent;
return <React.Suspense fallback={null}>{innerContent}</React.Suspense>;
}
export default ShowPage;

1
ui/scss/component/_content.scss
View file

@ -41,6 +41,7 @@
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
.content__wrapper--floating {

4
ui/scss/component/_file-render.scss
View file

@ -31,7 +31,7 @@
.claim-link {
.button {
display: block;
.button__content {
display: block;
}
@ -528,7 +528,7 @@ video::-internal-media-controls-overlay-cast-button {
.vjs-playback-rate .vjs-menu {
// Extend the width to prevent a potential scrollbar from blocking the text.
width: 8em;
left: -2em;
left: -3em;
}
}

5
ui/scss/component/_videojs.scss
View file

@ -84,6 +84,11 @@
font-size: 10px;
}
.vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item {
margin: 0 0;
padding: 5px 10px;
}
// Volume slider
.vjs-volume-panel {
&.vjs-control {

5
ui/scss/third-party.scss Normal file
View file

@ -0,0 +1,5 @@
@charset "utf-8";
@import '~@reach/combobox/styles.css';
@import '~@reach/tooltip/styles.css';
@import '~video.js/dist/alt/video-js-cdn.min.css';

1
web/middleware/cache-control.js
View file

@ -10,6 +10,7 @@ const STATIC_ASSET_PATHS = [
'/public/font/v1/700i.woff',
'/public/favicon.png',
'/public/img/busy.gif',
'/public/img/fileRenderPlaceholder.gif',
'/public/img/gerbil-happy.png',
'/public/img/gerbil-sad.png',
'/public/img/placeholder.png',

1
web/webpack.config.js
View file

@ -118,6 +118,7 @@ const webConfig = {
filename: '[name].js',
path: path.join(__dirname, 'dist/public/'),
publicPath: '/public/',
chunkFilename: '[name]-[chunkhash].js',
},
devServer: {
port: WEBPACK_WEB_PORT,

104
yarn.lock
View file

@ -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"
@ -9687,6 +9736,11 @@ react-time-picker@^4.2.0:
react-fit "^1.0.3"
update-input-width "^1.1.1"
react-top-loading-bar@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-top-loading-bar/-/react-top-loading-bar-2.0.1.tgz#c8805ad9c1068766fdd3cadd414e67cfdf1878e9"
integrity sha512-wkRlK9Rte4TU817GDcjlsCoDOxrrnvsNvK609FKyio0EIrmmqjQDz5DB8HbN88CHNZBy5Lh/OBALc03ioWFPuQ==
react@^16.8.2:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@ -10194,7 +10248,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 +10715,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 +11242,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 +12554,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 +12707,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"