LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

refactor

Browse source
This commit is contained in:
Rafael 2022-03-16 14:35:27 -03:00 committed by Thomas Zarebczan
parent 0682f52d45
commit 04c5ac460b
6 changed files with 119 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/channelContent/view.jsx
View file

@ -13,6 +13,7 @@ import LivestreamLink from 'component/livestreamLink';
import { Form, FormField } from 'component/common/form';
import ScheduledStreams from 'component/scheduledStreams';
import { SearchResults } from './internal/searchResults';
import useFetchLiveStatus from 'effects/use-fetch-live';
const TYPES_TO_ALLOW_FILTER = ['stream', 'repost'];
@ -90,12 +91,7 @@ function ChannelContent(props: Props) {
const isInitialized = Boolean(activeLivestreamForChannel) || activeLivestreamInitialized;
const isChannelBroadcasting = Boolean(activeLivestreamForChannel);
// Find out current channels status + active live claim.
React.useEffect(() => {
doFetchChannelLiveStatus(claimId);
const intervalId = setInterval(() => doFetchChannelLiveStatus(claimId), 30000);
return () => clearInterval(intervalId);
}, [claimId, doFetchChannelLiveStatus]);
useFetchLiveStatus(claimId, doFetchChannelLiveStatus);
const showScheduledLiveStreams = claimType !== 'collection'; // ie. not on the playlist page.

9
ui/component/fileRenderInitiator/view.jsx
View file

@ -17,6 +17,7 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
import { LayoutRenderContext } from 'page/livestream/view';
import { formatLbryUrlForWeb } from 'util/url';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import useFetchLiveStatus from 'effects/use-fetch-live';
type Props = {
channelClaimId: ?string,
@ -106,13 +107,7 @@ export default function FileRenderInitiator(props: Props) {
history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(pathname)}`);
}
// Find out current channels status + active live claim
React.useEffect(() => {
// isCurrentClaimLive = already fetched
if (!channelClaimId || !isLivestreamClaim || isCurrentClaimLive) return;
doFetchChannelLiveStatus(channelClaimId);
}, [channelClaimId, doFetchChannelLiveStatus, isCurrentClaimLive, isLivestreamClaim]);
useFetchLiveStatus(channelClaimId, doFetchChannelLiveStatus);
React.useEffect(() => {
if (!claimThumbnail) return;

23
ui/effects/use-fetch-live.js Normal file
View file

@ -0,0 +1,23 @@
// @flow
import React from 'react';
import { LIVESTREAM_STATUS_CHECK_INTERVAL_SOON, LIVESTREAM_STATUS_CHECK_INTERVAL } from 'constants/livestream';
export default function useFetchLiveStatus(
channelClaimId: ?string,
doFetchChannelLiveStatus: (string) => void,
fasterPoll?: boolean
) {
// Find out current channels status + active live claim every 30 seconds
React.useEffect(() => {
if (!channelClaimId) return;
const fetch = () => doFetchChannelLiveStatus(channelClaimId || '');
const interval = fasterPoll ? LIVESTREAM_STATUS_CHECK_INTERVAL_SOON : LIVESTREAM_STATUS_CHECK_INTERVAL;
fetch();
const intervalId = setInterval(fetch, interval);
return () => clearInterval(intervalId);
}, [channelClaimId, doFetchChannelLiveStatus, fasterPoll]);
}

25
ui/page/embedWrapper/index.js
View file

@ -19,15 +19,28 @@ const select = (state, props) => {
const uri = claimName ? buildURI({ claimName, claimId }) : '';
const claim = selectClaimForUri(state, uri);
const { canonical_url: canonicalUrl } = claim || {};
const { canonical_url: canonicalUrl, signing_channel: channelClaim, txid, nout } = claim || {};
const { claim_id: channelClaimId, canonical_url: channelUri, txid: channelTxid, channelNout } = channelClaim || {};
const haveClaim = Boolean(claim);
const nullClaim = claim === null;
return {
uri,
claim,
costInfo: selectCostInfoForUri(state, uri),
streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
isResolvingUri: selectIsUriResolving(state, uri),
blackListedOutpoints: selectBlackListedOutpoints(state),
claimId,
haveClaim,
nullClaim,
canonicalUrl,
txid,
nout,
channelUri,
channelClaimId,
channelTxid,
channelNout,
costInfo: uri && selectCostInfoForUri(state, uri),
streamingUrl: uri && makeSelectStreamingUrlForUri(uri)(state),
isResolvingUri: uri && selectIsUriResolving(state, uri),
blackListedOutpoints: haveClaim && selectBlackListedOutpoints(state),
isCurrentClaimLive: canonicalUrl && selectIsActiveLivestreamForUri(state, canonicalUrl),
isLivestreamClaim: isStreamPlaceholderClaim(claim),
obscurePreview: selectShouldObscurePreviewForUri(state, uri),

110
ui/page/embedWrapper/view.jsx
View file

@ -13,12 +13,20 @@ import { getThumbnailCdnUrl } from 'util/thumbnail';
import Yrbl from 'component/yrbl';
// $FlowFixMe cannot resolve ...
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
const LIVESTREAM_STATUS_CHECK_INTERVAL = 30 * 1000;
import useFetchLiveStatus from 'effects/use-fetch-live';
type Props = {
uri: string,
claim: ?any,
claimId: ?string,
haveClaim: boolean,
nullClaim: boolean,
canonicalUrl: ?string,
txid: ?string,
nout: ?string,
channelUri: ?string,
channelClaimId: ?string,
channelTxid: ?string,
channelNout: ?string,
costInfo: any,
streamingUrl: string,
isResolvingUri: boolean,
@ -40,10 +48,19 @@ type Props = {
export const EmbedContext = React.createContext<any>();
const EmbedWrapperPage = (props: Props) => {
export default function EmbedWrapperPage(props: Props) {
const {
uri,
claim,
claimId,
haveClaim,
nullClaim,
canonicalUrl,
txid,
nout,
channelUri,
channelClaimId,
channelTxid,
channelNout,
costInfo,
streamingUrl,
isResolvingUri,
@ -67,31 +84,27 @@ const EmbedWrapperPage = (props: Props) => {
location: { search },
} = useHistory();
const { claim_id: claimId, canonical_url: canonicalUrl, signing_channel: channelClaim } = claim || {};
const containerRef = React.useRef<any>();
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const [livestreamsFetched, setLivestreamsFetched] = React.useState(false);
const channelUrl = channelClaim && formatLbryChannelName(channelClaim.canonical_url);
const channelUrl = channelUri && formatLbryChannelName(channelUri);
const urlParams = new URLSearchParams(search);
const embedLightBackground = urlParams.get('embedBackgroundLight');
const haveClaim = Boolean(claim);
const readyToDisplay = isCurrentClaimLive || (claim && streamingUrl);
const readyToDisplay = isCurrentClaimLive || (haveClaim && streamingUrl);
const isLiveClaimFetching = isLivestreamClaim && !activeLivestreamInitialized;
const isLiveClaimStopped = isLivestreamClaim && !isLiveClaimFetching && !readyToDisplay;
const loading = (!claim && isResolvingUri) || isLiveClaimFetching;
const noContentFound = claim === null && !isResolvingUri;
const isPaidContent = costInfo && costInfo.cost > 0;
const isLiveClaimNotPlaying = isLivestreamClaim && !isLiveClaimFetching && !readyToDisplay;
const loading = (!haveClaim && isResolvingUri) || isLiveClaimFetching;
const noContentFound = nullClaim && !isResolvingUri;
const hasCost = costInfo && costInfo.cost > 0;
const contentLink = formatLbryUrlForWeb(uri);
const signingChannel = claim && claim.signing_channel;
const isClaimBlackListed =
claim &&
haveClaim &&
blackListedOutpoints &&
blackListedOutpoints.some(
(outpoint) =>
(signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
(outpoint.txid === claim.txid && outpoint.nout === claim.nout)
(channelUrl && outpoint.txid === channelTxid && outpoint.nout === channelNout) ||
(outpoint.txid === txid && outpoint.nout === nout)
);
React.useEffect(() => {
@ -142,10 +155,10 @@ const EmbedWrapperPage = (props: Props) => {
doResolveUri(uri);
}
if (uri && haveClaim && costInfo && costInfo.cost === 0) {
if (uri && haveClaim && !hasCost) {
doPlayUri(uri);
}
}, [doResolveUri, uri, doPlayUri, haveClaim, costInfo]);
}, [doPlayUri, doResolveUri, hasCost, haveClaim, uri]);
React.useEffect(() => {
if (haveClaim && uri && doFetchCostInfoForUri) {
@ -153,18 +166,7 @@ const EmbedWrapperPage = (props: Props) => {
}
}, [uri, haveClaim, doFetchCostInfoForUri]);
// Find out current channels status + active live claim every 30 seconds
React.useEffect(() => {
if (!channelClaim || !livestreamsFetched) return;
const { claim_id: channelClaimId } = channelClaim || {};
doFetchChannelLiveStatus(channelClaimId);
const intervalId = setInterval(() => doFetchChannelLiveStatus(channelClaimId), LIVESTREAM_STATUS_CHECK_INTERVAL);
return () => clearInterval(intervalId);
}, [livestreamsFetched, channelClaim, doFetchChannelLiveStatus]);
useFetchLiveStatus(livestreamsFetched ? channelClaimId : undefined, doFetchChannelLiveStatus);
if (isClaimBlackListed) {
return (
@ -190,22 +192,23 @@ const EmbedWrapperPage = (props: Props) => {
);
}
if (isLiveClaimNotPlaying) {
return (
<div
className={
isLiveClaimStopped
? 'embed__inline-button'
: classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })
}
style={
isLiveClaimStopped
? thumbnail && !obscurePreview
? { backgroundImage: `url("${thumbnail}")`, height: '100%' }
: {}
: undefined
}
className="embed__inline-button"
style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")`, height: '100%' } : {}}
>
{!isLiveClaimStopped ? (
<FileViewerEmbeddedTitle uri={uri} />
<a target="_blank" rel="noopener noreferrer" href={formatLbryUrlForWeb(uri)}>
<Button iconSize={30} title={__('View')} className="button--icon button--view" />
</a>
</div>
);
}
return (
<div className={classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })}>
<EmbedContext.Provider value>
{readyToDisplay ? (
<FileRender uri={uri} embedded />
@ -214,11 +217,11 @@ const EmbedWrapperPage = (props: Props) => {
<FileViewerEmbeddedTitle uri={uri} />
<div className="embed__loading-text">
{(loading || (!claim && !noContentFound)) && <Spinner delayed light />}
{(loading || (!haveClaim && !noContentFound)) && <Spinner delayed light />}
{noContentFound && <h1>{__('No content found.')}</h1>}
{isPaidContent && (
{hasCost && (
<div>
<h1>{__('Paid content cannot be embedded.')}</h1>
<div className="section__actions--centered">
@ -230,17 +233,6 @@ const EmbedWrapperPage = (props: Props) => {
</div>
)}
</EmbedContext.Provider>
) : (
<>
<FileViewerEmbeddedTitle uri={uri} />
<a target="_blank" rel="noopener noreferrer" href={formatLbryUrlForWeb(uri)}>
<Button iconSize={30} title={__('View')} className="button--icon button--view" />
</a>
</>
)}
</div>
);
};
export default EmbedWrapperPage;
}

21
ui/page/livestream/view.jsx
View file

@ -1,18 +1,14 @@
// @flow
import { formatLbryChannelName } from 'util/url';
import { lazyImport } from 'util/lazyImport';
import {
LIVESTREAM_STATUS_CHECK_INTERVAL,
LIVESTREAM_STATUS_CHECK_INTERVAL_SOON,
LIVESTREAM_STARTS_SOON_BUFFER,
LIVESTREAM_STARTED_RECENTLY_BUFFER,
} from 'constants/livestream';
import { LIVESTREAM_STARTS_SOON_BUFFER, LIVESTREAM_STARTED_RECENTLY_BUFFER } from 'constants/livestream';
import analytics from 'analytics';
import LivestreamLayout from 'component/livestreamLayout';
import moment from 'moment';
import Page from 'component/page';
import React from 'react';
import { useIsMobile } from 'effects/use-screensize';
import useFetchLiveStatus from 'effects/use-fetch-live';
const LivestreamChatLayout = lazyImport(() => import('component/livestreamChatLayout' /* webpackChunkName: "chat" */));
@ -100,18 +96,7 @@ export default function LivestreamPage(props: Props) {
// Find out current channels status + active live claim every 30 seconds (or 15 if not live)
const fasterPoll = !isCurrentClaimLive && (claimReleaseStartingSoonStatic() || claimReleaseStartedRecentlyStatic());
React.useEffect(() => {
const fetch = () => doFetchChannelLiveStatus(livestreamChannelId);
fetch();
const intervalId = setInterval(
fetch,
fasterPoll ? LIVESTREAM_STATUS_CHECK_INTERVAL_SOON : LIVESTREAM_STATUS_CHECK_INTERVAL
);
return () => clearInterval(intervalId);
}, [livestreamChannelId, doFetchChannelLiveStatus, fasterPoll]);
useFetchLiveStatus(livestreamChannelId, doFetchChannelLiveStatus, fasterPoll);
React.useEffect(() => {
setActiveStreamUri(!isCurrentClaimLive && isChannelBroadcasting ? activeLivestreamForChannel.claimUri : false);