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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.2-alpha.2074",
+    "version": "1.0.2-alpha.2089",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -38,7 +38,7 @@
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "2.3.2",
+        "@24i/smartapps-datalayer": "2.3.3",
         "@sentry/browser": "^7.8.0",
         "@types/prop-types": "^15.7.5",
         "@types/scheduler": "^0.16.1",

package/packages/developer-tools/src/TechnicalInfo/styles/TechnicalInfo.scss

@@ -140,6 +140,7 @@
                     display: inline-block;
                     vertical-align: top;
                     width: $value-width;
+                    word-break: break-word;
                 }
             }
         }

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/driver-vidaa/src/DeviceVidaa.ts

@@ -4,6 +4,7 @@ import {
     ScreenSaverStatus,
     VolumeRange,
 } from '@24i/bigscreen-sdk/driver-base';
+import { NetworkConnectionTypeMap } from './constants';
 import { getPlatformInfo } from './formatUserAgent';
 import { HisenseVidaaApi } from './types';
 import { getKeyMap } from './keymap';
@@ -118,7 +119,12 @@ export class DeviceVidaa extends DeviceBase {
     }
 
     async getConnectionType(): Promise<ConnectionType> {
-        // not supported on Hisense VIDAA platform
+        try {
+            const netType = window.Hisense_GetNetType();
+            return NetworkConnectionTypeMap[netType] || 'unknown';
+        } catch (e) {
+            console.error('[DeviceVidaa] Failed getConnectionType', e);
+        }
         return 'unknown';
     }
 

package/packages/driver-vidaa/src/__mocks__/vidaa.ts

@@ -6,6 +6,7 @@ export const mockHisenseVidaaApi: HisenseVidaaApi = {
     Hisense_GetFirmWareVersion: () => 'V0000.01.00Q.L0301',
     Hisense_Get4KSupportState: () => true,
     Hisense_GetDeviceID: () => '861003009000001000000641123456789012',
+    Hisense_GetNetType: () => 'wireless',
 };
 
 // Key constants are set to random number values

package/packages/driver-vidaa/src/constants.ts

@@ -0,0 +1,8 @@
+/**
+ * Mapping connection type from Hisense VIDAA to SDK connection type.
+ */
+export const NetworkConnectionTypeMap = {
+    wired: 'cable',
+    wireless: 'wifi',
+    OFF: 'none',
+} as const;

package/packages/driver-vidaa/src/types.ts

@@ -1,3 +1,5 @@
+export type HisenseNetType = 'OFF' | 'wired' | 'wireless';
+
 export interface HisenseVidaaApi {
     /**
      * This interface will retrieve Hisense Unique ID for the device.
@@ -27,6 +29,12 @@ export interface HisenseVidaaApi {
      * @return a string that represents the TV model name.
      */
     Hisense_GetModelName: () => string,
+    /**
+     * This interface retrieves the network type of the device.
+     * @return a string that represents the network type for the device.
+     * The one from "OFF", "wired", "wireless".
+     */
+    Hisense_GetNetType: () => HisenseNetType,
 }
 
 export type HisenseVidaaKeys = {

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() {
@@ -521,6 +524,7 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         forEach(this.groups, (group, index) => {
             this.updateItemsInGroup(group, index * itemsInGroup);
         });
+        base.mrcuRef.current?.handleArrowState();
     }
 
     prependData(data: T[]) {
@@ -546,5 +550,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
             this.scrollIndexToPixels(this.scrollIndex),
         );
         this.focusCurrentItem();
+        base.mrcuRef.current?.handleArrowState();
     }
 }

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/Base.tsx

@@ -49,6 +49,8 @@ export class ListBase<T extends Item<U>, U>
 
     mrcuRef = createRef<IMouseNavigation>();
 
+    // mrcuRef2: Reference<HTMLDivElement>;
+
     itemRefs: Reference<T>[] = [];
 
     index = 0;
