@24i/bigscreen-sdk 1.0.4 → 1.0.5-4.alpha-2832

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

@@ -1,54 +1 @@
-/**
- * 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;
-};
+export { filter } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,43 +1 @@
-/**
- * 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;
-};
+export { find } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,43 +1 @@
-/**
- * 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;
-};
+export { findIndex } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,48 +1 @@
-/**
- * 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);
-    }
-};
+export { forEach } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,41 +1 @@
-/**
- * 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;
-};
+export { includes } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,32 +1 @@
-/**
- * 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;
-};
+export { includesNaN } from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,7 +1 @@
-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';
+export * from '@24i/appstage-shared-perf-utils/dist/array';

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

@@ -1,52 +1 @@
-/**
- * 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;
-};
+export { map } from '@24i/appstage-shared-perf-utils/dist/array';

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)
 
-### Current Time
+### Duration
 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/player-base';
+import { ITimeUpdateEvent } from '@24i/bigscreen-players-engine-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.getMetadata() || {};
+        const { programStart = 0 } = playerInstance.metadata || {};
         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/player-base';
+import { IDurationChangeEvent } from '@24i/bigscreen-players-engine-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.getMetadata() || {};
+        const { programStart = 0, programEnd = 0 } = playerInstance.metadata || {};
         const isLive = playerInstance.live;
         if (isLive && programStart < programEnd) {
             this.time.current!.updateTime(programEnd - programStart);

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

@@ -8,6 +8,8 @@ type Props = PlayerUICommonProps;
 export class PauseButton extends Component<Props> implements IFocusable {
     button = createRef<PlayerInteractable>();
 
+    isPaused = false;
+
     static defaultProps = {
         className: '',
     };
@@ -31,10 +33,16 @@ 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,6 +58,7 @@ 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,6 +8,7 @@ type Props = PlayerUITimeProps & {
     longTreshold?: number,
     shortFormat?: string,
     longFormat?: string,
+    isHiddenForAria?: boolean,
 };
 
 export class PlayerTime extends Component<Props> {
@@ -42,11 +43,12 @@ export class PlayerTime extends Component<Props> {
     }
 
     render() {
-        const { className } = this.props;
+        const { className, isHiddenForAria } = this.props;
         return (
             <div
                 ref={this.div}
                 className={`player-time ${className || ''}`}
+                {...isHiddenForAria && { 'aria-hidden': true }}
             >
                 {this.formatTime()}
             </div>

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

@@ -1,6 +1,6 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { PlayerBase } from '@24i/player-base';
-import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+import { PlayerBase } from '@24i/bigscreen-players-engine-base';
+import { FF, REW, switchByKey } from '@24i/bigscreen-sdk/device/keymap';
 import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
 import {
     IDisplayToggler, getDisplayToggler, DISPLAY_NONE,
@@ -16,12 +16,15 @@ export type PlayerUIState = {
 
 type Props = {
     children: (state: PlayerUIState) => JSX.Element | JSX.Element[] | string | null | null[],
-    player: PlayerBase<any>,
+    player: PlayerBase,
     timeout?: number,
     className?: string,
     hidden?: boolean,
+    disallowSeeking?: boolean,
     onClose?: () => void,
     onHide?: () => void,
+    isPauseAllowed?: () => boolean,
+    showSubtitlesPicker?: () => void,
 };
 
 export class PlayerUI extends Component<Props>
@@ -32,41 +35,47 @@ export class PlayerUI extends Component<Props>
 
     isHidingDisabled = false;
 
-    seeking: Seeking;
+    isSeekingDisabled = false;
+
+    seeking: Seeking | undefined;
 
     div = createRef<HTMLDivElement>();
 
     // eslint-disable-next-line react/destructuring-assignment
     divDisplay: IDisplayToggler = getDisplayToggler(this.div, this.props.hidden);
 
-    player: PlayerBase<any> | null = null;
+    player: PlayerBase | null = null;
 
     static defaultProps = {
         timeout: 5000,
         className: '',
         hidden: false,
+        disallowSeeking: false,
         onClose: noop,
         onHide: noop,
+        isPauseAllowed: () => true,
     };
 
     declare props: DeclareProps<Props, typeof PlayerUI.defaultProps>;
 
     constructor(props: Props) {
         super(props);
-        const { hidden, player } = this.props;
+        const { hidden, player, disallowSeeking } = this.props;
         this.player = player;
-        this.seeking = new Seeking(player);
+        if (!disallowSeeking) {
+            this.seeking = new Seeking(player);
+        }
         this.isHidden = hidden;
     }
 
     componentDidMount() {
         if (!this.isHidden) this.heartbeat();
-        this.seeking.subscribeEvents();
+        if (this.seeking) this.seeking.subscribeEvents();
     }
 
     componentWillUnmount() {
         this.stopHeartbeat();
-        this.seeking.unsubscribeEvents();
+        if (this.seeking) this.seeking.unsubscribeEvents();
     }
 
     onKeyDown = (event: KeyboardEvent) => {
@@ -82,13 +91,23 @@ export class PlayerUI extends Component<Props>
             STOP: this.onKeyStop,
             FF: this.onKeyForward,
             REW: this.onKeyRewind,
+            SUBTITLES: this.onKeySubtitles,
         });
-        if (processed) stopEvent(event);
+        if (processed && !FF.is(event) && !REW.is(event)) stopEvent(event);
+    };
+
+    onKeySubtitles = () => {
+        const { showSubtitlesPicker } = this.props;
+        if (showSubtitlesPicker) {
+            showSubtitlesPicker();
+        }
+        return true;
     };
 
     onKeyPlay = () => {
-        if (this.seeking.isSeeking()) {
+        if (this.seeking?.isSeeking()) {
             this.seeking.confirmSeek();
+            if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
             return true;
         }
         if (!this.isPlaying()) {
@@ -100,8 +119,11 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPause = () => {
-        if (this.seeking.isAutomaticallySeeking()) {
+        const { isPauseAllowed } = this.props;
+        if (!isPauseAllowed()) return false;
+        if (this.seeking?.isAutomaticallySeeking()) {
             this.seeking.stopAutomaticSeek();
+            if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
             return true;
         }
         if (this.isPlaying()) {
@@ -113,6 +135,13 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyPlayPause = () => {
+        const { isPauseAllowed } = this.props;
+        if (!isPauseAllowed()) return false;
+        if (this.seeking?.isSeeking()) {
+            this.seeking.confirmSeek();
+            if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
+            return true;
+        }
         this.show();
         if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
         else this.trigger(PlayerAction.PLAY);
@@ -126,36 +155,29 @@ export class PlayerUI extends Component<Props>
     };
 
     onKeyForward = () => {
-        if (this.seeking.isAutomaticallySeekingBackward) {
-            this.seeking.stopAutomaticSeek();
-            return true;
-        }
-        if (!this.seeking.isAutomaticallySeekingForward) {
-            this.seeking.startAutomaticSeekForward();
-            return true;
-        }
-        return false;
+        if (!this.seeking) return true;
+        if (this.isSeekingDisabled) return true;
+        if (this.seeking.isAutomaticallySeekingBackward) this.seeking.stopAutomaticSeek();
+        this.disableHiding();
+        this.seeking.automaticSeekForward();
+        return true;
     };
 
     onKeyRewind = () => {
-        if (this.seeking.isAutomaticallySeekingForward) {
-            this.seeking.stopAutomaticSeek();
-            return true;
-        }
-        if (!this.seeking.isAutomaticallySeekingBackward) {
-            this.seeking.startAutomaticSeekBackward();
-            return true;
-        }
-        return false;
+        if (!this.seeking) return true;
+        if (this.isSeekingDisabled) return true;
+        if (this.seeking.isAutomaticallySeekingForward) this.seeking.stopAutomaticSeek();
+        this.disableHiding();
+        this.seeking.automaticSeekBackward();
+        return true;
+
     };
 
-    getPlayer() {
-        return this.player!;
-    }
+    getPlayer = () => this.player!;
 
-    setPlayer(player: PlayerBase<any>) {
+    setPlayer(player: PlayerBase) {
         this.player = player;
-        this.seeking.setPlayer(player);
+        if (this.seeking) this.seeking.setPlayer(player);
     }
 
     trigger(action: PlayerAction, payload?: any) {
@@ -219,6 +241,17 @@ export class PlayerUI extends Component<Props>
         this.isHidingDisabled = false;
     }
 
+    disableSeeking() {
+        if (this.seeking?.isSeeking() || this.seeking?.isAutomaticallySeeking()) {
+            this.seeking.cancelSeek();
+        }
+        this.isSeekingDisabled = true;
+    }
+
+    enableSeeking() {
+        this.isSeekingDisabled = false;
+    }
+
     render() {
         const { children, hidden, className } = this.props;
         return (

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

@@ -1,5 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
-import { IDurationChangeEvent, ITimeUpdateEvent } from '@24i/player-base';
+import { IDurationChangeEvent, ITimeUpdateEvent } from '@24i/bigscreen-players-engine-base';
 import { PlayerTime } from './PlayerTime';
 import { PlayerUICommonProps, PlayerUITimeProps } from './types';
 
@@ -32,7 +32,7 @@ export class RemainingTime extends Component<Props> {
         this.duration = playerInstance.duration;
         playerInstance.addEventListener('timeupdate', this.onTimeUpdate);
         playerInstance.addEventListener('durationchange', this.onDurationChange);
-        const { programEnd = 0 } = playerInstance.getMetadata() || {};
+        const { programEnd = 0 } = playerInstance.metadata || {};
         this.liveEndTime = programEnd || Date.now();
     }