@24i/bigscreen-sdk 1.0.10-alpha.2209 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.10-alpha.2209",
+    "version": "1.0.10",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -52,15 +52,15 @@
         "@24i/eslint-config-smartapps-bigscreen-linters": "file:./libs/linters",
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
         "@babel/core": "^7.19.0",
-        "@babel/preset-env": "^7.19.0",
+        "@babel/preset-env": "^7.20.2",
         "@types/fs-extra": "^9.0.13",
         "@types/inquirer": "^9.0.3",
         "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
-        "@types/react": "^18.0.25",
+        "@types/react": "^18.0.26",
         "babel-jest": "^29.0.3",
-        "chalk": "^5.0.1",
+        "chalk": "^5.2.0",
         "coveralls": "^3.1.1",
         "cross-env": "^7.0.3",
         "fs-extra": "^10.1.0",
@@ -71,7 +71,7 @@
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",
         "minimist": "^1.2.6",
-        "patch-package": "^6.4.7",
+        "patch-package": "^6.5.0",
         "sass": "^1.54.9",
         "sass-true": "^6.1.0",
         "ts-jest": "^29.0.3",

package/packages/async-image/src/AsyncImage.tsx

@@ -1,7 +1,7 @@
 import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 
 export type Props = {
-    src: string;
+    src?: string;
     clearBeforeLoading?: boolean;
     onImageLoad?: (src: string) => void;
     onImageError?: (src: string) => void;
@@ -17,6 +17,7 @@ export class AsyncImage extends Component<Props> {
     isCleared = true;
 
     static defaultProps = {
+        src: undefined,
         clearBeforeLoading: true,
     };
 
@@ -30,7 +31,7 @@ export class AsyncImage extends Component<Props> {
 
     componentDidMount() {
         const { src } = this.props;
-        this.updateImage(src);
+        this.updateImage(src!);
     }
 
     private readonly onLoad = () => {
@@ -47,27 +48,31 @@ export class AsyncImage extends Component<Props> {
     private readonly onError = () => {
         if (this.isMounted) {
             const { onImageError } = this.props;
-            this.clearImage();
+            this.clearBackground();
             if (typeof onImageError === 'function') {
                 onImageError(this.src);
             }
         }
     };
 
-    private clearImage() {
+    private clearBackground() {
         if (!this.isCleared) {
             this.domRef.current!.style.backgroundImage = '';
             this.isCleared = true;
         }
     }
 
+    clearImage() {
+        this.src = '';
+        this.clearBackground();
+    }
+
     updateImage(src: string) {
-        if (src === this.src) return;
-        if (!src) {
+        if (typeof src !== 'string') return;
+        if (src === '') {
             this.src = '';
-            this.image.src = '';
-            this.clearImage();
-        } else {
+            this.onError();
+        } else if (src !== this.src) {
             this.src = src;
             this.loadImage(src);
         }
@@ -77,7 +82,7 @@ export class AsyncImage extends Component<Props> {
         const { props: { clearBeforeLoading }, image } = this;
         image.src = src;
         if (clearBeforeLoading === true && !image.complete) {
-            this.clearImage();
+            this.clearBackground();
         }
     }
 

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

@@ -4,7 +4,7 @@ import {
     ScreenSaverStatus,
     VolumeRange,
 } from '@24i/bigscreen-sdk/driver-base';
-import { IJavaScriptBridge } from './types';
+import { IJavaScriptBridge, DeviceInfo } from './types';
 import { getFirmware } from './formatUserAgent';
 import { getKeyMap } from './keymap';
 
@@ -25,7 +25,9 @@ declare global {
 export class DeviceAndroidTV extends DeviceBase {
     keyMap = getKeyMap();
 
-    platformInfo = window.JavaScriptBridge.bridgeJavaScriptToAndroid_GetDeviceInfo();
+    deviceInfo = window.JavaScriptBridge.bridgeJavaScriptToAndroid_GetDeviceInfo();
+
+    platformInfo: DeviceInfo = this.deviceInfo ? JSON.parse(this.deviceInfo) : '';
 
     firmware = getFirmware(navigator.userAgent);
 
@@ -44,7 +46,8 @@ export class DeviceAndroidTV extends DeviceBase {
     }
 
     /**
-     * Handles keydown/up events for the BACK key which are dispatched on the document
+     * Handles keydown/up events for the BACK, FF, REW, STOP, PLAY
+     * 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
@@ -53,8 +56,32 @@ export class DeviceAndroidTV extends DeviceBase {
         if (event.bigscreenSdkRelaunched) { // prevent to relaunch event in loop
             return;
         }
-        const { keyCode } = event;
-        if (keyCode === this.keyMap.BACK) {
+
+        const { key } = event;
+        let { keyCode } = event;
+
+        /**
+         * Remap KeyCode by its key value.
+         * On Android all colors keys and some others coming with "0" keyCode.
+         */
+        if (key === 'ColorF0Red') keyCode = this.keyMap.RED;
+        if (key === 'ColorF1Green') keyCode = this.keyMap.GREEN;
+        if (key === 'ColorF2Yellow') keyCode = this.keyMap.YELLOW;
+        if (key === 'ColorF3Blue') keyCode = this.keyMap.BLUE;
+        if (key === 'ClosedCaptionToggle') keyCode = this.keyMap.SUBTITLES;
+
+        if (keyCode === this.keyMap.BACK
+            || keyCode === this.keyMap.STOP
+            || keyCode === this.keyMap.FF
+            || keyCode === this.keyMap.REW
+            || keyCode === this.keyMap.PLAYPAUSE
+            || keyCode === this.keyMap.PLAY
+            || keyCode === this.keyMap.RED
+            || keyCode === this.keyMap.GREEN
+            || keyCode === this.keyMap.YELLOW
+            || keyCode === this.keyMap.BLUE
+            || keyCode === this.keyMap.SUBTITLES
+        ) {
             event.preventDefault();
             event.stopImmediatePropagation();
             const newEvent = new KeyboardEvent(event.type, {

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

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

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

@@ -4,6 +4,11 @@ import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
 export const getKeyMap = () => {
     KeyMap.overrideValues({
         BACK: { keyCode: 4 },
+        STOP: { keyCode: 178 },
+        FF: { keyCode: 90 },
+        REW: { keyCode: 89 },
+        PLAY: { keyCode: 126 },
+        SUBTITLES: { keyCode: 175 },
     });
     return KeyMap.generateKeyCodeKeyMap();
 };

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

@@ -1,27 +1,31 @@
 interface JavaScriptBridge {
     /**
-     * It returns device info.
+     * It returns a JSON string with device info.
+     * @return JSON string with the information about the device brand, model and Android version.
+     * Ex. '{"deviceBrand": "Sony", "deviceModel": "BRAVIA 4K 2015", "osVersion": "7.0" }'
      */
-    bridgeJavaScriptToAndroid_GetDeviceInfo: () => {
-        /**
-         * Device brand. Ex. "Sony"
-         */
-        deviceBrand: string,
-        /**
-         * Device model. Ex. "BRAVIA 4K 2015"
-         */
-        deviceModel: string,
-        /**
-         * Android version. Ex. "7.0"
-         */
-        osVersion: string,
-    },
+    bridgeJavaScriptToAndroid_GetDeviceInfo: () => string,
     /**
      * It simulates a native Android back press.
      */
     bridgeJavaScriptToAndroid_Back: () => void,
 }
 
+export type DeviceInfo = {
+    /**
+     * Device brand. Ex. "Sony"
+     */
+    deviceBrand: string,
+    /**
+     * Device model. Ex. "BRAVIA 4K 2015"
+     */
+    deviceModel: string,
+    /**
+     * Android version. Ex. "7.0"
+     */
+    osVersion: string,
+};
+
 export interface IJavaScriptBridge {
     JavaScriptBridge: JavaScriptBridge,
 }

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

@@ -320,6 +320,10 @@ export const GUIDE = new Key({
     keyCode: 458,
 });
 
+export const SUBTITLES = new Key({
+    id: 'SUBTITLES',
+});
+
 // MARK: Xbox specials
 export const GAMEPAD_LEFT_THUMBSTICK_UP = new Key({
     id: 'GAMEPAD_LEFT_THUMBSTICK_UP',
@@ -384,7 +388,3 @@ export const GAMEPAD_A = new Key({
 export const GAMEPAD_B = new Key({
     id: 'GAMEPAD_B',
 });
-
-export const SUBTITLES = new Key({
-    id: 'SUBTITLES',
-});

package/packages/driver-base/src/types/KeycodeKeyMap.ts

@@ -61,6 +61,7 @@ export type KeycodeKeyMap = {
     EXIT: number,
     INFO: number,
     GUIDE: number,
+    SUBTITLES: number,
 
     // Xbox specials
     GAMEPAD_LEFT_THUMBSTICK_UP: number,
@@ -82,6 +83,4 @@ export type KeycodeKeyMap = {
 
     GAMEPAD_A: number,
     GAMEPAD_B: number,
-
-    SUBTITLES: number,
 };

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

@@ -51,6 +51,7 @@ export function getKeyMap() {
         EXIT: { keyCode: EntoneInput.KEY_EXIT },
         INFO: { keyCode: EntoneInput.KEY_INFO },
         GUIDE: { keyCode: EntoneInput.KEY_GUIDE },
+        SUBTITLES: { keyCode: EntoneInput.KEY_SUBTITLE },
     });
     return KeyMap.generateKeyCodeKeyMap();
 }

package/packages/driver-tizen/src/TizenKeys.ts

@@ -49,6 +49,7 @@ export class TizenKeys {
         tizen.tvinputdevice.registerKey('PreviousChannel');
         tizen.tvinputdevice.registerKey('Info');
         tizen.tvinputdevice.registerKey('Guide');
+        tizen.tvinputdevice.registerKey('Caption');
     }
 
     buildKeyMap(keyCodeMap: KeyCodeMap) {
@@ -84,6 +85,7 @@ export class TizenKeys {
             EXIT: { keyCode: keyCodeMap.Exit },
             INFO: { keyCode: keyCodeMap.Info },
             GUIDE: { keyCode: keyCodeMap.Guide },
+            SUBTITLES: { keyCode: keyCodeMap.Caption },
         });
         this.keyMap = KeyMap.generateKeyCodeKeyMap();
     }

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

@@ -49,6 +49,8 @@ export const getKeyMap = () => {
         CHANNEL_UP: { keyCode: window.VK_CHANNEL_UP || 427 },
         CHANNEL_DOWN: { keyCode: window.VK_CHANNEL_DOWN || 428 },
         INFO: { keyCode: window.VK_INFO },
+        // VK_SUBTITLE defined on 2019, not on 2021.
+        SUBTITLES: { keyCode: window.VK_SUBTITLE || 460 },
     });
     return KeyMap.generateKeyCodeKeyMap();
 };

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

@@ -4,6 +4,7 @@ export const getKeyMap = () => {
     overrideValues({
         BACK: { keyCode: 461 },
         TXT: { keyCode: 110 },
+        SUBTITLES: { keyCode: 460 },
     });
     return generateKeyCodeKeyMap();
 };

package/packages/types-bigscreen-jsx/index.d.ts

@@ -2824,6 +2824,7 @@ declare namespace React {
         button: DetailedHTMLFactory<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
         canvas: DetailedHTMLFactory<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
         caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
+        center: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>;
         col: DetailedHTMLFactory<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;
@@ -3161,6 +3162,7 @@ declare global {
             button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
             canvas: React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>;
             caption: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            center: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             cite: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             code: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
             col: React.DetailedHTMLProps<React.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>;

package/packages/utils/src/textUtils.ts

@@ -32,7 +32,7 @@ const trimWithEllipsis = (
         } else {
             let currentPosition = originalTextContent.length - 1;
             do {
-                const charToAdd = originalTextContent.at(currentPosition);
+                const charToAdd = originalTextContent.charAt(currentPosition);
                 stringBuffer = `${charToAdd}${stringBuffer}`;
                 row.textContent = `${ellipsis}${stringBuffer}`;
                 currentPosition -= 1;