lbry-desktop/ui/component/app/view.jsx

467 lines
16 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-10-22 19:57:32 +02:00
import * as PAGES from 'constants/pages';
2021-06-09 21:20:19 +02:00
import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
2019-10-09 18:34:18 +02:00
import classnames from 'classnames';
2019-07-22 04:28:49 +02:00
import analytics from 'analytics';
import { buildURI, parseURI } from 'lbry-redux';
import { SIMPLE_SITE } from 'config';
import Router from 'component/router/index';
import ReactModal from 'react-modal';
2019-01-23 16:38:40 +01:00
import { openContextMenu } from 'util/context-menu';
2019-06-11 20:10:58 +02:00
import useKonamiListener from 'util/enhanced-layout';
import FileRenderFloating from 'component/fileRenderFloating';
2019-08-13 07:35:13 +02:00
import { withRouter } from 'react-router';
2019-09-27 20:56:15 +02:00
import usePrevious from 'effects/use-previous';
import REWARDS from 'rewards';
2020-02-21 21:44:58 +01:00
import usePersistedState from 'effects/use-persisted-state';
import Spinner from 'component/spinner';
// @if TARGET='app'
import useZoom from 'effects/use-zoom';
import useHistoryNav from 'effects/use-history-nav';
// @endif
2019-12-05 06:24:54 +01:00
// @if TARGET='web'
import {
useDegradedPerformance,
STATUS_OK,
STATUS_DEGRADED,
2020-03-26 21:17:41 +01:00
STATUS_FAILING,
STATUS_DOWN,
} from 'web/effects/use-degraded-performance';
// @endif
import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
2021-06-11 08:06:29 +02:00
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" */));
2021-06-25 10:02:45 +02:00
const NagContinueFirstRun = React.lazy(() =>
import('component/nagContinueFirstRun' /* webpackChunkName: "secondary" */)
);
const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "secondary" */));
2021-06-11 08:06:29 +02:00
// @if TARGET='web'
2021-06-25 10:02:45 +02:00
const NagDataCollection = React.lazy(() =>
import('web/component/nag-data-collection' /* webpackChunkName: "secondary" */)
);
const NagDegradedPerformance = React.lazy(() =>
import('web/component/nag-degraded-performance' /* webpackChunkName: "secondary" */)
);
2021-06-11 08:06:29 +02:00
const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
2021-06-25 10:02:45 +02:00
const YoutubeWelcome = React.lazy(() =>
import('web/component/youtubeReferralWelcome' /* webpackChunkName: "secondary" */)
);
2021-06-11 08:06:29 +02:00
// @endif
const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
2021-06-11 08:06:29 +02:00
// ****************************************************************************
2019-06-27 08:18:45 +02:00
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
2020-11-23 19:47:36 +01:00
export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
2019-06-27 08:18:45 +02:00
// button numbers pulled from https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
const MOUSE_BACK_BTN = 3;
const MOUSE_FORWARD_BTN = 4;
2018-03-26 23:32:43 +02:00
type Props = {
2019-06-07 23:10:47 +02:00
language: string,
2019-11-08 21:51:42 +01:00
languages: Array<string>,
2018-10-19 17:27:14 +02:00
theme: string,
user: ?{ id: string, has_verified_email: boolean, is_reward_approved: boolean },
2020-01-14 21:44:07 +01:00
location: { pathname: string, hash: string, search: string },
history: {
goBack: () => void,
goForward: () => void,
index: number,
length: number,
push: (string) => void,
},
2019-08-06 18:53:59 +02:00
fetchAccessToken: () => void,
fetchChannelListMine: () => void,
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
fetchCollectionListMine: () => void,
2019-10-01 06:53:33 +02:00
signIn: () => void,
requestDownloadUpgrade: () => void,
2019-09-26 18:07:11 +02:00
onSignedIn: () => void,
setLanguage: (string) => void,
isUpgradeAvailable: boolean,
autoUpdateDownloaded: boolean,
2020-09-04 17:02:30 +02:00
updatePreferences: () => Promise<any>,
getWalletSyncPref: () => Promise<any>,
uploadCount: number,
balance: ?number,
2019-10-22 19:57:32 +02:00
syncError: ?string,
2020-09-04 17:02:30 +02:00
syncEnabled: boolean,
2020-01-14 21:44:07 +01:00
rewards: Array<Reward>,
setReferrer: (string, boolean) => void,
isAuthenticated: boolean,
2020-07-23 16:22:57 +02:00
socketConnect: () => void,
2021-01-21 20:50:51 +01:00
syncLoop: (?boolean) => void,
2020-09-18 19:26:00 +02:00
currentModal: any,
syncFatalError: boolean,
activeChannelClaim: ?ChannelClaim,
myChannelUrls: ?Array<string>,
2021-06-09 21:20:19 +02:00
subscriptions: Array<Subscription>,
setActiveChannelIfNotSet: () => void,
setIncognito: (boolean) => void,
fetchModBlockedList: () => void,
2021-06-09 21:20:19 +02:00
resolveUris: (Array<string>) => void,
fetchModAmIList: () => void,
2018-03-26 23:32:43 +02:00
};
2017-04-07 07:15:22 +02:00
2019-06-11 20:10:58 +02:00
function App(props: Props) {
const {
theme,
user,
fetchAccessToken,
2019-09-26 18:07:11 +02:00
fetchChannelListMine,
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
fetchCollectionListMine,
2019-10-01 06:53:33 +02:00
signIn,
autoUpdateDownloaded,
isUpgradeAvailable,
requestDownloadUpgrade,
uploadCount,
2019-10-22 19:57:32 +02:00
history,
syncError,
2019-11-08 21:51:42 +01:00
language,
languages,
setLanguage,
updatePreferences,
getWalletSyncPref,
2020-01-14 21:44:07 +01:00
rewards,
setReferrer,
isAuthenticated,
2021-01-21 20:50:51 +01:00
syncLoop,
2020-09-18 19:26:00 +02:00
currentModal,
syncFatalError,
myChannelUrls,
activeChannelClaim,
setActiveChannelIfNotSet,
setIncognito,
fetchModBlockedList,
2021-06-09 21:20:19 +02:00
resolveUris,
subscriptions,
fetchModAmIList,
} = props;
2019-06-11 20:10:58 +02:00
const appRef = useRef();
const isEnhancedLayout = useKonamiListener();
2019-10-15 06:20:12 +02:00
const [hasSignedIn, setHasSignedIn] = useState(false);
2020-09-04 17:02:30 +02:00
const [readyForSync, setReadyForSync] = useState(false);
const [readyForPrefs, setReadyForPrefs] = useState(false);
const hasVerifiedEmail = user && Boolean(user.has_verified_email);
const isRewardApproved = user && user.is_reward_approved;
const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail);
const previousRewardApproved = usePrevious(isRewardApproved);
2020-02-21 21:44:58 +01:00
// @if TARGET='web'
const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true);
const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK);
// @endif
2020-01-14 21:44:07 +01:00
const { pathname, hash, search } = props.location;
const [upgradeNagClosed, setUpgradeNagClosed] = useState(false);
2021-06-09 21:20:19 +02:00
const [resolvedSubscriptions, setResolvedSubscriptions] = useState(false);
const [sidebarOpen] = usePersistedState('sidebar', true);
const showUpgradeButton =
(autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable)) && !upgradeNagClosed;
2020-01-14 21:44:07 +01:00
// referral claiming
const referredRewardAvailable = rewards && rewards.some((reward) => reward.reward_type === REWARDS.TYPE_REFEREE);
2020-01-14 21:44:07 +01:00
const urlParams = new URLSearchParams(search);
const rawReferrerParam = urlParams.get('r');
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
2020-10-21 00:20:11 +02:00
const userId = user && user.id;
2020-11-23 19:47:36 +01:00
const useCustomScrollbar = !IS_MAC;
const hasMyChannels = myChannelUrls && myChannelUrls.length > 0;
const hasNoChannels = myChannelUrls && myChannelUrls.length === 0;
const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
const hasActiveChannelClaim = activeChannelClaim !== undefined;
2021-06-09 21:20:19 +02:00
const isPersonalized = !IS_WEB || hasVerifiedEmail;
2019-08-13 07:35:13 +02:00
let uri;
try {
2019-08-30 20:12:52 +02:00
const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
uri = newpath + hash;
2019-08-13 07:35:13 +02:00
} catch (e) {}
2020-02-21 21:44:58 +01:00
// @if TARGET='web'
function handleAnalyticsDismiss() {
setShowAnalyticsNag(false);
}
2021-01-21 20:50:51 +01:00
2020-02-21 21:44:58 +01:00
// @endif
2020-10-21 00:20:11 +02:00
useEffect(() => {
if (userId) {
analytics.setUser(userId);
}
}, [userId]);
2020-02-21 21:44:58 +01:00
useEffect(() => {
if (!uploadCount) return;
const handleBeforeUnload = (event) => {
event.preventDefault();
event.returnValue = 'magic'; // without setting this to something it doesn't work
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [uploadCount]);
// allows user to navigate history using the forward and backward buttons on a mouse
useEffect(() => {
const handleForwardAndBackButtons = (e) => {
switch (e.button) {
case MOUSE_BACK_BTN:
history.index > 0 && history.goBack();
break;
case MOUSE_FORWARD_BTN:
history.index < history.length - 1 && history.goForward();
break;
}
};
window.addEventListener('mouseup', handleForwardAndBackButtons);
return () => window.removeEventListener('mouseup', handleForwardAndBackButtons);
});
// allows user to pause miniplayer using the spacebar without the page scrolling down
useEffect(() => {
const handleKeyPress = (e) => {
if (e.key === ' ' && e.target === document.body) {
e.preventDefault();
}
};
window.addEventListener('keydown', handleKeyPress);
return () => window.removeEventListener('keydown', handleKeyPress);
}, []);
// Enable ctrl +/- zooming on Desktop.
// @if TARGET='app'
useZoom();
// @endif
// Enable 'Alt + Left/Right' for history navigation on Desktop.
// @if TARGET='app'
useHistoryNav(history);
// @endif
2020-01-14 21:44:07 +01:00
useEffect(() => {
if (referredRewardAvailable && sanitizedReferrerParam && isRewardApproved) {
setReferrer(sanitizedReferrerParam, true);
} else if (referredRewardAvailable && sanitizedReferrerParam) {
setReferrer(sanitizedReferrerParam, false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
2020-01-14 21:44:07 +01:00
}, [sanitizedReferrerParam, isRewardApproved, referredRewardAvailable]);
2019-06-11 20:10:58 +02:00
useEffect(() => {
2020-03-27 17:49:41 +01:00
const { current: wrapperElement } = appRef;
2020-02-06 19:49:05 +01:00
if (wrapperElement) {
ReactModal.setAppElement(wrapperElement);
}
2020-07-23 16:22:57 +02:00
2019-08-06 18:53:59 +02:00
fetchAccessToken();
2019-06-27 08:18:45 +02:00
// @if TARGET='app'
2020-07-23 16:22:57 +02:00
fetchChannelListMine(); // This is fetched after a user is signed in on web
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
fetchCollectionListMine();
2019-06-27 08:18:45 +02:00
// @endif
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
}, [appRef, fetchAccessToken, fetchChannelListMine, fetchCollectionListMine]);
2018-10-18 18:45:24 +02:00
2019-06-11 20:10:58 +02:00
useEffect(() => {
2018-10-18 18:45:24 +02:00
// $FlowFixMe
2019-11-22 22:13:00 +01:00
document.documentElement.setAttribute('theme', theme);
2019-06-11 20:10:58 +02:00
}, [theme]);
2018-11-07 17:03:42 +01:00
2019-11-08 21:51:42 +01:00
useEffect(() => {
if (hasMyChannels && !hasActiveChannelClaim) {
setActiveChannelIfNotSet();
} else if (hasNoChannels) {
setIncognito(true);
}
if (hasMyChannels) {
fetchModBlockedList();
fetchModAmIList();
}
}, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]);
useEffect(() => {
2019-11-08 21:51:42 +01:00
if (!languages.includes(language)) {
setLanguage(language);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
2019-11-08 21:51:42 +01:00
}, [language, languages]);
useEffect(() => {
if (shouldMigrateLanguage) {
setLanguage(shouldMigrateLanguage);
}
}, [shouldMigrateLanguage, setLanguage]);
useEffect(() => {
2019-08-15 05:09:34 +02:00
// Check that previousHasVerifiedEmail was not undefined instead of just not truthy
// This ensures we don't fire the emailVerified event on the initial user fetch
2019-09-26 18:07:11 +02:00
if (previousHasVerifiedEmail === false && hasVerifiedEmail) {
analytics.emailVerifiedEvent();
}
2019-10-01 06:53:33 +02:00
}, [previousHasVerifiedEmail, hasVerifiedEmail, signIn]);
useEffect(() => {
2019-09-26 18:07:11 +02:00
if (previousRewardApproved === false && isRewardApproved) {
analytics.rewardEligibleEvent();
}
}, [previousRewardApproved, isRewardApproved]);
2019-07-22 04:28:49 +02:00
2020-09-04 17:02:30 +02:00
// @if TARGET='app'
useEffect(() => {
if (updatePreferences && getWalletSyncPref && readyForPrefs) {
getWalletSyncPref()
.then(() => updatePreferences())
.then(() => {
setReadyForSync(true);
});
}
}, [updatePreferences, getWalletSyncPref, setReadyForSync, readyForPrefs, hasVerifiedEmail]);
2020-09-04 17:02:30 +02:00
// @endif
2019-10-15 23:23:51 +02:00
2020-09-04 17:02:30 +02:00
// ready for sync syncs, however after signin when hasVerifiedEmail, that syncs too.
2019-12-21 19:43:42 +01:00
useEffect(() => {
2020-09-09 19:37:55 +02:00
// signInSyncPref is cleared after sharedState loop.
2021-01-21 20:50:51 +01:00
const syncLoopWithoutInterval = () => syncLoop(true);
if (readyForSync && hasVerifiedEmail) {
// In case we are syncing.
2021-01-21 20:50:51 +01:00
syncLoop();
// @if TARGET='web'
window.addEventListener('focus', syncLoopWithoutInterval);
// @endif
2020-09-04 17:02:30 +02:00
}
2021-01-21 20:50:51 +01:00
// @if TARGET='web'
return () => {
window.removeEventListener('focus', syncLoopWithoutInterval);
};
// @endif
}, [readyForSync, hasVerifiedEmail, syncLoop]);
2019-12-21 19:43:42 +01:00
// We know someone is logging in or not when we get their user object
2020-09-04 17:02:30 +02:00
// We'll use this to determine when it's time to pull preferences
// This will no longer work if desktop users no longer get a user object from lbryinc
2019-10-15 23:23:51 +02:00
useEffect(() => {
2020-09-04 17:02:30 +02:00
if (user) {
setReadyForPrefs(true);
2019-10-15 23:23:51 +02:00
}
2020-09-04 17:02:30 +02:00
}, [user, setReadyForPrefs]);
2019-10-22 19:57:32 +02:00
useEffect(() => {
2020-09-18 19:26:00 +02:00
if (syncError && isAuthenticated && !pathname.includes(PAGES.AUTH_WALLET_PASSWORD) && !currentModal) {
2020-09-18 17:16:49 +02:00
history.push(`/$/${PAGES.AUTH_WALLET_PASSWORD}?redirect=${pathname}`);
2019-10-22 22:43:51 +02:00
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [syncError, pathname, isAuthenticated]);
2019-10-22 19:57:32 +02:00
2020-09-04 17:02:30 +02:00
// Keep this at the end to ensure initial setup effects are run first
useEffect(() => {
if (!hasSignedIn && hasVerifiedEmail) {
signIn();
setHasSignedIn(true);
if (IS_WEB) setReadyForSync(true);
}
}, [hasVerifiedEmail, signIn, hasSignedIn]);
2021-06-09 21:20:19 +02:00
// batch resolve subscriptions to be used by the sideNavigation component.
// add it here so that it only resolves the first time, despite route changes.
// useLayoutEffect because it has to be executed before the sideNavigation component requests them
useLayoutEffect(() => {
if (sidebarOpen && isPersonalized && subscriptions && !resolvedSubscriptions) {
setResolvedSubscriptions(true);
resolveUris(subscriptions.map((sub) => sub.uri));
}
}, [sidebarOpen, isPersonalized, resolvedSubscriptions, subscriptions, resolveUris, setResolvedSubscriptions]);
// @if TARGET='web'
useDegradedPerformance(setLbryTvApiStatus, user);
// @endif
// @if TARGET='web'
// Require an internal-api user on lbry.tv
// This also prevents the site from loading in the un-authed state while we wait for internal-apis to return for the first time
// It's not needed on desktop since there is no un-authed state
2021-06-18 00:52:21 +02:00
if (user === undefined) {
return (
<div className="main--empty">
<Spinner delayed />
</div>
);
}
// @endif
if (syncFatalError) {
2021-03-16 22:21:47 +01:00
return (
2021-06-11 08:06:29 +02:00
<React.Suspense fallback={null}>
<SyncFatalError
// @if TARGET='web'
lbryTvApiStatus={lbryTvApiStatus}
// @endif
/>
2021-06-11 08:06:29 +02:00
</React.Suspense>
2021-03-16 22:21:47 +01:00
);
}
2019-06-11 20:10:58 +02:00
return (
2019-10-09 18:34:18 +02:00
<div
className={classnames(MAIN_WRAPPER_CLASS, {
// @if TARGET='app'
[`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
// @endif
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
})}
2019-10-09 18:34:18 +02:00
ref={appRef}
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
2019-10-09 18:34:18 +02:00
>
{IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
2021-06-11 08:06:29 +02:00
<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.')}
/>
2021-06-11 08:06:29 +02:00
</React.Suspense>
) : (
2020-02-21 22:05:20 +01:00
<React.Fragment>
<Router />
2021-06-11 08:06:29 +02:00
<React.Suspense fallback={null}>
<ModalRouter />
<FileDrop />
</React.Suspense>
2020-04-14 01:48:11 +02:00
<FileRenderFloating />
2021-06-11 08:06:29 +02:00
<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='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>
2020-02-21 22:05:20 +01:00
</React.Fragment>
2020-02-21 21:44:58 +01:00
)}
2019-06-11 20:10:58 +02:00
</div>
);
2017-05-04 05:44:08 +02:00
}
2017-04-07 07:15:22 +02:00
2019-08-13 07:35:13 +02:00
export default withRouter(App);