From dfde740ecb4da054ac1da45606a94e2c147381db Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 28 Jan 2020 13:36:58 -0500
Subject: [PATCH] basic video length on file tiles

---
 ui/component/claimPreviewTile/view.jsx |  5 ++++-
 ui/component/fileThumbnail/view.jsx    | 10 ++++++++--
 ui/scss/component/_claim-list.scss     | 12 ++++++++++++
 ui/scss/component/_media.scss          |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index e4243d89e..fefb1f39d 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/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">
diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index 5c720472f..098254679 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/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>
+    );
   }
 }
 
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index ef74b6355..a76caa8f9 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/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;
+}
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 0e2ee9772..c66c7359a 100644
--- a/ui/scss/component/_media.scss
+++ b/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);