@24i/bigscreen-sdk 1.0.5-alpha.2129 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.5-alpha.2129",
+    "version": "1.0.5",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -103,6 +103,7 @@
         "./device/resolver/keymap": "./packages/device/resolver/keymap.ts",
         "./device": "./packages/device/src/index.ts",
         "./digital-clock": "./packages/digital-clock/src/index.ts",
+        "./driver-androidtv": "./packages/driver-androidtv/src/index.ts",
         "./driver-base/keymap": "./packages/driver-base/src/KeyMap/index.ts",
         "./driver-base": "./packages/driver-base/src/index.ts",
         "./driver-browser": "./packages/driver-browser/src/index.ts",

package/packages/developer-tools/src/DeveloperConsole/DeveloperConsole.tsx

@@ -351,6 +351,7 @@ export class DeveloperConsole extends Component<Props> implements IDeveloperTool
                 ref={this.developerConsoleRef}
                 onKeyDown={this.onKeyDown}
                 tabIndex={0}
+                dir="ltr"
             >
                 <div className="developer-console-panel" ref={this.developerConsolePanelRef} />
                 <div className="developer-console-controls">

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfo.tsx

@@ -88,6 +88,7 @@ export class TechnicalInfo extends Component<Props> implements IDeveloperTool<Pr
                     ref={this.horizontalNavigation}
                     domRef={this.rootRef}
                     focusableChildren={[this.technicalInfoRef, this.closeButtonRef]}
+                    dir="ltr"
                 >
                     <div className="content">
                         <TechnicalInfoDetail
@@ -117,6 +118,7 @@ export class TechnicalInfo extends Component<Props> implements IDeveloperTool<Pr
                 ref={this.rootRef}
                 className={`technical-info ${DISPLAY_NONE}`}
                 onKeyDown={this.onKeyDown}
+                dir="ltr"
             />
         );
     }

package/packages/device/src/driver/index.android.tv.ts

@@ -0,0 +1 @@
+export { DeviceAndroidTV as Device } from '@24i/bigscreen-sdk/driver-androidtv';

package/packages/device/src/resolver/resolver.ts

@@ -1,4 +1,5 @@
 import { KeycodeKeyMap, DeviceEventMap } from '@24i/bigscreen-sdk/driver-base';
+import { DeviceAndroidTV } from '@24i/bigscreen-sdk/driver-androidtv';
 import { DeviceBrowser } from '@24i/bigscreen-sdk/driver-browser';
 import { DeviceEntone } from '@24i/bigscreen-sdk/driver-entone';
 import { DeviceHbbTV } from '@24i/bigscreen-sdk/driver-hbbtv';
@@ -39,6 +40,11 @@ const getDevice = () => {
         info('KreaTV');
         return new DeviceKreaTV();
     }
