@24i/bigscreen-sdk 1.0.29 → 1.0.30-alpha.2518

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

@@ -1,157 +1,157 @@
-import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
-import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
-import { ArrowNavigation } from './ArrowNavigation';
-
-type Direction = 'horizontal' | 'vertical';
-
-type Props = {
-    children: JSX.Element;
-    getMountingPoint: () => Reference<HTMLElement>;
-    direction: Direction;
-    forward: () => any;
-    backward: () => any;
-    shouldShowMrcuForward?: () => boolean;
-    shouldShowMrcuBackward?: () => boolean;
-};
-
-export type STATE = 'active' | 'inactive';
-
-type MouseNavigationEvent = CustomEvent & { detail: { enabled: boolean } };
-
-declare global {
-    interface DocumentEventMap {
-        'mouseNavigation': MouseNavigationEvent,
-    }
-}
-
-export class MouseNavigation extends Component<Props> {
-    arrows = createRef<ArrowNavigation>();
-
-    navigationState: STATE = 'inactive';
-
-    isEnabled = true;
-
-    componentDidMount() {
-        if (device.isMouseUsed()) {
-            this.renderArrows();
-        }
-        document.addEventListener('mouseNavigation', this.handleMouseInterface);
-        device.addEventListener('mouseactive', this.mouseListener);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('mouseNavigation', this.handleMouseInterface);
-        device.removeEventListener('mouseactive', this.mouseListener);
-    }
-
-    handleMouseInterface = (event: CustomEvent) => {
-        const { enabled } = event.detail;
-        this.isEnabled = enabled;
-
-        if (!enabled) this.destroyArrows();
-        if (enabled && device.isMouseUsed()) this.renderArrows();
-    };
-
-    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
-        if (isMouseActive && this.isEnabled) {
-            this.renderArrows();
-        } else {
-            this.destroyArrows();
-        }
-    };
-
-    forward = () => {
-        const { forward } = this.props;
-        forward();
-        this.handleArrowState();
-    };
-
-    backward = () => {
-        const { backward } = this.props;
-        backward();
-        this.handleArrowState();
-    };
-
-    handleArrowState = () => {
-        const { shouldShowMrcuBackward, shouldShowMrcuForward, direction } = this.props;
-        const { horizontal } = this.mapDirectionToProps(direction);
-        if (shouldShowMrcuForward) {
-            const dir = horizontal ? 'right' : 'down';
-            if (shouldShowMrcuForward()) {
-                this.arrows.current?.enableArrow(dir);
-            } else {
-                this.arrows.current?.disableArrow(dir);
-            }
-        }
-
-        if (shouldShowMrcuBackward) {
-            const dir = horizontal ? 'left' : 'up';
-            if (shouldShowMrcuBackward()) {
-                this.arrows.current?.enableArrow(dir);
-            } else {
-                this.arrows.current?.disableArrow(dir);
-            }
-        }
-    };
-
-    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';
-    }
-
-    renderArrows = () => {
-        if (this.navigationState === 'active') return;
-        const { getMountingPoint, direction } = this.props;
-
-        this.appendMount(
-            <ArrowNavigation
-                ref={this.arrows}
-                {...this.mapDirectionToProps(direction)}
-                forward={this.forward}
-                backward={this.backward}
-            />,
-            getMountingPoint(),
-        );
-        this.handleArrowState();
-        this.addWheelListner();
-        this.navigationState = 'active';
-    };
-
-    mapDirectionToProps(direction: Direction) {
-        if (direction === 'horizontal') {
-            return { horizontal: true };
-        }
-
-        if (direction === 'vertical') {
-            return { vertical: true };
-        }
-        return {};
-    }
-
-    destroyArrows() {
-        if (this.navigationState === 'inactive') return;
-        this.navigationState = 'inactive';
-        this.removeWheelListner();
-        removeNode(this.arrows.current!.domRef);
-    }
-
-    render() {
-        const { children } = this.props;
-        return children;
-    }
-}
+import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { device, DeviceEventMap } from '@24i/bigscreen-sdk/device';
+import { ArrowNavigation } from './ArrowNavigation';
+
+type Direction = 'horizontal' | 'vertical';
+
+type Props = {
+    children: JSX.Element;
+    getMountingPoint: () => Reference<HTMLElement>;
+    direction: Direction;
+    forward: () => any;
+    backward: () => any;
+    shouldShowMrcuForward?: () => boolean;
+    shouldShowMrcuBackward?: () => boolean;
+};
+
+export type STATE = 'active' | 'inactive';
+
+type MouseNavigationEvent = CustomEvent & { detail: { enabled: boolean } };
+
+declare global {
+    interface DocumentEventMap {
+        'mouseNavigation': MouseNavigationEvent,
+    }
+}
+
+export class MouseNavigation extends Component<Props> {
+    arrows = createRef<ArrowNavigation>();
+
+    navigationState: STATE = 'inactive';
+
+    isEnabled = true;
+
+    componentDidMount() {
+        if (device.isMouseUsed()) {
+            this.renderArrows();
+        }
+        document.addEventListener('mouseNavigation', this.handleMouseInterface);
+        device.addEventListener('mouseactive', this.mouseListener);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mouseNavigation', this.handleMouseInterface);
+        device.removeEventListener('mouseactive', this.mouseListener);
+    }
+
+    handleMouseInterface = (event: CustomEvent) => {
+        const { enabled } = event.detail;
+        this.isEnabled = enabled;
+
+        if (!enabled) this.destroyArrows();
+        if (enabled && device.isMouseUsed()) this.renderArrows();
+    };
+
+    mouseListener: DeviceEventMap['mouseactive'] = ({ isMouseActive }) => {
+        if (isMouseActive && this.isEnabled) {
+            this.renderArrows();
+        } else {
+            this.destroyArrows();
+        }
+    };
+
+    forward = () => {
+        const { forward } = this.props;
+        forward();
+        this.handleArrowState();
+    };
+
+    backward = () => {
+        const { backward } = this.props;
+        backward();
+        this.handleArrowState();
+    };
+
+    handleArrowState = () => {
+        const { shouldShowMrcuBackward, shouldShowMrcuForward, direction } = this.props;
+        const { horizontal } = this.mapDirectionToProps(direction);
+        if (shouldShowMrcuForward) {
+            const dir = horizontal ? 'right' : 'down';
+            if (shouldShowMrcuForward()) {
+                this.arrows.current?.enableArrow(dir);
+            } else {
+                this.arrows.current?.disableArrow(dir);
+            }
+        }
+
+        if (shouldShowMrcuBackward) {
+            const dir = horizontal ? 'left' : 'up';
+            if (shouldShowMrcuBackward()) {
+                this.arrows.current?.enableArrow(dir);
+            } else {
+                this.arrows.current?.disableArrow(dir);
+            }
+        }
+    };
+
+    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';
+    }
+
+    renderArrows = () => {
+        if (this.navigationState === 'active') return;
+        const { getMountingPoint, direction } = this.props;
+
+        this.appendMount(
+            <ArrowNavigation
+                ref={this.arrows}
+                {...this.mapDirectionToProps(direction)}
+                forward={this.forward}
+                backward={this.backward}
+            />,
+            getMountingPoint(),
+        );
+        this.handleArrowState();
+        this.addWheelListner();
+        this.navigationState = 'active';
+    };
+
+    mapDirectionToProps(direction: Direction) {
+        if (direction === 'horizontal') {
+            return { horizontal: true };
+        }
+
+        if (direction === 'vertical') {
+            return { vertical: true };
+        }
+        return {};
+    }
+
+    destroyArrows() {
+        if (this.navigationState === 'inactive') return;
+        this.navigationState = 'inactive';
+        this.removeWheelListner();
+        removeNode(this.arrows.current!.domRef);
+    }
+
+    render() {
+        const { children } = this.props;
+        return children;
+    }
+}

