@24i/bigscreen-sdk 0.9.9-alpha.2148 → 0.9.9-alpha.2150

package/packages/utils/src/elementUtils.ts

@@ -0,0 +1,58 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+
+export const isElementVisible = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return false;
+    const style = window.getComputedStyle(element);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+};
+
+export const isElementFullyVisible = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (isElementVisible(element)) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent === document.body) {
+                return true;
+            }
+            if (!isElementVisible(parent)) {
+                return false;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
+    return false;
+};
+
+export const isElementWrappedBy = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+    wrapperElementOrReferenceOrCondition:
+    HTMLElement | Reference<HTMLElement> | ((currentWrapper: HTMLElement) => boolean),
+    includesElementItself = false,
+) => {
+    const element = unwrapReference(elementOrReference);
+    let currentParent = includesElementItself ? element : element.parentElement;
+    let wrapperElement: HTMLElement | null = null;
+    let condition: ((currentWrapper: HTMLElement) => boolean) | null = null;
+    if (typeof wrapperElementOrReferenceOrCondition === 'function') {
+        condition = wrapperElementOrReferenceOrCondition;
+    } else {
+        wrapperElement = unwrapReference(wrapperElementOrReferenceOrCondition);
+        if (!wrapperElement) return false;
+    }
+    while (currentParent) {
+        if (condition && condition(currentParent)) {
+            return true;
+        }
+        if (currentParent === wrapperElement) {
+            return true;
+        }
+        currentParent = currentParent.parentElement;
+    }
+    return false;
+};

package/packages/utils/src/generateUuid.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-bitwise */
+
+/**
+ * Generates Universally Unique ID (UUIDv4 - RFC 4122)
+ * @returns universally unique identifier. Ex. "123e4567-e89b-12d3-a456-426614174000"
+ */
+export const generateUuid = (): string => {
+    let id = '';
+    for (let i = 0; i < 32; i++) {
+        const random = Math.random() * 16 | 0;
+        if (i === 8 || i === 12 || i === 16 || i === 20) {
+            id += '-';
+        }
+        id += (i === 12 ? 4 : (i === 16 ? ((random & 3) | 8) : random)).toString(16);
+    }
+    return id;
+};

package/packages/utils/src/index.ts

@@ -0,0 +1,35 @@
+export { generateUuid } from './generateUuid';
+export { stopEvent } from './stopEvent';
+export { noop } from './noop';
+export { offsetPosition } from './offsetPosition';
+export { addClass } from './addClass';
+export { removeClass } from './removeClass';
+export { debounce } from './debounce';
+export { wait } from './wait';
+export { scaledImage } from './scaledImage';
+export { nTimes } from './nTimes';
+export { getDisplayToggler, DISPLAY_NONE } from './displayToggler';
+export type { IDisplayToggler } from './displayToggler';
+export { getUsedJSHeapSize, getTotalJSHeapSize } from './memoryInfo';
+export {
+    isElementVisible,
+    isElementFullyVisible,
+    isElementWrappedBy,
+} from './elementUtils';
+export { createInterval, createTimeout, runAsync } from './timers';
+export type { TimedFunction } from './timers';
+export { createCounter } from './counter';
+export type { ICounter } from './counter';
+export {
+    DAY_IN_MS,
+    HOURS_PER_DAY,
+    HALF_HOUR_IN_MS,
+    HOUR_IN_MS,
+    MINUTES_PER_HALF_HOUR,
+    MINUTES_PER_HOUR,
+    MINUTE_IN_MS,
+    SECONDS_PER_MINUTE,
+    SECOND_IN_MS,
+} from './timeConstants';
+export { xhrSend, xhrSendRetry, defaultRetryConfig, mockXhr } from './xhr';
+export type { XhrOptions, XhrResponse, RetryConfig, RSOptions, ShouldRetryParam } from './xhr';

package/packages/utils/src/memoryInfo.ts

@@ -0,0 +1,21 @@
+/**
+ * The currently active segment size of JS heap, in bytes.
+ * @return {Number} size value. If size is unknown, returns 0.
+ */
+
+function getUsedJSHeapSize() {
+    return (window.performance as any)?.memory?.usedJSHeapSize as number || 0;
+}
+
+/**
+ * The total allocated heap size, in bytes.
+ * @return size value. If size is unknown, returns 0.
+ */
+function getTotalJSHeapSize() {
+    return (window.performance as any)?.memory?.totalJSHeapSize as number || 0;
+}
+
+export {
+    getUsedJSHeapSize,
+    getTotalJSHeapSize,
+};

