@24i/bigscreen-sdk 1.1.0 → 2.1.1-alpha.2133

package/packages/focus/src/Layout/__test__/Matrix.spec.ts

@@ -0,0 +1,261 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { LEFT, RIGHT, UP, DOWN, Key } from '@24i/bigscreen-sdk/device/keymap';
+import { Matrix, CircularDirection } from '../Matrix';
+
+const simulateKey = (key: Key): KeyboardEvent => ({
+    code: key.code,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+} as unknown as KeyboardEvent);
+
+const getFocusable = () => ({
+    focus: jest.fn(),
+});
+
+const domRef = createRef(document.createElement('div'));
+
+const A1 = createRef(getFocusable());
+const A2 = createRef(getFocusable());
+const A3 = createRef(getFocusable());
+const B1 = createRef(getFocusable());
+const C1 = createRef(getFocusable());
+const C2 = createRef(getFocusable());
+const C3 = createRef(getFocusable());
+const D1 = createRef(getFocusable());
+const D2 = createRef(getFocusable());
+
+const MATRIX = [
+    [A1, B1, C1, D1],
+    [A2, B1, C2, C2],
+    [A3, B1, C3, D2],
+];
+
+describe('Matrix focus', () => {
+    let matrix: Matrix;
+
+    beforeEach(() => {
+        matrix = new Matrix({ ...Matrix.defaultProps, matrix: MATRIX, domRef, children: [] });
+    });
+
+    it('should have default index at 0, 0', () => {
+        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
+    });
+
+    it('should go A1 -> RIGHT -> B1', () => {
+        matrix.index = { x: 0, y: 0 };
+        const event = simulateKey(RIGHT);
+        matrix.onKeyDown(event);
+        expect(B1.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        B1.current!.focus.mockClear();
+    });
+
+    it('should go A1 -> DOWN -> A2', () => {
+        matrix.index = { x: 0, y: 0 };
+        const event = simulateKey(DOWN);
+        matrix.onKeyDown(event);
+        expect(A2.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        A2.current!.focus.mockClear();
+    });
+
+    it('should go D2 -> LEFT -> C3', () => {
+        matrix.index = { x: 3, y: 2 };
+        const event = simulateKey(LEFT);
+        matrix.onKeyDown(event);
+        expect(C3.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        C3.current!.focus.mockClear();
+    });
+
+    it('should go D2 -> UP -> C2', () => {
+        matrix.index = { x: 3, y: 2 };
+        const event = simulateKey(UP);
+        matrix.onKeyDown(event);
+        expect(C2.current!.focus).toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        C2.current!.focus.mockClear();
+    });
+
+    it('should not leave left boundary', () => {
+        matrix.index = { x: 0, y: 0 };
+        const event = simulateKey(LEFT);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 0, y: 0 });
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should not leave top boundary', () => {
+        matrix.index = { x: 1, y: 2 };
+        const event = simulateKey(UP);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 1, y: 2 });
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should not leave right boundary', () => {
+        matrix.index = { x: 2, y: 1 };
+        const event = simulateKey(RIGHT);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 2, y: 1 });
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should not leave bottom boundary', () => {
+        matrix.index = { x: 3, y: 2 };
+        const event = simulateKey(DOWN);
+        matrix.onKeyDown(event);
+        expect(matrix.index).toStrictEqual({ x: 3, y: 2 });
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+    });
+
+    it('should keep row (Ax -> RIGHT -> B1 -> RIGHT -> Cx)', () => {
+        const event = simulateKey(RIGHT);
+        matrix.index = { x: 0, y: 0 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C1.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 0, y: 1 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C2.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 0, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C3.current!.focus).toHaveBeenCalled();
+        C1.current!.focus.mockClear();
+        C2.current!.focus.mockClear();
+        C3.current!.focus.mockClear();
+    });
+
+    it('should keep column (C3/D2 -> UP -> C2 -> UP -> C1/D1)', () => {
+        const event = simulateKey(UP);
+        matrix.index = { x: 2, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(C1.current!.focus).toHaveBeenCalled();
+        matrix.index = { x: 3, y: 2 };
+        matrix.onKeyDown(event);
+        matrix.onKeyDown(event);
+        expect(D1.current!.focus).toHaveBeenCalled();
+        C1.current!.focus.mockClear();
+        D1.current!.focus.mockClear();
+    });
+
+    it('should skip same and focus next (C2 -> LEFT -> C2 -> B1)', () => {
+        matrix.index = { x: 3, y: 1 };
+        matrix.onKeyDown(simulateKey(LEFT));
+        expect(B1.current!.focus).toHaveBeenCalled();
+        B1.current!.focus.mockClear();
+    });
+
+    describe('circular focus', () => {
+        const commonProps = {
+            ...Matrix.defaultProps,
+            matrix: MATRIX,
+            domRef,
+            children: null as any,
+        };
+        it('should circle to the left (A1 -> left -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(D1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 3, y: 0 });
+            D1.current!.focus.mockClear();
+        });
+
+        it('should circle to the right (A1 -> right -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 3, y: 0 };
+            const event = simulateKey(RIGHT);
+            matrix.onKeyDown(event);
+            expect(A1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+            A1.current!.focus.mockClear();
+        });
+
+        it('should circle to upwards (A1 -> up -> A3)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(A3.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 2 });
+            A3.current!.focus.mockClear();
+        });
+
+        it('should circle to downwards (A3 -> down -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 2 };
+            const event = simulateKey(DOWN);
+            matrix.onKeyDown(event);
+            expect(A1.current!.focus).toHaveBeenCalled();
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+            A1.current!.focus.mockClear();
+        });
+
+        it('should circle horizontally and vertically (A3 -> down -> A1 -> left -> D1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.ALL });
+            matrix.index = { x: 0, y: 2 };
+            let event = simulateKey(DOWN);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+
+            event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 3, y: 0 });
+            A1.current!.focus.mockClear();
+            D1.current!.focus.mockClear();
+        });
+
+        it('given vertical should not circle to horizontally (A1 -> left -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+        });
+
+        it('given horizontal should not circle to vertically (A1 -> up -> A1)', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.HORIZONTAL });
+            matrix.index = { x: 0, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 0 });
+        });
+
+        it('given 1 vertical key should not loop infinitely', () => {
+            matrix = new Matrix({ ...commonProps, circular: CircularDirection.VERTICAL });
+            matrix.index = { x: 1, y: 0 };
+            const event = simulateKey(UP);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 1, y: 0 });
+        });
+
+        it('given 1 horizontal key should not loop infinitely', () => {
+            const keyMatrix = [
+                [A1, B1, C1, D1],
+                [C2, C2, C2, C2],
+            ];
+            matrix = new Matrix({
+                ...commonProps,
+                matrix: keyMatrix,
+                circular: CircularDirection.VERTICAL,
+            });
+            matrix.index = { x: 0, y: 1 };
+            const event = simulateKey(LEFT);
+            matrix.onKeyDown(event);
+            expect(matrix.index).toEqual({ x: 0, y: 1 });
+        });
+    });
+});

