From 99c1401164d92f4c0ad530577a8cfc2eb16583d4 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 16 Jul 2020 09:59:52 +0800
Subject: [PATCH] Restore and fix "comment out youtube badge on file page to
 fix mobile style"

(1) This reverts commit 8641a3ee1c641ea1af334a3c0cd776905179466d.

(2) Fix floating-player misalignment due to YT badge in mobile by hiding the badge.

At first, the suggestion to truncate the left URI to keep the entire thing single-lined was implemented, but during testing, I realized that the YT badge will take up the entire width anyway (especially on other languages). The URI is more important than the badge, and truncating both of them would be ugly.

Given the preference to not have 2 lines for this, we'll just hide the badge for the mobile case.

For the Channel Page case, let's make it single-line through "4454: URL / top claims overlap" instead. We'll keep this commit/PR limited to fixing the YT badge.
---
 ui/component/youtubeBadge/view.jsx |  2 +-
 ui/page/file/view.jsx              | 10 +++++-----
 ui/scss/component/_media.scss      |  7 +++++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/ui/component/youtubeBadge/view.jsx b/ui/component/youtubeBadge/view.jsx
index b34158ca7..b3cf546ed 100644
--- a/ui/component/youtubeBadge/view.jsx
+++ b/ui/component/youtubeBadge/view.jsx
@@ -39,7 +39,7 @@ export default function YoutubeBadge(props: Props) {
         ? __('Official YouTube Creator - Last checked %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
         : __('Official YouTube Creator');
     return (
-      <div className="media__uri--right">
+      <div className="media__uri--right--yt-badge">
         <Icon icon={ICONS.VALIDATED} size={12} />
         {str}
       </div>
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index c5289b0f6..53d067432 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -16,7 +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';
+import YoutubeBadge from 'component/youtubeBadge';
 
 export const FILE_WRAPPER_CLASS = 'file-page__video-container';
 
@@ -86,7 +86,7 @@ class FilePage extends React.Component<Props> {
       return (
         <React.Fragment>
           <ClaimUri uri={uri} />
-          {/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */}
+          <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
           <div className={FILE_WRAPPER_CLASS}>
             <FileRenderInitiator uri={uri} />
           </div>
@@ -100,7 +100,7 @@ class FilePage extends React.Component<Props> {
       return (
         <React.Fragment>
           <ClaimUri uri={uri} />
-          {/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */}
+          <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
           <FileTitle uri={uri} />
           <FileRenderDownload uri={uri} isFree={cost === 0} />
         </React.Fragment>
@@ -111,7 +111,7 @@ class FilePage extends React.Component<Props> {
       return (
         <React.Fragment>
           <ClaimUri uri={uri} />
-          {/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */}
+          <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
           <FileTitle uri={uri} />
           <FileRenderInitiator uri={uri} />
           <FileRenderInline uri={uri} />
@@ -122,7 +122,7 @@ class FilePage extends React.Component<Props> {
     return (
       <React.Fragment>
         <ClaimUri uri={uri} />
-        {/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */}
+        <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
         <FileRenderInitiator uri={uri} />
         <FileRenderInline uri={uri} />
         <FileTitle uri={uri} />
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 1d3d3e698..d7411a7eb 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -49,6 +49,13 @@
   right: 0;
 }
 
+.media__uri--right--yt-badge {
+  @extend .media__uri--right;
+  @media (max-width: $breakpoint-small) {
+    display: none;
+  }
+}
+
 //  M E D I A
 //  S U B T I T L E