@24i/bigscreen-sdk 1.0.2 → 1.0.3-alpha.2087

package/package.json

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

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