@24i/bigscreen-sdk 1.0.15 → 1.0.16-alpha.2315

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.15",
+    "version": "1.0.16-alpha.2315",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -19,7 +19,7 @@
         "typecheck:cached": "npm run typecheck -- --incremental",
         "test": "npm run jest -- --no-cache",
         "test:cached": "npm run jest",
-        "coverage": "npm run jest -- --runInBand --coverage && coveralls < coverage/lcov.info",
+        "coverage": "npm run jest -- --runInBand --coverage",
         "branchlint": "branchlint",
         "generate-changelog": "smartapps-bigscreen-changelog-generator",
         "deploy-docs": "cd website && npm run build && vercel ./build/prd-nxg-bigscreen --token=$VERCEL_TOKEN_24I --local-config=./vercel.json --scope=24i -f -c --prod",
@@ -74,6 +74,7 @@
         "jest": "^29.3.1",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^29.0.3",
+        "jest-sonar": "^0.2.15",
         "minimist": "^1.2.8",
         "patch-package": "^6.5.0",
         "sass": "^1.60.0",

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

@@ -29,9 +29,9 @@ export const mapPayload = (
     payload: AnyPayload,
 ) => {
     const pageParams = triggerName === 'scene_view' ? {
-        _ee: payload.firstEvent ? 1 : 0,
-        _fv: payload.firstVisit ? 1 : 0,
-        _ss: payload.sessionStarted ? 1 : 0,
+        ...(payload.firstEvent && { _ee: 1 }),
+        ...(payload.firstVisit && { _fv: 1 }),
+        ...(payload.sessionStarted && { _ss: 1 }),
     } : {};
     const gtagPayload: Record<string, any> = {
         'ep.event_trigger': triggerName,

package/packages/interactable/README.md

@@ -12,6 +12,7 @@ It provides common functionality for you.
 ## Props
 - `onPress` - called for onClick and onKeyDown
 - `ref` is forwarded to underlying `div`
+- `blockRepeatedKeyDown` - interactable must suppress repeated onPress calls, until the key is released. This is because because keyDown event is repeatedly fired when user holds key on webTv and Adrodid Tv. This may lead to unpredictable behavior.
 - other `div` props
 
 ## Provided functionality
@@ -34,4 +35,4 @@ renders
 <div class="btn btn-primary" tabindex="0">
     Play video
 </div>
-```
+```

package/packages/interactable/src/Interactable.tsx

@@ -3,21 +3,46 @@ import { isClickOrEnter } from '@24i/bigscreen-sdk/device';
 import { Props } from './interface';
 
 export const Interactable = forwardRef<Props>(
-    ({ children, onPress, ...otherProps }, ref: Reference<HTMLDivElement> | null) => {
+    ({ children, onPress, blockRepeatedKeyDown, ...otherProps },
+        ref: Reference<HTMLDivElement> | null) => {
         const domRef = ref || createRef<HTMLDivElement>();
-        const onPressProxy = (e: KeyboardEvent | MouseEvent) => {
-            if (typeof onPress === 'function' && isClickOrEnter(e)) onPress(e);
+
+        let keyIsReleased = true;
+
+        const releaseKey = () => {
+            keyIsReleased = true;
+            window.removeEventListener('keyup', releaseKey);
+        };
+
+        const onClickProxy = (e: MouseEvent) => {
+            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 });
         };
+
         return (
             <div
                 {...otherProps}
                 ref={domRef}
                 onMouseEnter={onMouseEnter}
-                onClick={onPressProxy}
-                onKeyDown={onPressProxy}
+                onClick={onClickProxy}
+                onKeyDown={onKeyDownProxy}
                 tabIndex={0}
             >
                 {children}

package/packages/interactable/src/interface.ts

@@ -3,4 +3,5 @@ import { Children } from '@24i/bigscreen-sdk/jsx';
 export type Props = {
     children?: Children,
     onPress?: (event: KeyboardEvent | MouseEvent) => void,
+    blockRepeatedKeyDown?: boolean,
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;

package/packages/jsx/src/test-utils/index.ts

@@ -1,5 +1,6 @@
 export { click } from './click';
 export { enter } from './enter';
 export { keydown } from './keydown';
+export { keyup } from './keyup';
 export { shallow } from './shallow';
 export { MountedComponent } from './MountedComponent';

package/packages/jsx/src/test-utils/keyup.ts

@@ -0,0 +1,27 @@
+import { Reference, Component } from '../index';
+import { unwrapReference } from '../utils';
+
+type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
+
+interface Key {
+    keyCode: number,
+    code: string,
+    key?: string,
+}
+
+export const keyup = (toPress: ToPress, keyOrKeyCode: number | Key) => {
+    const element = unwrapReference<ToPress>(toPress);
+    let kbEventOptions: KeyboardEventInit;
+    if (typeof keyOrKeyCode === 'number') {
+        kbEventOptions = { keyCode: keyOrKeyCode };
+    } else {
+        const { keyCode, code, key } = keyOrKeyCode;
+        kbEventOptions = { keyCode, code, key };
+    }
+    const event = new KeyboardEvent('keyup', kbEventOptions);
+    if ((element as any).onKeyUp) {
+        (element as any).onKeyUp(event);
+    } else if ((element as any).dispatchEvent) {
+        (element as Element).dispatchEvent(event);
+    }
+};

package/packages/modal-service/src/ModalService.tsx

@@ -10,11 +10,15 @@ type Props = {
     isFocusable?: boolean;
 };
 
+type RenderFunction = (ref:Reference) => JSX.Element;
+
 export class ModalService extends Component<Props> {
     private openState = false;
 
     private readonly rootRef = createRef<HTMLDivElement>();
 
+    private readonly modalQueue: RenderFunction[] = [];
+
     modalRef = createRef<any>();
 
     static defaultProps = {
@@ -40,7 +44,19 @@ export class ModalService extends Component<Props> {
         return this.modalRef;
     }
 
-    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element) {
+    private enqueueModal(modal: RenderFunction) {
+        this.modalQueue.push(modal);
+    }
+
+    private dequeueModal() {
+        return this.modalQueue.shift();
+    }
+
+    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element, queueModal = false) {
+        if (queueModal && this.openState) {
+            this.enqueueModal(render);
+            return;
+        }
         const { isFocusable } = this.props;
         this.openState = true;
         this.clearMount(
@@ -60,6 +76,8 @@ export class ModalService extends Component<Props> {
         if (isFocusable) {
             focusCandidate();
         }
+        const modalFromQueue = this.dequeueModal();
+        if (modalFromQueue) this.open(modalFromQueue);
     }
 
     isOpen() {

package/packages/player-ui/src/PlayerInteractable.tsx

@@ -58,6 +58,7 @@ export class PlayerInteractable extends Component<Props> {
                 ref={this.div}
                 className={`player-ui-button ${hidden ? DISPLAY_NONE : ''} ${className}`}
                 onPress={this.onPress}
+                blockRepeatedKeyDown
             >
                 {children}
             </Interactable>