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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "0.9.9-alpha.2148",
+    "version": "0.9.9-alpha.2149",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {

package/packages/developer-tools/src/DeveloperConsole/utils/formatTime.ts

@@ -0,0 +1,13 @@
+export const formatTimeToHMS = (timestamp: number) => {
+    if (!timestamp) {
+        return '00:00:00';
+    }
+    const date = new Date(timestamp);
+    const lastTwoChars = -2;
+
+    const hours = (`0${date.getHours()}`).slice(lastTwoChars);
+    const minutes = (`0${date.getMinutes()}`).slice(lastTwoChars);
+    const seconds = (`0${date.getSeconds()}`).slice(lastTwoChars);
+
+    return `${hours}:${minutes}:${seconds}`;
+};

package/packages/developer-tools/src/DeveloperConsole/utils/index.ts

@@ -0,0 +1,3 @@
+export { formatTimeToHMS } from './formatTime';
+export { getStatusCodeClass } from './styles';
+export { stringifyObjectData } from './stringify';

package/packages/developer-tools/src/DeveloperConsole/utils/stringify.ts

@@ -0,0 +1,10 @@
+export const stringifyObjectData = (data: any) => {
+    if (typeof data === 'object') {
+        try {
+            return JSON.stringify(data);
+        } catch (error) {
+            return '';
+        }
+    }
+    return data || '';
+};

package/packages/developer-tools/src/DeveloperConsole/utils/styles.ts

@@ -0,0 +1,24 @@
+const HttpStatusCodesLevels = {
+    LEVEL_2XX: '2',
+    LEVEL_3XX: '3',
+    LEVEL_4XX: '4',
+    LEVEL_5XX: '5',
+};
+
+export const getStatusCodeClass = (statusCode: number) => {
+    const { LEVEL_2XX, LEVEL_3XX, LEVEL_4XX, LEVEL_5XX } = HttpStatusCodesLevels;
+    const stringStatusCode = String(statusCode);
+    if (stringStatusCode.startsWith(LEVEL_2XX)) {
+        return 'status-ok';
+    }
+    if (stringStatusCode.startsWith(LEVEL_3XX)) {
+        return 'status-redirect';
+    }
+    if (stringStatusCode.startsWith(LEVEL_4XX)) {
+        return 'status-client-error';
+    }
+    if (stringStatusCode.startsWith(LEVEL_5XX)) {
+        return 'status-server-error';
+    }
+    return '';
+};

package/packages/developer-tools/src/EnvironmentSelection/utils/format.ts

@@ -0,0 +1,4 @@
+export const capitalizeFirstLetter = (string: string) => {
+    if (typeof string !== 'string' || string.length === 0) return string;
+    return string.charAt(0).toUpperCase() + string.substring(1);
+};

package/packages/developer-tools/src/TechnicalInfo/utils/eme01bSupport.ts

@@ -0,0 +1,58 @@
+/**
+ * To detect Encrypted Media Extensions (EME) and Content Decryption Module (CDM)
+ * support in a browser for various DRM technologies.
+ *
+ * Encrypted Media Extensions v0.1b (draft proposal)
+ * - The EME v0.1b is implemented on old devices like Tizen 2016, LG webOS 3.0
+ */
+
+/**
+ * Check the Encrypted Media Extensions v0.1b is supported in
+ */
+function hasEMESupport() {
+    const videoEl = document.createElement('video');
+    // any because the method is defined in EME v0.1b
+    const addKey = (videoEl as any).webkitAddKey;
+    return !!addKey;
+}
+
+/**
+ * @param videoEl Video element
+ * @param keySystem Key System Identifier of a content protection (DRM) mechanism.
+ * @returns A boolean indicating whether key system is supported
+ */
+function isKeySystemSupported(videoEl: HTMLVideoElement, keySystem: string) {
+    // @ts-ignore - the optional second parameter is defined in EME v0.1b
+    return !!videoEl.canPlayType('video/mp4;codecs="avc1.42E01E"', keySystem);
+}
+
+const KeySystems = {
+    'webkit-org.w3.clearkey': { name: 'W3C Clear Key' }, // prefixed for EME v0.1b
+    'org.w3.clearkey': { name: 'W3C Clear Key' },
+    'com.microsoft.playready': { name: 'Microsoft PlayReady' },
+    'com.youtube.playready': { name: 'YouTube PlayReady' },
+    'com.widevine.alpha': { name: 'Google Widevine' },
+    'com.apple.fairplay': { name: 'Apple FairPlay' },
+    'com.adobe.access': { name: 'Adobe Access' },
+};
+
+/**
+ * Get list of supported DRM/CDM
+ */
+async function getListOfSupportedDRM() {
+    const keySystems = Object.keys(KeySystems) as Array<keyof typeof KeySystems>;
+    const videoEl = document.createElement('video');
+
+    const supportedSystems = [];
+    for (let i = 0; i < keySystems.length; i++) {
+        const keySystem = keySystems[i];
+        const isSupported = isKeySystemSupported(videoEl, keySystem);
+        if (isSupported) {
+            supportedSystems.push({ id: keySystem, name: KeySystems[keySystem].name });
+        }
+    }
+
+    return supportedSystems;
+}
+
+export { hasEMESupport, getListOfSupportedDRM };

package/packages/developer-tools/src/TechnicalInfo/utils/emeSupport.ts

@@ -0,0 +1,80 @@
+/**
+ * To detect Encrypted Media Extensions (EME) and Content Decryption Module (CDM)
+ * support in a browser for various DRM technologies.
+ */
+
+/**
+ * Check the EME (Encrypted Media Extensions API) is supported in
+ */
+function hasEMESupport() {
+    // verified only "window.MediaKeys", other prefixed keys were not tested
+    const eme = window.MediaKeys || (window as any).MSMediaKeys || (window as any).WebKitMediaKeys;
+    return !!eme;
+}
+
+/**
+ * Check the navigator.requestMediaKeySystemAccess method is supported in
+ * Note: it can be used for EME support check, alternatively instead of hasEMESupport.
+ */
+function hasRMKSASupport() {
+    const rmksa = window.navigator.requestMediaKeySystemAccess;
+    return !!rmksa;
+}
+
+/**
+ * @param keySystem Key System Identifier of a content protection (DRM) mechanism.
+ * @param config A non-empty array of MediaKeySystemConfiguration objects.
+ */
+function isKeySystemSupported(keySystem: string, config: MediaKeySystemConfiguration[])
+    : Promise<boolean> {
+    return new Promise((resolve) => {
+        try {
+            window.navigator.requestMediaKeySystemAccess(keySystem, config)
+                .then(() => { resolve(true); })
+                .catch(() => { resolve(false); });
+        } catch (e) {
+            resolve(false);
+        }
+    });
+}
+
+const KeySystems = {
+    // 'webkit-org.w3.clearkey': { name: 'W3C Clear Key' }, // only EME v0.1b
+    'org.w3.clearkey': { name: 'W3C Clear Key' },
+    'com.microsoft.playready': { name: 'Microsoft PlayReady' },
+    'com.youtube.playready': { name: 'YouTube PlayReady' },
+    'com.widevine.alpha': { name: 'Google Widevine' },
+    'com.apple.fairplay': { name: 'Apple FairPlay' },
+    'com.adobe.access': { name: 'Adobe Access' },
+};
+
+/**
+ * Get list of supported DRM/CDM
+ */
+async function getListOfSupportedDRM() {
+    const keySystems = Object.keys(KeySystems) as Array<keyof typeof KeySystems>;
+
+    const keySystemConfig = [{
+        initDataTypes: ['cenc'],
+        audioCapabilities: [{
+            contentType: 'audio/mp4;codecs="mp4a.40.2"',
+        }],
+        videoCapabilities: [{
+            contentType: 'video/mp4;codecs="avc1.42E01E"',
+        }],
+    }];
+
+    const supportedSystems = [];
+    for (let i = 0; i < keySystems.length; i++) {
+        const keySystem = keySystems[i];
+        // eslint-disable-next-line no-await-in-loop
+        const isSupported = await isKeySystemSupported(keySystem, keySystemConfig);
+        if (isSupported) {
+            supportedSystems.push({ id: keySystem, name: KeySystems[keySystem].name });
+        }
+    }
+
+    return supportedSystems;
+}
+
+export { hasEMESupport, hasRMKSASupport, getListOfSupportedDRM };

package/packages/developer-tools/src/TechnicalInfo/utils/formatTimezone.ts

@@ -0,0 +1,15 @@
+const MINUTES_PER_HOUR = 60;
+
+/**
+ * @param timezoneOffsetInMinutes The time-zone offset, in minutes, from local time to UTC.
+ * @returns time-zone string in RFC 822 4-digit time zone format, e.g. "+0100"
+ */
+function formatTimezone(timezoneOffsetInMinutes = 0) {
+    const hours = Math.floor(Math.abs(timezoneOffsetInMinutes / MINUTES_PER_HOUR));
+    const minutes = timezoneOffsetInMinutes % MINUTES_PER_HOUR;
+    const formattedHours = `0${hours}`.slice(-2); // eslint-disable-line no-magic-numbers
+    const formattedMinutes = `0${minutes}`.slice(-2); // eslint-disable-line no-magic-numbers
+    return `${timezoneOffsetInMinutes > 0 ? '-' : '+'}${formattedHours}${formattedMinutes}`;
+}
+
+export { formatTimezone };

package/packages/developer-tools/src/TechnicalInfo/utils/mseSupport.ts

@@ -0,0 +1,14 @@
+/**
+ * To detect Media Source Extensions API (MSE) support in a browser.
+ */
+
+/**
+ * Check the MSE (Media Source Extensions API) is supported in
+ */
+function hasMSESupport() {
+    // any because webkit-prefixed key needed on old devices like LG webOS 1.0 (2014)
+    const mse = window.MediaSource || (window as any).WebKitMediaSource;
+    return !!mse;
+}
+
+export { hasMSESupport };

package/packages/developer-tools/src/utils/reload.ts

@@ -0,0 +1,6 @@
+export const reloadApp = () => {
+    let rootPath = '';
+    const splitUrl = window.location.href.split('#');
+    if (splitUrl.length > 1) rootPath = splitUrl[0];
+    window.location.href = rootPath;
+};

package/packages/keyboard/src/utils/caret.ts

@@ -0,0 +1,48 @@
+const updateCaretPosition = (input: HTMLInputElement, position: number) => {
+    input.selectionStart = position;
+    input.selectionEnd = position;
+};
+
+export const caretLeft = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart > 0) {
+        const newPosition = selectionStart - 1;
+        updateCaretPosition(input, newPosition);
+        return newPosition;
+    }
+    return false;
+};
+
+export const caretRight = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart < value.length) {
+        const newPosition = selectionStart + 1;
+        updateCaretPosition(input, newPosition);
+        return newPosition;
+    }
+    return false;
+};
+
+export const caretHome = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart > 0) {
+        updateCaretPosition(input, 0);
+        return 0;
+    }
+    return false;
+};
+
+export const caretEnd = (input: HTMLInputElement | null): false | number => {
+    if (!input) return false;
+    const { value: { length } } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart < length) {
+        updateCaretPosition(input, length);
+        return length;
+    }
+    return false;
+};

