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

248 lines
7.9 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-02-12 20:10:35 +01:00
import * as ICONS from 'constants/icons';
import React, { useState, useEffect } from 'react';
2019-05-07 04:35:04 +02:00
import { parseURI } from 'lbry-redux';
2020-02-12 20:10:35 +01:00
import { Lbryio } from 'lbryinc';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
2019-05-07 04:35:04 +02:00
import SubscribeButton from 'component/subscribeButton';
import BlockButton from 'component/blockButton';
2019-05-07 04:35:04 +02:00
import ShareButton from 'component/shareButton';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { withRouter } from 'react-router';
import Button from 'component/button';
import { formatLbryUrlForWeb } from 'util/url';
2019-05-07 04:35:04 +02:00
import ChannelContent from 'component/channelContent';
import ChannelAbout from 'component/channelAbout';
import ChannelDiscussion from 'component/channelDiscussion';
2019-05-07 04:35:04 +02:00
import ChannelThumbnail from 'component/channelThumbnail';
2019-07-02 19:54:42 +02:00
import ChannelEdit from 'component/channelEdit';
2019-07-08 20:58:33 +02:00
import ClaimUri from 'component/claimUri';
import classnames from 'classnames';
2019-09-16 07:32:02 +02:00
import Icon from 'component/common/icon';
2019-10-03 23:40:54 +02:00
import HelpLink from 'component/common/help-link';
import DateTime from 'component/dateTime';
2020-06-08 20:42:29 +02:00
import ClaimSupportButton from 'component/claimSupportButton';
2019-05-07 04:35:04 +02:00
const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
const DISCUSSION_PAGE = `discussion`;
2017-05-04 05:44:08 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
uri: string,
2019-07-17 22:49:06 +02:00
claim: ChannelClaim,
2019-05-07 04:35:04 +02:00
title: ?string,
cover: ?string,
thumbnail: ?string,
page: number,
2019-05-07 04:35:04 +02:00
location: { search: string },
2019-04-04 23:05:23 +02:00
history: { push: string => void },
2019-05-07 04:35:04 +02:00
match: { params: { attribute: ?string } },
channelIsMine: boolean,
isSubscribed: boolean,
channelIsBlocked: boolean,
blackListedOutpoints: Array<{
txid: string,
nout: number,
}>,
fetchSubCount: string => void,
subCount: number,
2020-06-21 18:51:06 +02:00
pending: boolean,
2018-03-26 23:32:43 +02:00
};
2019-03-28 17:53:13 +01:00
function ChannelPage(props: Props) {
const {
uri,
title,
cover,
history,
location,
page,
channelIsMine,
thumbnail,
claim,
isSubscribed,
channelIsBlocked,
blackListedOutpoints,
fetchSubCount,
subCount,
2020-06-21 18:51:06 +02:00
pending,
} = props;
2019-09-19 22:32:45 +02:00
2019-07-08 20:58:33 +02:00
const { channelName } = parseURI(uri);
2019-03-28 17:53:13 +01:00
const { search } = location;
const urlParams = new URLSearchParams(search);
2019-05-07 04:35:04 +02:00
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
const [coverError, setCoverError] = useState(false);
2019-07-17 22:49:06 +02:00
const { permanent_url: permanentUrl } = claim;
const [editing, setEditing] = useState(false);
const [thumbPreview, setThumbPreview] = useState(thumbnail);
const [coverPreview, setCoverPreview] = useState(cover);
2020-02-12 20:10:35 +01:00
const [lastYtSyncDate, setLastYtSyncDate] = useState();
2019-09-27 05:52:04 +02:00
const claimId = claim.claim_id;
2020-05-25 18:19:15 +02:00
const formattedSubCount = Number(subCount).toLocaleString();
2019-05-07 04:35:04 +02:00
// If a user changes tabs, update the url so it stays on the same page if they refresh.
// We don't want to use links here because we can't animate the tab change and using links
// would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
const tabIndex = currentView === ABOUT_PAGE || editing ? 1 : currentView === DISCUSSION_PAGE ? 2 : 0;
2019-09-16 07:32:02 +02:00
function onTabChange(newTabIndex) {
let url = formatLbryUrlForWeb(uri);
let search = '?';
if (newTabIndex === 0) {
search += `page=${page}`;
} else if (newTabIndex === 1) {
search += `${PAGE_VIEW_QUERY}=${ABOUT_PAGE}`;
} else {
search += `${PAGE_VIEW_QUERY}=${DISCUSSION_PAGE}`;
2017-08-24 23:12:23 +02:00
}
history.push(`${url}${search}`);
2019-09-16 07:32:02 +02:00
}
2020-06-21 18:51:06 +02:00
function doneEditing() {
setEditing(false);
setThumbPreview(thumbnail);
setCoverPreview(cover);
}
2020-02-12 20:10:35 +01:00
useEffect(() => {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
if (response.is_verified_youtuber) {
setLastYtSyncDate(response.last_synced);
}
});
}, [claimId]);
let channelIsBlackListed = false;
if (claim && blackListedOutpoints) {
channelIsBlackListed = blackListedOutpoints.some(
outpoint => outpoint.txid === claim.txid && outpoint.nout === claim.nout
);
}
React.useEffect(() => {
2019-09-27 05:52:04 +02:00
fetchSubCount(claimId);
}, [uri, fetchSubCount, claimId]);
React.useEffect(() => {
if (!channelIsMine && editing) {
setEditing(false);
}
}, [channelIsMine, editing]);
2019-03-28 17:53:13 +01:00
return (
2020-05-15 16:19:37 +02:00
<Page noFooter>
2020-01-02 23:30:58 +01:00
<ClaimUri uri={uri} />
2020-02-12 20:10:35 +01:00
{lastYtSyncDate && (
<div className="media__uri--right">
<Icon icon={ICONS.VALIDATED} size={12} />
{__('Official YouTube Creator - Last updated %time_ago%', {
time_ago: DateTime.getTimeAgoStr(lastYtSyncDate),
})}
2020-02-12 20:10:35 +01:00
</div>
)}
2020-01-03 17:36:15 +01:00
<header className="channel-cover">
<div className="channel__quick-actions">
2020-03-27 19:57:03 +01:00
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
2020-06-08 20:42:29 +02:00
{!channelIsBlocked && <ClaimSupportButton uri={uri} />}
2020-01-03 17:36:15 +01:00
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />}
</div>
{!editing && cover && !coverError && (
2020-01-03 17:36:15 +01:00
<img
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
src={cover}
onError={() => setCoverError(true)}
2020-01-03 17:36:15 +01:00
/>
)}
{editing && <img className="channel-cover__custom" src={coverPreview} />}
{/* component that offers select/upload */}
<div className="channel__primary-info">
{!editing && (
2020-05-28 19:07:04 +02:00
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
obscure={channelIsBlocked}
allowGifs
/>
2020-01-03 17:36:15 +01:00
)}
{editing && (
2020-05-28 19:07:04 +02:00
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
thumbnailPreview={thumbPreview}
allowGifs
/>
2020-01-03 17:36:15 +01:00
)}
<h1 className="channel__title">{title || '@' + channelName}</h1>
<div className="channel__meta">
<span>
2020-05-25 18:19:15 +02:00
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
2020-01-03 17:36:15 +01:00
<HelpLink href="https://lbry.com/faq/views" />
</span>
2020-05-04 17:38:35 +02:00
{channelIsMine && !editing && (
2020-06-21 18:51:06 +02:00
<>
{pending ? (
<span>{__('Your changes will be live in a few minutes')}</span>
) : (
<Button
button="alt"
title={__('Edit')}
onClick={() => setEditing(!editing)}
icon={ICONS.EDIT}
iconSize={18}
disabled={pending}
/>
)}
</>
)}
{channelIsMine && editing && (
2020-05-04 17:38:35 +02:00
<Button
button="alt"
2020-06-21 18:51:06 +02:00
title={__('Cancel')}
onClick={() => doneEditing()}
icon={ICONS.REMOVE}
2020-05-04 17:38:35 +02:00
iconSize={18}
/>
)}
2020-01-03 17:36:15 +01:00
</div>
</div>
<div className="channel-cover__gradient" />
2020-01-03 17:36:15 +01:00
</header>
<Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--channel-page">
<Tab disabled={editing}>{__('Content')}</Tab>
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
<Tab disabled={editing}>{__('Comments')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
2020-01-03 17:36:15 +01:00
</TabPanel>
<TabPanel>
{editing ? (
<ChannelEdit
uri={uri}
2020-06-21 18:51:06 +02:00
doneEditing={doneEditing}
2020-01-03 17:36:15 +01:00
updateThumb={v => setThumbPreview(v)}
updateCover={v => setCoverPreview(v)}
/>
) : (
2020-01-03 17:36:15 +01:00
<ChannelAbout uri={uri} />
)}
2020-01-03 17:36:15 +01:00
</TabPanel>
<TabPanel>
<ChannelDiscussion uri={uri} />
</TabPanel>
</TabPanels>
</Tabs>
2019-03-28 17:53:13 +01:00
</Page>
);
2017-05-04 05:44:08 +02:00
}
2019-04-04 23:05:23 +02:00
export default withRouter(ChannelPage);