diff --git a/.eslintrc.json b/.eslintrc.json index 060ae3f8f..8c1d7d658 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,13 +2,6 @@ "parser": "babel-eslint", "extends": ["standard", "standard-jsx", "plugin:react/recommended", "plugin:flowtype/recommended"], "plugins": ["flowtype", "import", "react-hooks"], - "settings": { - "import/resolver": { - "webpack": { - "config": "webpack.base.config.js" - } - } - }, "env": { "browser": true, "node": true diff --git a/.flowconfig b/.flowconfig index 8c7addd84..33672e592 100644 --- a/.flowconfig +++ b/.flowconfig @@ -28,5 +28,6 @@ module.name_mapper='^i18n\(.*\)$' -> '/ui/i18n\1' module.name_mapper='^effects\(.*\)$' -> '/ui/effects\1' module.name_mapper='^config\(.*\)$' -> '/config\1' module.name_mapper='^lbrytv\/component\(.*\)$' -> '/lbrytv/component\1' +module.name_mapper='^lbrytv\/effects\(.*\)$' -> '/lbrytv/effects\1' [strict] diff --git a/lbrytv/component/nag-data-collection.jsx b/lbrytv/component/nag-data-collection.jsx new file mode 100644 index 000000000..33125781f --- /dev/null +++ b/lbrytv/component/nag-data-collection.jsx @@ -0,0 +1,55 @@ +// @flow +import React from 'react'; +import Nag from 'component/common/nag'; +import I18nMessage from 'component/i18nMessage'; +import Button from 'component/button'; +import useIsMobile from 'effects/use-is-mobile'; + +type Props = { + onClose: () => void, +}; + +export default function NagDegradedPerformance(props: Props) { + const { onClose } = props; + const isMobile = useIsMobile(); + + return ( + + {isMobile ? ( + + ), + }} + > + lbry.tv collects usage information for itself and third parties (%more_information%). + + } + actionText={__('OK')} + onClick={onClose} + /> + ) : ( + + ), + }} + > + lbry.tv collects usage information for itself and third parties (%more_information%). Want control over + this and more? + + } + actionText={__('Get The App')} + href="https://lbry.com/get" + onClose={onClose} + /> + )} + + ); +} diff --git a/lbrytv/component/nag-degraded-performance.jsx b/lbrytv/component/nag-degraded-performance.jsx new file mode 100644 index 000000000..9219da951 --- /dev/null +++ b/lbrytv/component/nag-degraded-performance.jsx @@ -0,0 +1,31 @@ +// @flow +import React from 'react'; +import Nag from 'component/common/nag'; +import I18nMessage from 'component/i18nMessage'; +import Button from 'component/button'; + +type Props = { + onClose: () => void, +}; + +export default function NagDegradedPerformance(props: Props) { + const { onClose } = props; + + return ( + , + }} + > + lbry.tv performance may be degraded. You can try to use it, or wait 5 minutes and refresh. Please no crush us. + + } + actionText={__('Refresh')} + onClick={() => window.location.reload()} + onClose={onClose} + /> + ); +} diff --git a/lbrytv/effects/use-degraded-performance.js b/lbrytv/effects/use-degraded-performance.js new file mode 100644 index 000000000..0fa3a4262 --- /dev/null +++ b/lbrytv/effects/use-degraded-performance.js @@ -0,0 +1,25 @@ +import { LBRY_TV_API } from 'config'; +import { useEffect } from 'react'; +import fetchWithTimeout from 'util/fetch'; + +const STATUS_TIMEOUT_LIMIT = 10000; +export const STATUS_OK = 'ok'; +export const STATUS_DEGRADED = 'degraded'; +export const STATUS_DOWN = 'down'; + +export function useDegradedPerformance(onDegradedPerformanceCallback) { + useEffect(() => { + fetchWithTimeout(STATUS_TIMEOUT_LIMIT, fetch(`${LBRY_TV_API}/internal/status`)) + .then(response => response.json()) + .then(status => { + if (status.general_state === STATUS_DEGRADED) { + onDegradedPerformanceCallback(STATUS_DEGRADED); + } else { + onDegradedPerformanceCallback(STATUS_OK); + } + }) + .catch(() => { + onDegradedPerformanceCallback(STATUS_DOWN); + }); + }, []); +} diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index ccb028ec9..264715f86 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -1,6 +1,5 @@ // @flow import * as PAGES from 'constants/pages'; -import { LBRY_TV_API } from 'config'; import React, { useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; import analytics from 'analytics'; @@ -15,17 +14,20 @@ import FloatingViewer from 'component/floatingViewer'; import { withRouter } from 'react-router'; import usePrevious from 'effects/use-previous'; import Nag from 'component/common/nag'; -import Button from 'component/button'; -import I18nMessage from 'component/i18nMessage'; import { rewards as REWARDS } from 'lbryinc'; import usePersistedState from 'effects/use-persisted-state'; -import useIsMobile from 'effects/use-is-mobile'; // @if TARGET='web' import OpenInAppLink from 'component/openInAppLink'; import YoutubeWelcome from 'component/youtubeWelcome'; -import fetchWithTimeout from 'util/fetch'; +import NagDegradedPerformance from 'lbrytv/component/nag-degraded-performance'; +import NagDataCollection from 'lbrytv/component/nag-data-collection'; // @endif - +import { + useDegradedPerformance, + STATUS_OK, + STATUS_DEGRADED, + STATUS_DOWN, +} from 'lbrytv/effects/use-degraded-performance'; export const MAIN_WRAPPER_CLASS = 'main-wrapper'; // @if TARGET='app' export const IS_MAC = process.platform === 'darwin'; @@ -101,17 +103,16 @@ function App(props: Props) { const appRef = useRef(); const isEnhancedLayout = useKonamiListener(); const [hasSignedIn, setHasSignedIn] = useState(false); - const [currentlyDegradedPerformance, setCurrentlyDegradedPerformance] = useState(false); const userId = user && user.id; const hasVerifiedEmail = user && user.has_verified_email; const isRewardApproved = user && user.is_reward_approved; const previousUserId = usePrevious(userId); const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail); const previousRewardApproved = usePrevious(isRewardApproved); - const isMobile = useIsMobile(); // @if TARGET='web' const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true); // @endif + const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK); const { pathname, hash, search } = props.location; const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable); // referral claiming @@ -120,6 +121,7 @@ function App(props: Props) { const rawReferrerParam = urlParams.get('r'); const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#'); const wrapperElement = appRef.current; + const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`); let uri; try { @@ -127,7 +129,6 @@ function App(props: Props) { uri = newpath + hash; } catch (e) {} - const noNagOnPage = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`); // @if TARGET='web' function handleAnalyticsDismiss() { setShowAnalyticsNag(false); @@ -252,20 +253,7 @@ function App(props: Props) { }, [syncError, pathname, isAuthenticated]); // @if TARGET='web' - // This should all be moved into lbrytv/component/... - useEffect(() => { - fetchWithTimeout(10000, fetch(`${LBRY_TV_API}/internal/status`)) - .then(response => response.json()) - .then(status => { - if (status.general_state !== 'ok') { - throw Error(); - } - }) - .catch(err => { - console.log('err', err); - setCurrentlyDegradedPerformance(true); - }); - }, []); + useDegradedPerformance(setLbryTvApiStatus); // @endif // @if TARGET='web' @@ -287,80 +275,41 @@ function App(props: Props) { ref={appRef} onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)} > - - - - - {/* @if TARGET='web' */} - - - {/* @endif */} - - {/* @if TARGET='app' */} - {showUpgradeButton && ( - - )} - {/* @endif */} - {/* @if TARGET='web' */} - {currentlyDegradedPerformance && ( - , - }} - > - lbry.tv performance may be degraded. You can try to use it, or wait 5 minutes and refresh. Please no crush - us. - - } - actionText={__('Refresh')} - onClick={() => window.location.reload()} - onClose={() => setCurrentlyDegradedPerformance(false)} + {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? ( + - )} - {!currentlyDegradedPerformance && showAnalyticsNag && !noNagOnPage && ( + ) : ( - {isMobile ? ( + + + + {isEnhancedLayout && } + + {/* @if TARGET='app' */} + {showUpgradeButton && ( - ), - }} - > - lbry.tv collects usage information for itself and third parties (%more_information%). - - } - actionText={__('OK')} - onClick={handleAnalyticsDismiss} - /> - ) : ( - - ), - }} - > - lbry.tv collects usage information for itself and third parties (%more_information%). Want control - over this and more? - - } - actionText={__('Get The App')} - href="https://lbry.com/get" - onClose={handleAnalyticsDismiss} + message={__('An upgrade is available.')} + actionText={__('Install Now')} + onClick={requestDownloadUpgrade} /> )} + {/* @endif */} + + {/* @if TARGET='web' */} + + + {lbryTvApiStatus === STATUS_DEGRADED && ( + setLbryTvApiStatus(STATUS_OK)} /> + )} + {lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && ( + + )} + {/* @endif */} )} - {/* @endif */} - {isEnhancedLayout && } ); }