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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.2-alpha.2078",
+    "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/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/grid/src/UnifiedGridController/UnifiedGridController.ts

@@ -524,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[]) {
@@ -549,5 +550,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
             this.scrollIndexToPixels(this.scrollIndex),
         );
         this.focusCurrentItem();
+        base.mrcuRef.current?.handleArrowState();
     }
 }

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/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/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() {