package/packages/keyboard/src/utils/generateFocusMatrixFromStringMatrix.ts

@@ -0,0 +1,12 @@
+import { createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+export const generateFocusMatrixFromStringMatrix = (
+    refs: { [key: string]: Reference<HTMLDivElement> },
+    matrix: Array<Array<string | null>>,
+): Array<Array<Reference<HTMLDivElement>>> => map(matrix, (row) => (
+    map(row, (key) => {
+        if (!refs[key!]) refs[key!] = createRef();
+        return refs[key!];
+    })
+));

package/packages/keyboard/src/utils/input.ts

@@ -0,0 +1,40 @@
+export const insertCharAtCaret = (input: HTMLInputElement | null, char: string): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    const preCaret = value.substring(0, selectionStart);
+    const postCaret = value.substring(selectionStart);
+    input.value = `${preCaret}${char}${postCaret}`;
+    const newCaretPosition = selectionStart + char.length;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};
+
+export const backspace = (input: HTMLInputElement): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart === 0) return false;
+    const preCaret = value.substring(0, selectionStart - 1);
+    const postCaret = value.substring(selectionStart);
+    input.value = `${preCaret}${postCaret}`;
+    const newCaretPosition = selectionStart - 1;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};
+
+export const del = (input: HTMLInputElement): false | string => {
+    if (!input) return false;
+    const { value } = input;
+    const selectionStart = input.selectionStart!;
+    if (selectionStart === value.length) return false;
+    const preCaret = value.substring(0, selectionStart);
+    const postCaret = value.substring(selectionStart + 1);
+    input.value = `${preCaret}${postCaret}`;
+    const newCaretPosition = selectionStart;
+    input.selectionStart = newCaretPosition;
+    input.selectionEnd = newCaretPosition;
+    return input.value;
+};

