fix embed fetching state and geoblocking
This commit is contained in:
parent
d3576315f3
commit
0682f52d45
2 changed files with 22 additions and 7 deletions
|
@ -1,6 +1,6 @@
|
|||
import { connect } from 'react-redux';
|
||||
import EmbedWrapperPage from './view';
|
||||
import { selectClaimForUri, selectIsUriResolving } from 'redux/selectors/claims';
|
||||
import { selectClaimForUri, selectIsUriResolving, selectGeoRestrictionForUri } from 'redux/selectors/claims';
|
||||
import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
|
||||
import { doResolveUri } from 'redux/actions/claims';
|
||||
import { buildURI } from 'util/lbryURI';
|
||||
|
@ -9,7 +9,7 @@ import { selectShouldObscurePreviewForUri } from 'redux/selectors/content';
|
|||
import { selectCostInfoForUri, doFetchCostInfoForUri, selectBlackListedOutpoints } from 'lbryinc';
|
||||
import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
|
||||
import { doFetchActiveLivestreams, doFetchChannelLiveStatus } from 'redux/actions/livestream';
|
||||
import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
|
||||
import { selectIsActiveLivestreamForUri, selectActiveLivestreamInitialized } from 'redux/selectors/livestream';
|
||||
import { getThumbnailFromClaim, isStreamPlaceholderClaim } from 'util/claim';
|
||||
|
||||
const select = (state, props) => {
|
||||
|
@ -32,6 +32,8 @@ const select = (state, props) => {
|
|||
isLivestreamClaim: isStreamPlaceholderClaim(claim),
|
||||
obscurePreview: selectShouldObscurePreviewForUri(state, uri),
|
||||
claimThumbnail: getThumbnailFromClaim(claim),
|
||||
activeLivestreamInitialized: selectActiveLivestreamInitialized(state),
|
||||
geoRestriction: selectGeoRestrictionForUri(state, uri),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ import Card from 'component/common/card';
|
|||
import { formatLbryUrlForWeb, formatLbryChannelName } from 'util/url';
|
||||
import { useHistory } from 'react-router';
|
||||
import { getThumbnailCdnUrl } from 'util/thumbnail';
|
||||
import Yrbl from 'component/yrbl';
|
||||
// $FlowFixMe cannot resolve ...
|
||||
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
|
||||
|
||||
|
@ -26,6 +27,8 @@ type Props = {
|
|||
isLivestreamClaim: boolean,
|
||||
claimThumbnail?: string,
|
||||
obscurePreview: boolean,
|
||||
activeLivestreamInitialized: boolean,
|
||||
geoRestriction: ?GeoRestriction,
|
||||
doResolveUri: (uri: string) => void,
|
||||
doPlayUri: (uri: string) => void,
|
||||
doFetchCostInfoForUri: (uri: string) => void,
|
||||
|
@ -49,6 +52,8 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
isLivestreamClaim,
|
||||
claimThumbnail,
|
||||
obscurePreview,
|
||||
activeLivestreamInitialized,
|
||||
geoRestriction,
|
||||
doResolveUri,
|
||||
doPlayUri,
|
||||
doFetchCostInfoForUri,
|
||||
|
@ -60,7 +65,6 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
|
||||
const {
|
||||
location: { search },
|
||||
push,
|
||||
} = useHistory();
|
||||
|
||||
const { claim_id: claimId, canonical_url: canonicalUrl, signing_channel: channelClaim } = claim || {};
|
||||
|
@ -74,8 +78,10 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
const embedLightBackground = urlParams.get('embedBackgroundLight');
|
||||
const haveClaim = Boolean(claim);
|
||||
const readyToDisplay = isCurrentClaimLive || (claim && streamingUrl);
|
||||
const loading = !claim && isResolvingUri;
|
||||
const noContentFound = !claim && !isResolvingUri;
|
||||
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 contentLink = formatLbryUrlForWeb(uri);
|
||||
const signingChannel = claim && claim.signing_channel;
|
||||
|
@ -87,7 +93,6 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
(signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
|
||||
(outpoint.txid === claim.txid && outpoint.nout === claim.nout)
|
||||
);
|
||||
const isLiveClaimStopped = isLivestreamClaim && !readyToDisplay;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!claimThumbnail) return;
|
||||
|
@ -177,6 +182,14 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
);
|
||||
}
|
||||
|
||||
if (geoRestriction) {
|
||||
return (
|
||||
<div className="main--empty">
|
||||
<Yrbl title={__('Content unavailable')} subtitle={__(geoRestriction.message || '')} type="sad" alwaysShow />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
|
@ -201,7 +214,7 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
<FileViewerEmbeddedTitle uri={uri} />
|
||||
|
||||
<div className="embed__loading-text">
|
||||
{loading && <Spinner delayed light />}
|
||||
{(loading || (!claim && !noContentFound)) && <Spinner delayed light />}
|
||||
|
||||
{noContentFound && <h1>{__('No content found.')}</h1>}
|
||||
|
||||
|
|
Loading…
Reference in a new issue