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 (
+