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

418 lines
13 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';
2019-10-15 06:20:12 +02:00
import React, { useEffect, useRef, useState } 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 Router from 'component/router/index';
import ModalRouter from 'modal/modalRouter';
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';
2019-03-05 05:46:57 +01:00
import Yrbl from 'component/yrbl';
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';
2019-12-06 22:12:48 +01:00
import Nag from 'component/common/nag';
import REWARDS from 'rewards';
2020-02-21 21:44:58 +01:00
import usePersistedState from 'effects/use-persisted-state';
import FileDrop from 'component/fileDrop';
import NagContinueFirstRun from 'component/nagContinueFirstRun';
import Spinner from 'component/spinner';
2020-11-18 23:15:18 +01:00
import SyncFatalError from 'component/syncFatalError';
// @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 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 {
useDegradedPerformance,
STATUS_OK,
STATUS_DEGRADED,
2020-03-26 21:17:41 +01:00
STATUS_FAILING,
STATUS_DOWN,
} from 'web/effects/use-degraded-performance';
// @endif
2021-01-13 17:07:08 +01:00
import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
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,
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-04 17:02:30 +02:00
syncEnabled: boolean,
2020-09-18 19:26:00 +02:00
currentModal: any,
syncFatalError: boolean,
activeChannelClaim: ?ChannelClaim,
myChannelUrls: ?Array<string>,
setActiveChannelIfNotSet: () => void,
setIncognito: (boolean) => void,
fetchModBlockedList: () => 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,
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,
} = 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);
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;
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
2019-06-27 08:18:45 +02:00
// @endif
}, [appRef, fetchAccessToken, fetchChannelListMine]);
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();
}
}, [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);
}
2021-01-08 17:28:52 +01:00
}, [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]);
// @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
2020-01-14 21:01:37 +01:00
if (!user) {
return (
<div className="main--empty">
<Spinner delayed />
</div>
);
}
// @endif
if (syncFatalError) {
2021-03-16 22:21:47 +01:00
return (
<SyncFatalError
// @if TARGET='web'
lbryTvApiStatus={lbryTvApiStatus}
// @endif
/>
);
}
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 ? (
<Yrbl
className="main--empty"
title={__('lbry.tv is currently down')}
2020-03-17 21:13:35 +01:00
subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')}
/>
) : (
2020-02-21 22:05:20 +01:00
<React.Fragment>
<Router />
<ModalRouter />
<FileDrop />
2020-04-14 01:48:11 +02:00
<FileRenderFloating />
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
{/* @if TARGET='app' */}
{showUpgradeButton && (
2020-02-21 22:05:20 +01:00
<Nag
message={__('An upgrade is available.')}
actionText={__('Install Now')}
onClick={requestDownloadUpgrade}
onClose={() => setUpgradeNagClosed(true)}
2020-02-21 22:05:20 +01:00
/>
)}
{/* @endif */}
{/* @if TARGET='web' */}
<YoutubeWelcome />
2020-03-27 14:57:11 +01:00
{!shouldHideNag && <OpenInAppLink uri={uri} />}
{!shouldHideNag && <NagContinueFirstRun />}
2020-03-27 14:57:11 +01:00
{(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && (
<NagDegradedPerformance onClose={() => setLbryTvApiStatus(STATUS_OK)} />
)}
{lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
<NagDataCollection onClose={handleAnalyticsDismiss} />
)}
{/* @endif */}
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);