+    // any because JavaScriptBridge property is defined on Android TV Bridge platform
+    if (typeof (window as any).JavaScriptBridge !== 'undefined') {
+        info('AndroidTV');
+        return new DeviceAndroidTV();
+    }
     // any because ENTONE property is defined on Entone platform
     if (typeof (window as any).ENTONE !== 'undefined') {
         info('Entone');

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

@@ -0,0 +1,179 @@
+import {
+    DeviceBase,
+    ConnectionType,
+    ScreenSaverStatus,
+    VolumeRange,
+} from '@24i/bigscreen-sdk/driver-base';
+import { IJavaScriptBridge } from './types';
+import { getFirmware } from './formatUserAgent';
+import { getKeyMap } from './keymap';
+
+interface CustomKeyboardEvent extends KeyboardEvent {
+    /** Flag indicating that the driver has already re-emitted this event. */
+    bigscreenSdkRelaunched?: boolean;
+}
+
+declare global {
+    interface Window extends IJavaScriptBridge {}
+}
+
+/**
+ * Android TV driver implementing API of Android TV Bridge.
+ *
+ * See https://github.com/24i/prd-smart-ott-androidtv
+ */
+export class DeviceAndroidTV extends DeviceBase {
+    keyMap = getKeyMap();
+
+    platformInfo = window.JavaScriptBridge.bridgeJavaScriptToAndroid_GetDeviceInfo();
+
+    firmware = getFirmware(navigator.userAgent);
+
+    async initDevice(): Promise<void> {
+        this.initKeydownListener();
+        this.initKeyupListener();
+        this.initNetworkChangeListener();
+    }
+
+    initKeydownListener() {
+        window.addEventListener('keydown', this.relaunchKeyEvent, true);
+    }
+
+    initKeyupListener() {
+        window.addEventListener('keyup', this.relaunchKeyEvent, true);
+    }
+
+    /**
+     * Handles keydown/up events for the BACK key which are dispatched on the document
+     * from the Android TV Bridge. We must catch them and re-emit them properly
+     * on the active (focused) element in the DOM tree.
+     * @param event keyboard event
+     */
+    relaunchKeyEvent = (event: CustomKeyboardEvent) => {
+        if (event.bigscreenSdkRelaunched) { // prevent to relaunch event in loop
+            return;
+        }
+        const { keyCode } = event;
+        if (keyCode === this.keyMap.BACK) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const newEvent = new KeyboardEvent(event.type, {
+                keyCode, bubbles: true, cancelable: true, composed: true,
+            }) as CustomKeyboardEvent;
+            newEvent.bigscreenSdkRelaunched = true;
+            document.activeElement?.dispatchEvent(newEvent);
+        }
+    };
+
+    initNetworkChangeListener() {
+        window.addEventListener('online', () => {
+            this.triggerEvent('networkchange', { isConnected: true });
+        });
+        window.addEventListener('offline', () => {
+            this.triggerEvent('networkchange', { isConnected: false });
+        });
+    }
+
+    reboot(): void {
+        let rootPath = '';
+        const splitUrl = window.location.href.split('#');
+        if (splitUrl.length > 1) rootPath = splitUrl[0];
+        window.location.href = rootPath;
+    }
+
+    exit(): void {
+        window.JavaScriptBridge.bridgeJavaScriptToAndroid_Back();
+    }
+
+    async getManufacturerName(): Promise<string> {
+        return this.platformInfo.deviceBrand || '';
+    }
+
+    async getPlatformName(): Promise<string> {
+        return 'AndroidTV';
+    }
+
+    async getPlatformVersion(): Promise<string> {
+        return this.platformInfo.osVersion || '';
+    }
+
+    async getDeviceName(): Promise<string> {
+        const modelName = await this.getModelName();
+        const manufacturerName = await this.getManufacturerName();
+        return `AndroidTV ${manufacturerName} ${modelName}`.trim();
+    }
+
+    async getModelName(): Promise<string> {
+        return this.platformInfo.deviceModel || '';
+    }
+
+    async getFirmware(): Promise<string> {
+        return this.firmware || '';
+    }
+
+    async is4KSupported(): Promise<boolean> {
+        return false;
+    }
+
+    async is8KSupported(): Promise<boolean> {
+        return false;
+    }
+
+    async getUuid(): Promise<string> {
+        return this.getBaseUuid();
+    }
+
+    async getVolume(): Promise<number> {
+        return VolumeRange.UNSUPPORTED;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async setVolume(volumePercentage: number): Promise<void> {
+        // not supported on AndroidTV platform
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async mute(mute: boolean): Promise<void> {
+        // not supported on AndroidTV platform
+    }
+
+    async isMute(): Promise<boolean> {
+        // not supported on AndroidTV platform
+        return false;
+    }
+
+    async getScreenSaver(): Promise<ScreenSaverStatus> {
+        // not supported on AndroidTV platform
+        return { enabled: false };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async setScreenSaver(status: ScreenSaverStatus): Promise<void> {
+        // not supported on AndroidTV platform
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async setUserAgent(userAgent: string): Promise<boolean> {
+        // not supported on AndroidTV platform
+        return false;
+    }
+
+    async isNetworkConnected(): Promise<boolean> {
+        return window.navigator.onLine;
+    }
+
+    async getConnectionType(): Promise<ConnectionType> {
+        // not supported on AndroidTV platform
+        return 'unknown';
+    }
+
+    async getLocalIP(): Promise<string> {
+        // not supported on AndroidTV platform
+        return '';
+    }
+
+    async getMacAddress(): Promise<string> {
+        // not supported on AndroidTV platform
+        return '';
+    }
+}

package/packages/driver-androidtv/src/__mocks__/javaScriptBridge.ts

@@ -0,0 +1,12 @@
+import { IJavaScriptBridge } from '../types';
+
+export const mockJavaScriptBridge: IJavaScriptBridge = {
+    JavaScriptBridge: {
+        bridgeJavaScriptToAndroid_GetDeviceInfo: () => ({
+            deviceBrand: 'Sony',
+            deviceModel: 'BRAVIA 4K 2015',
+            osVersion: '8.0.0',
+        }),
+        bridgeJavaScriptToAndroid_Back: () => {},
+    },
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Parses software version of Android TV from user agent string.
+ * @param userAgent User agent string
+ * @returns software version string or undefined if not found. Ex. "QTS1.220504.008"
+ */
+export const getFirmware = (userAgent: string) => {
+    const [
+        , firmware,
+    ] = userAgent.match(/Build\/([^;]*)/) || [] as Array<undefined>;
+    return firmware;
+};

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

@@ -0,0 +1 @@
+export { DeviceAndroidTV } from './DeviceAndroidTV';

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

@@ -0,0 +1,9 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
+
+export const getKeyMap = () => {
+    KeyMap.overrideValues({
+        BACK: { keyCode: 4 },
+    });
+    return KeyMap.generateKeyCodeKeyMap();
+};

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

@@ -0,0 +1,27 @@
+interface JavaScriptBridge {
+    /**
+     * It returns device info.
+     */
+    bridgeJavaScriptToAndroid_GetDeviceInfo: () => {
+        /**
+         * Device brand. Ex. "Sony"
+         */
+        deviceBrand: string,
+        /**
+         * Device model. Ex. "BRAVIA 4K 2015"
+         */
+        deviceModel: string,
+        /**
+         * Android version. Ex. "7.0"
+         */
+        osVersion: string,
+    },
+    /**
+     * It simulates a native Android back press.
+     */
+    bridgeJavaScriptToAndroid_Back: () => void,
+}
+
+export interface IJavaScriptBridge {
+    JavaScriptBridge: JavaScriptBridge,
+}

package/packages/driver-base/src/DeviceBase.ts

@@ -124,6 +124,8 @@ export abstract class DeviceBase<
     private bindPreventDefaultEvents(rootElement: HTMLElement) {
         // prevent default to focus the next focusable element of event target
         bindPreventDefaultEvent(rootElement, 'keydown');
+        // prevent default not to lose focus (Seen on Android TV Bridge)
+        bindPreventDefaultEvent(rootElement, 'keyup');
         // prevent default to focus the nearest focusable ancestor of event target
         bindPreventDefaultEvent(rootElement, 'mousedown');
     }

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

@@ -44,9 +44,12 @@ const prepareDateData = ({
     return { selectedValue, from, to, overrides };
 };
 
-const defaultFormat = (date: Date) => l10n.date(date).toLocaleDateString(
-    { weekday: 'short', day: 'numeric', month: 'short' },
-);
+const defaultFormat = (date: Date) => {
+    const locale = i18n.getLanguage();
+    return l10n.date(date, locale).toLocaleDateString(
+        { weekday: 'short', day: 'numeric', month: 'short' }
+    );
+};
 
 export class DatePicker extends Component<Props> implements IDatePicker {
     datePicker = createRef<Picker<number>>();

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

@@ -151,3 +151,15 @@ export const dateFormatter = (
         )(date),
     };
 };
+
+export const toTwoDigitLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const toNumericLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: 'numeric', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);

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

@@ -1,4 +1,4 @@
-import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import { dateFormatter, processYear, toNumericLocaleTimeString } from './common';
 import type { DateTimeFormatOptions, Weekday, Day, Month, Year } from './types';
 
 const WEEKDAYS = {
@@ -86,10 +86,4 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-const toLocaleTimeString = (date: Date) => (
-    options: DateTimeFormatOptions = {
-        hour: 'numeric', minute: '2-digit', second: '2-digit',
-    },
-) => collonSeparatedHour24MinuteSecond(date, options);
-
-export const csDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString, ' ');
+export const csDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString, ' ');

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

@@ -0,0 +1,97 @@
+import { processYear, dateFormatter, toTwoDigitLocaleTimeString } from './common';
+import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
+
+//https://web.library.yale.edu/cataloging/months
+const DE_MONTHS = {
+    narrow: [
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    short: [
+        'Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez',
+    ],
+    long: [
+        'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+        'Oktober', 'November', 'Dezember',
+    ],
+};
+
+const DE_WEEKDAYS = {
+    narrow: [
+        'S', 'M', 'D', 'M', 'D', 'F', 'S',
+    ],
+    short: [
+        'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa',
+    ],
+    long: [
+        'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag',
+    ],
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(`${strDate}.`);
+};
+
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString() + '.';
+        dateParts.push(strMonth);
+    } else {
+        const finalMonth = DE_MONTHS[month][date.getMonth()];
+        if (month === 'short') dateParts.push(`${finalMonth}.`);
+        else dateParts.push(finalMonth);
+    }
+};
+
+const processWeekday = (
+    dateStringParts: string[],
+    year: Year | undefined,
+    month: Month | undefined,
+    day: Day | undefined,
+    weekday: Weekday | undefined,
+    date: Date,
+) => {
+    if (typeof weekday === 'undefined') return;
+    let weekdayString = DE_WEEKDAYS[weekday][date.getDay()];
+    if (weekday === 'short') weekdayString += '.';
+    if (
+        typeof year !== 'undefined'
+        || typeof month !== 'undefined'
+        || typeof day !== 'undefined'
+    ) {
+        weekdayString += ',';
+    }
+    dateStringParts.push(weekdayString);
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date);
+    const dateConnection = '';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if ((month === 'narrow' ||
+        month === 'short' ||
+        month === 'long') &&
+        day != null
+    ) {
+        dateParts.push(' ');
+    }
+    processMonth(dateParts, month, date);
+    if (month === 'long') dateParts.push(' ');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+
+export const deDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/en-001.ts

@@ -1,7 +1,7 @@
 import {
     collonSeparatedHour12MinuteSecond, dateFormatter, processYear, SECOND_FROM_END,
 } from './common';
-import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (
@@ -19,7 +19,7 @@ const processMonth = (
                 : numericMonth
         }${typeof year !== 'undefined' ? ',' : ''}`);
     } else {
-        dateStringParts.push(MONTHS[month][date.getMonth()]);
+        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -49,7 +49,7 @@ const getDdMmYyyy = (dateStringParts: string[], year: Year | undefined, date: Da
     dateStringParts.push(`${d}/${m}/${y}`);
 };
 
-export const toLocaleDateString = (date: Date) => (
+const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },

package/packages/l10n/src/date/en-common.ts

@@ -1,6 +1,6 @@
-import type { Day, Month, Weekday, Year } from './types';
+import type { Day, Month, Weekday, LocaleData, Year } from './types';
 
-export const MONTHS = {
+export const EN_MONTHS = {
     narrow: [
         'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
     ],
@@ -13,7 +13,7 @@ export const MONTHS = {
     ],
 };
 
-export const WEEKDAYS = {
+export const EN_WEEKDAYS = {
     narrow: [
         'S', 'M', 'T', 'W', 'T', 'F', 'S',
     ],
@@ -32,9 +32,10 @@ export const processWeekday = (
     day: Day | undefined,
     weekday: Weekday | undefined,
     date: Date,
+    weekdaysLocaleData: LocaleData = EN_WEEKDAYS
 ) => {
     if (typeof weekday === 'undefined') return;
-    let weekdayString = WEEKDAYS[weekday][date.getDay()];
+    let weekdayString = weekdaysLocaleData[weekday][date.getDay()];
     if (
         typeof year !== 'undefined'
         || typeof month !== 'undefined'

package/packages/l10n/src/date/en-us.ts

@@ -4,7 +4,7 @@ import {
     processYear,
     SECOND_FROM_END,
 } from './common';
-import { MONTHS, processWeekday, isDdMmYyyy } from './en-common';
+import { EN_MONTHS, processWeekday, isDdMmYyyy } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Year } from './types';
 
 const processMonth = (dateStringParts: string[], month: Month | undefined, date: Date) => {
@@ -16,7 +16,7 @@ const processMonth = (dateStringParts: string[], month: Month | undefined, date:
                 ? `0${numericMonth}` : numericMonth,
         );
     } else {
-        dateStringParts.push(MONTHS[month][date.getMonth()]);
+        dateStringParts.push(EN_MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -56,7 +56,7 @@ const getDdMmYyyy = (
     dateStringParts.push(`${m}/${d}/${y}`);
 };
 
-export const toLocaleDateString = (date: Date) => (
+const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: 'numeric', day: 'numeric',
     },

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

@@ -0,0 +1,71 @@
+import { processYear, dateFormatter, toNumericLocaleTimeString } from './common';
+import { processWeekday } from './en-common';
+import { DateTimeFormatOptions, Day, Month } from './types';
+
+const ES_MONTHS = {
+    narrow: [
+        'E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
+    ],
+    // https://web.library.yale.edu/cataloging/months
+    short: [
+        'ene', 'feb', 'mar', 'abr', 'mayo', 'jun', 'jul', 'ago', 'set', 'oct', 'nov', 'dic',
+    ],
+    long: [
+        'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre',
+        'octubre', 'noviembre', 'diciembre',
+    ],
+};
+
+const ES_WEEKDAYS = {
+    // https://letsspeakspanish.com/blog/days-of-week-months-seasons-in-spanish/
+    narrow: [
+        'D', 'L', 'M', 'X', 'J', 'V', 'S',
+    ],
+    short: [
+        'dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb',
+    ],
+    long: [
+        'domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado',
+    ],
+};
+
+const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
+    if (typeof day === 'undefined') return;
+    const strDate = date.getDate().toString();
+    dateParts.push(strDate);
+};
+
+const processMonth = (
+    dateParts: string[],
+    month: Month | undefined,
+    date: Date,
+) => {
+    if (typeof month === 'undefined') return;
+    if (month === '2-digit' || month === 'numeric') {
+        const strMonth = (date.getMonth() + 1).toString();
+        dateParts.push(strMonth);
+    } else {
+        const finalMonth = ES_MONTHS[month][date.getMonth()];
+        dateParts.push(finalMonth);
+    }
+};
+
+const toLocaleDateString = (date: Date) => (
+    { weekday, year, month, day }: DateTimeFormatOptions = {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+    },
+) => {
+    const dateStringParts: string[] = [];
+    processWeekday(dateStringParts, year, month, day, weekday, date, ES_WEEKDAYS);
+    const dateConnection = month === '2-digit' || month === 'numeric' ? '/' : ' ';
+    const dateParts: string[] = [];
+    processDay(dateParts, day, date);
+    if (month === 'long' && day != null) dateParts.push('de');
+    processMonth(dateParts, month, date);
+    if (month === 'long') dateParts.push('de');
+    processYear(dateParts, year, date);
+    dateStringParts.push(dateParts.join(dateConnection));
+    return dateStringParts.join(' ');
+};
+
+export const esDateFormatter = dateFormatter(toNumericLocaleTimeString, toLocaleDateString);