Watch-progress indicator

ui/component/claimPreview/view.jsx

@@ -11,6 +11,7 @@ import { isChannelClaim } from 'util/claim';
 import { formatLbryUrlForWeb } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
 import { toCompactNotation } from 'util/string';
+import ClaimPreviewProgress from 'component/claimPreviewProgress';
 import Tooltip from 'component/common/tooltip';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
@@ -368,7 +369,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
           {isChannelUri && claim ? (
             <UriIndicator focusable={false} uri={uri} link>
-              <ChannelThumbnail uri={uri} small={type === 'inline'} showMemberBadge={showMemberBadge} checkMembership={false} />
+              <ChannelThumbnail
+                uri={uri}
+                small={type === 'inline'}
+                showMemberBadge={showMemberBadge}
+                checkMembership={false}
+              />
             </UriIndicator>
           ) : (
             <>
@@ -390,6 +396,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
                       </div>
                     )}
+                    <ClaimPreviewProgress uri={uri} />
                   </FileThumbnail>
                 </NavLink>
               ) : (
@@ -413,7 +420,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                 {!isChannelUri && signingChannel && (
                   <div className="claim-preview__channel-staked">
                     <UriIndicator focusable={false} uri={uri} link hideAnonymous>
-                      <ChannelThumbnail uri={signingChannel.permanent_url} xsmall showMemberBadge={showMemberBadge} checkMembership={false} />
+                      <ChannelThumbnail
+                        uri={signingChannel.permanent_url}
+                        xsmall
+                        showMemberBadge={showMemberBadge}
+                        checkMembership={false}
+                      />
                     </UriIndicator>
                   </div>
                 )}

ui/component/claimPreviewProgress/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { selectClaimForUri } from 'redux/selectors/claims';
+import { selectContentPositionForUri } from 'redux/selectors/content';
+import ClaimPreviewProgress from './view';
+
+const select = (state, props) => {
+  const claim = selectClaimForUri(state, props.uri);
+  return {
+    position: selectContentPositionForUri(state, props.uri),
+    duration: claim?.value?.video?.duration || claim?.value?.audio?.duration,
+  };
+};
+
+export default connect(select)(ClaimPreviewProgress);

ui/component/claimPreviewProgress/view.jsx

@@ -0,0 +1,18 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  uri: string,
+  position: ?number,
+  duration: ?number,
+};
+
+export default function ClaimPreviewProgress(props: Props) {
+  const { position, duration } = props;
+
+  if (!position || !duration) {
+    return null;
+  }
+
+  return <div className="claim-preview__progress" style={{ width: `${(position / duration) * 100}%` }} />;
+}

ui/component/claimPreviewTile/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { NavLink, withRouter } from 'react-router-dom';
+import ClaimPreviewProgress from 'component/claimPreviewProgress';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
 import TruncatedText from 'component/common/truncated-text';
@@ -216,10 +217,10 @@ function ClaimPreviewTile(props: Props) {
                 {isStream && <FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />}
               </div>
               {/* @endif */}
-
               <div className="claim-preview__file-property-overlay">
                 <PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
               </div>
+              <ClaimPreviewProgress uri={uri} />
             </React.Fragment>
           )}
           {isCollection && (

ui/scss/component/_claim-list.scss

@@ -1115,6 +1115,14 @@
   }
 }
 
+.claim-preview__progress {
+  position: absolute;
+  bottom: 0;
+  height: 4px;
+  width: 100%;
+  background-color: var(--color-primary);
+}
+
 .claim-preview__claim-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);