From c9e759fc9f85616df24d8edcc925b4d3a60da4aa Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 12 Feb 2020 14:10:35 -0500
Subject: [PATCH] add youtube verified message

---
 static/app-strings.json             |  7 ++++++-
 ui/component/common/icon-custom.jsx |  5 +++++
 ui/constants/icons.js               |  1 +
 ui/page/channel/view.jsx            | 21 +++++++++++++++++++--
 ui/scss/component/_media.scss       |  6 ++++++
 5 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 22747666f..86a06ed2d 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -936,5 +936,10 @@
   "community name": "community name",
   "Change this to repost to a different %lbry_naming_link%.": "Change this to repost to a different %lbry_naming_link%.",
   "Reposting": "Reposting",
-  "Woohoo! Sucessfully reposted this claim.": "Woohoo! Sucessfully reposted this claim."
+  "Woohoo! Sucessfully reposted this claim.": "Woohoo! Sucessfully reposted this claim.",
+  "Bid Amount": "Bid Amount",
+  "Effective Amount": "Effective Amount",
+  "Is Controlling": "Is Controlling",
+  "Claim ID": "Claim ID",
+  "Official YouTube Creator - Last updated %time_ago%": "Official YouTube Creator - Last updated %time_ago%"
 }
\ No newline at end of file
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 9d7ec28d0..1f4134544 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -407,4 +407,9 @@ export const icons = {
       <circle cx="12" cy="19" r="1" />
     </g>
   ),
+  [ICONS.VALIDATED]: buildIcon(
+    <g>
+      <polyline points="20 6 9 17 4 12" />
+    </g>
+  ),
 };
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index c0209aedd..5d276757a 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -88,3 +88,4 @@ export const VIDEO = 'Video';
 export const TEXT = 'FileText';
 export const DOWNLOADABLE = 'Downloadable';
 export const REPOST = 'Repeat';
+export const VALIDATED = 'Check';
diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index a5e0bb250..32ea95e51 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -1,6 +1,9 @@
 // @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
 import React, { useState, useEffect } 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';
@@ -15,14 +18,13 @@ import ChannelDiscussion from 'component/channelDiscussion';
 import ChannelThumbnail from 'component/channelThumbnail';
 import ChannelEdit from 'component/channelEdit';
 import ClaimUri from 'component/claimUri';
-import * as ICONS from 'constants/icons';
 import classnames from 'classnames';
-import * as MODALS from 'constants/modal_types';
 import { Form, FormField } from 'component/common/form';
 import Icon from 'component/common/icon';
 import HelpLink from 'component/common/help-link';
 import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
 import ClaimList from 'component/claimList';
+import relativeDate from 'tiny-relative-date';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -86,6 +88,7 @@ function ChannelPage(props: Props) {
   const [coverPreview, setCoverPreview] = useState(cover);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState(undefined);
+  const [lastYtSyncDate, setLastYtSyncDate] = useState();
   const claimId = claim.claim_id;
 
   // If a user changes tabs, update the url so it stays on the same page if they refresh.
@@ -138,6 +141,14 @@ function ChannelPage(props: Props) {
     return () => clearTimeout(timer);
   }, [claimId, searchQuery]);
 
+  useEffect(() => {
+    Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
+      if (response.is_verified_youtuber) {
+        setLastYtSyncDate(response.last_synced);
+      }
+    });
+  }, [claimId]);
+
   function handleInputChange(e) {
     const { value } = e.target;
     setSearchQuery(value);
@@ -179,6 +190,12 @@ function ChannelPage(props: Props) {
     <Page>
       <ClaimUri uri={uri} />
 
+      {lastYtSyncDate && (
+        <div className="media__uri--right">
+          <Icon icon={ICONS.VALIDATED} size={12} />
+          {__('Official YouTube Creator - Last updated %time_ago%', { time_ago: relativeDate(lastYtSyncDate) })}
+        </div>
+      )}
       <header className="channel-cover">
         <div className="channel__quick-actions">
           {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} isChannel />}
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index a872c6692..5cb378658 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -44,6 +44,12 @@
     position: static;
     transform: none;
   }
+
+  // This is terrible and should not be removed
+  .icon {
+    margin-right: var(--spacing-xsmall) / 2;
+    margin-bottom: -0.08rem;
+  }
 }
 
 .media__uri--inline {