feat(web): enhance ux/ui of the album list page (#8499)

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ethan Margaillan 2024-04-05 21:19:26 +02:00 committed by GitHub
parent 939e91f9ed
commit 8f981b6052
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 1352 additions and 621 deletions

View file

@ -1,4 +1,6 @@
import { locale } from '$lib/stores/preferences.store';
import { DateTime, Duration } from 'luxon';
import { get } from 'svelte/store';
/**
* Convert time like `01:02:03.456` to seconds.
@ -15,3 +17,37 @@ export function timeToSeconds(time: string) {
export function parseUtcDate(date: string) {
return DateTime.fromISO(date, { zone: 'UTC' }).toUTC();
}
export const getShortDateRange = (startDate: string | Date, endDate: string | Date) => {
startDate = startDate instanceof Date ? startDate : new Date(startDate);
endDate = endDate instanceof Date ? endDate : new Date(endDate);
const userLocale = get(locale);
const endDateLocalized = endDate.toLocaleString(userLocale, {
month: 'short',
year: 'numeric',
});
if (startDate.getFullYear() === endDate.getFullYear()) {
if (startDate.getMonth() === endDate.getMonth()) {
// Same year and month.
// e.g.: aug. 2024
return endDateLocalized;
} else {
// Same year but different month.
// e.g.: jul. - sept. 2024
const startMonthLocalized = startDate.toLocaleString(userLocale, {
month: 'short',
});
return `${startMonthLocalized} - ${endDateLocalized}`;
}
} else {
// Different year.
// e.g.: feb. 2021 - sept. 2024
const startDateLocalized = startDate.toLocaleString(userLocale, {
month: 'short',
year: 'numeric',
});
return `${startDateLocalized} - ${endDateLocalized}`;
}
};