@24i/bigscreen-sdk 1.0.21 → 1.0.22-alpha.2373

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.21",
+    "version": "1.0.22-alpha.2373",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -48,6 +48,7 @@
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.3",
         "csstype": "^3.1.1",
+        "date-fns": "2.29.3",
         "lottie-web": "5.10.2",
         "prop-types": "^15.8.1"
     },

package/packages/digital-clock/src/DigitalClock.tsx

@@ -10,7 +10,11 @@ export type Props = {
     className?: string,
 };
 
-const WITHOUT_SECONDS_OPTIONS = { hour: 'numeric', minute: '2-digit' } as const;
+const WITHOUT_SECONDS_OPTIONS = {
+    hour: 'numeric',
+    minute: '2-digit',
+    formatType: 'timeFormat',
+} as const;
 const WITH_SECONDS_OPTIONS = { ...WITHOUT_SECONDS_OPTIONS, second: '2-digit' } as const;
 
 export class DigitalClock extends Component<Props> {

package/packages/driver-androidtv/src/types.ts

@@ -74,6 +74,14 @@ export type DeviceInfo = {
      * Android flavor. Ex. "appstage-bigscreen"
      */
     appFlavor: string,
+    /**
+     * Underlying player engine name. Ex. "exoplayer"
+     */
+    engineName: string,
+    /**
+     * Version of player engine. Ex. "2.18.1"
+     */
+    engineVersion: string,
     /**
      * Android DRM key systems. Ex. ["Widewine", "W3C ClearKey"]
      */

package/packages/epg/src/v2/DatePicker.tsx

@@ -49,7 +49,9 @@ const defaultFormat = (date: Date) => {
     const locale = i18n.getLanguage();
     return l10n
         .date(date.getTime() + time.getTimezoneOffsetMs(), locale)
-        .toLocaleDateString({ weekday: 'short', day: 'numeric', month: 'short' });
+        .toLocaleDateString({
+            weekday: 'short', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
+        });
 };
 
 export class DatePicker extends Component<Props> implements IDatePicker {

package/packages/epg/src/v2/DateToast/DateToast.tsx

@@ -7,7 +7,7 @@ import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { InternalEpg, Plugin } from '../interface';
 
 const formatTime = (localTimestamp: number) => l10n.date(localTimestamp).toLocaleTimeString(
-    { hour: 'numeric', minute: '2-digit' },
+    { hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' },
 );
 
 const formatDate = (localTimestamp: number) => {
@@ -24,6 +24,7 @@ const formatDate = (localTimestamp: number) => {
         weekday: 'short',
         day: 'numeric',
         month: 'short',
+        formatType: 'dateFormatShort',
     });
 };
 

package/packages/epg/src/v2/Day.tsx

@@ -18,7 +18,9 @@ export class Day extends Component<Props> implements IDay {
     private formatCurrentTimestamp() {
         return l10n
             .date(this.timestamp + time.getTimezoneOffsetMs())
-            .toLocaleDateString({ weekday: 'long', day: 'numeric', month: 'short' });
+            .toLocaleDateString({
+                weekday: 'long', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
+            });
     }
 
     render() {

package/packages/epg/src/v2/ProgramInfo/utils.ts

@@ -19,7 +19,7 @@ export const getSubtitle = (asset: Asset) => (
 
 const toLocaleTimeString = (timestamp: number) => l10n
     .date(timestamp + time.getTimezoneOffsetMs())
-    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
+    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
 
 export const getBroadcastTime = (asset: Asset) => {
     const start = toLocaleTimeString(asset.program!.startTime);

package/packages/epg/src/v2/TimelineSection.tsx

@@ -26,7 +26,7 @@ export class TimelineSection extends Component<Props> implements ITimelineSectio
     private formatCurrentTimestamp() {
         return l10n
             .date(this.timestamp + time.getTimezoneOffsetMs())
-            .toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
+            .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
     }
 
     render() {

package/packages/l10n/README.md

@@ -76,6 +76,24 @@ type DateTimeFormatOptions = {
 }
 ```
 
+#### date-fns DateTime format
+It is also possible to use formatting provided by [date-fns](https://date-fns.org/v2.30.0/docs/format) library. First you need to globally configure the formats used (usually from backstage):
+```ts
+l10n.init({
+    dateFormatLong?: string | null, // e.g. 'eee, dd MMM' for "Wed, 09 Jul"
+    dateFormatNumeric?: string | null, // e.g. 'EEEE, MMMM d' for "Wednesday, July 9"
+    dateFormatShort?: string | null, // e.g. 'MM/dd/yyyy' for "07/09/2023"
+    timeFormat?: string | null, // e.g. 'h:mm a' for "9:05 PM"
+});
+```
+After that, `timeFormat` and `dateFormatShort` are used automatically where appropriate, in case the format string is _falsy_ the [default formatting implementation](#datetime-format) will be used. You can also specify which format you want to use in `DateTimeFormatOptions`:
+```ts
+type DateTimeFormatOptions = {
+    ...
+    formatType: 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat',
+}
+```
+
 You can use both `timestamp` in `ms` or `Date` object directly for formatting.
 
 #### Examples

package/packages/l10n/src/date/types.ts

@@ -20,6 +20,8 @@ type TimeKeys = 'hour' | 'minute' | 'second';
 
 type DateKeys = 'weekday' | 'year' | 'month' | 'day';
 
+type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
+
 export type DateTimeFormatOptions = {
     weekday?: Weekday,
     year?: Year,
@@ -28,6 +30,7 @@ export type DateTimeFormatOptions = {
     hour?: Hour,
     minute?: Minute,
     second?: Second,
+    formatType?: FormatType,
 };
 
 export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;

package/packages/l10n/src/l10n.ts

@@ -1,3 +1,5 @@
+import { format } from 'date-fns';
+import * as fnsLocales from 'date-fns/locale';
 import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
 import { csDateFormatter } from './date/cs';
 import { deDateFormatter } from './date/de';
@@ -6,11 +8,19 @@ import { frDateFormatter } from './date/fr';
 import { heDateFormatter } from './date/he';
 import { isoDateFormatter } from './date/iso';
 import { Formatters } from './types';
+import { DateTimeFormatOptions } from './date/types';
 
 type Events = {
     'localechange': () => void,
 };
+
+type DateFnsConfig = Partial<
+Record<NonNullable<DateTimeFormatOptions['formatType']>, string | null>
+>;
+
 class L10n implements IEvents<Events> {
+    private dateFnsConfig: DateFnsConfig = {};
+
     private readonly events = new EventsManager<Events>();
 
     addEventListener = this.events.addEventListener;
@@ -43,15 +53,53 @@ class L10n implements IEvents<Events> {
         return this.formatters[formatter].iso;
     }
 
+    init(config: DateFnsConfig) {
+        this.dateFnsConfig = config;
+    }
+
     setLocale(locale: string) {
         if (locale === this.locale) return;
         this.locale = locale;
         this.triggerEvent('localechange');
     }
 
-    date(timestamp: number | Date, locale?: string) {
-        const formatter = this.getFormatterByLocale('date', locale);
-        return formatter(timestamp);
+    getDateFnsFormatter = (
+        timestamp: number | Date,
+        locale: string,
+        fallbackCb: (options?: DateTimeFormatOptions) => string,
+        fallbackFormatType?: DateTimeFormatOptions['formatType'],
+    ) => (
+        (options?: DateTimeFormatOptions): string => {
+            const { formatType, ...baseOptions } = options || {};
+            const dateFnsBsFormat = this.dateFnsConfig?.[formatType || fallbackFormatType!];
+            if (!dateFnsBsFormat) {
+                if (!options || Object.keys(baseOptions).length === 0) {
+                    return fallbackCb();
+                }
+                return fallbackCb(baseOptions);
+            }
+            return format(
+                timestamp,
+                dateFnsBsFormat,
+                { locale: fnsLocales[locale as keyof typeof fnsLocales] },
+            );
+        }
+    );
+
+    date(timestamp: number | Date, locale: string = this.locale) {
+        const formatter = this.getFormatterByLocale('date', locale)(timestamp);
+
+        return {
+            toLocaleString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleString,
+            ),
+            toLocaleTimeString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleTimeString, 'timeFormat',
+            ),
+            toLocaleDateString: this.getDateFnsFormatter(
+                timestamp, locale, formatter.toLocaleDateString, 'dateFormatShort',
+            ),
+        };
     }
 
     addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(