@24i/bigscreen-sdk 1.0.11 → 1.0.12-alpha.2254

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.11",
+    "version": "1.0.12-alpha.2254",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -44,7 +44,7 @@
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.2",
         "csstype": "^3.1.1",
-        "lottie-web": "5.9.6",
+        "lottie-web": "5.10.2",
         "prop-types": "^15.8.1"
     },
     "devDependencies": {
@@ -53,31 +53,31 @@
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
         "@babel/core": "^7.19.0",
         "@babel/preset-env": "^7.20.2",
-        "@types/fs-extra": "^9.0.13",
+        "@types/fs-extra": "^11.0.1",
         "@types/inquirer": "^9.0.3",
         "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
         "@types/react": "^18.0.26",
-        "babel-jest": "^29.0.3",
+        "babel-jest": "^29.4.1",
         "chalk": "^5.2.0",
         "coveralls": "^3.1.1",
         "cross-env": "^7.0.3",
-        "fs-extra": "^10.1.0",
+        "fs-extra": "^11.1.0",
         "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
         "inquirer": "^9.1.4",
         "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",
-        "minimist": "^1.2.6",
+        "minimist": "^1.2.7",
         "patch-package": "^6.5.0",
         "sass": "^1.54.9",
         "sass-true": "^6.1.0",
         "ts-jest": "^29.0.3",
         "ts-node": "^10.9.1",
         "tsconfig-paths-jest": "0.0.1",
-        "typescript": "^4.8.3"
+        "typescript": "^4.9.5"
     },
     "exports": {
         "./adobe-heartbeat": "./packages/adobe-heartbeat/src/index.ts",

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolsList.tsx

@@ -7,6 +7,7 @@ import {
 import { BACK } from '@24i/bigscreen-sdk/device/keymap';
 import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Storage } from '@24i/bigscreen-sdk/storage';
 import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
 import { DeveloperToolItem } from './DeveloperToolItem';
 import { reloadApp } from '../utils/reload';
@@ -39,6 +40,11 @@ export class DeveloperToolsList extends Component<Props> {
         reloadApp();
     };
 
+    async onClearDataToolPress() {
+        await Storage.clear();
+        reloadApp();
+    }
+
     onKeyDown = (event: KeyboardEvent) => {
         if (BACK.is(event)) {
             const { onBack } = this.props;
@@ -90,6 +96,11 @@ export class DeveloperToolsList extends Component<Props> {
                                 />
                             );
                         })}
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Clear data"
+                            onPress={this.onClearDataToolPress}
+                        />
                         <DeveloperToolItem
                             ref={this.getNavigationRef()}
                             label="Restart app"

package/packages/device/src/getKeyDigit.ts

@@ -1,8 +1,8 @@
 import { KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
 
 export const createGetKeyDigit = (
-    getKeyMap: () => Partial<KeycodeKeyMap>): (event: KeyboardEvent
-    ) => number | undefined => {
+    getKeyMap: () => Partial<KeycodeKeyMap>,
+): (event: KeyboardEvent) => number | undefined => {
     const {
         NUM_0, NUM_1, NUM_2, NUM_3, NUM_4, NUM_5, NUM_6, NUM_7, NUM_8, NUM_9,
         KP_0, KP_1, KP_2, KP_3, KP_4, KP_5, KP_6, KP_7, KP_8, KP_9,

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

@@ -6,7 +6,7 @@ import {
 } from '@24i/bigscreen-sdk/driver-base';
 import { IJavaScriptBridge, DeviceInfo } from './types';
 import { getFirmware } from './formatUserAgent';
-import { getKeyMap } from './keymap';
+import { getKeyMap, AndroidKeyMap } from './keymap';
 
 interface CustomKeyboardEvent extends KeyboardEvent {
     /** Flag indicating that the driver has already re-emitted this event. */
@@ -69,6 +69,8 @@ export class DeviceAndroidTV extends DeviceBase {
         if (key === 'ColorF2Yellow') keyCode = this.keyMap.YELLOW;
         if (key === 'ColorF3Blue') keyCode = this.keyMap.BLUE;
         if (key === 'ClosedCaptionToggle') keyCode = this.keyMap.SUBTITLES;
+        if (keyCode === AndroidKeyMap.STOP) keyCode = this.keyMap.STOP;
+        if (keyCode === AndroidKeyMap.PAUSE) keyCode = this.keyMap.PAUSE;
 
         if (keyCode === this.keyMap.BACK
             || keyCode === this.keyMap.STOP

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

@@ -4,11 +4,24 @@ import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
 export const getKeyMap = () => {
     KeyMap.overrideValues({
         BACK: { keyCode: 4 },
-        STOP: { keyCode: 178 },
+        STOP: { keyCode: 86 },
         FF: { keyCode: 90 },
         REW: { keyCode: 89 },
         PLAY: { keyCode: 126 },
+        PAUSE: { keyCode: 127 },
+        PLAYPAUSE: { keyCode: 85 },
         SUBTITLES: { keyCode: 175 },
     });
     return KeyMap.generateKeyCodeKeyMap();
 };
+
+/**
+ * For the specific AndroidTV devices like Sony Bravia or Nvidia Shield
+ * there are different KeyCodes for some buttons than on other platforms.
+ * In that case we need to re-map this specific KeyCodes to the
+ * same values as we using in generic KeyMap list for the AndroidTV.
+ */
+export const AndroidKeyMap = {
+    STOP: 178,
+    PAUSE: 85,
+};

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

@@ -4,7 +4,7 @@
 import { KeyMap } from '@24i/bigscreen-sdk/driver-base';
 
 export const getKeyMap = () => {
-    const { VirtualKey } = window.Windows?.System;
+    const { VirtualKey } = window.Windows.System;
     KeyMap.overrideValues({
         LEFT: {
             keyCode: VirtualKey.left,

package/packages/epg/src/v2/DataManager.ts

@@ -356,10 +356,13 @@ export class DataManager implements IDataManager {
             const current = data[i];
             const previous = data[i - 1];
             if (previous.program!.endTime < current.program!.startTime) {
-                data.splice(i, 0,
+                data.splice(
+                    i,
+                    0,
                     this.generateNoDataProgram(
                         previous.program!.endTime, current.program!.startTime,
-                    ));
+                    ),
+                );
             }
         }
     }

package/packages/jsx/src/index.ts

@@ -27,5 +27,5 @@ export type {
     ClassComponentInterface,
     DeclareProps,
 } from './types';
-// eslint-disable-next-line import/no-default-export
+// eslint-disable-next-line import/no-default-export, no-restricted-exports
 export { createElement as default } from './virtualDOM';

package/packages/router/src/Route.tsx

@@ -6,6 +6,8 @@ import {
     replaceNode,
 } from '@24i/bigscreen-sdk/jsx';
 import { filter, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { addClass, removeClass } from '@24i/bigscreen-sdk/utils';
+import { menuService } from '@24i/bigscreen-sdk/menu';
 import { getCurrentHash } from './utils';
 import { IRoute, RouteParams } from './types';
 
@@ -17,6 +19,8 @@ type Props = {
     Component: Function,
 };
 
+const MRCU_DISABLED = 'mrcu-disabled';
+
 export class Route extends Component<Props> {
     wasCreated = false;
 
@@ -49,7 +53,16 @@ export class Route extends Component<Props> {
         return {};
     }
 
+    onMenuVisibilityChange = (isVisible: boolean) => {
+        if (isVisible) {
+            addClass(this.domRef, MRCU_DISABLED);
+        } else {
+            removeClass(this.domRef, MRCU_DISABLED);
+        }
+    };
+
     show() {
+        menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
         this.showRoute();
         if (!this.wasCreated) {
             this.mountRoute();
@@ -60,6 +73,7 @@ export class Route extends Component<Props> {
     }
 
     hide() {
+        menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
         if (this.wasCreated) {
             this.component.current?.deactivate();
             this.hideRoute();

package/packages/router/src/history.ts

@@ -2,8 +2,10 @@ import { NavigationConfig } from './types';
 
 export const history: string[] = [];
 
+const pathWithHash = (path:string) => `#${path}`;
+
 const navigate = (path: string) => {
-    window.location.href = `#${path}`;
+    window.location.href = pathWithHash(path);
 };
 
 export const go = (path: string, { skipHistory, replaceHistory }: NavigationConfig = {}) => {
@@ -22,3 +24,8 @@ export const back = () => {
 export const clearHistory = () => {
     history.length = 0;
 };
+
+export const replaceState = (path: string) => {
+    history[history.length - 1] = path;
+    window.history.replaceState(null, '', pathWithHash(path));
+};

package/packages/router/src/index.ts

@@ -1,6 +1,6 @@
 export { Router } from './Router';
 export { Route } from './Route';
 export type { IRoute } from './types';
-export { history, go, back, clearHistory } from './history';
+export { history, go, back, clearHistory, replaceState } from './history';
 export { focusActiveRoute } from './focusActiveRoute';
 export { fromSafeUrl, toSafeUrl } from './utils';

package/packages/utils/src/wait.ts

@@ -1 +1,3 @@
-export const wait = (waitMs: number) => new Promise((r) => setTimeout(r, waitMs));
+export const wait = (waitMs: number) => new Promise((r) => {
+    setTimeout(r, waitMs);
+});

package/packages/utils/src/xhr/xhrSendRetry.ts

@@ -68,7 +68,9 @@ Promise<XhrResponse | TypeError> {
     const shouldRetryFn = config.shouldRetry || defaultRetryConfig.shouldRetry;
     const shouldRetry = shouldRetryFn({ options, response, error });
     if (shouldRetry) {
-        await new Promise((res) => window.setTimeout(res, config.retryDelay));
+        await new Promise((res) => {
+            window.setTimeout(res, config.retryDelay);
+        });
         config.currentRetryAttempt += 1;
         return xhrSendRetry(url, options);
     }

package/packages/zapping/src/ChannelZapping.ts

@@ -99,6 +99,15 @@ export class ChannelZapping<T extends Asset = Asset> {
         }
     }
 
+    /**
+     * Updates the current index of channel zapping.
+     * @param channels the array of all channels
+     * @param currentChannel currently active channel
+     */
+    onUpdate(channels: T[], currentChannel: T) {
+        this.currentIndex = getCurrentChannelIndex(channels, currentChannel);
+    }
+
     /**
      * Changes to the next/previous channel.
      * @param direction direction of the change

package/packages/zapping/src/Zapping.tsx

@@ -96,10 +96,20 @@ export class Zapping<T extends Asset = Asset> extends Component<Props<T>> {
         this.channelZapping!.onKeyDown(event);
     };
 
+    /**
+     * Updates channel zapping with new data.
+     * @param channels the array of all channels
+     * @param currentChannel currently active channel
+     */
+    onUpdate(channels: T[], currentChannel: T) {
+        this.channelZapping!.onUpdate(channels, currentChannel);
+    }
+
     render() {
         const { numericZapper } = this.props;
         return numericZapper
             ? <NumericZapper {...numericZapper} ref={zapperServiceRef} />
+            // eslint-disable-next-line react/jsx-no-useless-fragment
             : <></>;
     }
 }