@24i/bigscreen-sdk 1.0.54-alpha.2836 → 2.1.1-alpha.2133

package/packages/perf-utils/README.md

@@ -5,4 +5,123 @@ hide_title: true
 sidebar_label: Performance Utils
 ---
 
-https://github.com/24i/appstage-shared-packages/blob/main/packages/perf-utils/README.md
+# Performance Utils
+Set of utilities that should increase a performance if they are used instead of a native way, mainly on older devices (e.g. Entone/Kamai set-top-boxes).
+
+> **Please check the limitations of each performance utility You want to use in a code.**
+
+## Available perf utils
+- **[Array](#array-perf-utils)**
+    - [filter](#filter)
+    - [forEach](#foreach)
+    - [includes](#includes)
+    - [includesNaN](#includesnan)
+    - [map](#map)
+  
+## Array perf utils
+
+> In general, each Array utility which requires a callback will iterate over all array items, even if array index hasn't been initialized yet (to understand the issue, see [An adventure in sparse arrays](https://remysharp.com/2018/06/26/an-adventure-in-sparse-arrays)).
+
+### filter()
+> The filter() method creates a new array with all elements that pass the test implemented by the provided function.  
+
+For more info, please see [native **filter** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native filter implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Description)).
+- **Doesn't coerce returned value from a callback to `true` or `false`**, the callback has to return a boolean value directly.
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { filter } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
+//const result = array.filter(word => word.length > 6); // slower native solution
+const result = filter(array, word => word.length > 6);  // faster
+
+console.log(result);
+// expected output: Array ["exuberant", "destruction"]
+```
+
+### forEach()
+> The forEach() method executes a provided function once for each array element.
+
+For more info, please see [native **forEach** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native forEach implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Description)).
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['a', 'b', 'c'];
+// array.forEach(item => console.log(item)); // slower native solution
+forEach(array, item => console.log(item));   // faster
+
+// expected output: "a"
+// expected output: "b"
+// expected output: "c"
+```
+
+### includes()
+> The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
+
+For more info, please see [native **includes** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
+
+#### Limitations against native implementation
+- **Doesn't work for searching NaN value!** For that purpose, please use [includesNaN()](#includesnan).
+- Doesn't support negative indexes for `fromIndex` param - the entire array will be processed.
+
+#### Usage
+```javascript
+import { includes } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['item0', 'item1', 'item2'];
+
+//console.log(array.includes('item1')); // slower native solution
+console.log(includes(array, 'item1'));  // faster
+// expected output: true
+
+//console.log(array.includes('item1')); // slower native solution
+console.log(includes(array, 'item1', 2));  // faster
+// expected output: false
+```
+
+### includesNaN()
+> The includesNaN() method determines whether an array includes NaN value among its entries, returning true or false as appropriate.
+
+#### Usage
+```javascript
+import { includesNaN } from '@24i/bigscreen-sdk/perf-utils/array';
+
+console.log(includesNaN([0, NaN, 1]));
+// expected output: true
+
+console.log(includesNaN([0, NaN, 1], 2));
+// expected output: false
+```
+
+### map()
+> The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
+
+For more info, please see [native **map** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native map implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Description)).
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = [1, 4, 9, 16];
+
+// const mappedArray = array.map(x => x * 2); // slower native solution
+const mappedArray = map(array, x => x * 2);   // faster
+
+console.log(mappedArray);
+// expected output: Array [2, 8, 18, 32]
+```

package/packages/perf-utils/src/array/filter.ts

@@ -1 +1,54 @@
-export { filter } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.filter` method.
+ *
+ * Creates a new array with all elements that pass the test implemented by the provided function.
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
+ *
+ * **Limitations against native implementation**:
+ *
+ * - **`callback` is invoked for all indexes of the array**,
+ * (not only for indexes with assigned values like native filter implementation), see example.
+ * - **Doesn't coerce returned value from a callback to `true` or `false`**,
+ * the callback has to return a boolean value directly.
+ * - Doesn't accept the `scope` as last argument.
+ *
+ * @param {Array} array - Input array.
+ * @param {Function} callback - Predicate to test each element of the array.
+ * Return true to keep the element, false otherwise.
+ *
+ * @return {Array} with filtered results.
+ *
+ * @example
+ * import { filter } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
+ *
+ * //const result = array.filter(word => word.length > 6); // slower native solution
+ * const result = filter(array, word => word.length > 6);  // faster
+ *
+ * console.log(result);
+ * // expected output: Array ["exuberant", "destruction"]
+ *
+ * @example
+ * import { filter } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const nativeResult = [1, 2, , undefined].filter(() => true);
+ * console.log(nativeResult); // Array [1, 2, undefined]. Yes, empty value is missing here.
+ *
+ * const customResult = filter([1, 2, , undefined], () => true);
+ * console.log(customResult); // Array [1, 2, undefined, undefined]. With iteration over hole.
+ */
+export const filter = <T>(
+    array: T[],
+    callback: (value: T, index: number, array: T[]) => boolean,
+): T[] => {
+    const output: T[] = [];
+
+    for (let i = 0, len = array.length; i < len; i++) {
+        if (callback(array[i], i, array) === true) {
+            output.push(array[i]);
+        }
+    }
+
+    return output;
+};

package/packages/perf-utils/src/array/find.ts

@@ -1 +1,43 @@
-export { find } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.find` method.
+ *
+ * Returns the first element that satisfies the testing function. Undefined if no item satisfies
+ * the testing function.
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+ *
+ * **Limitations against native implementation**:
+ *
+ * - **`callback` is invoked for all indexes of the array**,
+ * (not only for indexes with assigned values like native filter implementation), see example.
+ * - **Doesn't coerce returned value from a callback to `true` or `false`**,
+ * the callback has to return a boolean value directly.
+ * - Doesn't accept the `scope` as last argument.
+ *
+ * @param {Array<T>} array - Input array.
+ * @param {Function} callback - Predicate to test each element of the array.
+ * Return true to select the element, false otherwise.
+ *
+ * @return {T | undefined} The first element the satisfied the testing function. Or undefined.
+ *
+ * @example
+ * import { find } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
+ *
+ * //const result = array.find(word => word.length > 6); // slower native solution
+ * const result = find(array, word => word.length > 6);  // faster
+ *
+ * console.log(result);
+ * // expected output: "exuberant"
+ */
+export const find = <T>(
+    array: T[],
+    callback: (value: T, index: number, array: T[]) => boolean,
+): T | undefined => {
+    for (let i = 0, len = array.length; i < len; i++) {
+        if (callback(array[i], i, array) === true) {
+            return array[i];
+        }
+    }
+    return undefined;
+};

package/packages/perf-utils/src/array/findIndex.ts

@@ -1 +1,43 @@
-export { findIndex } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.findIndex` method.
+ *
+ * Returns the index of the first element that satisfies the testing function.
+ * Returns -1 if no item satisfies the testing function.
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
+ *
+ * **Limitations against native implementation**:
+ *
+ * - **`callback` is invoked for all indexes of the array**,
+ * (not only for indexes with assigned values like native filter implementation), see example.
+ * - **Doesn't coerce returned value from a callback to `true` or `false`**,
+ * the callback has to return a boolean value directly.
+ * - Doesn't accept the `scope` as last argument.
+ *
+ * @param {Array<T>} array - Input array.
+ * @param {Function} callback - Predicate to test each element of the array.
+ * Return true to select the index of the element, false otherwise.
+ *
+ * @return {number} Index of the first element the satisfied the testing function. Or -1.
+ *
+ * @example
+ * import { findIndex } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
+ *
+ * //const result = array.findIndex(word => word.length > 6); // slower native solution
+ * const result = findIndex(array, word => word.length > 6);  // faster
+ *
+ * console.log(result);
+ * // expected output: 3
+ */
+export const findIndex = <T>(
+    array: T[],
+    callback: (value: T, index: number, array: T[]) => boolean,
+): number => {
+    for (let i = 0, len = array.length; i < len; i++) {
+        if (callback(array[i], i, array) === true) {
+            return i;
+        }
+    }
+    return -1;
+};

package/packages/perf-utils/src/array/forEach.ts

@@ -1 +1,48 @@
-export { forEach } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.forEach` method.
+ *
+ * Executes a provided function once for each array element.
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
+ *
+ * **Limitations against native implementation**:
+ *
+ * - **`callback` is invoked for all indexes of the array**,
+ * (not only for indexes with assigned values like native filter implementation), see example.
+ * - Doesn't accept the scope as last argument.
+ *
+ * @param {Array} array - Input array.
+ * @param {Function} callback - Function to execute on each element.
+ *
+ * @return {void}
+ *
+ * @example
+ * import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = ['a', 'b', 'c'];
+ *
+ * // array.forEach(item => console.log(item)); // slower native solution
+ * forEach(array, item => console.log(item));   // faster
+ *
+ * // expected output: "a"
+ * // expected output: "b"
+ * // expected output: "c"
+ *
+ * @example
+ * import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = new Array(1000); // creates an empty array with length 1000
+ *
+ * let iNative = 0;
+ * array.forEach(() => iNative++);
+ * console.log(iNative); // 0 - the callback was never called
+ *
+ * let iCustom = 0;
+ * forEach(array, () => iCustom++);
+ * console.log(iCustom); // 1000 - the callback was called for each item (hole) in array
+ */
+
+export const forEach = <T>(array: T[], callback: (value: T, index: number, array: T[]) => void) => {
+    for (let i = 0, len = array.length; i < len; i++) {
+        callback(array[i], i, array);
+    }
+};

package/packages/perf-utils/src/array/includes.ts

@@ -1 +1,41 @@
-export { includes } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.includes` method
+ * (doesn't work for searching NaN value).
+ *
+ * Determines whether an array includes a certain value among its entries,
+ * returning true or false as appropriate.
+
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
+ * @see includesNaN()
+ *
+ * **Limitations against native implementation**:
+ * - **Doesn't work for searching NaN value. For that purpose, please use includesNaN()**.
+ * - Doesn't accept the scope as last argument.
+ *
+ * @param {Array} array - Input array.
+ * @param {*} valueToFind - Value to find in array.
+ * @param {number} [fromIndex=0] - Index to start search from.
+ *
+ * @return {boolean}
+ *
+ * @example
+ * import { includes } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = ['item0', 'item1', 'item2'];
+ *
+ * //console.log(array.includes('item1')); // slower native solution
+ * console.log(includes(array, 'item1'));  // faster
+ * // expected output: true
+ *
+ * //console.log(array.includes('item1')); // slower native solution
+ * console.log(includes(array, 'item1', 2));  // faster
+ * // expected output: false
+ */
+export const includes = <T>(array: T[], valueToFind: T, fromIndex = 0): boolean => {
+    for (let i = fromIndex, len = array.length; i < len; i++) {
+        if (array[i] === valueToFind) {
+            return true;
+        }
+    }
+    return false;
+};

package/packages/perf-utils/src/array/includesNaN.ts

@@ -1 +1,32 @@
-export { includesNaN } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.includes` method for testing `NaN` value.
+ *
+ * Determines whether an array includes NaN value among its entries,
+ * returning true or false as appropriate.
+ *
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
+ *
+ * @param {Array} array - Input array.
+ * @param {number} [fromIndex=0] - Index to start search from.
+ *
+ * @return {boolean}
+ *
+ * @example
+ * import { includesNaN } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * // returns true
+ * includesNaN([0, NaN, 2]);
+ *
+ * // returns false
+ * includesNaN([0, NaN, 2], 2);
+ */
+export const includesNaN = (array: any[], fromIndex = 0): boolean => {
+    for (let i = fromIndex, len = array.length; i < len; i++) {
+        const iValue = array[i];
+        // eslint-disable-next-line no-self-compare
+        if (iValue !== iValue) { // true only for NaN value
+            return true;
+        }
+    }
+    return false;
+};

package/packages/perf-utils/src/array/index.ts

@@ -1 +1,7 @@
-export * from '@24i/appstage-shared-perf-utils/dist/array';
+export { filter } from './filter';
+export { find } from './find';
+export { findIndex } from './findIndex';
+export { forEach } from './forEach';
+export { includes } from './includes';
+export { includesNaN } from './includesNaN';
+export { map } from './map';

package/packages/perf-utils/src/array/map.ts

@@ -1 +1,52 @@
-export { map } from '@24i/appstage-shared-perf-utils/dist/array';
+/**
+ * Performance optimized version of `Array.prototype.map` method.
+ *
+ * Creates a new array populated with the results of calling a provided function
+ * on every element in the calling array.
+ *
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map
+ *
+ * **Limitations against native implementation**:
+ *
+ * - **`callback` is invoked for all indexes of the array**,
+ * (not only for indexes with assigned values like native filter implementation), see example.
+ * - Doesn't accept the `scope` as last argument.
+ *
+ * @param {Array} array - Input array.
+ * @param {Function} callback - Function that is called for every element of arr.
+ * Each time callback executes, the returned value is added to output array.
+ *
+ * @return {Array} with mapped results.
+ *
+ * @example
+ * import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = [1, 4, 9, 16];
+ *
+ * // const mappedArray = array.map(x => x * 2); // slower native solution
+ * const mappedArray = map(array, x => x * 2);   // faster
+ *
+ * console.log(mappedArray);
+ * // expected output: Array [2, 8, 18, 32]
+ *
+ * @example
+ * import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+ *
+ * const array = [1, , 2].map(x => x * x) // [ 1, , 4 ]
+ *
+ * const nativeResult = array.map(x => x * x);
+ * console.log(nativeResult); // [ 1, , 4 ] // keeps hole in array
+ *
+ * const customResult = map(array, x => x * x);
+ * console.log(customResult); // [ 1, NaN , 4 ] NaN? -> undefined * undefined = NaN
+ */
+export const map = <T, M>(array: T[], callback: (item: T, index: number, array: T[]) => M): M[] => {
+    const len = array.length;
+    const output = new Array(len);
+
+    for (let i = 0; i < len; i++) {
+        output[i] = callback(array[i], i, array);
+    }
+
+    return output;
+};

package/packages/player-ui/README.md

@@ -70,7 +70,7 @@ Displays the current remaining time.
 - `longFormat` - long format of a displayed time (defaults to h:mm:ss)
 - `shortFormat` - short format of a displayed time (defaults to m:ss)
 
-### Duration
+### Current Time
 Displays the duration.
 #### Props
 - `className` - optional className to add to default one

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

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
+import { ITimeUpdateEvent } from '@24i/player-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -26,7 +26,7 @@ export class CurrentTime extends Component<Props> {
         const playerInstance = ui.getPlayer();
         this.isLive = playerInstance.live;
         playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
-        const { programStart = 0 } = playerInstance.metadata || {};
+        const { programStart = 0 } = playerInstance.getMetadata() || {};
         this.liveStartTime = programStart || Date.now();
     }
 

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

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { IDurationChangeEvent } from '@24i/bigscreen-players-engine-base';
+import { IDurationChangeEvent } from '@24i/player-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -20,7 +20,7 @@ export class Duration extends Component<Props> {
     componentDidMount() {
         const { ui } = this.props;
         const playerInstance = ui.getPlayer();
-        const { programStart = 0, programEnd = 0 } = playerInstance.metadata || {};
+        const { programStart = 0, programEnd = 0 } = playerInstance.getMetadata() || {};
         const isLive = playerInstance.live;
         if (isLive && programStart < programEnd) {
             this.time.current!.updateTime(programEnd - programStart);

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

@@ -8,8 +8,6 @@ type Props = PlayerUICommonProps;
 export class PauseButton extends Component<Props> implements IFocusable {
     button = createRef<PlayerInteractable>();
 
-    isPaused = false;
-
     static defaultProps = {
         className: '',
     };
@@ -33,16 +31,10 @@ export class PauseButton extends Component<Props> implements IFocusable {
 
     onPlaying = () => {
         this.button.current!.show();
-        if (this.isPaused) {
-            const { ui } = this.props;
-            ui.getPlayer().triggerEvent('unpause');
-        }
-        this.isPaused = false;
     };
 
     onPause = () => {
         this.button.current!.hide();
-        this.isPaused = true;
     };
 
     focus(options?: FocusOptions) {

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

@@ -58,7 +58,6 @@ export class PlayerInteractable extends Component<Props> {
                 ref={this.div}
                 className={`player-ui-button ${hidden ? DISPLAY_NONE : ''} ${className}`}
                 onPress={this.onPress}
-                blockRepeatedKeyDown
             >
                 {children}
             </Interactable>

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

@@ -8,7 +8,6 @@ type Props = PlayerUITimeProps & {
     longTreshold?: number,
     shortFormat?: string,
     longFormat?: string,
-    isHiddenForAria?: boolean,
 };
 
 export class PlayerTime extends Component<Props> {
@@ -43,12 +42,11 @@ export class PlayerTime extends Component<Props> {
     }
 
     render() {
-        const { className, isHiddenForAria } = this.props;
+        const { className } = this.props;
         return (
             <div
                 ref={this.div}
                 className={`player-time ${className || ''}`}
-                {...isHiddenForAria && { 'aria-hidden': true }}
             >
                 {this.formatTime()}
             </div>