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

165 lines
5.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import { DOMAIN } from 'config';
2021-04-08 23:10:39 +02:00
import * as PAGES from 'constants/pages';
2019-10-17 21:09:03 +02:00
import React, { useEffect } from 'react';
2021-04-08 23:10:39 +02:00
import { Redirect, useHistory } from 'react-router-dom';
2020-09-02 22:08:37 +02:00
import Spinner from 'component/spinner';
import ChannelPage from 'page/channel';
import FilePage from 'page/file';
2021-03-15 21:50:54 +01:00
import LivestreamPage from 'page/livestream';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
2018-04-24 20:17:11 +02:00
import Button from 'component/button';
2019-12-13 22:46:28 +01:00
import Card from 'component/common/card';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
2021-03-25 07:48:29 +01:00
import Yrbl from 'component/yrbl';
2020-02-14 17:42:38 +01:00
import { formatLbryUrlForWeb } from 'util/url';
2021-03-25 07:48:29 +01:00
import { parseURI } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
type Props = {
isResolvingUri: boolean,
resolveUri: (string) => void,
isSubscribed: boolean,
2018-03-26 23:32:43 +02:00
uri: string,
2019-04-24 16:02:08 +02:00
claim: StreamClaim,
2019-03-28 17:53:13 +01:00
location: UrlLocation,
2018-04-24 20:17:11 +02:00
blackListedOutpoints: Array<{
txid: string,
nout: number,
}>,
2019-10-17 21:09:03 +02:00
title: string,
2020-07-02 18:47:36 +02:00
claimIsMine: boolean,
claimIsPending: boolean,
isLivestream: boolean,
2021-03-25 07:48:29 +01:00
beginPublish: (string) => void,
2018-03-26 23:32:43 +02:00
};
2019-10-17 21:09:03 +02:00
function ShowPage(props: Props) {
2020-07-02 18:47:36 +02:00
const {
isResolvingUri,
resolveUri,
uri,
claim,
blackListedOutpoints,
location,
claimIsMine,
isSubscribed,
claimIsPending,
isLivestream,
2021-03-25 07:48:29 +01:00
beginPublish,
2020-07-02 18:47:36 +02:00
} = props;
2019-10-17 21:09:03 +02:00
const signingChannel = claim && claim.signing_channel;
2019-11-15 16:13:19 +01:00
const canonicalUrl = claim && claim.canonical_url;
2019-11-19 18:41:31 +01:00
const claimExists = claim !== null && claim !== undefined;
const haventFetchedYet = claim === undefined;
const isMine = claim && claim.is_my_output;
2021-04-12 18:04:18 +02:00
const { contentName, isChannel } = parseURI(uri);
2021-04-08 23:10:39 +02:00
const { push } = useHistory();
2017-05-12 01:28:43 +02:00
2019-10-17 21:09:03 +02:00
useEffect(() => {
2019-10-13 19:19:39 +02:00
// @if TARGET='web'
2019-11-15 16:13:19 +01:00
if (canonicalUrl) {
const canonicalUrlPath = '/' + canonicalUrl.replace(/^lbry:\/\//, '').replace(/#/g, ':');
// Only redirect if we are in lbry.tv land
// replaceState will fail if on a different domain (like webcache.googleusercontent.com)
if (canonicalUrlPath !== window.location.pathname && DOMAIN === window.location.hostname) {
2019-10-13 19:19:39 +02:00
history.replaceState(history.state, '', canonicalUrlPath);
}
}
// @endif
2019-11-15 16:13:19 +01:00
if (
(resolveUri && !isResolvingUri && uri && haventFetchedYet) ||
2020-07-02 18:47:36 +02:00
(claimExists && !claimIsPending && (!canonicalUrl || isMine === undefined))
) {
resolveUri(uri);
}
2020-07-02 18:47:36 +02:00
}, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, history, isMine, claimIsPending]);
2020-02-14 17:42:38 +01:00
// Don't navigate directly to repost urls
// Always redirect to the actual content
// Also need to add repost_url to the Claim type for flow
// $FlowFixMe
if (claim && claim.repost_url === uri) {
const newUrl = formatLbryUrlForWeb(claim.canonical_url);
return <Redirect to={newUrl} />;
}
2020-02-14 17:42:38 +01:00
let innerContent = '';
2019-10-17 21:09:03 +02:00
if (!claim || (claim && !claim.name)) {
innerContent = (
<Page>
2020-09-02 22:08:37 +02:00
{(claim === undefined || isResolvingUri) && (
<div className="main--empty">
2021-03-25 07:48:29 +01:00
<Spinner delayed />
2020-09-02 22:08:37 +02:00
</div>
)}
{!isResolvingUri && !isSubscribed && (
2021-03-25 07:48:29 +01:00
<div className="main--empty">
<Yrbl
2021-04-12 18:04:18 +02:00
title={isChannel ? __('Channel Not Found') : __('No Content Found')}
2021-03-25 07:48:29 +01:00
subtitle={
2021-04-12 18:04:18 +02:00
isChannel ? (
2021-04-08 23:10:39 +02:00
__(`Probably because you didn't make it.`)
) : (
<div className="section__actions">
<Button
button="primary"
label={__('Publish Something')}
onClick={() => beginPublish(contentName)}
/>
<Button
button="secondary"
onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${contentName}`)}
label={__('Repost Something')}
/>
</div>
)
2021-03-25 07:48:29 +01:00
}
/>
</div>
)}
{!isResolvingUri && isSubscribed && claim === null && <AbandonedChannelPreview uri={uri} type={'large'} />}
2019-10-17 21:09:03 +02:00
</Page>
);
} else if (claim.name.length && claim.name[0] === '@') {
innerContent = <ChannelPage uri={uri} location={location} />;
} else if (claim) {
2019-10-17 21:09:03 +02:00
let isClaimBlackListed = false;
isClaimBlackListed =
blackListedOutpoints &&
blackListedOutpoints.some(
(outpoint) =>
(signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
(outpoint.txid === claim.txid && outpoint.nout === claim.nout)
);
2019-03-04 17:57:07 +01:00
if (isClaimBlackListed && !claimIsMine) {
2019-12-13 22:46:28 +01:00
innerContent = (
<Page>
<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={
2020-05-01 19:55:42 +02:00
<div className="section__actions">
2019-12-13 22:46:28 +01:00
<Button button="link" href="https://lbry.com/faq/dmca" label={__('Read More')} />
</div>
}
/>
</Page>
);
2021-03-23 01:57:46 +01:00
} else if (isLivestream) {
innerContent = <LivestreamPage uri={uri} />;
2019-10-17 21:09:03 +02:00
} else {
2019-12-13 22:46:28 +01:00
innerContent = <FilePage uri={uri} location={location} />;
}
2017-05-10 05:06:48 +02:00
}
2019-10-17 21:09:03 +02:00
return innerContent;
}
2017-06-06 06:21:55 +02:00
export default ShowPage;