Merge pull request #2249 from lbryio/publish-icon

Add Published icon to file{card,tile} for your own files

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - Less intrusive first run flow ([#2210](https://github.com/lbryio/lbry-desktop/pull/2210))
+- Add icon for your own publishes on cards/tiles ([#2249](https://github.com/lbryio/lbry-desktop/pull/2249))
 
 ### Fixed
 

src/renderer/component/fileCard/view.jsx

@@ -133,7 +133,8 @@ class FileCard extends React.PureComponent<Props> {
           <FilePrice hideFree uri={uri} />
           {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
           {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
-          {fileInfo && <Icon icon={icons.LOCAL} />}
+          {claimIsMine && <Icon icon={icons.PUBLISHED} />}
+          {!claimIsMine && fileInfo && <Icon icon={icons.LOCAL} />}
           {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
         </div>
       </li>

src/renderer/component/fileTile/view.jsx

@@ -59,6 +59,7 @@ class FileTile extends React.PureComponent<Props> {
       rewardedContentClaimIds,
       size,
       isNew,
+      claimIsMine,
     } = this.props;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
 
@@ -67,12 +68,15 @@ class FileTile extends React.PureComponent<Props> {
     }
 
     return (
+      // TODO: turn this into it's own component and share it with FileCard
+      // The only issue is icon placement on the search page
       <div className={classnames('media__properties', { card__subtitle: size === 'large' })}>
         <FilePrice hideFree uri={uri} />
         {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
         {isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
         {isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
-        {isDownloaded && <Icon icon={ICONS.LOCAL} />}
+        {!claimIsMine && isDownloaded && <Icon icon={ICONS.LOCAL} />}
+        {claimIsMine && <Icon icon={ICONS.PUBLISHED} />}
       </div>
     );
   }

src/renderer/scss/component/_media.scss

@@ -96,7 +96,7 @@
   }
 
   .media__properties {
-    bottom: -5rem;
+    bottom: -4.5rem;
     left: -20rem;
     position: absolute;
   }