package/packages/focus/src/Layout/__test__/Vertical.spec.ts

@@ -0,0 +1,46 @@
+import { Vertical } from '../Vertical';
+import { rootRef, refChildA, refChildB, refChildC } from './shared';
+
+const mockEvent = {
+    target: false,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+};
+const mockUPEvent = {
+    code: 'ArrowUp',
+    ...mockEvent,
+};
+const mockDOWNEvent = {
+    code: 'ArrowDown',
+    ...mockEvent,
+};
+
+describe('Vertical Focus Layout', () => {
+    let vertical: any;
+    beforeEach(() => {
+        vertical = new Vertical({
+            domRef: rootRef,
+            children: 'children',
+            focusableChildren: [refChildA, refChildB, refChildC],
+            onFocusChanged: jest.fn(),
+            onBeforeFocusChange: jest.fn(),
+        });
+        vertical.forward = jest.fn();
+        vertical.backward = jest.fn();
+    });
+
+    it('should be a class component', () => {
+        expect(Vertical.isClass).toBe(true);
+    });
+
+    it('should call forward on DOWN', () => {
+        vertical.onKeyDown(mockDOWNEvent);
+        expect(vertical.forward).toHaveBeenCalled();
+    });
+
+    it('should call forward on UP', () => {
+        vertical.setIndex(1);
+        vertical.onKeyDown(mockUPEvent);
+        expect(vertical.backward).toHaveBeenCalled();
+    });
+});

package/packages/focus/src/Layout/__test__/isRtl.spec.ts

