Code-split #6228
36 changed files with 908 additions and 524 deletions
|
|
@ -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
BIN
static/img/fileRenderPlaceholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 B |
|
|
@ -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 (
|
||||
<React.Suspense fallback={null}>
|
||||
<SyncFatalError
|
||||
// @if TARGET='web'
|
||||
lbryTvApiStatus={lbryTvApiStatus}
|
||||
// @endif
|
||||
/>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -397,17 +415,22 @@ function App(props: Props) {
|
|||
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
|
||||
>
|
||||
{IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
|
||||
<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 />
|
||||
<React.Suspense fallback={null}>
|
||||
<ModalRouter />
|
||||
<FileDrop />
|
||||
</React.Suspense>
|
||||
<FileRenderFloating />
|
||||
<React.Suspense fallback={null}>
|
||||
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
|
||||
|
||||
{/* @if TARGET='app' */}
|
||||
|
|
@ -433,6 +456,7 @@ function App(props: Props) {
|
|||
)}
|
||||
{user === null && <NagNoUser />}
|
||||
{/* @endif */}
|
||||
</React.Suspense>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -274,7 +274,8 @@ export class FormField extends React.PureComponent<Props> {
|
|||
{...inputProps}
|
||||
/>
|
||||
<div className="form-field__textarea-info">
|
||||
{!noEmojis && <div className="form-field__quick-emojis">
|
||||
{!noEmojis && (
|
||||
<div className="form-field__quick-emojis">
|
||||
{QUICK_EMOJIS.map((emoji) => (
|
||||
<Button
|
||||
key={emoji}
|
||||
|
|
@ -289,7 +290,8 @@ export class FormField extends React.PureComponent<Props> {
|
|||
}}
|
||||
/>
|
||||
))}
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
{countInfo}
|
||||
</div>
|
||||
</fieldset-section>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,6 +75,7 @@ class ErrorBoundary extends React.Component<Props, State> {
|
|||
if (hasError) {
|
||||
return (
|
||||
<div className="main main--full-width main--empty">
|
||||
<React.Suspense fallback={null}>
|
||||
<Yrbl
|
||||
type="sad"
|
||||
title={__('Aw shucks!')}
|
||||
|
|
@ -95,6 +97,7 @@ class ErrorBoundary extends React.Component<Props, State> {
|
|||
</I18nMessage>
|
||||
}
|
||||
/>
|
||||
</React.Suspense>
|
||||
{!errorWasReported && (
|
||||
<div className="error__wrapper">
|
||||
<span className="error__text">
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -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,6 +244,7 @@ export default function FileRenderFloating(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={null}>
|
||||
<Draggable
|
||||
onDrag={handleDragMove}
|
||||
onStart={handleDragStart}
|
||||
|
|
@ -289,6 +291,7 @@ export default function FileRenderFloating(props: Props) {
|
|||
)}
|
||||
|
||||
{isReadyToPlay ? (
|
||||
<React.Suspense fallback={null}>
|
||||
<FileRender
|
||||
className="draggable"
|
||||
uri={uri}
|
||||
|
|
@ -296,6 +299,7 @@ export default function FileRenderFloating(props: Props) {
|
|||
desktopPlayStartTime={desktopPlayStartTime}
|
||||
// @endif
|
||||
/>
|
||||
</React.Suspense>
|
||||
) : (
|
||||
<LoadingScreen status={loadingMessage} />
|
||||
)}
|
||||
|
|
@ -310,5 +314,6 @@ export default function FileRenderFloating(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
6
ui/component/loadingBarOneOff/index.js
Normal 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
20
ui/component/loadingBarOneOff/view.jsx
Normal 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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
|
|
|
|||
|
|
@ -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,6 +228,7 @@ function AppRouter(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<LoadingBarOneOff />}>
|
||||
<Switch>
|
||||
{/* @if TARGET='app' */}
|
||||
{welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
|
||||
|
|
@ -308,6 +327,7 @@ function AppRouter(props: Props) {
|
|||
<Route path="/:claimName/:streamName" exact component={ShowPage} />
|
||||
<Route path="/*" component={FourOhFourPage} />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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,6 +333,7 @@ function VideoViewer(props: Props) {
|
|||
)}
|
||||
|
||||
{!isFetchingAd && (
|
||||
<React.Suspense fallback={null}>
|
||||
<VideoJs
|
||||
adUrl={adUrl}
|
||||
source={adUrl || source}
|
||||
|
|
@ -343,6 +345,7 @@ function VideoViewer(props: Props) {
|
|||
toggleVideoTheaterMode={toggleVideoTheaterMode}
|
||||
autoplay={!embedded || autoplayIfEmbedded}
|
||||
/>
|
||||
</React.Suspense>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
2
ui/constants/classnames.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// component/fileRenderFloating
|
||||
export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
|
||||
21
ui/index.jsx
21
ui/index.jsx
|
|
@ -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
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
function getModal(id) {
|
||||
switch (id) {
|
||||
case MODALS.UPGRADE:
|
||||
return <ModalUpgrade {...modalProps} />;
|
||||
return ModalUpgrade;
|
||||
case MODALS.DOWNLOADING:
|
||||
return <ModalDownloading {...modalProps} />;
|
||||
return ModalDownloading;
|
||||
case MODALS.AUTO_GENERATE_THUMBNAIL:
|
||||
return <ModalAutoGenerateThumbnail {...modalProps} />;
|
||||
return ModalAutoGenerateThumbnail;
|
||||
case MODALS.AUTO_UPDATE_DOWNLOADED:
|
||||
return <ModalAutoUpdateDownloaded {...modalProps} />;
|
||||
return ModalAutoUpdateDownloaded;
|
||||
case MODALS.ERROR:
|
||||
return <ModalError {...modalProps} />;
|
||||
return ModalError;
|
||||
case MODALS.FILE_TIMEOUT:
|
||||
return <ModalFileTimeout {...modalProps} />;
|
||||
return ModalFileTimeout;
|
||||
case MODALS.FIRST_REWARD:
|
||||
return <ModalFirstReward {...modalProps} />;
|
||||
return ModalFirstReward;
|
||||
case MODALS.TRANSACTION_FAILED:
|
||||
return <ModalTransactionFailed {...modalProps} />;
|
||||
return ModalTransactionFailed;
|
||||
case MODALS.CONFIRM_FILE_REMOVE:
|
||||
return <ModalRemoveFile {...modalProps} />;
|
||||
return ModalRemoveFile;
|
||||
case MODALS.AFFIRM_PURCHASE:
|
||||
return <ModalAffirmPurchase {...modalProps} />;
|
||||
return ModalAffirmPurchase;
|
||||
case MODALS.CONFIRM_CLAIM_REVOKE:
|
||||
return <ModalRevokeClaim {...modalProps} />;
|
||||
return ModalRevokeClaim;
|
||||
case MODALS.PHONE_COLLECTION:
|
||||
return <ModalPhoneCollection {...modalProps} />;
|
||||
return ModalPhoneCollection;
|
||||
case MODALS.FIRST_SUBSCRIPTION:
|
||||
return <ModalFirstSubscription {...modalProps} />;
|
||||
return ModalFirstSubscription;
|
||||
case MODALS.SEND_TIP:
|
||||
return <ModalSendTip {...modalProps} />;
|
||||
return ModalSendTip;
|
||||
case MODALS.SOCIAL_SHARE:
|
||||
return <ModalSocialShare {...modalProps} />;
|
||||
return ModalSocialShare;
|
||||
case MODALS.PUBLISH:
|
||||
return <ModalPublish {...modalProps} />;
|
||||
return ModalPublish;
|
||||
case MODALS.PUBLISH_PREVIEW:
|
||||
return <ModalPublishPreview {...modalProps} />;
|
||||
return ModalPublishPreview;
|
||||
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
|
||||
return <ModalOpenExternalResource {...modalProps} />;
|
||||
return ModalOpenExternalResource;
|
||||
case MODALS.CONFIRM_TRANSACTION:
|
||||
return <ModalConfirmTransaction {...modalProps} />;
|
||||
return ModalConfirmTransaction;
|
||||
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
|
||||
return <ModalConfirmThumbnailUpload {...modalProps} />;
|
||||
return ModalConfirmThumbnailUpload;
|
||||
case MODALS.WALLET_ENCRYPT:
|
||||
return <ModalWalletEncrypt {...modalProps} />;
|
||||
return ModalWalletEncrypt;
|
||||
case MODALS.WALLET_DECRYPT:
|
||||
return <ModalWalletDecrypt {...modalProps} />;
|
||||
return ModalWalletDecrypt;
|
||||
case MODALS.WALLET_UNLOCK:
|
||||
return <ModalWalletUnlock {...modalProps} />;
|
||||
return ModalWalletUnlock;
|
||||
case MODALS.WALLET_PASSWORD_UNSAVE:
|
||||
return <ModalPasswordUnsave {...modalProps} />;
|
||||
return ModalPasswordUnsave;
|
||||
case MODALS.REWARD_GENERATED_CODE:
|
||||
return <ModalRewardCode {...modalProps} />;
|
||||
return ModalRewardCode;
|
||||
case MODALS.COMMENT_ACKNOWEDGEMENT:
|
||||
return <ModalCommentAcknowledgement {...modalProps} />;
|
||||
return ModalCommentAcknowledgement;
|
||||
case MODALS.YOUTUBE_WELCOME:
|
||||
return <ModalYoutubeWelcome />;
|
||||
return ModalYoutubeWelcome;
|
||||
case MODALS.SET_REFERRER:
|
||||
return <ModalSetReferrer {...modalProps} />;
|
||||
return ModalSetReferrer;
|
||||
case MODALS.SIGN_OUT:
|
||||
return <ModalSignOut {...modalProps} />;
|
||||
return ModalSignOut;
|
||||
case MODALS.CONFIRM_AGE:
|
||||
return <ModalConfirmAge {...modalProps} />;
|
||||
return ModalConfirmAge;
|
||||
case MODALS.FILE_SELECTION:
|
||||
return <ModalFileSelection {...modalProps} />;
|
||||
return ModalFileSelection;
|
||||
case MODALS.LIQUIDATE_SUPPORTS:
|
||||
return <ModalSupportsLiquidate {...modalProps} />;
|
||||
return ModalSupportsLiquidate;
|
||||
case MODALS.IMAGE_UPLOAD:
|
||||
return <ModalImageUpload {...modalProps} />;
|
||||
return ModalImageUpload;
|
||||
case MODALS.SYNC_ENABLE:
|
||||
return <ModalSyncEnable {...modalProps} />;
|
||||
return ModalSyncEnable;
|
||||
case MODALS.MOBILE_SEARCH:
|
||||
return <ModalMobileSearch {...modalProps} />;
|
||||
return ModalMobileSearch;
|
||||
case MODALS.VIEW_IMAGE:
|
||||
return <ModalViewImage {...modalProps} />;
|
||||
return ModalViewImage;
|
||||
case MODALS.MASS_TIP_UNLOCK:
|
||||
return <ModalMassTipsUnlock {...modalProps} />;
|
||||
return ModalMassTipsUnlock;
|
||||
case MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS:
|
||||
return <ModalRemoveBtcSwapAddress {...modalProps} />;
|
||||
return ModalRemoveBtcSwapAddress;
|
||||
case MODALS.COLLECTION_ADD:
|
||||
return <ModalClaimCollectionAdd {...modalProps} />;
|
||||
return ModalClaimCollectionAdd;
|
||||
case MODALS.COLLECTION_DELETE:
|
||||
return <ModalDeleteCollection {...modalProps} />;
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
<React.Suspense fallback={null}>
|
||||
<FileRender uri={uri} embedded />
|
||||
</React.Suspense>
|
||||
) : (
|
||||
<div className="embed__loading">
|
||||
<FileViewerEmbeddedTitle uri={uri} />
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.content__wrapper--floating {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
5
ui/scss/third-party.scss
Normal 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';
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
104
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"
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue