@24i/bigscreen-sdk 1.0.17-alpha.2323 → 1.0.17-alpha.2326

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.17-alpha.2323",
+    "version": "1.0.17-alpha.2326",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -37,7 +37,7 @@
     },
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
-        "@24i/appstage-shared-analytics": "1.0.15-alpha.53",
+        "@24i/appstage-shared-analytics": "1.0.16-alpha.58",
         "@24i/appstage-shared-events-manager": "1.0.7",
         "@24i/appstage-shared-perf-utils": "1.0.5",
         "@24i/player-base": "6.10.0",
@@ -62,7 +62,7 @@
         "@types/jest": "^29.2.3",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.7.18",
-        "@types/react": "^18.0.28",
+        "@types/react": "^18.0.33",
         "babel-jest": "^29.4.3",
         "chalk": "^5.2.0",
         "coveralls": "^3.1.1",
@@ -279,6 +279,7 @@
         "./utils/timers": "./packages/utils/src/timers/index.ts",
         "./utils/wait": "./packages/utils/src/wait.ts",
         "./utils/xhr": "./packages/utils/src/xhr/index.ts",
+        "./utils/keyPress": "./packages/utils/src/keyPress/index.ts",
         "./utils": "./packages/utils/src/index.ts",
         "./volume-control/interface": "./packages/volume-control/src/IVolumeControlUI.ts",
         "./volume-control": "./packages/volume-control/src/index.ts",

package/packages/analytics/src/clients/GoogleAnalytics/constants.ts

@@ -106,6 +106,7 @@ export const gtagPayloadParams: Record<string, string> = {
     seriesTitle: `${stringParameter}.video_series_title`,
     url: `${stringParameter}.video_url`,
     assetId: `${stringParameter}.video_asset_id`,
+    externalId: `${stringParameter}.video_external_id`,
     channelNumber: `${numericParameter}.channel_number`,
     channelTitle: `${stringParameter}.channel_title`,
 };

package/packages/interactable/src/Interactable.tsx