@@ -344,7 +346,7 @@ export class ListBase<T extends Item<U>, U>
     }
 
     render() {
-        const { horizontal, className } = this.props;
+        const { horizontal, className, mrcuMountingPoint } = this.props;
         return (
             <Scroller
                 className={className}
@@ -357,7 +359,7 @@ export class ListBase<T extends Item<U>, U>
                 <MouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface
                     ref={this.mrcuRef}
-                    getMountingPoint={() => this.scroller.current!.wrapRef}
+                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
                     {...this.props}
                 />
             </Scroller>

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/list/src/EdgeOffsetList/EdgeOffsetList.tsx

@@ -1,4 +1,4 @@
-import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Component, createRef, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
 import { IFocusable } from '@24i/bigscreen-sdk/focus';
 import { noop } from '@24i/bigscreen-sdk/utils/noop';
 import { ListBase } from '../Base';
@@ -29,6 +29,8 @@ export class EdgeOffsetList<T extends Item<U>, U>
      */
     base = createRef<ListBase<T, U>>();
 
+    //mrcuRef = createRef<HTMLDivElement>();
+
     /**
      * Unified controller for leveraging common behaviour
      */

package/packages/list/src/types.ts

@@ -1,5 +1,6 @@
 import { Reference, Component } from '@24i/bigscreen-sdk/jsx';
 import { EasingType } from '@24i/bigscreen-sdk/animations';
+import { HtmlAttributes } from 'csstype';
 
 export interface Item<T> extends Component<any> {
     focus: (options?: FocusOptions) => void,
@@ -66,6 +67,11 @@ export type BasicProps<T extends Item<U>, U> = {
      */
     fastFocusingOptimization?: boolean,
 
+    /**
+     * Returns a reference to the custom HTML div for the mrcu arrows.
+     */
+    mrcuMountingPoint?: Reference<HTMLDivElement>,
+
     /**
      * Function called every time before list performs one full scroll.
      * @param item Reference to item on current scroll

package/packages/menu/src/MenuAndContentContainer/MenuAndContentContainer.tsx

@@ -1,6 +1,7 @@
 import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
 import { device } from '@24i/bigscreen-sdk/device';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { getDisplayToggler, DISPLAY_NONE } from '@24i/bigscreen-sdk/utils/displayToggler';
 import { service } from './service';
 import {
     Props,
@@ -25,6 +26,16 @@ export class MenuAndContentContainer<T extends string = string>
      */
     listensToMouse = false;
 
+    /**
+     * Element for triggering menu by mouse event.
+     */
+    mouseTriggerElement = createRef<HTMLDivElement>();
+
+    /**
+     * DisplayToggler for {@link mouseTriggerElement}.
+     */
+    mouseTriggerElementDisplayToggler = getDisplayToggler(this.mouseTriggerElement, true);
+
     /**
      * Adds event listeners:
      * - keydown to {@link Props.elementForEvents elementForEvents}
@@ -58,10 +69,12 @@ export class MenuAndContentContainer<T extends string = string>
     onVisibilityChange = (visible: boolean) => {
         if (visible) {
             this.menu.current!.focus();
+            if (this.listensToMouse) this.mouseTriggerElementDisplayToggler.hide();
             service.triggerEvent('visibilitychange', true);
         } else {
             const { router: { current: router } } = this.props;
             router!.focus();
+            if (this.listensToMouse) this.mouseTriggerElementDisplayToggler.show();
             service.triggerEvent('visibilitychange', false);
         }
     };
@@ -88,14 +101,10 @@ export class MenuAndContentContainer<T extends string = string>
      * @param event mouse event
      */
     onMouseMove = (event: MouseEvent) => {
-        const { Menu } = this.props;
         const menu = this.menu.current!;
         if (this.isMenuAvailable() && !menu.isOpen()) {
-            const { clientX, clientY } = event;
-            if (Menu.shouldOpenMenuWithMouse({ clientX, clientY })) {
-                menu.open();
-                stopEvent(event);
-            }
+            menu.open();
+            stopEvent(event);
         }
     };
 
@@ -127,8 +136,8 @@ export class MenuAndContentContainer<T extends string = string>
     addMouseListener() {
         if (!this.listensToMouse) {
             this.listensToMouse = true;
-            const { elementForEvents } = this.props;
-            elementForEvents.current!.addEventListener('mousemove', this.onMouseMove);
+            if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.show();
+            this.mouseTriggerElement.current!.addEventListener('mousemove', this.onMouseMove);
         }
     }
 
@@ -138,8 +147,8 @@ export class MenuAndContentContainer<T extends string = string>
     removeMouseListener() {
         if (this.listensToMouse) {
             this.listensToMouse = false;
-            const { elementForEvents } = this.props;
-            elementForEvents.current!.removeEventListener('mousemove', this.onMouseMove);
+            if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.hide();
+            this.mouseTriggerElement.current!.removeEventListener('mousemove', this.onMouseMove);
         }
     }
 
@@ -155,12 +164,18 @@ export class MenuAndContentContainer<T extends string = string>
         const { children, items, Menu } = this.props;
         return (
             <>
-                <Menu
-                    ref={this.menu}
-                    items={items}
-                    onVisibilityChange={this.onVisibilityChange}
-                    contentContainer={this}
-                />
+                <div className="menu-container">
+                    <Menu
+                        ref={this.menu}
+                        items={items}
+                        onVisibilityChange={this.onVisibilityChange}
+                        contentContainer={this}
+                    />
+                    <div
+                        ref={this.mouseTriggerElement}
+                        className={`menu-mouse-trigger ${DISPLAY_NONE}`}
+                    />
+                </div>
                 {children}
             </>
         );

package/packages/menu/src/MenuAndContentContainer/interface.ts

@@ -119,13 +119,6 @@ export interface Menu<
     updateItems(items: MenuItem<T>[]): void,
 }
 
-/**
- * Function for deciding whether to open menu based on mouse position.
- */
-type MouseMenuOpenResolver = (
-    ({ clientX, clientY }: { clientX: number, clientY: number }) => boolean
-);
-
 /**
  * Function for deciding whether to open menu based on pressed key.
  */
@@ -145,7 +138,6 @@ type KeyboardMenuCloseResolver = (
  */
 export interface MenuComponent<T extends string = string, P extends MenuProps<T> = MenuProps<T>> {
     new (props: P): Menu<T, P>,
-    shouldOpenMenuWithMouse: MouseMenuOpenResolver,
     shouldOpenMenu: KeyboardMenuOpenResolver,
     shouldCloseMenu: KeyboardMenuCloseResolver,
 }

package/packages/menu/src/WhitelabelMenu/SideMenu.scss

@@ -1,4 +1,4 @@
-.menu-container {
+.menu-container .side-menu {
     position: absolute;
     top: 0;
     left: 0;

package/packages/menu/src/WhitelabelMenu/SideMenu.tsx

@@ -220,7 +220,7 @@ export class SideMenu extends Component<Props> implements ISideMenu {
     render() {
         const { items } = this.props;
         return (
-            <div ref={this.visualController.div} className={`menu-container ${DISPLAY_NONE}`}>
+            <div ref={this.visualController.div} className={`side-menu ${DISPLAY_NONE}`}>
                 <div
                     ref={this.visualController.overlay}
                     className={`overlay ${animated ? DISPLAY_NONE : ''}`}

package/packages/menu/src/WhitelabelMenu/_animated.scss

@@ -2,7 +2,7 @@
 @import '@24i/bigscreen-sdk/sass-utils/transition';
 @import '@24i/bigscreen-sdk/sass-utils/prefix-property';
 
-.menu-container {
+.menu-container .side-menu {
     @include transform(translate3d(0, 0, 0));
     @include transition(prefix-property(transform), 300ms);
 

package/packages/menu/src/WhitelabelMenu/rtl.scss

@@ -1,6 +1,6 @@
 @import '@24i/bigscreen-sdk/sass-utils/transform';
 
-[dir=rtl] .menu-container {
+[dir=rtl] .menu-container .side-menu {
     left: auto;
     right: 0;
 

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/mouse-navigation/src/MouseNavigation.tsx

@@ -94,6 +94,22 @@ export class MouseNavigation extends Component<Props> {
         }
     };
 
+    onWheel = (event: WheelEvent) => {
+        const { forward, backward, direction } = this.props;
+        const { horizontal } = this.mapDirectionToProps(direction);
+        if (horizontal) return;
+        if (event.deltaY > 0) forward();
+        else if (event.deltaY < 0) backward();
+    };
+
+    addWheelListner() {
+        this.arrows.current?.domRef.current?.addEventListener('wheel', this.onWheel);
+    }
+
+    removeWheelListner() {
+        this.arrows.current?.domRef.current?.removeEventListener('wheel', this.onWheel);
+    }
+
     isActive() {
         return this.navigationState === 'active';
     }
@@ -112,6 +128,7 @@ export class MouseNavigation extends Component<Props> {
             getMountingPoint(),
         );
         this.handleArrowState();
+        this.addWheelListner();
         this.navigationState = 'active';
     };
 
@@ -129,6 +146,7 @@ export class MouseNavigation extends Component<Props> {
     destroyArrows() {
         if (this.navigationState === 'inactive') return;
         this.navigationState = 'inactive';
+        this.removeWheelListner();
         removeNode(this.arrows.current!.domRef);
     }
 

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

@@ -189,11 +189,7 @@ export class PlayerUI extends Component<Props>
     }
 
     canHideAutomatically() {
-        return (
-            this.isPlaying()
-            && !this.seeking.isSeeking()
-            && !this.isHidingDisabled
-        );
+        return !this.isHidingDisabled;
     }
 
     isPlaying() {

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';