package/packages/utils/src/nTimes.ts

@@ -0,0 +1,9 @@
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+export const nTimes = <T>(
+    n: number,
+    mappingFunction: (_: undefined, index: number) => T,
+): T[] => {
+    const array = new Array(n);
+    return map(array, mappingFunction);
+};

package/packages/utils/src/noop.ts

@@ -0,0 +1 @@
+export const noop = () => {};

package/packages/utils/src/offsetPosition.ts

@@ -0,0 +1,56 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+type WritableCSSKeys = Exclude<(keyof CSSStyleDeclaration), 'length' | 'parentRule'>;
+
+const isCssSupported = <T extends WritableCSSKeys>(
+    property: T, value: CSSStyleDeclaration[T],
+) => {
+    const el = document.createElement('div');
+    if (el.style[property] === undefined) {
+        return false;
+    }
+    el.style[property] = value;
+    return !!el.style[property];
+};
+
+let useTransform = false;
+let transformKey = '';
+if (isCssSupported('transform', 'translate3d(0px, 0px, 0px)')) {
+    useTransform = true;
+    transformKey = 'transform';
+} else if (isCssSupported('webkitTransform', 'translate3d(0px, 0px, 0px)')) {
+    useTransform = true;
+    transformKey = 'webkitTransform';
+}
+
+function offsetPosition(
+    reference: Reference,
+    { x, y }: { x?: number | string, y?: number | string },
+    rtl: boolean = isRtl(),
+): void {
+    if (!reference.current) return;
+
+    const tx = typeof x === 'number' ? `${rtl ? -x : x}px` : (x || 0);
+    const ty = typeof y === 'number' ? `${y}px` : (y || 0);
+    if (useTransform) {
+        reference.current.style[transformKey] = `translate3d(${tx}, ${ty}, 0)`;
+    } else {
+        reference.current.style.top = ty;
+        reference.current.style.left = tx;
+    }
+}
+
+// eslint-disable-next-line no-redeclare
+namespace offsetPosition {
+    export const getTransformKey = () => transformKey;
+    export const usesTransform = () => useTransform;
+    export const forceTransform = () => {
+        useTransform = true;
+    };
+    export const forceTopLeft = () => {
+        useTransform = false;
+    };
+}
+
+export { offsetPosition };

package/packages/utils/src/removeClass.ts

@@ -0,0 +1,9 @@
+import { Reference } from '@24i/bigscreen-sdk/jsx';
+
+export const removeClass = (
+    reference: Reference,
+    className: string,
+): void => {
+    if (!reference.current) return;
+    reference.current.classList.remove(className);
+};

package/packages/utils/src/scaledImage.ts

@@ -0,0 +1,21 @@
+export const DEFAULT_SCALING_ENDPOINT = 'http://imageresize.24i.com';
+
+type Dimensions = {
+    height: number,
+    width: number,
+    fit?: 'cover' | 'contain' | 'inside',
+};
+
+const attention = (fit: Dimensions['fit']) => (
+    fit === 'cover' ? '&a=attention' : ''
+);
+
+const scaledImage = (
+    url: string,
+    { height, width, fit = 'cover' }: Dimensions,
+    scalingEndpoint: string = DEFAULT_SCALING_ENDPOINT,
+) => (
+    `${scalingEndpoint}?url=${url}&h=${height}&w=${width}&fit=${fit}${attention(fit)}`
+);
+
+export { scaledImage, Dimensions };

package/packages/utils/src/stopEvent.ts

@@ -0,0 +1,10 @@
+export const stopEvent = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+export const stopEventImmediately = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation?.();
+};

package/packages/utils/src/timeConstants.ts

@@ -0,0 +1,11 @@
+export const SECONDS_PER_MINUTE = 60;
+export const MINUTES_PER_HALF_HOUR = 30;
+export const MINUTES_PER_HOUR = 60;
+export const HOURS_PER_DAY = 24;
+export const DAYS_PER_WEEK = 7;
+
+export const SECOND_IN_MS = 1000;
+export const MINUTE_IN_MS = SECOND_IN_MS * SECONDS_PER_MINUTE;
+export const HALF_HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HALF_HOUR;
+export const HOUR_IN_MS = MINUTE_IN_MS * MINUTES_PER_HOUR;
+export const DAY_IN_MS = HOUR_IN_MS * HOURS_PER_DAY;