@@ -7,31 +7,12 @@ export const Interactable = forwardRef<Props>(
         ref: Reference<HTMLDivElement> | null) => {
         const domRef = ref || createRef<HTMLDivElement>();
 
-        let keyIsReleased = true;
-
-        const releaseKey = () => {
-            keyIsReleased = true;
-            window.removeEventListener('keyup', releaseKey);
-        };
-
-        const onClickProxy = (e: MouseEvent) => {
+        const onPressProxy = (e: MouseEvent | KeyboardEvent) => {
             if (typeof onPress === 'function' && isClickOrEnter(e)) {
                 onPress(e);
             }
         };
 
-        const onKeyDownProxy = (e: KeyboardEvent) => {
-            if (typeof onPress === 'function' && isClickOrEnter(e) && keyIsReleased) {
-                if (blockRepeatedKeyDown) {
-                    keyIsReleased = false;
-                    window.addEventListener('keyup', releaseKey);
-                    onPress(e);
-                } else {
-                    onPress(e);
-                }
-            }
-        };
-
         const onMouseEnter = () => {
             domRef.current!.focus({ preventScroll: true });
         };
@@ -41,8 +22,8 @@ export const Interactable = forwardRef<Props>(
                 {...otherProps}
                 ref={domRef}
                 onMouseEnter={onMouseEnter}
-                onClick={onClickProxy}
-                onKeyDown={onKeyDownProxy}
+                onClick={onPressProxy}
+                onKeyDown={onPressProxy}
                 tabIndex={0}
             >
                 {children}

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

@@ -1406,7 +1406,7 @@ declare namespace React {
         onCompositionUpdateCapture?: CompositionEventHandler<T> | undefined;
 
         // Focus Events
-        onFocus?: (event: any) => void;
+        onFocus?: (event: globalThis.FocusEvent) => void;
         onFocusCapture?: (event: globalThis.FocusEvent) => void;
         onBlur?: (event: globalThis.FocusEvent) => void;
         onBlurCapture?: (event: globalThis.FocusEvent) => void;

package/packages/utils/README.md

@@ -35,6 +35,8 @@ import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
 - **[timers](#timers)** - functions to simplify work with setTimeout and setInterval.
 - **[counter](#counter)** - exports `createCounter` that allows you to add value to counter till callback is triggered at some point.
 - **[xhr](#xhr)** - provides wrap over `XMLHttpRequest`, with the possibility to repeat the failing request.
+- **[simulateKeyPress](#simulateKeyPress)** - simulate key press in the `keydown` handler.
+- **[keyPressSimulator](#keyPressSimulator)** - simulate key press globally for the specific keys.
 
 ### addClass
 Adds a class to the element in the reference.
@@ -347,3 +349,11 @@ const retryConfig = {
 const options = { ...xhrSendOptions, retryConfig };
 const response = await xhrSendRetry(url, options);
 ```
+
+### keyPressSimulator and simulateKeyPress
+Modifies `keydown` event behavior to be similar to `keypress` and causes triggering `keydown` event only once
+before the key is released. This is because `keypress` event is deprecated and it is not implemented
+with the same behavior on all platforms.
+
+- Use globally for the specific keys with `keyPressSimulator` util.
+- Use locally in the `keydown` handler with `simulateKeyPress` util.

package/packages/utils/src/index.ts

@@ -34,3 +34,8 @@ export {
 } from './timeConstants';
 export { xhrSend, xhrSendRetry, defaultRetryConfig, mockXhr } from './xhr';
 export type { XhrOptions, XhrResponse, RetryConfig, RSOptions, ShouldRetryParam } from './xhr';
+export {
+    registerKeyPressSimulator,
+    unregisterKeyPressSimulator,
+    simulateKeyPress,
+} from './keyPress';

package/packages/utils/src/keyPress/index.ts

@@ -0,0 +1,2 @@
+export { registerKeyPressSimulator, unregisterKeyPressSimulator } from './keyPressSimulator';
+export { simulateKeyPress } from './simulateKeyPress';

package/packages/utils/src/keyPress/keyPressSimulator.ts

@@ -0,0 +1,44 @@
+import { Key } from '@24i/bigscreen-sdk/driver-base/keymap';
+import { stopEvent } from '@24i/bigscreen-sdk/utils';
+
+let keysPressed: Record<number, boolean>;
+
+const onKeyDown = (e: KeyboardEvent) => {
+    const { keyCode } = e;
+    if (keysPressed[keyCode] === true) {
+        stopEvent(e);
+    } else if (typeof keysPressed[keyCode] !== 'undefined') {
+        keysPressed[keyCode] = true;
+    }
+};
+
+const onKeyUp = (e: KeyboardEvent) => {
+    const { keyCode } = e;
+    if (keysPressed[keyCode] === true) keysPressed[keyCode] = false;
+};
+
+/**
+ * Modifies `keydown` event behavior to similar to `keypress` and causes
+ * triggering `keydown` event only once before the key is released. This is
+ * because `keypress` event is deprecated and it is not implemented with the same
+ * behavior on all platforms. This functionality is applied across the board for
+ * all provided keys globally. To use in one specific handler only
+ * use `simulateKeyPress` util.
+ * @param keys array with keys to behave as keypress
+ */
+export const registerKeyPressSimulator = (keys: Key[]) => {
+    keysPressed = {};
+    keys.forEach((key) => {
+        keysPressed[key.keyCode] = false;
+    });
+    window.document.addEventListener('keydown', onKeyDown, true);
+    window.document.addEventListener('keyup', onKeyUp, true);
+};
+
+/**
+ * Unregister key press simulator events, turn off the functionality.
+ */
+export const unregisterKeyPressSimulator = () => {
+    window.document.removeEventListener('keydown', onKeyDown, true);
+    window.document.removeEventListener('keyup', onKeyUp, true);
+};

package/packages/utils/src/keyPress/simulateKeyPress.ts

@@ -0,0 +1,25 @@
+const NO_KEY = -1;
+
+/**
+ * Returns a new `keydown` handler wrapped with the simulated key press functionality.
+ * Modifies `keydown` event behavior to similar to `keypress` and causes triggering keydown
+ * event only once before the key is released. This is because `keypress` event is deprecated
+ * and it is not implemented with the same behavior on all platforms. Apply this globally for
+ * the specific keys by using `keyPressSimulator` util.
+ * @param onKeyDown original handler for keydown event
+ * @returns decorated handler with key press functionality
+ */
+export const simulateKeyPress = (onKeyDown: (e: KeyboardEvent) => void) => {
+    let keyPressed = NO_KEY;
+    const onKeyUp = (e: KeyboardEvent) => {
+        if (e.keyCode !== keyPressed) return;
+        window.document.removeEventListener('keyup', onKeyUp);
+        keyPressed = NO_KEY;
+    };
+    return (e: KeyboardEvent) => {
+        if (keyPressed !== NO_KEY) return;
+        keyPressed = e.keyCode;
+        window.document.addEventListener('keyup', onKeyUp);
+        onKeyDown(e);
+    };
+};