LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Restore and fix "comment out youtube badge on file page to fix mobile style"

Browse source 
(1) This reverts commit 8641a3ee1c.

(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.
This commit is contained in:
infiinte-persistence 2020-07-16 09:59:52 +08:00 committed by Sean Yesmunt
parent ff5518e421
commit 99c1401164
3 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/youtubeBadge/view.jsx
View file

@ -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 - Last checked %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
: __('Official YouTube Creator'); : __('Official YouTube Creator');
return ( return (
<div className="media__uri--right"> <div className="media__uri--right--yt-badge">
<Icon icon={ICONS.VALIDATED} size={12} /> <Icon icon={ICONS.VALIDATED} size={12} />
{str} {str}
</div> </div>

10
ui/page/file/view.jsx
View file

@ -16,7 +16,7 @@ import WaitUntilOnPage from 'component/common/wait-until-on-page';
import RecommendedContent from 'component/recommendedContent'; import RecommendedContent from 'component/recommendedContent';
import CommentsList from 'component/commentsList'; import CommentsList from 'component/commentsList';
import CommentCreate from 'component/commentCreate'; import CommentCreate from 'component/commentCreate';
// import YoutubeBadge from 'component/youtubeBadge'; import YoutubeBadge from 'component/youtubeBadge';
export const FILE_WRAPPER_CLASS = 'file-page__video-container'; export const FILE_WRAPPER_CLASS = 'file-page__video-container';
@ -86,7 +86,7 @@ class FilePage extends React.Component<Props> {
return ( return (
<React.Fragment> <React.Fragment>
<ClaimUri uri={uri} /> <ClaimUri uri={uri} />
{/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */} <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<div className={FILE_WRAPPER_CLASS}> <div className={FILE_WRAPPER_CLASS}>
<FileRenderInitiator uri={uri} /> <FileRenderInitiator uri={uri} />
</div> </div>
@ -100,7 +100,7 @@ class FilePage extends React.Component<Props> {
return ( return (
<React.Fragment> <React.Fragment>
<ClaimUri uri={uri} /> <ClaimUri uri={uri} />
{/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */} <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} /> <FileTitle uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} /> <FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment> </React.Fragment>
@ -111,7 +111,7 @@ class FilePage extends React.Component<Props> {
return ( return (
<React.Fragment> <React.Fragment>
<ClaimUri uri={uri} /> <ClaimUri uri={uri} />
{/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */} <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileTitle uri={uri} /> <FileTitle uri={uri} />
<FileRenderInitiator uri={uri} /> <FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} /> <FileRenderInline uri={uri} />
@ -122,7 +122,7 @@ class FilePage extends React.Component<Props> {
return ( return (
<React.Fragment> <React.Fragment>
<ClaimUri uri={uri} /> <ClaimUri uri={uri} />
{/* <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} /> */} <YoutubeBadge channelClaimId={channelClaimId} includeSyncDate={false} />
<FileRenderInitiator uri={uri} /> <FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} /> <FileRenderInline uri={uri} />
<FileTitle uri={uri} /> <FileTitle uri={uri} />

7
ui/scss/component/_media.scss
View file

@ -49,6 +49,13 @@
right: 0; right: 0;
} }
.media__uri--right--yt-badge {
@extend .media__uri--right;
@media (max-width: $breakpoint-small) {
display: none;
}
}
// M E D I A // M E D I A
// S U B T I T L E // S U B T I T L E