basic video length on file tiles

ui/component/claimPreviewTile/view.jsx

@@ -11,6 +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';
 
 type Props = {
   uri: string,
@@ -147,7 +148,9 @@ function ClaimPreviewTile(props: Props) {
       })}
     >
       <NavLink {...navLinkProps}>
-        <FileThumbnail thumbnail={thumbnailUrl} />
+        <FileThumbnail thumbnail={thumbnailUrl}>
+          <VideoDuration uri={uri} className="claim-tile__video-length" />
+        </FileThumbnail>
       </NavLink>
       <NavLink {...navLinkProps}>
         <h2 className="claim-tile__title">

ui/component/fileThumbnail/view.jsx

@@ -1,17 +1,19 @@
 // @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 } = this.props;
+    const { thumbnail, children } = this.props;
 
     // Disabling temporarily to see if people complain
     // if (thumbnail && thumbnail.endsWith('gif')) {
@@ -32,7 +34,11 @@ class CardMedia extends React.PureComponent<Props> {
     url = thumbnail || Placeholder;
     // @endif
 
-    return <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className} />;
+    return (
+      <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className}>
+        {children}
+      </div>
+    );
   }
 }
 

ui/scss/component/_claim-list.scss

@@ -369,3 +369,15 @@
   height: 2.1rem;
   font-size: var(--font-body);
 }
+
+.claim-tile__video-length {
+  position: absolute;
+  bottom: var(--spacing-small);
+  right: var(--spacing-small);
+  font-size: var(--font-small);
+  padding: 0.1rem;
+  border-radius: var(--border-radius);
+  font-weight: bold;
+  background-color: black;
+  color: white;
+}

ui/scss/component/_media.scss

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