diff --git a/CHANGELOG.md b/CHANGELOG.md index bbc619573..338e71534 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Fixed - Channel selector alignment on creator analytics page _community pr!_ ([#4157](https://github.com/lbryio/lbry-desktop/pull/4157)) - +- Fix inconsistent relative-date string for claims, comments, etc. ([#4172](https://github.com/lbryio/lbry-desktop/pull/4172)) ## [0.45.1] - [2020-05-06] ### Added diff --git a/static/app-strings.json b/static/app-strings.json index 0fa2dd516..b0ce17374 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1202,5 +1202,17 @@ "File preview": "File preview", "Go Home": "Go Home", "Uploading (%progress%%) ": "Uploading (%progress%%) ", - "Confirming": "Confirming" -} + "Confirming": "Confirming", + "%duration% years ago": "%duration% years ago", + "%duration% year ago": "%duration% year ago", + "%duration% months ago": "%duration% months ago", + "%duration% month ago": "%duration% month ago", + "%duration% days ago": "%duration% days ago", + "%duration% day ago": "%duration% day ago", + "%duration% hours ago": "%duration% hours ago", + "%duration% hour ago": "%duration% hour ago", + "%duration% minutes ago": "%duration% minutes ago", + "%duration% minute ago": "%duration% minute ago", + "%duration% seconds ago": "%duration% seconds ago", + "%duration% second ago": "%duration% second ago" +} \ No newline at end of file diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 8e580d4eb..e8c6153c6 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -1,7 +1,7 @@ // @flow import React, { useEffect, useState } from 'react'; import { isEmpty } from 'util/object'; -import relativeDate from 'tiny-relative-date'; +import DateTime from 'component/dateTime'; import Button from 'component/button'; import Expandable from 'component/expandable'; import MarkdownPreview from 'component/common/markdown-preview'; @@ -147,7 +147,7 @@ function Comment(props: Props) { /> )}
diff --git a/ui/component/dateTime/view.jsx b/ui/component/dateTime/view.jsx index 8636b7113..07d2fd0ca 100644 --- a/ui/component/dateTime/view.jsx +++ b/ui/component/dateTime/view.jsx @@ -14,6 +14,32 @@ class DateTime extends React.PureComponent { static SHOW_TIME = 'time'; static SHOW_BOTH = 'both'; + static getTimeAgoStr(date: any) { + const suffixList = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', '']; + var duration = 0; + + for (var i = 0; i < suffixList.length; ++i) { + // moment() is very liberal with it's rounding. + // Always round down dates for better youtube parity. + duration = Math.floor(moment().diff(date, suffixList[i])); + if (duration > 0) { + break; + } + } + + if (i === suffixList.length) { + // This should never happen since we are handling up to 'seconds' now, + // but display the English version just in case it does. + return moment(date).from(moment()); + } + + // Strip off the 's' for the singular suffix, construct the string ID, + // then load the localized version. + const suffix = duration === 1 ? suffixList[i].substr(0, suffixList[i].length - 1) : suffixList[i]; + const strId = '%duration% ' + suffix + ' ago'; + return __(strId, { duration }); + } + render() { const { date, timeAgo } = this.props; const show = this.props.show || DateTime.SHOW_BOTH; @@ -23,32 +49,7 @@ class DateTime extends React.PureComponent { return null; } - // Moment is very liberal with it's rounding - // Wait to show "two years ago" until it's actually been two years (or higher) - const numberOfYearsSincePublish = Math.floor(moment().diff(date, 'years')); - - if (numberOfYearsSincePublish === 1) { - return {__('%numberOfYearsSincePublish% year ago', { numberOfYearsSincePublish })}; - } else if (numberOfYearsSincePublish > 1) { - return {__('%numberOfYearsSincePublish% years ago', { numberOfYearsSincePublish })}; - } - - const numberOfMonthsSincePublish = Math.floor(moment().diff(date, 'months')); - if (numberOfMonthsSincePublish === 1) { - return {__('%numberOfMonthsSincePublish% month ago', { numberOfMonthsSincePublish })}; - } else if (numberOfMonthsSincePublish > 1) { - return {__('%numberOfMonthsSincePublish% months ago', { numberOfMonthsSincePublish })}; - } - - const numberOfDaysSincePublish = Math.floor(moment().diff(date, 'days')); - if (numberOfDaysSincePublish === 1) { - return {__('%numberOfDaysSincePublish% day ago', { numberOfDaysSincePublish })}; - } else if (numberOfDaysSincePublish > 1) { - return {__('%numberOfDaysSincePublish% days ago', { numberOfDaysSincePublish })}; - } - - // "just now", "a few minutes ago" - return {moment(date).from(moment())}; + return {DateTime.getTimeAgoStr(date)}; } return ( diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index 1e69c0673..0d9646a4d 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -24,7 +24,7 @@ import Icon from 'component/common/icon'; import HelpLink from 'component/common/help-link'; import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search'; import ClaimList from 'component/claimList'; -import relativeDate from 'tiny-relative-date'; +import DateTime from 'component/dateTime'; const PAGE_VIEW_QUERY = `view`; const ABOUT_PAGE = `about`; @@ -193,7 +193,9 @@ function ChannelPage(props: Props) { {lastYtSyncDate && (
- {__('Official YouTube Creator - Last updated %time_ago%', { time_ago: relativeDate(lastYtSyncDate) })} + {__('Official YouTube Creator - Last updated %time_ago%', { + time_ago: DateTime.getTimeAgoStr(lastYtSyncDate), + })}
)}