localize dates (#1237)

This commit is contained in:
jeffvli
2025-12-15 20:20:32 -08:00
parent 96d2699a2d
commit 8edf61f9e7
3 changed files with 99 additions and 27 deletions
+6
View File
@@ -267,6 +267,12 @@
"trackNumber": "track",
"explicitStatus": "$t(common.explicitStatus)"
},
"datetime": {
"minuteShort": "min",
"secondShort": "sec",
"hourShort": "hr",
"dayShort": "day"
},
"filterOperator": {
"after": "is after",
"afterDate": "is after (date)",
@@ -20,7 +20,7 @@ import { usePlayButtonClick } from '/@/renderer/features/shared/hooks/use-play-b
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useCurrentServerId, usePermissions } from '/@/renderer/store';
import { formatDurationStringShort } from '/@/renderer/utils';
import { formatDurationString } from '/@/renderer/utils';
import { Accordion } from '/@/shared/components/accordion/accordion';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { ButtonProps } from '/@/shared/components/button/button';
@@ -194,7 +194,7 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
<div className={styles.metadataGroupItem}>
<Icon color="muted" icon="duration" size="sm" />
<Text isMuted size="sm">
{formatDurationStringShort(item.duration ?? 0)}
{formatDurationString(item.duration ?? 0)}
</Text>
</div>
{item.ownerId === permissions.userId && Boolean(item.public) && (
+91 -25
View File
@@ -1,54 +1,118 @@
import type { Album, AlbumArtist, Song } from '/@/shared/types/domain-types';
import dayjs from 'dayjs';
import 'dayjs/locale/ar';
import 'dayjs/locale/ca';
import 'dayjs/locale/cs';
import 'dayjs/locale/de';
import 'dayjs/locale/en';
import 'dayjs/locale/es';
import 'dayjs/locale/eu';
import 'dayjs/locale/fa';
import 'dayjs/locale/fi';
import 'dayjs/locale/fr';
import 'dayjs/locale/hu';
import 'dayjs/locale/id';
import 'dayjs/locale/it';
import 'dayjs/locale/ja';
import 'dayjs/locale/ko';
import 'dayjs/locale/nb';
import 'dayjs/locale/nl';
import 'dayjs/locale/pl';
import 'dayjs/locale/pt';
import 'dayjs/locale/pt-br';
import 'dayjs/locale/ru';
import 'dayjs/locale/sl';
import 'dayjs/locale/sr';
import 'dayjs/locale/sv';
import 'dayjs/locale/ta';
import 'dayjs/locale/tr';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/zh-tw';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import relativeTime from 'dayjs/plugin/relativeTime';
import utc from 'dayjs/plugin/utc';
import formatDuration from 'format-duration';
import i18n from '/@/i18n/i18n';
import { Rating } from '/@/shared/components/rating/rating';
dayjs.extend(relativeTime);
dayjs.extend(utc);
dayjs.extend(localizedFormat);
const FORMATS: Record<number, string> = Object.freeze({
0: 'YYYY',
1: 'MMM YYYY',
2: 'MMM D, YYYY',
});
const getDayjsLocale = (i18nLang: string): string => {
const localeMap: Record<string, string> = {
ar: 'ar',
ca: 'ca',
cs: 'cs',
de: 'de',
en: 'en',
es: 'es',
eu: 'eu',
fa: 'fa',
fi: 'fi',
fr: 'fr',
hu: 'hu',
id: 'id',
it: 'it',
ja: 'ja',
ko: 'ko',
'nb-NO': 'nb',
nl: 'nl',
pl: 'pl',
pt: 'pt',
'pt-BR': 'pt-br',
ru: 'ru',
sl: 'sl',
sr: 'sr',
sv: 'sv',
ta: 'ta',
tr: 'tr',
'zh-Hans': 'zh-cn',
'zh-Hant': 'zh-tw',
};
const getDateFormat = (key: string): string => {
const dashes = Math.min(key.split('-').length - 1, 2);
return FORMATS[dashes];
return localeMap[i18nLang] || 'en';
};
export const formatDateAbsolute = (key: null | string) =>
key ? dayjs(key).format(getDateFormat(key)) : '';
const updateDayjsLocale = () => {
const dayjsLocale = getDayjsLocale(i18n.language);
dayjs.locale(dayjsLocale);
};
// Set initial locale
updateDayjsLocale();
// Listen for i18n language changes
i18n.on('languageChanged', updateDayjsLocale);
export const formatDateAbsolute = (key: null | string) => (key ? dayjs(key).format('LL') : '');
export const formatDateAbsoluteUTC = (key: null | string) =>
key ? dayjs.utc(key).format(getDateFormat(key)) : '';
key ? dayjs.utc(key).format('LL') : '';
export const formatHrDateTime = (key: null | string) =>
key ? dayjs(key).format('YYYY-MM-DD HH:mm') : '';
export const formatHrDateTime = (key: null | string) => (key ? dayjs(key).format('LLL') : '');
export const formatDateRelative = (key: null | string) => (key ? dayjs(key).fromNow() : '');
export const formatDurationString = (duration: number) => {
const rawDuration = formatDuration(duration).split(':');
const rawDuration = formatDuration(duration, { leading: false }).split(':');
let string;
switch (rawDuration.length) {
case 1:
string = `${rawDuration[0]} sec`;
string = `${rawDuration[0]} ${i18n.t('datetime.secondShort')}`;
break;
case 2:
string = `${rawDuration[0]} min ${rawDuration[1]} sec`;
string = `${rawDuration[0]} ${i18n.t('datetime.minuteShort')} ${rawDuration[1]} ${i18n.t('datetime.secondShort')}`;
break;
case 3:
string = `${rawDuration[0]} hr ${rawDuration[1]} min ${rawDuration[2]} sec`;
string = `${rawDuration[0]} ${i18n.t('datetime.hourShort')} ${rawDuration[1]} ${i18n.t('datetime.minuteShort')} ${rawDuration[2]} ${i18n.t('datetime.secondShort')}`;
break;
case 4:
string = `${rawDuration[0]} day ${rawDuration[1]} hr ${rawDuration[2]} min ${rawDuration[3]} sec`;
string = `${rawDuration[0]} ${i18n.t('datetime.dayShort')} ${rawDuration[1]} ${i18n.t('datetime.hourShort')} ${rawDuration[2]} ${i18n.t('datetime.minuteShort')} ${rawDuration[3]} ${i18n.t('datetime.secondShort')}`;
break;
}
@@ -58,15 +122,17 @@ export const formatDurationString = (duration: number) => {
export const formatDurationStringShort = (duration: number) => {
const rawDuration = formatDuration(duration).split(':');
if (rawDuration.length === 2) {
// Less than 1 hour: show "0h" and minutes
return `0h ${rawDuration[0]}m`;
} else if (rawDuration.length >= 3) {
// 1 hour or more: show hours and minutes
return `${rawDuration[0]}h ${rawDuration[1]}m`;
if (rawDuration.length === 4) {
return `${rawDuration[0]}${i18n.t('datetime.dayShort')} ${rawDuration[1]}${i18n.t('datetime.hourShort')}`;
} else if (rawDuration.length === 3) {
return `${rawDuration[0]}${i18n.t('datetime.hourShort')} ${rawDuration[1]}${i18n.t('datetime.minuteShort')}`;
} else if (rawDuration.length === 2) {
return `${rawDuration[0]}${i18n.t('datetime.minuteShort')} ${rawDuration[1]}${i18n.t('datetime.secondShort')}`;
} else if (rawDuration.length === 1) {
return `${rawDuration[0]}${i18n.t('datetime.secondShort')}`;
}
return '0h 0m';
return rawDuration;
};
export const formatRating = (item: Album | AlbumArtist | Song) =>