add FileProperties to ClaimPreviewTile

ui/component/claimPreviewTile/view.jsx

@@ -11,8 +11,7 @@ import SubscribeButton from 'component/subscribeButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import { formatLbryUrlForWeb } from 'util/url';
 import { parseURI } from 'lbry-redux';
-import VideoDuration from 'component/videoDuration';
-import FileType from 'component/fileType';
+import FileProperties from 'component/fileProperties';
 
 type Props = {
   uri: string,
@@ -149,19 +148,15 @@ function ClaimPreviewTile(props: Props) {
       })}
     >
       <NavLink {...navLinkProps}>
-        <FileThumbnail thumbnail={thumbnailUrl}>
-          {!isChannel && (
-            <div className="claim-tile__absolute-info">
-              <VideoDuration uri={uri} className="claim-tile__video-length" />
-              <FileType uri={uri} />
-            </div>
-          )}
-        </FileThumbnail>
+        <FileThumbnail thumbnail={thumbnailUrl} />
       </NavLink>
       <NavLink {...navLinkProps}>
-        <h2 className="claim-tile__title">
-          <TruncatedText text={title || (claim && claim.name)} lines={2} />
-        </h2>
+        <div className="claim-tile__title-and-properties">
+          <h2 className="claim-tile__title">
+            <TruncatedText text={title || (claim && claim.name)} lines={2} />
+          </h2>
+          {!isChannel && <FileProperties uri={uri} small />}
+        </div>
       </NavLink>
       <div className="claim-tile__info">
         {isChannel ? (
@@ -175,7 +170,7 @@ function ClaimPreviewTile(props: Props) {
           </div>
         ) : (
           <React.Fragment>
-            <UriIndicator uri={uri} link>
+            <UriIndicator uri={uri} link hideAnonymous>
               <ChannelThumbnail thumbnailPreview={channelThumbnail} />
             </UriIndicator>
 

ui/component/fileProperties/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as icons from 'constants/icons';
 import * as React from 'react';
+import classnames from 'classnames';
 import Icon from 'component/common/icon';
 import FilePrice from 'component/filePrice';
 import VideoDuration from 'component/videoDuration';
@@ -12,13 +13,14 @@ type Props = {
   claimIsMine: boolean,
   isSubscribed: boolean,
   isNew: boolean,
+  small: boolean,
 };
 
 export default function FileProperties(props: Props) {
-  const { uri, downloaded, claimIsMine, isSubscribed } = props;
+  const { uri, downloaded, claimIsMine, isSubscribed, small = false } = props;
 
   return (
-    <div className="file-properties">
+    <div className={classnames('file-properties', { 'file-properties--small': small })}>
       {isSubscribed && <Icon tooltip icon={icons.SUBSCRIBE} />}
       {!claimIsMine && downloaded && <Icon tooltip icon={icons.DOWNLOAD} />}
       <FilePrice hideFree uri={uri} />

ui/component/fileThumbnail/view.jsx

@@ -1,19 +1,17 @@
 // @flow
-import type { Node } from 'react';
 import React from 'react';
 // import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 
 type Props = {
   thumbnail: ?string, // externally sourced image
-  children?: Node,
 };
 
 const className = 'media__thumb';
 
 class CardMedia extends React.PureComponent<Props> {
   render() {
-    const { thumbnail, children } = this.props;
+    const { thumbnail } = this.props;
 
     // Disabling temporarily to see if people complain
     // if (thumbnail && thumbnail.endsWith('gif')) {
@@ -34,11 +32,7 @@ class CardMedia extends React.PureComponent<Props> {
     url = thumbnail || Placeholder;
     // @endif
 
-    return (
-      <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className}>
-        {children}
-      </div>
-    );
+    return <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className} />;
   }
 }
 

ui/component/uriIndicator/view.jsx

@@ -12,6 +12,7 @@ type Props = {
   link: ?boolean,
   claim: ?Claim,
   addTooltip: boolean,
+  hideAnonymous: boolean,
   // Lint thinks we aren't using these, even though we are.
   // Possibly because the resolve function is an arrow function that is passed in props?
   resolveUri: string => void,
@@ -43,7 +44,7 @@ class UriIndicator extends React.PureComponent<Props> {
   };
 
   render() {
-    const { link, isResolvingUri, claim, addTooltip, children, inline } = this.props;
+    const { link, isResolvingUri, claim, addTooltip, children, inline, hideAnonymous = false } = this.props;
 
     if (!claim) {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
@@ -52,6 +53,10 @@ class UriIndicator extends React.PureComponent<Props> {
     const isChannelClaim = claim.value_type === 'channel';
 
     if (!claim.signing_channel && !isChannelClaim) {
+      if (hideAnonymous) {
+        return null;
+      }
+
       return <span className={classnames('channel-name', { 'channel-name--inline': inline })}>Anonymous</span>;
     }
 

ui/scss/component/_claim-list.scss

@@ -288,9 +288,11 @@
   margin-left: var(--spacing-medium);
   justify-content: flex-start;
 
-  &:first-child,
-  &:nth-child(5n) {
-    margin-left: 0;
+  @media (min-width: $breakpoint-medium) {
+    &:first-child,
+    &:nth-child(5n) {
+      margin-left: 0;
+    }
   }
 
   &:hover {
@@ -303,6 +305,13 @@
   }
 
   @media (max-width: $breakpoint-medium) {
+    width: calc((100% - var(--spacing-medium) * 2) / 3);
+
+    &:first-child,
+    &:nth-child(3n + 1) {
+      margin-left: 0;
+    }
+
     .channel-thumbnail {
       display: none;
     }
@@ -312,19 +321,24 @@
     width: calc((100% - var(--spacing-medium) * 1) / 2);
     margin-bottom: var(--spacing-large);
 
-    .channel-thumbnail {
-      display: none;
-    }
-
     &:first-child,
     &:nth-child(2n + 1) {
       margin-left: 0;
     }
+
+    .channel-thumbnail {
+      display: none;
+    }
+  }
+}
+
+.claim-preview--channel {
+  .media__thumb {
+    padding-top: 10%;
   }
 }
 
 .claim-tile__title {
-  margin: var(--spacing-small);
   margin-bottom: 0;
   font-weight: 600;
   font-size: var(--font-small);
@@ -357,7 +371,7 @@
 }
 
 .claim-tile__publishes {
-  font-size: var(--font-small);
+  font-size: var(--font-xsmall);
 }
 
 .claim-tile__about--channel {
@@ -370,21 +384,9 @@
   font-size: var(--font-body);
 }
 
-.claim-tile__absolute-info {
-  position: absolute;
-  bottom: var(--spacing-small);
-  right: var(--spacing-small);
-  font-size: var(--font-xsmall);
-  padding: 0.2rem;
-  border-radius: var(--border-radius);
-  font-weight: bold;
-  background-color: black;
-  color: white;
-
+.claim-tile__title-and-properties {
   display: flex;
-  align-items: center;
-}
-
-.claim-tile__video-length {
-  margin-right: var(--spacing-xsmall);
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: var(--spacing-small);
 }

ui/scss/component/_file-properties.scss

@@ -4,7 +4,7 @@
   align-items: center;
   font-size: var(--font-small);
   color: var(--color-text-help);
-  margin-left: var(--spacing-small);
+  margin-left: var(--spacing-xsmall);
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-small);
@@ -15,6 +15,10 @@
   }
 }
 
+.file-properties--small {
+  font-size: var(--font-xsmall);
+}
+
 .file-properties--large {
   flex-wrap: wrap;
   margin-bottom: var(--spacing-large);

ui/scss/component/_media.scss

@@ -3,7 +3,6 @@
 
 .media__thumb {
   @include thumbnail;
-  position: relative;
   border-radius: var(--card-radius);
   object-fit: cover;
   background-color: var(--color-placeholder-background);