diff --git a/packages/common/src/utils/formatting.ts b/packages/common/src/utils/formatting.ts index b77fee7b0..6ed01ef93 100644 --- a/packages/common/src/utils/formatting.ts +++ b/packages/common/src/utils/formatting.ts @@ -1,9 +1,11 @@ -export const formatDurationTag = (seconds: number) => { +import type { DurationAbbreviation } from '../../types/i18n'; + +export const formatDurationTag = (seconds: number, { minutesAbbreviation }: Pick) => { if (!seconds) return ''; const minutes = Math.ceil(seconds / 60); - return `${minutes} min`; + return `${minutes} ${minutesAbbreviation}`; }; /** @@ -16,14 +18,14 @@ export const formatDurationTag = (seconds: number) => { * @returns string, such as '2hrs 24min' or '31min' */ -export const formatDuration = (duration: number) => { +export const formatDuration = (duration: number, { hoursAbbreviation, minutesAbbreviation }: DurationAbbreviation) => { if (!duration) return ''; const hours = Math.floor(duration / 3600); const minutes = Math.round((duration - hours * 3600) / 60); - const hoursString = hours ? `${hours}hrs` : ''; - const minutesString = minutes ? `${minutes}min` : ''; + const hoursString = hours ? `${hours}${hoursAbbreviation}` : ''; + const minutesString = minutes ? `${minutes}${minutesAbbreviation}` : ''; return [hoursString, minutesString].filter(Boolean).join(' '); }; diff --git a/packages/common/src/utils/metadata.ts b/packages/common/src/utils/metadata.ts index 3d7c12d90..6b5bfb172 100644 --- a/packages/common/src/utils/metadata.ts +++ b/packages/common/src/utils/metadata.ts @@ -1,14 +1,15 @@ import type { Playlist, PlaylistItem } from '../../types/playlist'; +import type { DurationAbbreviation } from '../../types/i18n'; import { formatDuration, formatVideoSchedule } from './formatting'; -export const createVideoMetadata = (media: PlaylistItem, episodesLabel?: string) => { +export const createVideoMetadata = (media: PlaylistItem, i18n: DurationAbbreviation & { episodesLabel?: string }) => { const metaData = []; - const duration = formatDuration(media.duration); + const duration = formatDuration(media.duration, i18n); if (media.pubdate) metaData.push(String(new Date(media.pubdate * 1000).getFullYear())); - if (!episodesLabel && duration) metaData.push(duration); - if (episodesLabel) metaData.push(episodesLabel); + if (!i18n.episodesLabel && duration) metaData.push(duration); + if (i18n.episodesLabel) metaData.push(i18n.episodesLabel); if (media.genre) metaData.push(media.genre); if (media.rating) metaData.push(media.rating); @@ -23,10 +24,10 @@ export const createPlaylistMetadata = (playlist: Playlist, episodesLabel?: strin return metaData; }; -export const createLiveEventMetadata = (media: PlaylistItem, locale: string) => { +export const createLiveEventMetadata = (media: PlaylistItem, locale: string, i18n: DurationAbbreviation) => { const metaData = []; const scheduled = formatVideoSchedule(locale, media.scheduledStart, media.scheduledEnd); - const duration = formatDuration(media.duration); + const duration = formatDuration(media.duration, i18n); if (scheduled) metaData.push(scheduled); if (duration) metaData.push(duration); diff --git a/packages/common/types/i18n.ts b/packages/common/types/i18n.ts index b47ef70ab..4aa8e7cdd 100644 --- a/packages/common/types/i18n.ts +++ b/packages/common/types/i18n.ts @@ -2,3 +2,8 @@ export type LanguageDefinition = { code: string; displayName: string; }; + +export type DurationAbbreviation = { + hoursAbbreviation: string; + minutesAbbreviation: string; +}; diff --git a/packages/ui-react/src/components/Card/Card.tsx b/packages/ui-react/src/components/Card/Card.tsx index c3def2a83..f4fbf3828 100644 --- a/packages/ui-react/src/components/Card/Card.tsx +++ b/packages/ui-react/src/components/Card/Card.tsx @@ -81,7 +81,7 @@ function Card({ } else if (episodeNumber) { return
{formatSeriesMetaString(seasonNumber, episodeNumber)}
; } else if (duration) { - return
{formatDurationTag(duration)}
; + return
{formatDurationTag(duration, { minutesAbbreviation: t('common:abbreviation.minutes') })}
; } else if (isLive) { return
{t('live')}
; } else if (isScheduled) { diff --git a/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap index d3652d307..cfe373786 100644 --- a/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap +++ b/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -52,7 +52,7 @@ exports[` > should render anchor tag 1`] = `
- 2 min + 2 common:abbreviation.minutes
diff --git a/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap b/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap index 888929dbd..9f72dd3b2 100644 --- a/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap +++ b/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap @@ -48,7 +48,7 @@ exports[` > renders and matches snapshot 1`] = `
- 4 min + 4 common:abbreviation.minutes
@@ -90,7 +90,7 @@ exports[` > renders and matches snapshot 1`] = `
- 10 min + 10 common:abbreviation.minutes
@@ -132,7 +132,7 @@ exports[` > renders and matches snapshot 1`] = `
- 11 min + 11 common:abbreviation.minutes
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap index ca30638db..ef2984b16 100644 --- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap +++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap @@ -125,7 +125,7 @@ exports[` > renders and matches snapshot 1`] = ` class="_label_86f2f5" for="text-field_1235_cardnumber" > - Card number + payment.credit_card_number