package/packages/utils/src/timers/createInterval.ts

@@ -0,0 +1,19 @@
+import { TimedObject, TimedFunction } from './types';
+
+export const createInterval = () => {
+    const intervalObject: TimedObject = {
+        id: null,
+        set: (callbackFn: () => void, timeMs: number) => {
+            intervalObject.clear();
+            intervalObject.id = window.setInterval(callbackFn, timeMs);
+        },
+        clear: () => {
+            if (intervalObject.id !== null) {
+                window.clearInterval(intervalObject.id);
+                intervalObject.id = null;
+            }
+        },
+        isActive: () => intervalObject.id !== null,
+    };
+    return intervalObject as TimedFunction;
+};

package/packages/utils/src/timers/createTimeout.ts

@@ -0,0 +1,22 @@
+import { TimedObject, TimedFunction } from './types';
+
+export const createTimeout = () => {
+    const timeoutObject: TimedObject = {
+        id: null,
+        set: (callbackFn: () => void, timeMs: number) => {
+            timeoutObject.clear();
+            timeoutObject.id = window.setTimeout(() => {
+                timeoutObject.id = null;
+                callbackFn();
+            }, timeMs);
+        },
+        clear: () => {
+            if (timeoutObject.id !== null) {
+                window.clearTimeout(timeoutObject.id);
+                timeoutObject.id = null;
+            }
+        },
+        isActive: () => timeoutObject.id !== null,
+    };
+    return timeoutObject as TimedFunction;
+};

package/packages/utils/src/timers/index.ts

@@ -0,0 +1,4 @@
+export { createInterval } from './createInterval';
+export { createTimeout } from './createTimeout';
+export { runAsync } from './runAsync';
+export type { TimedFunction } from './types';

package/packages/utils/src/timers/runAsync.ts

@@ -0,0 +1,3 @@
+export const runAsync = (callbackFn: () => void) => {
+    window.setTimeout(callbackFn, 0);
+};

package/packages/utils/src/timers/types.ts

@@ -0,0 +1,9 @@
+export interface TimedFunction {
+    set: (callbackFn: () => void, timeMs: number) => void,
+    clear: () => void,
+    isActive: () => boolean,
+}
+
+export type TimedObject = {
+    id: number | null,
+} & TimedFunction;

package/packages/utils/src/wait.ts

@@ -0,0 +1 @@
+export const wait = (waitMs: number) => new Promise((r) => setTimeout(r, waitMs));

package/packages/utils/src/xhr/__mocks__/xhr.ts

@@ -0,0 +1,29 @@
+function mockXhr(status?: number, responseData?: string) {
+    const mockXhrObj = {
+        open: jest.fn(),
+        send: jest.fn(),
+        ontimeout: jest.fn(),
+        onerror: jest.fn(),
+        onabort: jest.fn(),
+        onload: jest.fn(),
+        setRequestHeader: jest.fn(),
+        readyState: 4,
+        status,
+        response: responseData,
+        timeout: undefined as undefined | number,
+    };
+
+    const mockXhrClass = () => mockXhrObj;
+
+    // @ts-ignore - Needed for mocking purposes
+    window.XMLHttpRequest = jest.fn().mockImplementation(mockXhrClass);
+
+    setTimeout(() => {
+        // @ts-ignore - Needed for mocking purposes
+        mockXhrObj.onload();
+    }, 0);
+
+    return mockXhrObj;
+}
+
+export { mockXhr };

package/packages/utils/src/xhr/index.ts

@@ -0,0 +1,11 @@
+export {
+    xhrSend,
+    type XhrOptions, type XhrResponse,
+} from './xhrSend';
+
+export {
+    xhrSendRetry, defaultRetryConfig,
+    type RetryConfig, type RSOptions, type ShouldRetryParam,
+} from './xhrSendRetry';
+
+export { mockXhr } from './__mocks__/xhr';

package/packages/utils/src/xhr/xhrSend.ts

