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

package/packages/driver-smartcast/src/DeviceSmartCast.ts

@@ -1,317 +0,0 @@
-import {
-    DeviceBase, ConnectionType, ScreenSaverStatus, VolumeRange,
-} from '@24i/bigscreen-sdk/driver-base';
-import { runAsync } from '@24i/bigscreen-sdk/utils/timers';
-import { ipify } from '@24i/bigscreen-sdk/ipify';
-import { getKeyMap } from './keymap';
-import { ISmartCastApi, IFA, DEFAULT_TTS_TIMEOUT, DevicePlaybackQuality } from './types';
-
-declare const window: Window & { VIZIO: ISmartCastApi };
-
-export class DeviceSmartCast extends DeviceBase {
-    keyMap = getKeyMap();
-
-    deviceId = '';
-
-    deviceModel = '';
-
-    deviceFirmware = '';
-
-    readonly backAsBackspaceInSearch = true;
-
-    devicePlaybackQualities: DevicePlaybackQuality[] = [];
-
-    closedCaptionsStatus = false;
-
-    textToSpeechStatus = false;
-
-    textToSpeechTimeout?: null | number;
-
-    lastTextToSpeechItem?: { delay: number, text: string } | null;
-
-    API?: ISmartCastApi;
-
-    IFA?: IFA;
-
-    publicIpAddress?: string;
-
-    async initDevice() {
-        this.initNetworkChangeListener();
-        this.initVisibilityChangeListener();
-        this.initMouseActiveListener();
-        await this.initPlatformApiListeners();
-    }
-
-    async initPlatformApiListeners(): Promise<void> {
-        return new Promise((resolve) => {
-            document.addEventListener('VIZIO_LIBRARY_DID_LOAD', async () => {
-                const API = window.VIZIO;
-                this.API = window.VIZIO;
-                const promises = [];
-
-                API.setClosedCaptionHandler((isEnabled: boolean) => {
-                    this.closedCaptionsStatus = isEnabled;
-                    this.triggerEvent('cctoggle', { isEnabled });
-                });
-
-                promises.push(new Promise<void>((r) => {
-                    API.setAdvertiserIDListener((advertiserID: IFA) => {
-                        this.IFA = advertiserID;
-                        r();
-                    });
-                }));
-
-                promises.push(new Promise<void>((r) => {
-                    API.getDeviceId((id: string) => {
-                        this.deviceId = id;
-                        r();
-                    });
-                }));
-
-                this.deviceModel = API.deviceModel;
-
-                promises.push(new Promise<void>((r) => {
-                    API.getFirmwareVersion((version: string) => {
-                        this.deviceFirmware = version;
-                        r();
-                    });
-                }));
-
-                promises.push(new Promise<void>((r) => {
-                    API.getDevicePlaybackQualities((qualities: DevicePlaybackQuality[]) => {
-                        this.devicePlaybackQualities = qualities;
-                        r();
-                    });
-                }));
-
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                API.setContentChangeHandler(this.handleDeeplink);
-
-                await Promise.all(promises);
-
-                resolve();
-            });
-
-            document.addEventListener('VIZIO_TTS_ENABLED', () => {
-                this.textToSpeechStatus = true;
-            }, false);
-
-            document.addEventListener('VIZIO_TTS_DISABLED', () => {
-                this.lastTextToSpeechItem = null;
-                this.textToSpeechStatus = false;
-                window.clearTimeout(this.textToSpeechTimeout as any);
-                this.API?.Chromevox.cancel();
-            }, false);
-
-            const object = document.createElement('script');
-            object.src = 'http://127.0.0.1:12345/scfs/cl/js/vizio-companion-lib.js';
-            document.body.appendChild(object);
-        });
-    }
-
-    initNetworkChangeListener() {
-        window.addEventListener('online', () => {
-            this.triggerEvent('networkchange', { isConnected: true });
-        });
-        window.addEventListener('offline', () => {
-            this.triggerEvent('networkchange', { isConnected: false });
-        });
-    }
-
-    initVisibilityChangeListener() {
-        document.addEventListener('visibilitychange', () => {
-            this.triggerEvent('visibilitychange', {
-                isVisible: document.visibilityState === 'visible',
-            });
-        });
-    }
-
-    initMouseActiveListener() {
-        document.addEventListener('mousemove', this.onMouseActive);
-    }
-
-    onMouseActive = () => {
-        document.removeEventListener('mousemove', this.onMouseActive);
-        document.addEventListener('keydown', this.onMouseInactive, true);
-        this.isMouseActive = true;
-        this.triggerEvent('mouseactive', { isMouseActive: true });
-    };
-
-    onMouseInactive = (event: KeyboardEvent) => {
-        if (!this.isDirectionalArrow(event)) return;
-        document.removeEventListener('keydown', this.onMouseInactive);
-        this.initMouseActiveListener();
-
-        // to let other handlers to use this property before change
-        runAsync(() => {
-            this.isMouseActive = false;
-        });
-        this.triggerEvent('mouseactive', { isMouseActive: false });
-    };
-
-    handleDeeplink = (deeplinkUrl: string) => {
-        if (typeof deeplinkUrl !== 'string') return;
-        const newRoute = deeplinkUrl.split('#')[1];
-        if (newRoute) {
-            const currentUrl = window.location.href.split('#')[0];
-            window.location.href = `${currentUrl}#${newRoute}`;
-        }
-    };
-
-    /**
-     * Reads provided text by the device internal reader.
-     */
-    readText({ text, delay = DEFAULT_TTS_TIMEOUT }: {
-        text: string, delay?: number
-    }) {
-        if (this.textToSpeechStatus && text) {
-            if (this.textToSpeechTimeout) {
-                this.lastTextToSpeechItem = { text, delay };
-            } else {
-                this.API?.Chromevox.play(text);
-
-                this.textToSpeechTimeout = window.setTimeout(() => {
-                    this.textToSpeechTimeout = null;
-
-                    if (this.lastTextToSpeechItem) {
-                        const last = this.lastTextToSpeechItem;
-
-                        this.API?.Chromevox.play(last.text);
-                        this.lastTextToSpeechItem = null;
-                    }
-                }, delay);
-            }
-        }
-    }
-
-    exit() {
-        this.API?.exitApplication();
-    }
-
-    reboot() {
-        window.location.reload();
-    }
-
-    /**
-     * Returns the status of Closed Captions feature.
-     */
-    async getClosedCaptionsStatus() {
-        return this.closedCaptionsStatus;
-    }
-
-    /**
-     * Returns the status of Text to Speech Engine if it is available by the device.
-     */
-    async getTextToSpeechStatus() {
-        return this.textToSpeechStatus;
-    }
-
-    /**
-     * Returns filled in Vast Tag URL.
-     */
-    async getVastTagUrl(template: string): Promise<null | string> {
-        const IFAObject = this.IFA;
-        const resolution = this.getResolution();
-
-        if (!IFAObject) return null;
-
-        this.publicIpAddress = this.publicIpAddress ?? await ipify();
-
-        return template
-            .replace('{{width}}', String(resolution.width))
-            .replace('{{height}}', String(resolution.height))
-            .replace('{{cb}}', String(Date.now()))
-            .replace('{{user_agent}}', encodeURIComponent(window.navigator.userAgent))
-            .replace('{{ifa}}', IFAObject.IFA)
-            .replace('{{ifa_type}}', IFAObject.IFA_TYPE)
-            .replace('{{ip_address}}', this.publicIpAddress!)
-            .replace('{{lmt}}', IFAObject.LMT ? '1' : '0')
-            .replace('{{us_privacy}}', IFAObject.LMT ? '1YYN' : '1YNN');
-    }
-
-    async getManufacturerName() {
-        return 'VIZIO';
-    }
-
-    async getPlatformName() {
-        return 'SmartCast';
-    }
-
-    async getPlatformVersion() {
-        return '';
-    }
-
-    async getDeviceName() {
-        return 'VIZIO SmartCast';
-    }
-
-    async getModelName() {
-        return this.deviceModel;
-    }
-
-    async getFirmware() {
-        return this.deviceFirmware;
-    }
-
-    async is4KSupported() {
-        return this.devicePlaybackQualities.includes('UHD');
-    }
-
-    async is8KSupported() {
-        return false;
-    }
-
-    async getUuid() {
-        return this.deviceId;
-    }
-
-    async getVolume() {
-        return VolumeRange.UNSUPPORTED;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async setVolume(volumePercentage: number) {
-        // not supported on SmartCast platform
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async mute(mute: boolean) {
-        // not supported on SmartCast platform
-    }
-
-    async isMute() {
-        return false;
-    }
-
-    async getScreenSaver() {
-        return { enabled: false };
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async setScreenSaver(status: ScreenSaverStatus) {
-        // not supported on SmartCast platform
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async setUserAgent(userAgent: string) {
-        return false;
-    }
-
-    async getConnectionType() {
-        return 'unknown' as ConnectionType;
-    }
-
-    async isNetworkConnected() {
-        return window.navigator.onLine;
-    }
-
-    async getLocalIP() {
-        // not supported on SmartCast platform
-        return '';
-    }
-
-    async getMacAddress() {
-        // not supported on SmartCast platform
-        return '';
-    }
-}

package/packages/driver-smartcast/src/__mocks__/api.ts

@@ -1,49 +0,0 @@
-import { IFA, ISmartCastApi, DevicePlaybackQuality } from '../types';
-
-export const deviceId = '2bd671ef-02cd-445f-9295-b3565dbaf1e8';
-export const deviceModel = 'D24f4-J01';
-export const firmware = '3.520.28.1-2';
-export const playbackQualities = ['UHD', 'HD'] as DevicePlaybackQuality[];
-// eslint-disable-next-line max-len
-export const deeplinkUrl = 'https://smartapps-bigscreen.24i.com/#/detail/SERIES/FO03OogBXRsigNB1VRz_/undefined/undefined/';
-// eslint-disable-next-line max-len
-export const deeplinkUrl2 = 'https://smartapps-bigscreen.24i.com/#/detail/SERIES/Ge1sO4gBXRsigNB1TBwy/undefined/undefined/';
-// eslint-disable-next-line max-len
-export const vastTagTemplate = 'w={{width}}&h={{height}}&did={{ifa}}&ifa_type={{ifa_type}}&lmt={{lmt}}&ip={{ip_address}}&us_privacy={{us_privacy}}';
-
-export const SmartCastMockApi: ISmartCastApi = {
-    deviceModel,
-
-    getDeviceId: (callback: (id: string) => void): void => callback(deviceId),
-
-    getFirmwareVersion: (callback: (id: string) => void): void => callback(firmware),
-
-    getDevicePlaybackQualities: (
-        callback: (
-            qualities: DevicePlaybackQuality[]
-        ) => void,
-    ): void => callback(playbackQualities),
-
-    exitApplication: (): void => {},
-
-    setClosedCaptionHandler: (callback: (isEnabled: boolean) => void): void => callback(false),
-
-    setAdvertiserIDListener: (callback: (advertiserID: IFA) => void): void => callback({
-        IFA: deviceId,
-        IFA_TYPE: 'vida',
-        LMT: false,
-    }),
-
-    setContentChangeHandler:
-        (callback: (contentUrl: string) => void): void => callback(deeplinkUrl),
-
-    Chromevox: {
-        cancel: (): void => {
-            throw new Error('Function not implemented.');
-        },
-        play: (text: string): void => {
-            // eslint-disable-next-line no-console
-            console.log(text);
-        },
-    },
-};

package/packages/driver-smartcast/src/index.ts

@@ -1 +0,0 @@
-export { DeviceSmartCast } from './DeviceSmartCast';

package/packages/driver-smartcast/src/keymap.ts

@@ -1,9 +0,0 @@
-import { generateKeyCodeKeyMap, overrideValues } from '@24i/bigscreen-sdk/driver-base/keymap';
-
-export const getKeyMap = () => {
-    overrideValues({
-        CHANNEL_PREVIOUS: { code: 'PrevCh', keyCode: 500 },
-        SUBTITLES: { keyCode: 204 },
-    });
-    return generateKeyCodeKeyMap();
-};

package/packages/driver-smartcast/src/types.ts

@@ -1,65 +0,0 @@
-export type ISmartCastApi = {
-    /**
-     * Sets the callback to receive the device UID in standard 32 digits.
-     */
-    getDeviceId: (callback: (id: string) => void) => void;
-
-    /**
-     * Sets the callback to receive the device firmware version.
-     */
-    getFirmwareVersion: (callback: (firmwareVersion: string) => void) => void;
-
-    /**
-     * Sets the callback to receive the device playback qualities.
-     */
-    getDevicePlaybackQualities: (callback: (qualities: DevicePlaybackQuality[]) => void) => void;
-
-    /**
-     * Exits the application.
-     */
-    exitApplication: () => void;
-
-    /**
-     * Sets the callback to receive the device CC toggle event.
-     */
-    setClosedCaptionHandler: (callback: (isEnabled: boolean) => void) => void;
-
-    /**
-     * Sets the callback to receive IFA object with the device ads related parameters.
-     */
-    setAdvertiserIDListener: (callback: (advertiserID: IFA) => void) => void;
-
-    /**
-     * Sets the callback to receive the device content change event.
-     */
-    setContentChangeHandler: (callback: (contentUrl: string) => void) => void;
-
-    /**
-     * Device model.
-     */
-    deviceModel: string;
-
-    /**
-     * Chromevox Text-to-Speech accessibility playback engine.
-     */
-    Chromevox: {
-        cancel: () => void,
-        play: (text: string) => void,
-    };
-};
-
-/**
- * Identifier For Advertising (IFA) and Limited Tracking parameter object
- */
-export type IFA = {
-    /** Unique identifier string for advertising */
-    IFA: string,
-    /** String value for IFA type ("vida") */
-    IFA_TYPE: string,
-    /** true=Limited tracking enabled, false=Limited tracking disabled */
-    LMT: boolean,
-};
-
-export type DevicePlaybackQuality = 'UHD' | 'HD' | 'SD';
-
-export const DEFAULT_TTS_TIMEOUT = 3000;

package/packages/focus/src/hasFocus.ts

@@ -1,36 +0,0 @@
-import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
-import { isElementWrappedBy } from '@24i/bigscreen-sdk/utils/elementUtils';
-
-/**
- * Test if the element (or element in the reference) has the `activeElement` inside or optionally,
- * if the element itself is the `activeElement`.
- * @param elementOrReference DOM element or reference to element on which we test focus
- * @param includeElementItself if true, active element is also tested with the provided element.
- * Default is true
- * @returns true if the element has focused element inside or is itself focused
- */
-export const hasFocus = (
-    elementOrReference: HTMLElement | Reference<HTMLElement>,
-    includeElementItself = true,
-) => {
-    const element = unwrapReference(elementOrReference);
-    if (!element) return false;
-    return isElementWrappedBy(
-        document.activeElement as HTMLElement,
-        element,
-        includeElementItself,
-    );
-};
-
-/**
- * Test if the element (or element in the reference) is the `activeElement`.
- * @param elementOrReference DOM element or reference to element on which we test focus
- * @returns true if the element is focused
- */
-export const isFocused = (
-    elementOrReference: HTMLElement | Reference<HTMLElement>,
-) => {
-    const element = unwrapReference(elementOrReference);
-    if (!element) return false;
-    return document.activeElement === element;
-};

package/packages/input/src/utils.ts

@@ -1,71 +0,0 @@
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-
-/**
- * Handles overflowing text in the input by moving with the inner
- * text element.
- * @param wrap input wrapper
- * @param caret caret element
- * @param text input inner text element
- * @returns value how much is text element moved
- */
-export const handleOverflow = (
-    wrap: HTMLDivElement | null,
-    caret: HTMLDivElement | null,
-    text: HTMLDivElement | null,
-) => {
-    if (!wrap || !caret || !text) return 0;
-    const { width: wrapWidth, left: wrapLeft } = wrap.getBoundingClientRect();
-    const { width: caretWidth, left: caretLeft } = caret.getBoundingClientRect();
-    const caretOffset = isRtl() ? caretLeft - caretWidth : caretLeft + caretWidth;
-    if (!isRtl() && wrapWidth + wrapLeft < caretOffset) {
-        const margin = -(caretOffset - wrapWidth - wrapLeft);
-        text.style.marginLeft = `${margin}px`;
-        text.style.marginRight = '0px';
-        return margin;
-    }
-    if (isRtl() && caretOffset < wrapLeft) {
-        const margin = -(wrapLeft - caretOffset);
-        text.style.marginLeft = '0px';
-        text.style.marginRight = `${margin}px`;
-        return margin;
-    }
-    text.style.marginLeft = '0px';
-    text.style.marginRight = '0px';
-    return 0;
-};
-
-/**
- * Check for char element position mishmash in the input's text element. This is
- * necessary to recognize if the char is in the wrong direction than it's position
- * in children collection, this means that the char is LTR char in RTL scheme or RTL
- * char in LTR scheme.
- * @param text input inner text element
- * @param position position of the char in children collection
- * @returns true if char has position mishmash
- */
-export const checkCharOrderMishmash = (text: HTMLDivElement, position: number) => {
-    const { children } = text!;
-    if (!children.length) return false;
-    const charOffsets: {
-        index: number,
-        offset: number,
-    }[] = [];
-    for (let i = 0; i < children.length; i++) {
-        charOffsets.push({
-            index: i,
-            offset: (children[i] as HTMLElement).getBoundingClientRect().left,
-        });
-    }
-    charOffsets.sort((a, b) => {
-        if (a.offset < b.offset) return isRtl() ? 1 : -1;
-        if (a.offset > b.offset) return isRtl() ? -1 : 1;
-        return 0;
-    });
-    const lastPos = children.length - 1;
-    const posBefore = position - 1;
-    const mishmashBefore = posBefore < 0
-        ? false : charOffsets[posBefore].index !== posBefore;
-    const mishmashCurrent = charOffsets[position].index !== position;
-    if (mishmashCurrent) return true;
-    return !mishmashCurrent && mishmashBefore && position !== lastPos;
-};

package/packages/jsx/src/test-utils/keyup.ts

@@ -1,27 +0,0 @@
-import { Reference, Component } from '../index';
-import { unwrapReference } from '../utils';
-
-type ToPress = Reference<HTMLElement> | HTMLElement | Window | Document | Component<any>;
-
-interface Key {
-    keyCode: number,
-    code: string,
-    key?: string,
-}
-
-export const keyup = (toPress: ToPress, keyOrKeyCode: number | Key) => {
-    const element = unwrapReference<ToPress>(toPress);
-    let kbEventOptions: KeyboardEventInit;
-    if (typeof keyOrKeyCode === 'number') {
-        kbEventOptions = { keyCode: keyOrKeyCode };
-    } else {
-        const { keyCode, code, key } = keyOrKeyCode;
-        kbEventOptions = { keyCode, code, key };
-    }
-    const event = new KeyboardEvent('keyup', kbEventOptions);
-    if ((element as any).onKeyUp) {
-        (element as any).onKeyUp(event);
-    } else if ((element as any).dispatchEvent) {
-        (element as Element).dispatchEvent(event);
-    }
-};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/arabic.ts

@@ -1,27 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import { KeyMatrixCell } from '../../types';
-
-const keyboardLayout = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ',', '.'],
-    ['ا', 'ب', 'ت', 'ث', 'ج', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'س'],
-    ['ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ك', 'ل', 'م'],
-    ['ن', 'ه', 'و', 'ي', 'ء', 'آ', 'إ', 'ة', 'ؤ', 'ئ', 'ى', 'أ'],
-];
-
-/* eslint-disable max-len */
-const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
-    ['', '', ...layout[0], 'backspace', 'backspace'],
-    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
-    ['special', 'special', ...layout[2], 'left', 'right'],
-    ['', '', ...layout[3], '', ''],
-    [
-        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
-        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
-];
-
-export const arabic = {
-    className: 'wide',
-    keyText: 'ابت',
-    layout: keyboardLayout,
-    makeFocusStrings,
-};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/burmese.ts

@@ -1,27 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import { KeyMatrixCell } from '../../types';
-
-const keyboardLayout = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
-    ['က', 'ခ', 'ဂ', 'ဃ', 'င', 'စ', 'ဆ', 'ဇ', 'စ်', 'ည', 'ဋ'],
-    ['႒', 'ဍ', 'ဏ', 'တ', 'ထ', 'ဒ', 'ဓ', 'န', 'ပ', 'ဖ', 'ဗ'],
-    ['ဘ', 'မ', 'ယ', 'ရ', 'လ', 'ဝ', 'သ', 'ဟ', 'ဠ', 'အ', '-'],
-];
-
-/* eslint-disable max-len */
-const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
-    ['', '', ...layout[0], 'backspace', 'backspace'],
-    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
-    ['special', 'special', ...layout[2], 'left', 'right'],
-    ['', '', ...layout[3], '', ''],
-    [
-        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
-        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
-];
-
-export const burmese = {
-    className: 'wide',
-    keyText: 'ကခဂ',
-    layout: keyboardLayout,
-    makeFocusStrings,
-};

package/packages/keyboard/src/WhitelabelKeyboard/layouts/dari.ts

@@ -1,28 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import { KeyMatrixCell } from '../../types';
-
-const keyboardLayout = [
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
-    ['ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ'],
-    ['ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ'],
-    ['ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی', '-'],
-
-];
-
-/* eslint-disable max-len */
-const makeFocusStrings = (layout: KeyMatrixCell[][], hasLanguageLayout: boolean) => [
-    ['', '', ...layout[0], 'backspace', 'backspace'],
-    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
-    ['special', 'special', ...layout[2], 'left', 'right'],
-    ['', '', ...layout[3], '', ''],
-    [
-        ...(hasLanguageLayout ? ['language', 'language'] : ['', '']),
-        'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
-];
-
-export const dari = {
-    className: 'wide',
-    keyText: 'ابپ',
-    layout: keyboardLayout,
-    makeFocusStrings,
-};