lbry-desktop/ui/page/embedWrapper/view.jsx

129 lines
3.8 KiB
React
Raw Normal View History

// @flow
2020-04-14 01:48:11 +02:00
import React, { useEffect } from 'react';
import classnames from 'classnames';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import Spinner from 'component/spinner';
import Button from 'component/button';
2020-11-10 07:23:08 +01:00
import Card from 'component/common/card';
import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
2021-06-11 08:06:29 +02:00
const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
type Props = {
uri: string,
resolveUri: (string) => void,
claim: Claim,
doPlayUri: (string) => void,
2020-05-22 03:26:46 +02:00
costInfo: any,
streamingUrl: string,
doFetchCostInfoForUri: (string) => void,
2020-05-22 03:26:46 +02:00
isResolvingUri: boolean,
2020-11-10 07:23:08 +01:00
blackListedOutpoints: Array<{
txid: string,
nout: number,
}>,
};
export const EmbedContext = React.createContext<any>();
const EmbedWrapperPage = (props: Props) => {
2020-11-10 07:23:08 +01:00
const {
resolveUri,
claim,
uri,
doPlayUri,
costInfo,
streamingUrl,
doFetchCostInfoForUri,
isResolvingUri,
blackListedOutpoints,
} = props;
const {
location: { search },
} = useHistory();
const urlParams = new URLSearchParams(search);
const embedLightBackground = urlParams.get('embedBackgroundLight');
2020-05-21 23:11:56 +02:00
const haveClaim = Boolean(claim);
const readyToDisplay = claim && streamingUrl;
const loading = !claim && isResolvingUri;
const noContentFound = !claim && !isResolvingUri;
const isPaidContent = costInfo && costInfo.cost > 0;
const contentLink = formatLbryUrlForWeb(uri);
2020-11-10 07:23:08 +01:00
const signingChannel = claim && claim.signing_channel;
const isClaimBlackListed =
claim &&
blackListedOutpoints &&
blackListedOutpoints.some(
(outpoint) =>
2020-11-10 07:23:08 +01:00
(signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
(outpoint.txid === claim.txid && outpoint.nout === claim.nout)
);
2020-01-31 20:33:40 +01:00
useEffect(() => {
2020-05-21 23:11:56 +02:00
if (resolveUri && uri && !haveClaim) {
resolveUri(uri);
}
2020-05-22 03:26:46 +02:00
if (uri && haveClaim && costInfo && costInfo.cost === 0) {
2020-05-21 23:11:56 +02:00
doPlayUri(uri);
}
2020-05-22 03:26:46 +02:00
}, [resolveUri, uri, doPlayUri, haveClaim, costInfo]);
useEffect(() => {
if (haveClaim && uri && doFetchCostInfoForUri) {
doFetchCostInfoForUri(uri);
}
}, [uri, haveClaim, doFetchCostInfoForUri]);
2020-11-10 07:23:08 +01:00
if (isClaimBlackListed) {
return (
<Card
title={uri}
subtitle={__(
'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
)}
actions={
<div className="section__actions">
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div>
}
/>
);
}
2020-01-31 19:25:48 +01:00
return (
<div
className={classnames('embed__wrapper', {
'embed__wrapper--light-background': embedLightBackground,
})}
>
2020-05-22 03:26:46 +02:00
<EmbedContext.Provider value>
{readyToDisplay ? (
2021-06-11 08:06:29 +02:00
<React.Suspense fallback={null}>
<FileRender uri={uri} embedded />
</React.Suspense>
) : (
<div className="embed__loading">
<FileViewerEmbeddedTitle uri={uri} />
<div className="embed__loading-text">
2020-05-26 18:26:55 +02:00
{loading && <Spinner delayed light />}
{noContentFound && <h1>{__('No content found.')}</h1>}
{isPaidContent && (
<div>
<h1>{__('Paid content cannot be embedded.')}</h1>
<div className="section__actions--centered">
2020-05-26 20:42:44 +02:00
<Button label={__('Watch on lbry.tv')} button="primary" href={contentLink} />
</div>
</div>
)}
</div>
</div>
)}
2020-05-22 03:26:46 +02:00
</EmbedContext.Provider>
2020-01-31 19:25:48 +01:00
</div>
);
};
export default EmbedWrapperPage;