@@ -0,0 +1,23 @@
+import * as i18n from '@24i/bigscreen-sdk/i18n';
+import { isRtl } from '../isRtl';
+import { SharedProps } from '../types';
+
+describe('isRtl', () => {
+    const mockIsRtl = jest.spyOn(i18n, 'isRtl');
+
+    it.each([
+        { focusDir: 'ltr', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'ltr', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: undefined, langDir: 'ltr', expectedIsRtl: false },
+        { focusDir: 'ltr', langDir: 'rtl', expectedIsRtl: false },
+        { focusDir: 'rtl', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: 'auto', langDir: 'rtl', expectedIsRtl: true },
+        { focusDir: undefined, langDir: 'rtl', expectedIsRtl: true },
+    ])('should for $focusDir focus and $langDir language return $expectedIsRtl', ({
+        focusDir, langDir, expectedIsRtl,
+    }) => {
+        mockIsRtl.mockReturnValue(langDir === 'rtl');
+        expect(isRtl(focusDir as SharedProps['dir'])).toBe(expectedIsRtl);
+    });
+});

package/packages/focus/src/Layout/__test__/shared.ts

@@ -0,0 +1,19 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '../../IFocusable';
+
+class ChildMock {
+    focus = jest.fn();
+}
+
+const root = document.createElement('div');
+export const rootRef = createRef(root);
+
+const childA = new ChildMock();
+const childB = new ChildMock();
+const childC = new ChildMock();
+const childD = new ChildMock();
+(childD as IFocusable).hasDom = jest.fn().mockReturnValue(false);
+export const refChildA = createRef(childA);
+export const refChildB = createRef(childB);
+export const refChildC = createRef(childC);
+export const refChildD = createRef(childD);

package/packages/focus/src/focusFirstExisting.ts

