put file properties such as type and duration over thumb

static/app-strings.json

@@ -1267,12 +1267,13 @@
   "Uploading": "Uploading",
   "View My Uploads": "View My Uploads",
   "No recent uploads": "No recent uploads",
-  "Total Uploads": "Total Uploads",
-  "URL": "URL",
   "Removing...": "Removing...",
   "License description": "License description",
   "The 'cool' license - TM": "The 'cool' license - TM",
   "License URL": "License URL",
   "mywebsite.com/license": "mywebsite.com/license",
+  "URL": "URL",
+  "Total Uploads": "Total Uploads",
+  "Are you sure you want to purchase %claim_title%?": "Are you sure you want to purchase %claim_title%?",
   "--end--": "--end--"
 }

ui/component/claimPreview/view.jsx

@@ -257,6 +257,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                     </div>
                   )}
                   {/* @endif */}
+                  <div className="claim-preview__file-property-overlay">
+                    <FileProperties uri={uri} small />
+                  </div>
                 </FileThumbnail>
               </NavLink>
             ) : (
@@ -275,8 +278,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   <ClaimPreviewTitle uri={uri} />
                 </NavLink>
               )}
-
-              {!isChannel && <FileProperties uri={uri} />}
             </div>
             <ClaimPreviewSubtitle uri={uri} type={type} />
             {(pending || !!reflectingInfo) && <PublishPending uri={uri} />}

ui/component/claimPreviewTile/view.jsx

@@ -170,7 +170,7 @@ function ClaimPreviewTile(props: Props) {
                 <FileDownloadLink uri={canonicalUrl} hideOpenButton />
               </div>
               {/* @endif */}
-              <div className="claim-tile__file-properties">
+              <div className="claim-preview__file-property-overlay">
                 <FileProperties uri={uri} small />
               </div>
             </React.Fragment>

ui/component/fileThumbnail/FreezeframeWrapper.jsx

@@ -6,8 +6,8 @@ import Freezeframe from './FreezeframeLite';
 const FreezeframeWrapper = props => {
   const imgRef = React.useRef();
   const freezeframe = React.useRef();
-
-  const { src, className } = props;
+  // eslint-disable-next-line
+  const { src, className, children } = props;
 
   useEffect(() => {
     freezeframe.current = new Freezeframe(imgRef.current);
@@ -15,7 +15,10 @@ const FreezeframeWrapper = props => {
 
   return (
     <div className={classnames(className, 'freezeframe-wrapper')}>
-      <img ref={imgRef} src={src} className="freezeframe-img" />
+      <>
+        <img ref={imgRef} src={src} className="freezeframe-img" />
+        {children}
+      </>
     </div>
   );
 };

ui/component/fileThumbnail/view.jsx

@@ -18,7 +18,11 @@ class FileThumbnail extends React.PureComponent<Props> {
     const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
 
     if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
-      return <FreezeframeWrapper src={thumbnail} className={className} />;
+      return (
+        <FreezeframeWrapper src={thumbnail} className={className}>
+          {children}
+        </FreezeframeWrapper>
+      );
     }
 
     let url;

ui/scss/component/_claim-list.scss

@@ -90,6 +90,7 @@
   }
 
   .media__thumb {
+    overflow: hidden;
     $width: var(--file-list-thumbnail-width);
     width: $width;
     @include handleClaimListGifThumbnail($width);
@@ -106,6 +107,9 @@
     .claim-preview__hover-actions {
       display: block;
     }
+    .claim-preview__file-property-overlay {
+      opacity: 1;
+    }
   }
 
   @media (max-width: $breakpoint-small) {
@@ -361,7 +365,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    $width: calc((100vw / 2) - var(--spacing-s) * 2);
+    $width: calc((100vw / 2) - var(--spacing-s) * 2 - var(--spacing-m) / 2);
     width: $width;
     @include handleClaimTileGifThumbnail($width);
     margin-bottom: var(--spacing-l);
@@ -424,13 +428,15 @@
   font-size: var(--font-body);
 }
 
-.claim-tile__file-properties {
+.claim-preview__file-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);
   right: var(--spacing-xxs);
   background-color: var(--color-black);
   padding: 0.3rem;
   border-radius: var(--border-radius);
+  opacity: 0.7;
+  z-index: 2;
 
   .file-properties {
     color: var(--color-white);
@@ -439,10 +445,6 @@
   .file-price {
     padding: 0.1rem;
   }
-
-  @media (max-width: $breakpoint-small) {
-    display: none;
-  }
 }
 
 .claim-preview--tile {
@@ -450,6 +452,9 @@
     .claim-preview__hover-actions {
       display: block;
     }
+    .claim-preview__file-property-overlay {
+      opacity: 1;
+    }
   }
 }
 

ui/scss/component/_file-properties.scss

@@ -10,10 +10,6 @@
   & > *:not(:last-child) {
     margin-right: var(--spacing-s);
   }
-
-  @media (max-width: $breakpoint-xsmall) {
-    display: none;
-  }
 }
 
 .file-properties--large {
@@ -33,14 +29,13 @@
   position: relative;
 
   .tag {
+    @media (max-width: $breakpoint-xsmall) {
+      display: none;
+    }
     font-size: var(--font-xsmall);
   }
 
   & > *:not(:last-child) {
     margin-right: var(--spacing-xxs);
   }
-
-  @media (max-width: $breakpoint-xsmall) {
-    display: none;
-  }
 }