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

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
 

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",

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);

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 (
+      <div className="media__uri--right">
+        <Icon icon={ICONS.VALIDATED} size={12} />
+        {str}
+      </div>
+    );
+  } else {
+    return null;
+  }
+}

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 (
     <Page noFooter>
       <ClaimUri uri={uri} />
-
+      <YoutubeBadge channelClaimId={claimId} />
-      {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>
-      )}
       <header className="channel-cover">
         <div className="channel__quick-actions">
           {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}

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<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} />