package/packages/list/utils/index.ts

@@ -0,0 +1 @@
+export { calcVisibleItemCount } from '../src/utils';

package/packages/logger/src/utils/deviceInfo.ts

@@ -0,0 +1,25 @@
+import { IStorage } from '@24i/bigscreen-sdk/storage';
+import { getUsedJSHeapSize, getTotalJSHeapSize } from '@24i/bigscreen-sdk/utils/memoryInfo';
+
+const B_IN_KB = 1024;
+
+const toKilobytes = (bytes: number) => Math.floor(bytes / B_IN_KB);
+
+export const getFormattedMemoryHeapInfo = () => {
+    const usedSizeKB = toKilobytes(getUsedJSHeapSize());
+    const totalSizeKB = toKilobytes(getTotalJSHeapSize());
+    return `${usedSizeKB} kB / ${totalSizeKB} kB`;
+};
+
+export const getFormattedUsedLocalStorageSize = async (storage: IStorage) => {
+    if (storage) {
+        try {
+            const usedSize = await storage.getUsedSize();
+            const usedSizeKB = toKilobytes(usedSize);
+            return `${usedSizeKB} kB`;
+        } catch (e) {
+            return 'error';
+        }
+    }
+    return 'unknown';
+};

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

@@ -0,0 +1 @@
+export { getFormattedMemoryHeapInfo, getFormattedUsedLocalStorageSize } from './deviceInfo';