@@ -0,0 +1,139 @@
+/**
+ * Simple wrap "xhrSend" function over XMLHttpRequest.
+ */
+
+const HttpStatusCode = {
+    OK: 200,
+    MULTIPLE_CHOICES: 300,
+    UNAUTHORIZED: 401,
+    FORBIDDEN: 403,
+};
+
+type HttpMethods = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+export type XhrOptions = {
+    /**
+     * HTTP request method, e.g. POST.
+     */
+    method: HttpMethods,
+    /**
+     * The object with HTTP request headers.
+     */
+    headers: { [key: string]: string },
+    /**
+     * The number of milliseconds a request can take before automatically being terminated.
+     * Value 0 means there is no timeout.
+     */
+    timeoutInMs: number,
+    /**
+     * The body of data to be sent in the XHR request, a string (e.g. JSON-encoded).
+     */
+    body?: string,
+};
+
+export type XhrResponse = {
+    /**
+     * The body content of response.
+     */
+    dataText: string,
+    /**
+     * The object corresponding to the given JSON body text.
+     */
+    dataJson: Object | undefined,
+    /**
+     * The status code of the response (e.g., 200 for a success).
+     */
+    status: number,
+    /**
+     * The status message corresponding to the status code (e.g., "OK" for 200).
+     */
+    statusText: string
+    /**
+     * The state whether the response was successful (status in the range 200-299) or not.
+     */
+    ok: boolean,
+};
+
+const defaultOptions: XhrOptions = {
+    method: 'GET',
+    headers: {},
+    timeoutInMs: 0,
+};
+
+/**
+ * Sends HTTP request
+ *
+ * @param url The URL to access.
+ * @param options The optional options object.
+ * @param options.method [options.method='GET'] HTTP request method.
+ * @param options.timeoutInMs [options.timeoutInMs=0] The number of milliseconds
+ * a request can take before automatically being terminated.
+ * @param options.headers [options.headers={}] The object with HTTP request headers.
+ * @param options.body [options.body] The body of data to be sent in the XHR request,
+ * a string (e.g. JSON-encoded).
+ * @returns Promise rejects with TypeError. Resolves with XhrResponse object.
+ */
+function xhrSend(url: string, options: Partial<XhrOptions> = {}): Promise<XhrResponse | TypeError> {
+    return new Promise((resolve, reject) => {
+        const method = options.method || defaultOptions.method;
+        const headers = options.headers || defaultOptions.headers;
+        const timeoutInMs = options.timeoutInMs !== undefined
+            ? options.timeoutInMs : defaultOptions.timeoutInMs;
+        const { body } = options;
+
+        const xhr = new XMLHttpRequest();
+
+        function onLoad() {
+            const dataText = 'response' in xhr ? xhr.response : xhr.responseText;
+            const dataJson = parseJson(dataText);
+            const status = xhr.status === undefined ? HttpStatusCode.OK : xhr.status;
+            const statusText = xhr.statusText === undefined ? 'OK' : xhr.statusText;
+            const ok = status >= HttpStatusCode.OK && status < HttpStatusCode.MULTIPLE_CHOICES;
+            resolve({ dataText, dataJson, status, statusText, ok });
+        }
+
+        function onError() {
+            const error = new TypeError('Network request failed');
+            reject(error);
+        }
+
+        function onTimeout() {
+            const error = new TypeError('Network request failed - timeout');
+            error.name = 'TimeoutError';
+            reject(error);
+        }
+
+        function onAbort() {
+            const error = new TypeError('Aborted');
+            error.name = 'AbortedError';
+            reject(error);
+        }
+
+        xhr.onload = onLoad;
+        xhr.onerror = onError;
+        xhr.ontimeout = onTimeout;
+        xhr.onabort = onAbort;
+        xhr.open(method, url, true);
+
+        xhr.timeout = timeoutInMs;
+
+        const keys = Object.keys(headers);
+        for (let i = 0; i < keys.length; i++) {
+            const name = keys[i];
+            const value = headers[name];
+            xhr.setRequestHeader(name, value);
+        }
+
+        xhr.send(typeof body === 'undefined' ? null : body);
+    });
+}
+
+function parseJson(text: string): string | undefined {
+    try {
+        return JSON.parse(text);
+    } catch (e) {
+        return undefined;
+    }
+}
+
+export { xhrSend };

package/packages/utils/src/xhr/xhrSendRetry.ts

