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

package/package.json

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

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

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

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

@@ -4,7 +4,6 @@ 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';
@@ -119,12 +118,7 @@ export class DeviceVidaa extends DeviceBase {
     }
 
     async getConnectionType(): Promise<ConnectionType> {
-        try {
-            const netType = window.Hisense_GetNetType();
-            return NetworkConnectionTypeMap[netType] || 'unknown';
-        } catch (e) {
-            console.error('[DeviceVidaa] Failed getConnectionType', e);
-        }
+        // not supported on Hisense VIDAA platform
         return 'unknown';
     }
 

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

@@ -6,7 +6,6 @@ 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/types.ts

@@ -1,5 +1,3 @@
-export type HisenseNetType = 'OFF' | 'wired' | 'wireless';
-
 export interface HisenseVidaaApi {
     /**
      * This interface will retrieve Hisense Unique ID for the device.
@@ -29,12 +27,6 @@ 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,7 +524,6 @@ export class UnifiedGridController<T> implements IUnifiedGridController<T> {
         forEach(this.groups, (group, index) => {
             this.updateItemsInGroup(group, index * itemsInGroup);
         });
-        base.mrcuRef.current?.handleArrowState();
     }
 
     prependData(data: T[]) {
@@ -550,6 +549,5 @@ 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,8 +49,6 @@ export class ListBase<T extends Item<U>, U>
 
     mrcuRef = createRef<IMouseNavigation>();
 
-    // mrcuRef2: Reference<HTMLDivElement>;
-
     itemRefs: Reference<T>[] = [];
 
     index = 0;
@@ -346,7 +344,7 @@ export class ListBase<T extends Item<U>, U>
     }
 
     render() {
-        const { horizontal, className, mrcuMountingPoint } = this.props;
+        const { horizontal, className } = this.props;
         return (
             <Scroller
                 className={className}
@@ -359,7 +357,7 @@ export class ListBase<T extends Item<U>, U>
                 <MouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface
                     ref={this.mrcuRef}
-                    getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
+                    getMountingPoint={() => this.scroller.current!.wrapRef}
                     {...this.props}
                 />
             </Scroller>

package/packages/list/src/EdgeOffsetList/EdgeOffsetList.tsx

@@ -1,4 +1,4 @@
-import { Component, createRef, DeclareProps, Reference } from '@24i/bigscreen-sdk/jsx';
+import { Component, createRef, DeclareProps } 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,8 +29,6 @@ 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,6 +1,5 @@
 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,
@@ -67,11 +66,6 @@ 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,7 +1,6 @@
 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,
@@ -26,16 +25,6 @@ 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}
@@ -69,12 +58,10 @@ 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);
         }
     };
@@ -101,10 +88,14 @@ 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()) {
-            menu.open();
-            stopEvent(event);
+            const { clientX, clientY } = event;
+            if (Menu.shouldOpenMenuWithMouse({ clientX, clientY })) {
+                menu.open();
+                stopEvent(event);
+            }
         }
     };
 
@@ -136,8 +127,8 @@ export class MenuAndContentContainer<T extends string = string>
     addMouseListener() {
         if (!this.listensToMouse) {
             this.listensToMouse = true;
-            if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.show();
-            this.mouseTriggerElement.current!.addEventListener('mousemove', this.onMouseMove);
+            const { elementForEvents } = this.props;
+            elementForEvents.current!.addEventListener('mousemove', this.onMouseMove);
         }
     }
 
@@ -147,8 +138,8 @@ export class MenuAndContentContainer<T extends string = string>
     removeMouseListener() {
         if (this.listensToMouse) {
             this.listensToMouse = false;
-            if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.hide();
-            this.mouseTriggerElement.current!.removeEventListener('mousemove', this.onMouseMove);
+            const { elementForEvents } = this.props;
+            elementForEvents.current!.removeEventListener('mousemove', this.onMouseMove);
         }
     }
 
@@ -164,18 +155,12 @@ export class MenuAndContentContainer<T extends string = string>
         const { children, items, Menu } = this.props;
         return (
             <>
-                <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>
+                <Menu
+                    ref={this.menu}
+                    items={items}
+                    onVisibilityChange={this.onVisibilityChange}
+                    contentContainer={this}
+                />
                 {children}
             </>
         );

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

@@ -119,6 +119,13 @@ 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.
  */
@@ -138,6 +145,7 @@ 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 .side-menu {
+.menu-container {
     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={`side-menu ${DISPLAY_NONE}`}>
+            <div ref={this.visualController.div} className={`menu-container ${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 .side-menu {
+.menu-container {
     @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 .side-menu {
+[dir=rtl] .menu-container {
     left: auto;
     right: 0;
 

package/packages/mouse-navigation/src/MouseNavigation.tsx

@@ -94,22 +94,6 @@ 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';
     }
@@ -128,7 +112,6 @@ export class MouseNavigation extends Component<Props> {
             getMountingPoint(),
         );
         this.handleArrowState();
-        this.addWheelListner();
         this.navigationState = 'active';
     };
 
@@ -146,7 +129,6 @@ 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,7 +189,11 @@ export class PlayerUI extends Component<Props>
     }
 
     canHideAutomatically() {
-        return !this.isHidingDisabled;
+        return (
+            this.isPlaying()
+            && !this.seeking.isSeeking()
+            && !this.isHidingDisabled
+        );
     }
 
     isPlaying() {

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

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