package/packages/mouse-navigation/src/MouseNavigationInterface.ts

@@ -1,8 +1,8 @@
-const sendEvent = (enabled: boolean) => {
-    document.dispatchEvent(new CustomEvent('mouseNavigation', { detail: { enabled } }));
-};
-
-export const MouseNavigationInterface = {
-    show: () => sendEvent(true),
-    hide: () => sendEvent(false),
-};
+const sendEvent = (enabled: boolean) => {
+    document.dispatchEvent(new CustomEvent('mouseNavigation', { detail: { enabled } }));
+};
+
+export const MouseNavigationInterface = {
+    show: () => sendEvent(true),
+    hide: () => sendEvent(false),
+};

package/packages/mouse-navigation/src/index.ts

@@ -1,3 +1,3 @@
-export { MouseElementWrapper } from './MouseElementWrapper';
-export { MouseNavigation } from './MouseNavigation';
-export { MouseNavigationInterface } from './MouseNavigationInterface';
+export { MouseElementWrapper } from './MouseElementWrapper';
+export { MouseNavigation } from './MouseNavigation';
+export { MouseNavigationInterface } from './MouseNavigationInterface';

package/packages/numeric-zapper/README.md

@@ -1,153 +1,153 @@
----
-id: README
-title: Numeric Zapper
-hide_title: true
-sidebar_label: Numeric Zapper
----
-
-# Numeric Zapper
-Numeric Zapper provides a way to show zapper component to the user, for example when trying to change the channel, or position in the EPG.
-It provides component and service that exposes the needed methods for interaction and control.
-
-## Supported Features
-- Can be used either with or without the ZapperService
-- ZapperService provides the API for interaction and control of the Numeric Zapper
-- The component can be either disabled or enabled based on your wish
-- Zapping can be allowed only on specific wrapper elements
-- Default callback can be set to be used in case there is no other specified
-- Can pass specific callback (e.g. when going from Live TV to EPG), to change the behavior of the zapper
-- Can set custom placeholder with prop `placeholderChar` - defaults to `-`
-- Can hide placeholders with prop `noPlaceholders` - defaults to false
-
-## Basic Usage
-```jsx
-<NumericZapper
-    ref={reference}
-    className="sample-numeric-zapper"
-    enabled
-    onSubmit={(num: number) => {
-        console.log('You are trying to zap to: ', num);
-    }}
-    visibleOnEnable={false}
-    timeout={3000}
-/>
-```
-
-NumericZapper will not work by default, you need to allow it on specific areas, where you want to have zapping functional.
-See usage below for mode details.
-
-### Styles
-The Numeric Zapper component comes with created styles that can be used freely. To use them, simply import the styles from the package.
-```jsx
-import '@24i/bigscreen-sdk/numeric-zapper/styles';
-```
-
-## Props
-All of the Props that the NumericZapper consumes are optional
-
-```jsx
-type Props = {
-    className?: string,
-    enabled?: boolean;
-    onSubmit?: ZapFunction,
-    visibleOnEnable?: boolean,
-    timeout?: boolean,
-};
-```
-
-- `className` is set alongside the default className ("numeric-zapper")
-- `enabled` (_if not specified, default value is `false`_) indicates whether or the zapper is enabled. While disabled, NumericZapper does not catch any key event.
-- `onSubmit` is a function that is called upon completing the 'zapper' (either by timeout or by `[enter]` key
-- `visibleOnEnable` (_if not specified, default value is `false`_) tells the component if it should be visible with no numbers displaying - - - - at the moment when when zapper is enabled.
-- `timeout` (_if not specified, default value is `2000`_) is the time (in ms) the component should wait before firing the Zap function
-
-
-### ZapFunction:
-Is a simple function, that takes a number as a parameter and does not return anything.
-
-```jsx
-type ZapFunction = (zap: number) => void;
-```
-
-## ZapperService
-ZapperService is a service that exposes a few of the methods essential for control of the NumericZapper.
-
-```jsx
-export type ZapperInterface = {
-    enable: (callback?: ZapFunction, isDefault?: boolean) => void,
-    disable: () => void,
-    isEnabled: () => boolean,
-};
-```
-
-- `enable` takes two possible arguments, first being ZapFunction - if you don't have default ZapFunction already defined, this parameter is mandatory. Second is telling the function if the ZapFunction should be stored as defaultZapperFunction or specificZapperFunction
-- `disable` disables the NumericZapper and removes the `Specific Zap Function`.
-- `isEnabled` says if the component is enabled
-
-### Usage
-First you need to pass the reference to the NumericZapper to zapperServiceRef. To do that, you need to render the component somewhere (it can be in the root, in the one specific scene, etc.). Then you need to pass the reference as described below.
-
-```jsx
-import {
-    NumericZapper,
-    zapperServiceRef,
-} from '@24i/bigscreen-sdk/numeric-zapper';
-
-...
-
-render() {
-  return (
-      <NumericZapper ref={zapperServiceRef} />
-  );
-}
-```
-
-The next step is to import the ZapperService and start using it. This can be done basically anywhere in the app (as long as the component is rendered) since the service holds the reference to it.
-
-```jsx
-import { getZapperService } from '@24i/bigscreen-sdk/numeric-zapper';
-
-const zapperService = getZapperService();
-zapperService.enable((num: number) => {
-  zapToChannel(num);
-});
-```
-
-In the last step, you need to allow zapper in specific area. It does not work everywhere by default.
-Zapper is working only when current focused element is wrapped by some other
-element (anywhere below it in the DOM tree) with special dataset parameter `data-zapper-allowed="true"`.
-On the other hand, when you add dataset parameter `data-zapper-allowed="false"` to the wrapper element,
-zapper will not work, when focus is on one of its children.
-These conditions also work when dataset parameter is on focused element itself.
-
-### Examples
-```tsx
-// zapper is allowed to work in the whole program-guide scene
-// but does not work when the focus is on the ProgramInfo component
-<div
-    className="scene program-guide"
-    ref={this.domRef}
-    data-zapper-allowed="true"
->
-    ...
-    <div data-zapper-allowed="false">
-        <ProgramInfo ref={this.programInfoRef}/>
-    </div>
-</div>
-```
-
-You can use also `data-zapper-allowed` property like this:
-
-```tsx
-<div data-zapper-allowed>
-    ...
-</div>
-
-<div data-zapper-allowed={true}>
-    ...
-</div>
-
-<div data-zapper-allowed={false}>
-    ...
-</div>
-```
+---
+id: README
+title: Numeric Zapper
+hide_title: true
+sidebar_label: Numeric Zapper
+---
+
+# Numeric Zapper
+Numeric Zapper provides a way to show zapper component to the user, for example when trying to change the channel, or position in the EPG.
+It provides component and service that exposes the needed methods for interaction and control.
+
+## Supported Features
+- Can be used either with or without the ZapperService
+- ZapperService provides the API for interaction and control of the Numeric Zapper
+- The component can be either disabled or enabled based on your wish
+- Zapping can be allowed only on specific wrapper elements
+- Default callback can be set to be used in case there is no other specified
+- Can pass specific callback (e.g. when going from Live TV to EPG), to change the behavior of the zapper
+- Can set custom placeholder with prop `placeholderChar` - defaults to `-`
+- Can hide placeholders with prop `noPlaceholders` - defaults to false
+
+## Basic Usage
+```jsx
+<NumericZapper
+    ref={reference}
+    className="sample-numeric-zapper"
+    enabled
+    onSubmit={(num: number) => {
+        console.log('You are trying to zap to: ', num);
+    }}
+    visibleOnEnable={false}
+    timeout={3000}
+/>
+```
+
+NumericZapper will not work by default, you need to allow it on specific areas, where you want to have zapping functional.
+See usage below for mode details.
+
+### Styles
+The Numeric Zapper component comes with created styles that can be used freely. To use them, simply import the styles from the package.
+```jsx
+import '@24i/bigscreen-sdk/numeric-zapper/styles';
+```
+
+## Props
+All of the Props that the NumericZapper consumes are optional
+
+```jsx
+type Props = {
+    className?: string,
+    enabled?: boolean;
+    onSubmit?: ZapFunction,
+    visibleOnEnable?: boolean,
+    timeout?: boolean,
+};
+```
+
+- `className` is set alongside the default className ("numeric-zapper")
+- `enabled` (_if not specified, default value is `false`_) indicates whether or the zapper is enabled. While disabled, NumericZapper does not catch any key event.
+- `onSubmit` is a function that is called upon completing the 'zapper' (either by timeout or by `[enter]` key
+- `visibleOnEnable` (_if not specified, default value is `false`_) tells the component if it should be visible with no numbers displaying - - - - at the moment when when zapper is enabled.
+- `timeout` (_if not specified, default value is `2000`_) is the time (in ms) the component should wait before firing the Zap function
+
+
+### ZapFunction:
+Is a simple function, that takes a number as a parameter and does not return anything.
+
+```jsx
+type ZapFunction = (zap: number) => void;
+```
+
+## ZapperService
+ZapperService is a service that exposes a few of the methods essential for control of the NumericZapper.
+
+```jsx
+export type ZapperInterface = {
+    enable: (callback?: ZapFunction, isDefault?: boolean) => void,
+    disable: () => void,
+    isEnabled: () => boolean,
+};
+```
+
+- `enable` takes two possible arguments, first being ZapFunction - if you don't have default ZapFunction already defined, this parameter is mandatory. Second is telling the function if the ZapFunction should be stored as defaultZapperFunction or specificZapperFunction
+- `disable` disables the NumericZapper and removes the `Specific Zap Function`.
+- `isEnabled` says if the component is enabled
+
+### Usage
+First you need to pass the reference to the NumericZapper to zapperServiceRef. To do that, you need to render the component somewhere (it can be in the root, in the one specific scene, etc.). Then you need to pass the reference as described below.
+
+```jsx
+import {
+    NumericZapper,
+    zapperServiceRef,
+} from '@24i/bigscreen-sdk/numeric-zapper';
+
+...
+
+render() {
+  return (
+      <NumericZapper ref={zapperServiceRef} />
+  );
+}
+```
+
+The next step is to import the ZapperService and start using it. This can be done basically anywhere in the app (as long as the component is rendered) since the service holds the reference to it.
+
+```jsx
+import { getZapperService } from '@24i/bigscreen-sdk/numeric-zapper';
+
+const zapperService = getZapperService();
+zapperService.enable((num: number) => {
+  zapToChannel(num);
+});
+```
+
+In the last step, you need to allow zapper in specific area. It does not work everywhere by default.
+Zapper is working only when current focused element is wrapped by some other
+element (anywhere below it in the DOM tree) with special dataset parameter `data-zapper-allowed="true"`.
+On the other hand, when you add dataset parameter `data-zapper-allowed="false"` to the wrapper element,
+zapper will not work, when focus is on one of its children.
+These conditions also work when dataset parameter is on focused element itself.
+
+### Examples
+```tsx
+// zapper is allowed to work in the whole program-guide scene
+// but does not work when the focus is on the ProgramInfo component
+<div
+    className="scene program-guide"
+    ref={this.domRef}
+    data-zapper-allowed="true"
+>
+    ...
+    <div data-zapper-allowed="false">
+        <ProgramInfo ref={this.programInfoRef}/>
+    </div>
+</div>
+```
+
+You can use also `data-zapper-allowed` property like this:
+
+```tsx
+<div data-zapper-allowed>
+    ...
+</div>
+
+<div data-zapper-allowed={true}>
+    ...
+</div>
+
+<div data-zapper-allowed={false}>
+    ...
+</div>
+```