@@ -0,0 +1,77 @@
+import { xhrSend, XhrResponse, XhrOptions } from './xhrSend';
+
+export type RetryConfig = {
+    /**
+     * The number of times to retry the request. Defaults to 0.
+     */
+    retry?: number,
+    /**
+     * The amount of time in milliseconds to initially delay the retry. Defaults to 1000.
+     */
+    retryDelay?: number,
+    /**
+     * The number of retries already attempted.
+     */
+    currentRetryAttempt?: number,
+    /**
+     * Function to invoke which determines if you should retry
+     */
+    shouldRetry?: (data: ShouldRetryParam) => boolean,
+};
+
+export type RSOptions = {
+    retryConfig: RetryConfig;
+} & XhrOptions;
+
+export type ShouldRetryParam = {
+    options: Partial<RSOptions>,
+    response?: XhrResponse,
+    error?: any,
+};
+
+function shouldRetryRequest(data: ShouldRetryParam) {
+    const { error, response } = data;
+    if (error) return true;
+    if (!response || !response.ok) return true;
+    return false;
+}
+
+export const defaultRetryConfig = {
+    retry: 0,
+    retryDelay: 1000,
+    currentRetryAttempt: 0,
+    shouldRetry: shouldRetryRequest,
+} as const;
+
+export async function xhrSendRetry(url: string, options: Partial<RSOptions> = {}):
+Promise<XhrResponse | TypeError> {
+    const config = options.retryConfig || {} as RetryConfig;
+    config.retry = config.retry ?? defaultRetryConfig.retry;
+    config.retryDelay = config.retryDelay ?? defaultRetryConfig.retryDelay;
+    config.currentRetryAttempt = config.currentRetryAttempt
+        ?? defaultRetryConfig.currentRetryAttempt;
+
+    options.retryConfig = config;
+    let response;
+    let error;
+    try {
+        response = await xhrSend(url, options) as XhrResponse;
+    } catch (e) {
+        error = e;
+    }
+
+    if (config.currentRetryAttempt === config.retry) {
+        if (response) return response;
+        throw error;
+    }
+
+    const shouldRetryFn = config.shouldRetry || defaultRetryConfig.shouldRetry;
+    const shouldRetry = shouldRetryFn({ options, response, error });
+    if (shouldRetry) {
+        await new Promise((res) => window.setTimeout(res, config.retryDelay));
+        config.currentRetryAttempt += 1;
+        return xhrSendRetry(url, options);
+    }
+    if (response) return response;
+    throw error;
+}

package/packages/volume-control/src/__mocks__/VolumeControlUIMock.tsx

@@ -0,0 +1,18 @@
+import { Component } from '@24i/bigscreen-sdk/jsx';
+import { IVolumeControlUI } from '../IVolumeControlUI';
+
+export class VolumeControlUIMock extends Component<{}> implements IVolumeControlUI {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onUpdateVolume(volumeLevel: number) {}
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onUpdateMute(isMuted: boolean) {}
+
+    show = () => {};
+
+    hide = () => {};
+
+    isVisible() { return true; }
+
+    render() { return <div className="volume-control-ui" />; }
+}

package/utils/create-export-maps/index.ts

@@ -0,0 +1,3 @@
+import { createExportMaps } from './src/createExportMaps';
+
+createExportMaps();

package/utils/create-export-maps/src/__tests__/createExportMaps.spec.ts

@@ -0,0 +1,50 @@
+import { writeFileSync } from 'fs';
+import { createExportMaps } from '../createExportMaps';
+
+jest.mock('fs', () => ({
+    readdirSync: jest.fn(() => [
+        'adobe-heartbeat',
+        'animations',
+        '.DS-STORE',
+    ]),
+    lstatSync: jest.fn((name: string) => ({
+        isDirectory: () => name.indexOf('.DS-STORE') === -1
+    })),
+    existsSync: jest.fn(() => true),
+    writeFileSync: jest.fn(),
+}));
+
+jest.mock('../../../../packages/adobe-heartbeat/exports.json', () => ({
+    name: 'adobe-heartbeat',
+    entryPoints: {
+        '/': 'src/index.ts'
+    },
+}));
+jest.mock('../../../../packages/animations/exports.json', () => ({
+    name: 'animations',
+    entryPoints: {
+        '/': 'src/index.ts',
+        'mock': 'src/__mocks__/JSAnimations.ts'
+    },
+}));
+
+jest.mock('../../../../package.json', () => ({
+    name: 'mock-root-package',
+}));
+
+describe('createExportMaps', () => {
+    it('should add all exports to the package.json', () => {
+        createExportMaps();
+        expect(writeFileSync).toHaveBeenCalledWith(
+            expect.stringContaining('package.json'),
+            JSON.stringify({
+                name: 'mock-root-package',
+                exports: {
+                    './adobe-heartbeat': './packages/adobe-heartbeat/src/index.ts',
+                    './animations/mock': './packages/animations/src/__mocks__/JSAnimations.ts',
+                    './animations': './packages/animations/src/index.ts',
+                }
+            }, null, 4),
+        );
+    });
+});