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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.5-alpha.2129",
+    "version": "1.0.5-alpha.2131",
     "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/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/toast/src/ToastService.scss

@@ -1,6 +1,7 @@
 .toast-service-root {
     position: absolute;
     left: 0;
+    right: 0;
     top: 0;
     width: 0;
     height: 0;