From 8a20f24a5370579e26ce889469233a81e07d213e Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Sat, 9 May 2020 03:24:16 +0800 Subject: [PATCH 1/3] Fix localization issue in DateTime. The class was only returning a localized string for 'years' and 'months'; English was used for the rest. - Fixed by handling the remaining cases. - New strings were added (1) so that they will all be consistent language-wise until the translators handle them all (2) allows for cleaner code through variable re-use (%duration%). --- static/app-strings.json | 16 ++++++++++++-- ui/component/dateTime/view.jsx | 39 ++++++++++++++++------------------ 2 files changed, 32 insertions(+), 23 deletions(-) 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/dateTime/view.jsx b/ui/component/dateTime/view.jsx index 8636b7113..069ed8454 100644 --- a/ui/component/dateTime/view.jsx +++ b/ui/component/dateTime/view.jsx @@ -23,32 +23,29 @@ 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')); + const suffixList = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', '']; + var duration = 0; - if (numberOfYearsSincePublish === 1) { - return {__('%numberOfYearsSincePublish% year ago', { numberOfYearsSincePublish })}; - } else if (numberOfYearsSincePublish > 1) { - return {__('%numberOfYearsSincePublish% years ago', { numberOfYearsSincePublish })}; + 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; + } } - 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 })}; + 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()); } - 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())}; + // 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 })}; } return ( -- 2.45.2 From 34a68aab83c6c9cefb9abe0fa664633a901be6e8 Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Mon, 11 May 2020 15:57:03 +0800 Subject: [PATCH 2/3] Refactor DateTime to allow it's translated result string to be re-used elsewhere, for consistency. --- ui/component/comment/view.jsx | 4 +-- ui/component/dateTime/view.jsx | 50 ++++++++++++++++++---------------- ui/page/channel/view.jsx | 6 ++-- 3 files changed, 33 insertions(+), 27 deletions(-) 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 069ed8454..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,29 +49,7 @@ class DateTime extends React.PureComponent { return null; } - 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 })}; + 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), + })}
)}
-- 2.45.2 From 8d848255a853614e834a73d570dd699a196bdc01 Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Mon, 11 May 2020 22:04:01 +0800 Subject: [PATCH 3/3] Add changelog entry for #4172 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 -- 2.45.2