From 86e1cfc3ddd54e16fdf72270cd268a3ead50136b Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 22 Jul 2021 03:24:25 -0500
Subject: [PATCH] refactoring of claim preview aria-label format

---
 static/app-strings.json                |  1 +
 ui/component/claimPreview/view.jsx     | 32 +++-----------------------
 ui/component/claimPreviewTile/view.jsx | 15 ++----------
 ui/util/formatAriaLabel.js             | 32 ++++++++++++++++++++++++++
 4 files changed, 38 insertions(+), 42 deletions(-)
 create mode 100644 ui/util/formatAriaLabel.js

diff --git a/static/app-strings.json b/static/app-strings.json
index 185ec6f77..5eb0aa77b 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2058,6 +2058,7 @@
   "Skip Navigation": "Skip Navigation",
   "Reset": "Reset",
   "Reset to original (previous) publish date": "Reset to original (previous) publish date",
+  "%title% by %channelTitle%": "%title% by %channelTitle%",
   "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%",
   "%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%",
   "--end--": "--end--"
diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 88bafe9e7..3f668d523 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -2,11 +2,12 @@
 import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
+import { isEmpty } from 'util/object';
 import { lazyImport } from 'util/lazyImport';
 import classnames from 'classnames';
 import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux';
 import { formatLbryUrlForWeb } from 'util/url';
-import { isEmpty } from 'util/object';
+import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
 import PreviewOverlayProperties from 'component/previewOverlayProperties';
@@ -27,7 +28,6 @@ import ClaimPreviewHidden from './claim-preview-no-mature';
 import ClaimPreviewNoContent from './claim-preview-no-content';
 import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import Button from 'component/button';
-import DateTime from 'component/dateTime';
 import * as ICONS from 'constants/icons';
 
 const AbandonedChannelPreview = lazyImport(() =>
@@ -194,33 +194,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   // Aria-label value for claim preview
-  let ariaDate = date ? DateTime.getTimeAgoStr(date) : null;
-  let ariaLabelData = title;
-
-  if (!isChannelUri && channelTitle) {
-    if (mediaDuration) {
-      if (ariaDate) {
-        ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%, %mediaDuration%', {
-          title,
-          channelTitle,
-          ariaDate,
-          mediaDuration,
-        });
-      } else {
-        ariaLabelData += ariaLabelData = __('%title% by %channelTitle%, %mediaDuration%', {
-          title,
-          channelTitle,
-          mediaDuration,
-        });
-      }
-    } else {
-      if (ariaDate) {
-        ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%', { title, channelTitle, ariaDate });
-      } else {
-        ariaLabelData += ariaLabelData = __('%title% by %channelTitle%', { title, channelTitle });
-      }
-    }
-  }
+  let ariaLabelData = isChannelUri ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration);
 
   let navigateUrl = formatLbryUrlForWeb((claim && claim.canonical_url) || uri || '/');
   if (listId) {
diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index f33aa9ef6..867fc89c7 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -10,6 +10,7 @@ import ChannelThumbnail from 'component/channelThumbnail';
 import SubscribeButton from 'component/subscribeButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import { formatLbryUrlForWeb } from 'util/url';
+import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
 import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux';
 import PreviewOverlayProperties from 'component/previewOverlayProperties';
 import FileDownloadLink from 'component/fileDownloadLink';
@@ -122,19 +123,7 @@ function ClaimPreviewTile(props: Props) {
   const channelTitle = signingChannel && (signingChannel.value.title || signingChannel.name);
 
   // Aria-label value for claim preview
-  let ariaLabelData = title;
-
-  if (!isChannel && channelTitle) {
-    ariaLabelData += ' ' + __('by %channelTitle%', { channelTitle });
-  }
-
-  if (date) {
-    ariaLabelData += ' ' + DateTime.getTimeAgoStr(date);
-  }
-
-  if (mediaDuration) {
-    ariaLabelData += ', ' + mediaDuration;
-  }
+  let ariaLabelData = isChannel ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration);
 
   function handleClick(e) {
     if (navigateUrl) {
diff --git a/ui/util/formatAriaLabel.js b/ui/util/formatAriaLabel.js
new file mode 100644
index 000000000..f45e87ee9
--- /dev/null
+++ b/ui/util/formatAriaLabel.js
@@ -0,0 +1,32 @@
+import DateTime from 'component/dateTime';
+
+export function formatClaimPreviewTitle(title, channelTitle, date, mediaDuration) {
+  // Aria-label value for claim preview
+  let ariaDate = date ? DateTime.getTimeAgoStr(date) : null;
+  let ariaLabelData = title;
+
+  if (mediaDuration) {
+    if (ariaDate) {
+      ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%, %mediaDuration%', {
+        title,
+        channelTitle,
+        ariaDate,
+        mediaDuration,
+      });
+    } else {
+      ariaLabelData += ariaLabelData = __('%title% by %channelTitle%, %mediaDuration%', {
+        title,
+        channelTitle,
+        mediaDuration,
+      });
+    }
+  } else {
+    if (ariaDate) {
+      ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%', { title, channelTitle, ariaDate });
+    } else {
+      ariaLabelData += ariaLabelData = __('%title% by %channelTitle%', { title, channelTitle });
+    }
+  }
+
+  return ariaLabelData;
+}