@@ -1,12 +1,6 @@
-import { createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { Reference } from '@24i/bigscreen-sdk/jsx';
 import { IFocusable } from './IFocusable';
 
-export const preventScrollOnFocus = (ref: Reference<IFocusable>) => (
-    createRef<IFocusable>({
-        focus: () => ref.current?.focus({ preventScroll: true }),
-    })
-);
-
 export const focusFirstExisting = (...toFocus: Reference<IFocusable>[]) => (
     () => {
         for (let i = 0; i < toFocus.length; i++) {

package/packages/focus/src/index.ts

@@ -11,6 +11,5 @@ export {
     setNextFocusCandidate,
     focusCandidate,
 } from './candidate';
-export { focusFirstExisting, preventScrollOnFocus } from './focusFirstExisting';
+export { focusFirstExisting } from './focusFirstExisting';
 export { refocusAfterHashChange } from './refocusAfterHashChange';
-export { hasFocus, isFocused } from './hasFocus';

package/packages/gallup/src/Gallup.ts

@@ -1,4 +1,4 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { PlayerBase } from '@24i/player-base';
 import './__external__/SpringStreams';
 
 const SECOND_IN_MS = 1000;
@@ -16,7 +16,7 @@ export class Gallup {
      */
     constructor(
         siteCode: string,
-        private readonly player: PlayerBase,
+        private readonly player: PlayerBase<any>,
         private readonly playerName: string,
     ) {
         this.sensors = new SpringStreams(siteCode);
@@ -67,7 +67,7 @@ export class Gallup {
             getPosition: () => Math.floor(player.currentTime / SECOND_IN_MS),
             getMeta: () => {
                 const { width, height } = window.screen;
-                const { playerVersion } = player.mediaInfo;
+                const { playerVersion } = player.getMediaInfo();
                 return {
                     pl: playerName,
                     plv: playerVersion || '',

package/packages/grid/src/Base/Base.tsx

@@ -111,13 +111,11 @@ export class GridBase<T extends Item<U>, U>
     componentDidMount() {
         this.scrollerDom.current!.addEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.addEventListener('keyup', this.onKeyUp);
-        window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     componentWillUnmount() {
         this.scrollerDom.current!.removeEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.removeEventListener('keyup', this.onKeyUp);
-        window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -157,9 +155,6 @@ export class GridBase<T extends Item<U>, U>
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
-    };
-
-    onGlobalKeyUp = () => {
         this.preventBlurCounter = 0;
     };
 
@@ -183,6 +178,16 @@ export class GridBase<T extends Item<U>, U>
         }
     };
 
+    shouldPreventBlur(event: KeyboardEvent) {
+        const { horizontal, preventBlurOnLongPress } = this.props;
+        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
+            (preventBlurOnLongPress.forward && isForward(event, horizontal))
+            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
+            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
+            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
+        ));
+    }
+
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {
@@ -248,16 +253,6 @@ export class GridBase<T extends Item<U>, U>
         this.fastScrollingCounter.reset();
     };
 
-    shouldPreventBlur(event: KeyboardEvent) {
-        const { horizontal, preventBlurOnLongPress } = this.props;
-        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
-            (preventBlurOnLongPress.forward && isForward(event, horizontal))
-            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
-            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
-            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
-        ));
-    }
-
     animatedScrollStarted() {
         this.isAnimatedScrollRunning = true;
     }

package/packages/grid/src/FirstOnlyGrid/FirstOnlyGrid.tsx

@@ -61,8 +61,6 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         const linesDiff = Math.floor(grid.index / itemsInGroup) - oldLine;
         if (linesDiff > 0) {
             this.scrollForward(linesDiff);
-        } else if (linesDiff < 0) {
-            this.scrollBackward(Math.abs(linesDiff));
         }
     };
 
@@ -79,8 +77,8 @@ export class FirstOnlyGrid<T extends Item<U>, U>
         this.controller.scroll(targetScrollIndex);
     }
 
-    scrollBackward(diff = 1) {
-        const targetScrollIndex = this.controller.scrollIndex - diff;
+    scrollBackward() {
+        const targetScrollIndex = this.controller.scrollIndex - 1;
         this.controller.scroll(targetScrollIndex);
     }
 

package/packages/icon/src/Icon.tsx

@@ -1,19 +1,12 @@
 import { createRef, Reference, Component } from '@24i/bigscreen-sdk/jsx';
-import {
-    getDisplayToggler,
-    IDisplayToggler,
-    removeClass,
-    addClass,
-    DISPLAY_NONE,
-} from '@24i/bigscreen-sdk/utils';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
 
 const ICON_PREFIX = 'icon-';
 
 type Props<SpritesJSON> = {
     icon?: keyof SpritesJSON,
-    domRef?: Reference<HTMLDivElement>,
-    className?: string,
-    initialIsHidden?: boolean,
+    domRef?: Reference<HTMLDivElement>;
 };
 
 export class Icon<T> extends Component<Props<T>> {
@@ -21,13 +14,10 @@ export class Icon<T> extends Component<Props<T>> {
 
     currentIcon: keyof T | undefined;
 
-    iconDisplay: IDisplayToggler;
-
     constructor(props: Props<T>) {
         super(props);
         this.ref = props.domRef || createRef();
         this.currentIcon = props.icon;
-        this.iconDisplay = getDisplayToggler(this.ref, props.initialIsHidden);
     }
 
     getClass(icon: keyof T): string {
@@ -41,16 +31,6 @@ export class Icon<T> extends Component<Props<T>> {
         this.currentIcon = icon;
     }
 
-    show() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.show();
-    }
-
-    hide() {
-        if (!this.currentIcon) return;
-        this.iconDisplay.hide();
-    }
-
     clearIcon() {
         if (!this.currentIcon) return;
         removeClass(this.ref, this.getClass(this.currentIcon));
@@ -58,13 +38,11 @@ export class Icon<T> extends Component<Props<T>> {
     }
 
     render() {
-        const { icon, className, initialIsHidden } = this.props;
+        const { icon } = this.props;
         return (
             <div
                 ref={this.ref}
-                className={`${className || ''} icon ${icon
-                    ? this.getClass(icon) : ''} ${initialIsHidden
-                    ? DISPLAY_NONE : ''}`}
+                className={`icon ${icon ? this.getClass(icon) : ''}`}
             />
         );
     }

package/packages/input/README.md

@@ -16,9 +16,9 @@ It is connected through ime package to either system or virtual keyboard.
 - `passwordChar` - optional string which replaces password characters (default: `'●'`)
 - `shouldHandleOverflow` - optional flag which enables overflow handling by moving text to the left when caret should get out of its container (default: `false`)
 - `maxLength` - optional number to limit value length (default: `Infinity`)
+- `onChange` - optional callback with new value `(newValue: string) => void`
 - `onFocus` - optional callback which is called when input gets focus
 - `onBlur` - optional callback which is called when input loses focus
-- `onChange` - optional callback with new value `(newValue: string) => void`
 - `onFinish` - optional callback which is called when input is finished, its only argument is a boolean to determine if input was cancelled or not `(wasCancelled: boolean) => void`
 
 ## Usage
@@ -60,6 +60,3 @@ The reason for no styling is to limit unnecessary CSS code that would be overrid
 `.native-input-wrap` is set to `display: none`. This is the native input used on the background.
 
 `.input-field` is a custom component that should look like input field with possibility of custom styling.
-
-`.caret` position is counted from the left side of the input in LTR layout and from the right side of the
-input in RTL layout.