add date to claim-preview aria-label

ui/component/claimPreviewTile/index.js

@@ -9,6 +9,7 @@ import {
   makeSelectChannelForClaimUri,
   makeSelectClaimIsNsfw,
   makeSelectClaimIsStreamPlaceholder,
+  makeSelectDateForUri,
 } from 'lbry-redux';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
@@ -24,6 +25,7 @@ const select = (state, props) => {
   return {
     claim,
     mediaDuration,
+    date: props.uri && makeSelectDateForUri(props.uri)(state),
     channel: props.uri && makeSelectChannelForClaimUri(props.uri)(state),
     isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
     thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),

ui/component/claimPreviewTile/view.jsx

@@ -20,6 +20,7 @@ import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
 
 type Props = {
   uri: string,
+  date?: any,
   claim: ?Claim,
   mediaDuration?: string,
   resolveUri: (string) => void,
@@ -54,6 +55,7 @@ function ClaimPreviewTile(props: Props) {
   const {
     history,
     uri,
+    date,
     isResolvingUri,
     thumbnail,
     title,
@@ -125,8 +127,12 @@ function ClaimPreviewTile(props: Props) {
     ariaLabelData += ' ' + __('by %channelTitle%', { channelTitle });
   }
 
+  if (date) {
+    ariaLabelData += ' ' + DateTime.getTimeAgoStr(date);
+  }
+
   if (mediaDuration) {
-    ariaLabelData += ' ' + mediaDuration;
+    ariaLabelData += ', ' + mediaDuration;
   }
 
   function handleClick(e) {