From cba2ccf1cb04d21c1a109675064dca61e087a348 Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Mon, 13 Jul 2020 20:57:03 +0800 Subject: [PATCH] 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 " 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 --- CHANGELOG.md | 1 + static/app-strings.json | 1 + ui/component/youtubeBadge/index.js | 8 +++++ ui/component/youtubeBadge/view.jsx | 50 ++++++++++++++++++++++++++++++ ui/page/channel/view.jsx | 23 ++------------ ui/page/file/view.jsx | 8 +++++ 6 files changed, 70 insertions(+), 21 deletions(-) create mode 100644 ui/component/youtubeBadge/index.js create mode 100644 ui/component/youtubeBadge/view.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 64af1d476..4c9c2abdc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/static/app-strings.json b/static/app-strings.json index 49f1ceb15..852f45e4c 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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", diff --git a/ui/component/youtubeBadge/index.js b/ui/component/youtubeBadge/index.js new file mode 100644 index 000000000..9e345ec82 --- /dev/null +++ b/ui/component/youtubeBadge/index.js @@ -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); diff --git a/ui/component/youtubeBadge/view.jsx b/ui/component/youtubeBadge/view.jsx new file mode 100644 index 000000000..800b7938d --- /dev/null +++ b/ui/component/youtubeBadge/view.jsx @@ -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 ( +
+ + {str} +
+ ); + } else { + return null; + } +} diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index 8b0d3f7f9..82c3fd2e1 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -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 ( - - {lastYtSyncDate && ( -
- - {__('Official YouTube Creator - Last updated %time_ago%', { - time_ago: DateTime.getTimeAgoStr(lastYtSyncDate), - })} -
- )} +
{!channelIsBlocked && !channelIsBlackListed && } diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx index 2242bb53b..53d067432 100644 --- a/ui/page/file/view.jsx +++ b/ui/page/file/view.jsx @@ -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 { } 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 ( +
@@ -95,6 +100,7 @@ class FilePage extends React.Component { return ( + @@ -105,6 +111,7 @@ class FilePage extends React.Component { return ( + @@ -115,6 +122,7 @@ class FilePage extends React.Component { return ( +