@24i/bigscreen-sdk 1.0.2-alpha.2074 → 1.0.2-alpha.2078

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.2-alpha.2074",
+    "version": "1.0.2-alpha.2078",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/developer-tools/src/TechnicalInfo/utils/emeSupport.ts

@@ -30,8 +30,12 @@ function isKeySystemSupported(keySystem: string, config: MediaKeySystemConfigura
     return new Promise((resolve) => {
         try {
             window.navigator.requestMediaKeySystemAccess(keySystem, config)
-                .then(() => { resolve(true); })
-                .catch(() => { resolve(false); });
+                .then(() => {
+                    resolve(true);
+                })
+                .catch(() => {
+                    resolve(false);
+                });
         } catch (e) {
             resolve(false);
         }

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

@@ -252,7 +252,9 @@ export class DeviceTizen extends DeviceBase {
                     this.screenSaverStatus = status;
                     resolve();
                 },
-                () => { resolve(); },
+                () => {
+                    resolve();
+                },
             );
         });
     }

package/packages/focus/src/Layout/Matrix.tsx

@@ -154,8 +154,7 @@ export class Matrix extends Component<Props> implements IFocusable {
     isDifferentReferenceFromCurrent(index: Index2D): boolean {
         const { current } = this.getRefAt(this.index);
         const { current: searched } = this.getRefAt(index);
-        if (current !== searched && searched !== null) return true;
-        return false;
+        return current !== searched && searched !== null;
     }
 
     isSameReferenceAsCurrent(index: Index2D): boolean {

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

@@ -1,13 +1,14 @@
 import { createRef, Component, Reference, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { device } from '@24i/bigscreen-sdk/device';
-import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
 import { Scroller } from '@24i/bigscreen-sdk/scroller';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
 import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
 import { createTimeout, createCounter, ICounter } from '@24i/bigscreen-sdk/utils';
+import { MouseNavigation } from './MouseNavigation';
 import { FastFocusingOptimizer } from '../FastFocusingOptimizer/FastFocusingOptimizer';
 import { SharedProps, Item } from '../types';
+import { MouseNavigation as IMouseNavigation } from './interface';
 
 export type Props<T extends Item<U>, U> = Omit<SharedProps<T, U>, 'scrollStep'> & {
     forward: () => boolean,
@@ -21,7 +22,6 @@ export type Props<T extends Item<U>, U> = Omit<SharedProps<T, U>, 'scrollStep'>
     adjustFocusFromTarget?: (itemRefIndex: number, groupRefIndex: number) => void,
     horizontal?: boolean,
     limit?: number,
-    mrcuRef?: Reference<MouseNavigation>;
     shouldApplySlowdown?: () => boolean,
 };
 
@@ -55,6 +55,8 @@ export class GridBase<T extends Item<U>, U>
 
     scrollerDom = createRef<HTMLDivElement>();
 
+    mrcuRef = createRef<IMouseNavigation>();
+
     itemRefs: Reference<T>[] = [];
 
     groupRefs: Reference<HTMLDivElement>[] = [];
@@ -151,14 +153,13 @@ export class GridBase<T extends Item<U>, U>
     onWheel = (event: WheelEvent) => {
         const {
             forwardGroup, backwardGroup, shouldApplySlowdown,
-            mrcuRef,
         } = this.props;
         let processed;
         if (event.deltaY > 0) processed = shouldApplySlowdown() || forwardGroup();
         else if (event.deltaY < 0) processed = shouldApplySlowdown() || backwardGroup();
         if (processed) {
             stopEvent(event);
-            mrcuRef?.current?.handleArrowState();
+            this.mrcuRef.current?.handleArrowState();
             if (this.fastScrollingCounter) {
                 this.fastScrollingCounter.add();
                 this.fakeWheelStop();
@@ -434,7 +435,15 @@ export class GridBase<T extends Item<U>, U>
     }
 
     render() {
-        const { horizontal, className } = this.props;
+        const {
+            horizontal,
+            className,
+            forwardGroup,
+            backwardGroup,
+            shouldShowMrcuForward,
+            shouldShowMrcuBackward,
+        } = this.props;
+
         return (
             <Scroller
                 className={className}
@@ -443,7 +452,17 @@ export class GridBase<T extends Item<U>, U>
                 onKeyDown={this.onKeyDown}
                 horizontal={horizontal}
             >
-                {this.renderData()}
+                <>{this.renderData()}</>
+                <MouseNavigation
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mrcuRef}
+                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    horizontal={horizontal}
+                    forward={forwardGroup}
+                    backward={backwardGroup}
+                    shouldShowMrcuForward={shouldShowMrcuForward}
+                    shouldShowMrcuBackward={shouldShowMrcuBackward}
+                />
             </Scroller>
         );
     }

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

@@ -0,0 +1,82 @@
+import { Component, createRef, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { MouseNavigation as MouseNavigationBase } from '@24i/bigscreen-sdk/mouse-navigation';
+import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
+import {
+    MouseNavigationProps as Props,
+    MouseNavigation as IMouseNavigation,
+} from '../interface';
+
+export class MouseNavigation extends Component<Props> implements IMouseNavigation {
+    private readonly wrapper = createRef<HTMLDivElement>();
+
+    private readonly mouseNavigationBase = createRef<MouseNavigationBase>();
+
+    private isMouseEnabled = true;
+
+    componentDidMount() {
+        this.handleWheelListener();
+        device.addEventListener('mouseactive', this.mouseListener);
+    }
+
+    componentWillUnmount() {
+        this.handleWheelListener();
+        device.removeEventListener('mouseactive', this.mouseListener);
+    }
+
+    handleWheelListener() {
+        if (this.isMouseEnabled && device.isMouseUsed()) {
+            this.renderArrows();
+        } else {
+            this.destroyArrows();
+        }
+    }
+
+    handleArrowState() {
+        this.mouseNavigationBase?.current?.handleArrowState();
+    }
+
+    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
+        this.isMouseEnabled = isMouseActive;
+        this.handleWheelListener();
+    };
+
+    destroyArrows() {
+        if (!this.wrapper.current) return;
+        removeNode(this.wrapper);
+    }
+
+    renderArrows() {
+        const {
+            horizontal,
+            forward,
+            backward,
+            shouldShowMrcuForward,
+            shouldShowMrcuBackward,
+            getMountingPoint,
+        } = this.props;
+
+        const direction = horizontal ? 'horizontal' : 'vertical';
+
+        this.appendMount(
+            <div ref={this.wrapper} className="mouse-navigation">
+                <MouseNavigationBase
+                    // @ts-ignore - needed to convert fallback (false) to interface
+                    ref={this.mouseNavigationBase}
+                    getMountingPoint={() => this.wrapper}
+                    direction={direction}
+                    forward={forward}
+                    backward={backward}
+                    shouldShowMrcuForward={shouldShowMrcuForward}
+                    shouldShowMrcuBackward={shouldShowMrcuBackward}
+                >
+                    {null as unknown as JSX.Element}
+                </MouseNavigationBase>
+            </div>,
+            getMountingPoint(),
+        );
+    }
+
+    render() {
+        return null;
+    }
+}

package/packages/grid/src/Base/MouseNavigation/MouseNavigationFallback.ts

@@ -0,0 +1,4 @@
+import { MouseNavigationProps as Props } from '../interface';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MouseNavigation = (props: Props) => false as unknown as JSX.Element;

package/packages/grid/src/Base/MouseNavigation/index.tizen.tv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/MouseNavigation/index.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigationFallback';

package/packages/grid/src/Base/MouseNavigation/index.webos.tv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/MouseNavigation/index.webtv.ts

@@ -0,0 +1 @@
+export { MouseNavigation } from './MouseNavigation';

package/packages/grid/src/Base/interface.ts

@@ -0,0 +1,47 @@
+import { Reference, Component } from '@24i/bigscreen-sdk/jsx';
+
+export type MouseNavigationProps = {
+    /**
+      * Function to call on the press of the right arrow.
+      */
+    forward(): boolean,
+    /**
+     * Function to call on the press of the left arrow.
+     */
+    backward(): boolean,
+    /**
+      * Function to call on the press of the down arrow.
+      */
+    forwardGroup?(): boolean,
+    /**
+      * Function to call on the press of the up arrow.
+      */
+    backwardGroup?(): boolean,
+    /**
+      * Function which determines whether to show the forward arrow.
+      */
+    shouldShowMrcuForward?(): boolean,
+    /**
+      * Function which determines whether to show the backward arrow.
+      */
+    shouldShowMrcuBackward?(): boolean,
+    /**
+     * Returns a reference to the element where your `children` should be rendered.
+     */
+    getMountingPoint(): Reference<HTMLElement>;
+    /**
+     * Property determines whether navigation is horizontal.
+     */
+    horizontal?: boolean,
+};
+
+export interface MouseNavigation extends Component<MouseNavigationProps> {
+    /**
+      * Function to disable showing an arrow in the given direction.
+      */
+    handleArrowState(): void,
+}
+
+export interface MouseNavigationComponent {
+    new (props: MouseNavigationProps): MouseNavigation,
+}

package/packages/grid/src/UnifiedGridController/UnifiedGridController.ts

@@ -295,6 +295,8 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
     }
 
     focusToIndex(dataIndex: number, animate = false) {
+        const { grid } = this;
+        const base = grid.base.current!;
         const targetScrollIndex = this.itemIndexToScrollIndex(dataIndex);
         if (targetScrollIndex > this.scrollIndex) {
             this.adjustGroupsOffsetsForward(targetScrollIndex);
@@ -304,8 +306,9 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         if (targetScrollIndex !== this.scrollIndex) {
             this.scroll(targetScrollIndex, animate);
         }
-        this.grid.base.current!.index = dataIndex;
+        base.index = dataIndex;
         this.focusCurrentItem();
+        base.mrcuRef.current?.handleArrowState();
     }
 
     protected focusScrollWrap() {

package/packages/i18n/src/middlewares/i18next/Plurals/Plurals.ts

@@ -45,8 +45,8 @@ const isCountInInterval = (count: number, interval: string) => {
     if (numbers.length === 1 && parseInt(numbers[0], 10) === count) return true;
     const from = parseInt(numbers[0], 10);
     const to = numbers[1] === 'inf' ? Infinity : parseInt(numbers[1], 10);
-    if (count >= from && count <= to) return true;
-    return false;
+    return count >= from && count <= to;
+
 };
 
 const shouldUseInterval = (

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx

@@ -145,7 +145,9 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                 <Interactable
                                     ref={this.keyRefs.space}
                                     className="key key-wide key-space"
-                                    onPress={() => { this.onKey(' '); }}
+                                    onPress={() => {
+                                        this.onKey(' ');
+                                    }}
                                 >
                                     <div className="key-background">
                                         {texts.space}
@@ -208,7 +210,9 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
                                 <Interactable
                                     ref={this.keyRefs.space}
                                     className="key key-wide key-space"
-                                    onPress={() => { this.onKey(' '); }}
+                                    onPress={() => {
+                                        this.onKey(' ');
+                                    }}
                                 >
                                     <div className="key-background">
                                         {texts.space}

package/packages/list/src/Base/MouseNavigation/MouseNavigation.tsx

@@ -1,24 +1,48 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { Component, createRef, removeNode } from '@24i/bigscreen-sdk/jsx';
 import { MouseNavigation as MouseNavigationBase } from '@24i/bigscreen-sdk/mouse-navigation';
-import { device } from '@24i/bigscreen-sdk/device';
+import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
 import {
     MouseNavigationProps as Props,
     MouseNavigation as IMouseNavigation,
 } from '../interface';
 
 export class MouseNavigation extends Component<Props> implements IMouseNavigation {
-    private readonly div = createRef<HTMLDivElement>();
+    private readonly wrapper = createRef<HTMLDivElement>();
 
-    private readonly base = createRef<MouseNavigationBase>();
+    private readonly mouseNavigationBase = createRef<MouseNavigationBase>();
+
+    private isMouseEnabled = true;
 
     componentDidMount() {
-        if (device.isMouseUsed()) {
+        this.handleWheelListener();
+        device.addEventListener('mouseactive', this.mouseListener);
+    }
+
+    componentWillUnmount() {
+        this.handleWheelListener();
+        device.removeEventListener('mouseactive', this.mouseListener);
+    }
+
+    handleWheelListener() {
+        if (this.isMouseEnabled && device.isMouseUsed()) {
             this.renderArrows();
+        } else {
+            this.destroyArrows();
         }
     }
 
     handleArrowState() {
-        this.base?.current?.handleArrowState();
+        this.mouseNavigationBase?.current?.handleArrowState();
+    }
+
+    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
+        this.isMouseEnabled = isMouseActive;
+        this.handleWheelListener();
+    };
+
+    destroyArrows() {
+        if (!this.wrapper.current) return;
+        removeNode(this.wrapper);
     }
 
     renderArrows() {
@@ -34,11 +58,11 @@ export class MouseNavigation extends Component<Props> implements IMouseNavigatio
         const direction = horizontal ? 'horizontal' : 'vertical';
 
         this.appendMount(
-            <div ref={this.div} className="mouse-navigation">
+            <div ref={this.wrapper} className="mouse-navigation">
                 <MouseNavigationBase
                     // @ts-ignore - needed to convert fallback (false) to interface
-                    ref={this.base}
-                    getMountingPoint={() => this.div}
+                    ref={this.mouseNavigationBase}
+                    getMountingPoint={() => this.wrapper}
                     direction={direction}
                     forward={forward}
                     backward={backward}

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

@@ -36,7 +36,9 @@ export class ModalService extends Component<Props> {
         }
     };
 
-    getMountedComponent() { return this.modalRef; }
+    getMountedComponent() {
+        return this.modalRef;
+    }
 
     open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element) {
         const { isFocusable } = this.props;

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

@@ -1273,7 +1273,6 @@ declare namespace React {
         shiftKey: boolean;
         /** @deprecated */
         which: number;
-        target: EventTarget & T;
     }
 
     interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
@@ -2144,6 +2143,7 @@ declare namespace React {
         name?: string | undefined;
         noValidate?: boolean | undefined;
         target?: string | undefined;
+        rel?: string | undefined;
     }
 
     interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {

package/packages/utils/src/counter.ts

@@ -42,6 +42,8 @@ export const createCounter = ({ triggerAt, callback }: CounterProps): ICounter =
         getCurrentValue: () => counter,
         isTriggered: () => counter >= triggerAt,
         isEqual: (value: number = triggerAt) => counter === value,
-        reset: () => { counter = 0; },
+        reset: () => {
+            counter = 0;
+        },
     };
 };

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

@@ -32,8 +32,8 @@ export type ShouldRetryParam = {
 function shouldRetryRequest(data: ShouldRetryParam) {
     const { error, response } = data;
     if (error) return true;
-    if (!response || !response.ok) return true;
-    return false;
+    return !response || !response.ok;
+
 }
 
 export const defaultRetryConfig = {

package/packages/volume-control/src/__mocks__/VolumeControlUIMock.tsx

@@ -12,7 +12,11 @@ export class VolumeControlUIMock extends Component<{}> implements IVolumeControl
 
     hide = () => {};
 
-    isVisible() { return true; }
+    isVisible() {
+        return true;
+    }
 
-    render() { return <div className="volume-control-ui" />; }
+    render() {
+        return <div className="volume-control-ui" />;
+    }
 }

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

@@ -1,24 +0,0 @@
-import { createRef, forwardRef, Reference } from '@24i/bigscreen-sdk/jsx';
-import { MouseNavigation } from '@24i/bigscreen-sdk/mouse-navigation';
-import { GridBase as Base, Props as GridProps } from './Base';
-import { Item } from '../types';
-
-export const GridBase = forwardRef(<T extends Item<U>, U>(props: GridProps<T, U>,
-    gridRef: Reference<Base<T, U>>,
-) => {
-    const direction = props.horizontal ? 'horizontal' : 'vertical';
-    const mrcuRef = createRef<MouseNavigation>();
-    return (
-        <MouseNavigation
-            ref={mrcuRef}
-            getMountingPoint={() => gridRef.current!.scroller.current!.wrapRef}
-            direction={direction}
-            forward={props.mrcuForward || props.forwardGroup}
-            backward={props.mrcuBackward || props.backwardGroup}
-            shouldShowMrcuForward={props.shouldShowMrcuForward}
-            shouldShowMrcuBackward={props.shouldShowMrcuBackward}
-        >
-            <Base {...props} ref={gridRef} mrcuRef={mrcuRef} />
-        </MouseNavigation>
-    );
-});

package/packages/grid/src/Base/index.tizen.tv.ts

@@ -1 +0,0 @@
-export { GridBase } from './Base.mouse';

package/packages/grid/src/Base/index.webos.tv.ts

@@ -1 +0,0 @@
-export { GridBase } from './Base.mouse';

package/packages/grid/src/Base/index.webtv.ts

@@ -1 +0,0 @@
-export { GridBase } from './Base.mouse';