From 3fd3a548ec4358c1566759a30cfeeaf7a4fb6c7e Mon Sep 17 00:00:00 2001
From: Franco Montenegro <franco.montenegro.ruke@gmail.com>
Date: Tue, 12 Apr 2022 13:05:47 -0300
Subject: [PATCH] Add viewed bar in thumbnails.

---
 ui/component/claimPreview/view.jsx     |  4 ++--
 ui/component/claimPreviewTile/view.jsx |  2 +-
 ui/component/fileThumbnail/index.js    |  2 ++
 ui/component/fileThumbnail/view.jsx    | 14 +++++++++++++-
 ui/redux/selectors/reactions.js        |  2 +-
 ui/scss/all.scss                       |  1 +
 ui/scss/component/_file-thumbnail.scss | 13 +++++++++++++
 7 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 ui/scss/component/_file-thumbnail.scss

diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 5565520ab..67d05d74d 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -347,7 +347,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             <>
               {!pending ? (
                 <NavLink aria-hidden tabIndex={-1} {...navLinkProps}>
-                  <FileThumbnail thumbnail={thumbnailUrl}>
+                  <FileThumbnail uri={uri} thumbnail={thumbnailUrl}>
                     <div className="claim-preview__hover-actions">
                       {isPlayable && <FileWatchLaterLink focusable={false} uri={repostedContentUri} />}
                     </div>
@@ -364,7 +364,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   </FileThumbnail>
                 </NavLink>
               ) : (
-                <FileThumbnail thumbnail={thumbnailUrl} />
+                <FileThumbnail uri={uri} thumbnail={thumbnailUrl} />
               )}
             </>
           )}
diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index d8150f995..52ee6d1e9 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -175,7 +175,7 @@ function ClaimPreviewTile(props: Props) {
       })}
     >
       <NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>
-        <FileThumbnail thumbnail={thumbnailUrl} allowGifs>
+        <FileThumbnail uri={uri} thumbnail={thumbnailUrl} allowGifs>
           {!isChannel && (
             <React.Fragment>
               <div className="claim-preview__hover-actions">
diff --git a/ui/component/fileThumbnail/index.js b/ui/component/fileThumbnail/index.js
index 01dfe7bc2..61122facd 100644
--- a/ui/component/fileThumbnail/index.js
+++ b/ui/component/fileThumbnail/index.js
@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { doResolveUri } from 'redux/actions/claims';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { makeSelectContentPositionForUri } from 'redux/selectors/content';
 import CardMedia from './view';
 
 const select = (state, props) => ({
+  position: makeSelectContentPositionForUri(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
 });
 
diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index a5ef83ab6..b658ac215 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/ui/component/fileThumbnail/view.jsx
@@ -16,10 +16,11 @@ type Props = {
   claim: ?StreamClaim,
   doResolveUri: (string) => void,
   className?: string,
+  position?: number,
 };
 
 function FileThumbnail(props: Props) {
-  const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props;
+  const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className, position } = props;
 
   const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailFromClaim =
@@ -29,6 +30,14 @@ function FileThumbnail(props: Props) {
   const hasResolvedClaim = claim !== undefined;
   const isGif = thumbnail && thumbnail.endsWith('gif');
 
+  const media = claim && claim.value && (claim.value.video || claim.value.audio);
+  const duration = media && media.duration;
+  const viewedBar = position && duration && (
+    <div className="file-thumbnail__viewed-bar">
+      <div className="file-thumbnail__viewed-bar-progress" style={{ width: (position / duration) * 100 + '%' }} />
+    </div>
+  );
+
   React.useEffect(() => {
     if (!hasResolvedClaim && uri) {
       doResolveUri(uri);
@@ -39,6 +48,7 @@ function FileThumbnail(props: Props) {
     return (
       <FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
         {children}
+        {viewedBar}
       </FreezeframeWrapper>
     );
   }
@@ -59,6 +69,7 @@ function FileThumbnail(props: Props) {
     return (
       <Thumb thumb={thumbnailUrl} fallback={fallback} className={className}>
         {children}
+        {viewedBar}
       </Thumb>
     );
   }
@@ -69,6 +80,7 @@ function FileThumbnail(props: Props) {
       })}
     >
       {children}
+      {viewedBar}
     </div>
   );
 }
diff --git a/ui/redux/selectors/reactions.js b/ui/redux/selectors/reactions.js
index 1a225924b..f125002ef 100644
--- a/ui/redux/selectors/reactions.js
+++ b/ui/redux/selectors/reactions.js
@@ -20,7 +20,7 @@ export const makeSelectMyReactionForUri = (uri) =>
     }
     const claimId = claim.claim_id;
 
-    const myReactions = reactions.my_reactions[claimId];
+    const myReactions = reactions.my_reactions ? reactions.my_reactions[claimId] : {};
     if (myReactions[REACTION_TYPES.LIKE]) {
       return REACTION_TYPES.LIKE;
     } else if (myReactions[REACTION_TYPES.DISLIKE]) {
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 392ee8533..22be5465a 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -26,6 +26,7 @@
 @import 'component/file-list';
 @import 'component/file-properties';
 @import 'component/file-render';
+@import 'component/file-thumbnail';
 @import 'component/footer';
 @import 'component/form-field';
 @import 'component/header';
diff --git a/ui/scss/component/_file-thumbnail.scss b/ui/scss/component/_file-thumbnail.scss
new file mode 100644
index 000000000..a4824fc07
--- /dev/null
+++ b/ui/scss/component/_file-thumbnail.scss
@@ -0,0 +1,13 @@
+.file-thumbnail__viewed-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background-color: gray;
+}
+
+.file-thumbnail__viewed-bar-progress {
+  height: 5px;
+  background-color: red;
+}