Show "YT Creator" label in File Page as well.

## Issue
Closes 3964 `Add Youtuber info to file page`

## Changes
(1) Refactor the YT-info query into `YoutubeBadge` component.
(2) For the File Page case, don't show "- last sync <date>" since the date has nothing to do with the file.

## Test
[x] YT Channel page
[x] YT Channel's claim page
[x] Non YT Channel page
[x] Non YT Channel's claim page
[x] No channel (anonymous) claim page
[x] Various RENDER_MODES
This commit is contained in:
infiinte-persistence 2020-07-13 20:57:03 +08:00 committed by Sean Yesmunt
parent 2fdc4376bf
commit cba2ccf1cb
6 changed files with 70 additions and 21 deletions

View file

@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Added
- Allow zooming on Desktop _community pr!_ ([#4513](https://github.com/lbryio/lbry-desktop/pull/4513))
- Show "YT Creator" label in File Page as well _community pr!_ ([#4523](https://github.com/lbryio/lbry-desktop/pull/4523))
### Changed

View file

@ -783,6 +783,7 @@
"Woohoo! Successfully reposted this claim.": "Woohoo! Successfully reposted this claim.",
"There was an error reposting this claim. Please try again later.": "There was an error reposting this claim. Please try again later.",
"Claim ID": "Claim ID",
"Official YouTube Creator": "Official YouTube Creator",
"Official YouTube Creator - Last updated %time_ago%": "Official YouTube Creator - Last updated %time_ago%",
"Install Now": "Install Now",
"Invite Link": "Invite Link",

View file

@ -0,0 +1,8 @@
import { connect } from 'react-redux';
import YoutubeBadge from './view';
const select = state => ({});
const perform = dispatch => ({});
export default connect(select, perform)(YoutubeBadge);

View file

@ -0,0 +1,50 @@
// @flow
import * as ICONS from 'constants/icons';
import * as React from 'react';
import DateTime from 'component/dateTime';
import Icon from 'component/common/icon';
import { Lbryio } from 'lbryinc';
type Props = {
channelClaimId: string,
includeSyncDate: boolean,
};
export default function YoutubeBadge(props: Props) {
const { channelClaimId, includeSyncDate = true } = props;
const [isVerified, setIsVerified] = React.useState();
const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
React.useEffect(() => {
if (channelClaimId) {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: channelClaimId }).then(response => {
if (response.is_verified_youtuber) {
setIsVerified(true);
setLastYtSyncDate(response.last_synced);
} else {
setIsVerified(false);
setLastYtSyncDate(undefined);
}
});
} else {
setIsVerified(false);
setLastYtSyncDate(undefined);
}
}, [channelClaimId]);
if (isVerified) {
const str =
includeSyncDate && lastYtSyncDate
? __('Official YouTube Creator - Last updated %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
: __('Official YouTube Creator');
return (
<div className="media__uri--right">
<Icon icon={ICONS.VALIDATED} size={12} />
{str}
</div>
);
} else {
return null;
}
}

View file

@ -2,7 +2,6 @@
import * as ICONS from 'constants/icons';
import React from 'react';
import { parseURI } from 'lbry-redux';
import { Lbryio } from 'lbryinc';
import Page from 'component/page';
import SubscribeButton from 'component/subscribeButton';
import BlockButton from 'component/blockButton';
@ -18,10 +17,9 @@ import ChannelThumbnail from 'component/channelThumbnail';
import ChannelEdit from 'component/channelEdit';
import ClaimUri from 'component/claimUri';
import classnames from 'classnames';
import Icon from 'component/common/icon';
import HelpLink from 'component/common/help-link';
import DateTime from 'component/dateTime';
import ClaimSupportButton from 'component/claimSupportButton';
import YoutubeBadge from 'component/youtubeBadge';
const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
@ -72,7 +70,6 @@ function ChannelPage(props: Props) {
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
const editInUrl = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
const [editing, setEditing] = React.useState(editInUrl);
const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
const { channelName } = parseURI(uri);
const { permanent_url: permanentUrl } = claim;
const claimId = claim.claim_id;
@ -128,14 +125,6 @@ function ChannelPage(props: Props) {
}
}, [currentView, setEditing]);
React.useEffect(() => {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
if (response.is_verified_youtuber) {
setLastYtSyncDate(response.last_synced);
}
});
}, [claimId]);
React.useEffect(() => {
fetchSubCount(claimId);
}, [uri, fetchSubCount, claimId]);
@ -159,15 +148,7 @@ function ChannelPage(props: Props) {
return (
<Page noFooter>
<ClaimUri uri={uri} />
{lastYtSyncDate && (
<div className="media__uri--right">
<Icon icon={ICONS.VALIDATED} size={12} />
{__('Official YouTube Creator - Last updated %time_ago%', {
time_ago: DateTime.getTimeAgoStr(lastYtSyncDate),
})}
</div>
)}
<YoutubeBadge channelClaimId={claimId} />
<header className="channel-cover">
<div className="channel__quick-actions">
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}

View file

@ -16,6 +16,7 @@ import WaitUntilOnPage from 'component/common/wait-until-on-page';
import RecommendedContent from 'component/recommendedContent';
import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate';
import YoutubeBadge from 'component/youtubeBadge';
export const FILE_WRAPPER_CLASS = 'file-page__video-container';
@ -78,10 +79,14 @@ class FilePage extends React.Component<Props> {
}
renderFilePageLayout(uri: string, mode: string, cost: ?number) {
const { claim } = this.props;
const channelClaimId = claim.signing_channel ? claim.signing_channel.claim_id : null;
if (RENDER_MODES.FLOATING_MODES.includes(mode)) {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<div className={FILE_WRAPPER_CLASS}>
<FileRenderInitiator uri={uri} />
</div>
@ -95,6 +100,7 @@ class FilePage extends React.Component<Props> {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment>
@ -105,6 +111,7 @@ class FilePage extends React.Component<Props> {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
@ -115,6 +122,7 @@ class FilePage extends React.Component<Props> {
return (
<React.Fragment>
<ClaimUri uri={uri} />
<YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
<FileTitle uri={uri} />