Code-split #6228
22 changed files with 598 additions and 471 deletions
|
|
@ -6,31 +6,20 @@ import analytics from 'analytics';
|
|||
import { buildURI, parseURI } from 'lbry-redux';
|
||||
import { SIMPLE_SITE } from 'config';
|
||||
import Router from 'component/router/index';
|
||||
import ModalRouter from 'modal/modalRouter';
|
||||
import ReactModal from 'react-modal';
|
||||
import { openContextMenu } from 'util/context-menu';
|
||||
import useKonamiListener from 'util/enhanced-layout';
|
||||
import Yrbl from 'component/yrbl';
|
||||
import FileRenderFloating from 'component/fileRenderFloating';
|
||||
import { withRouter } from 'react-router';
|
||||
import usePrevious from 'effects/use-previous';
|
||||
import Nag from 'component/common/nag';
|
||||
import REWARDS from 'rewards';
|
||||
import usePersistedState from 'effects/use-persisted-state';
|
||||
import FileDrop from 'component/fileDrop';
|
||||
import NagContinueFirstRun from 'component/nagContinueFirstRun';
|
||||
import Spinner from 'component/spinner';
|
||||
import SyncFatalError from 'component/syncFatalError';
|
||||
// @if TARGET='app'
|
||||
import useZoom from 'effects/use-zoom';
|
||||
import useHistoryNav from 'effects/use-history-nav';
|
||||
// @endif
|
||||
// @if TARGET='web'
|
||||
import OpenInAppLink from 'web/component/openInAppLink';
|
||||
import YoutubeWelcome from 'web/component/youtubeReferralWelcome';
|
||||
import NagDegradedPerformance from 'web/component/nag-degraded-performance';
|
||||
import NagDataCollection from 'web/component/nag-data-collection';
|
||||
import NagNoUser from 'web/component/nag-no-user';
|
||||
import {
|
||||
useDegradedPerformance,
|
||||
STATUS_OK,
|
||||
|
|
@ -40,6 +29,24 @@ import {
|
|||
} from 'web/effects/use-degraded-performance';
|
||||
// @endif
|
||||
import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
|
||||
|
||||
const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */));
|
||||
const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "modalRouter" */));
|
||||
const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "nag" */));
|
||||
const NagContinueFirstRun = React.lazy(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagContinueFirstRun" */));
|
||||
const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "openInAppLink" */));
|
||||
const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
|
||||
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
|
||||
|
||||
// @if TARGET='web'
|
||||
const NagDataCollection = React.lazy(() => import('web/component/nag-data-collection' /* webpackChunkName: "nag-data-collection" */));
|
||||
const NagDegradedPerformance = React.lazy(() => import('web/component/nag-degraded-performance' /* webpackChunkName: "nag-degraded-performance" */));
|
||||
const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
|
||||
const YoutubeWelcome = React.lazy(() => import('web/component/youtubeReferralWelcome' /* webpackChunkName: "youtubeReferralWelcome" */));
|
||||
// @endif
|
||||
|
||||
// ****************************************************************************
|
||||
|
||||
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
|
||||
export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
|
||||
|
||||
|
|
@ -377,11 +384,13 @@ function App(props: Props) {
|
|||
|
||||
if (syncFatalError) {
|
||||
return (
|
||||
<React.Suspense fallback={null}>
|
||||
<SyncFatalError
|
||||
// @if TARGET='web'
|
||||
lbryTvApiStatus={lbryTvApiStatus}
|
||||
// @endif
|
||||
/>
|
||||
</React.Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -397,42 +406,48 @@ 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 />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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,8 @@ import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
|||
import Button from 'component/button';
|
||||
import * as ICONS from 'constants/icons';
|
||||
|
||||
const AbandonedChannelPreview = React.lazy(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */));
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
claim: ?Claim, // maybe?
|
||||
|
|
@ -254,7 +255,11 @@ const ClaimPreview = forwardRef<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,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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -3,16 +3,11 @@ import { remote } from 'electron';
|
|||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import * as RENDER_MODES from 'constants/file_render_modes';
|
||||
import VideoViewer from 'component/viewers/videoViewer';
|
||||
import ImageViewer from 'component/viewers/imageViewer';
|
||||
import AppViewer from 'component/viewers/appViewer';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import fs from 'fs';
|
||||
import analytics from 'analytics';
|
||||
|
||||
import DocumentViewer from 'component/viewers/documentViewer';
|
||||
import PdfViewer from 'component/viewers/pdfViewer';
|
||||
import HtmlViewer from 'component/viewers/htmlViewer';
|
||||
|
||||
// @if TARGET='app'
|
||||
// should match
|
||||
|
|
@ -21,6 +16,18 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
|
|||
import ThreeViewer from 'component/viewers/threeViewer';
|
||||
// @endif
|
||||
|
||||
const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "viewers/appViewer" */));
|
||||
const HtmlViewer = React.lazy(() =>
|
||||
import('component/viewers/htmlViewer' /* webpackChunkName: "viewers/htmlViewer" */)
|
||||
);
|
||||
const ImageViewer = React.lazy(() =>
|
||||
import('component/viewers/imageViewer' /* webpackChunkName: "viewers/imageViewer" */)
|
||||
);
|
||||
const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "viewers/pdfViewer" */));
|
||||
const VideoViewer = React.lazy(() =>
|
||||
import('component/viewers/videoViewer' /* webpackChunkName: "viewers/videoViewer" */)
|
||||
);
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
streamingUrl: string,
|
||||
|
|
@ -85,17 +92,27 @@ class FileRender extends React.PureComponent<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 +132,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 +160,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,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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import React, { Fragment } from 'react';
|
|||
import classnames from 'classnames';
|
||||
import SideNavigation from 'component/sideNavigation';
|
||||
import Header from 'component/header';
|
||||
import Footer from 'web/component/footer';
|
||||
/* @if TARGET='app' */
|
||||
import StatusBar from 'component/common/status-bar';
|
||||
/* @endif */
|
||||
|
|
@ -13,6 +12,8 @@ import { useHistory } from 'react-router';
|
|||
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
|
||||
import { parseURI } from 'lbry-redux';
|
||||
|
||||
const Footer = React.lazy(() => import('web/component/footer' /* webpackChunkName: "component/footer" */));
|
||||
|
||||
export const MAIN_CLASS = 'main';
|
||||
type Props = {
|
||||
children: Node | Array<Node>,
|
||||
|
|
@ -126,7 +127,7 @@ 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,67 +1,78 @@
|
|||
// @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 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: "authenticate"
|
||||
const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "authenticate" */));
|
||||
const SignInWalletPasswordPage = React.lazy(() =>
|
||||
import('page/signInWalletPassword' /* webpackChunkName: "authenticate" */)
|
||||
);
|
||||
const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "authenticate" */));
|
||||
const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "authenticate" */));
|
||||
|
||||
// Chunk: "wallet"
|
||||
const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "wallet" */));
|
||||
const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "wallet" */));
|
||||
const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "wallet" */));
|
||||
const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "wallet" */));
|
||||
const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "wallet" */));
|
||||
|
||||
// Chunk: none
|
||||
const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "notifications" */));
|
||||
const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "collection" */));
|
||||
const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "channelNew" */));
|
||||
const ChannelsFollowingDiscoverPage = React.lazy(() => import('page/channelsFollowingDiscover' /* webpackChunkName: "channelsFollowingDiscover" */));
|
||||
const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "channelsFollowing" */));
|
||||
const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "channels" */));
|
||||
const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
|
||||
const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "creatorDashboard" */));
|
||||
const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "discover" */));
|
||||
const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "embedWrapper" */));
|
||||
const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "fileListPublished" */));
|
||||
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: "invite" */));
|
||||
const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "invited" */));
|
||||
const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "library" */));
|
||||
const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "listBlocked" */));
|
||||
const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "lists" */));
|
||||
const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "livestreamSetup" */));
|
||||
const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "livestreamCurrent" */));
|
||||
const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "passwordReset" */));
|
||||
const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "passwordSet" */));
|
||||
const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "publish" */));
|
||||
const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "reportContent" */));
|
||||
const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "report" */));
|
||||
const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "repost" */));
|
||||
const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "rewards" */));
|
||||
const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "rewardsVerify" */));
|
||||
const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "search" */));
|
||||
const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "settingsAdvanced" */));
|
||||
const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "settingsCreator" */));
|
||||
const SettingsNotificationsPage = React.lazy(() => import('page/settingsNotifications' /* webpackChunkName: "settingsNotifications" */));
|
||||
const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "settings" */));
|
||||
const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "show" */));
|
||||
const TagsFollowingManagePage = React.lazy(() => import('page/tagsFollowingManage' /* webpackChunkName: "tagsFollowingManage" */));
|
||||
const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "tagsFollowing" */));
|
||||
const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "top" */));
|
||||
const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "welcome" */));
|
||||
const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "youtubeSync" */));
|
||||
|
||||
// Tell the browser we are handling scroll restoration
|
||||
if ('scrollRestoration' in history) {
|
||||
history.scrollRestoration = 'manual';
|
||||
|
|
@ -210,104 +221,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={<div>TODO.....................</div>}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
// @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: "wunderbarSuggestions" */));
|
||||
|
||||
type Props = {
|
||||
doOpenMobileSearch: (any) => void,
|
||||
|
|
@ -18,13 +20,23 @@ 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/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';
|
||||
|
|
@ -2,46 +2,47 @@
|
|||
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';
|
||||
|
||||
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 +67,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={null}>
|
||||
<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 ? (
|
||||
<FileRender uri={uri} embedded />
|
||||
<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)) {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,17 @@ 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 +158,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 +201,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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue