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:
parent
2fdc4376bf
commit
cba2ccf1cb
6 changed files with 70 additions and 21 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
8
ui/component/youtubeBadge/index.js
Normal file
8
ui/component/youtubeBadge/index.js
Normal 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);
|
50
ui/component/youtubeBadge/view.jsx
Normal file
50
ui/component/youtubeBadge/view.jsx
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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} />}
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in a new issue