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

package/packages/async-image/src/AsyncImage.tsx

@@ -1,7 +1,7 @@
 import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 
 export type Props = {
-    src: string;
+    src?: string;
     clearBeforeLoading?: boolean;
     onImageLoad?: (src: string) => void;
     onImageError?: (src: string) => void;
@@ -17,6 +17,7 @@ export class AsyncImage extends Component<Props> {
     isCleared = true;
 
     static defaultProps = {
+        src: undefined,
         clearBeforeLoading: true,
     };
 
@@ -30,7 +31,7 @@ export class AsyncImage extends Component<Props> {
 
     componentDidMount() {
         const { src } = this.props;
-        this.updateImage(src);
+        this.updateImage(src!);
     }
 
     private readonly onLoad = () => {
@@ -47,27 +48,31 @@ export class AsyncImage extends Component<Props> {
     private readonly onError = () => {
         if (this.isMounted) {
             const { onImageError } = this.props;
-            this.clearImage();
+            this.clearBackground();
             if (typeof onImageError === 'function') {
                 onImageError(this.src);
             }
         }
     };
 
-    private clearImage() {
+    private clearBackground() {
         if (!this.isCleared) {
             this.domRef.current!.style.backgroundImage = '';
             this.isCleared = true;
         }
     }
 
+    clearImage() {
+        this.src = '';
+        this.clearBackground();
+    }
+
     updateImage(src: string) {
-        if (src === this.src) return;
-        if (!src) {
+        if (typeof src !== 'string') return;
+        if (src === '') {
             this.src = '';
-            this.image.src = '';
-            this.clearImage();
-        } else {
+            this.onError();
+        } else if (src !== this.src) {
             this.src = src;
             this.loadImage(src);
         }
@@ -77,7 +82,7 @@ export class AsyncImage extends Component<Props> {
         const { props: { clearBeforeLoading }, image } = this;
         image.src = src;
         if (clearBeforeLoading === true && !image.complete) {
-            this.clearImage();
+            this.clearBackground();
         }
     }
 

package/packages/developer-tools/PlayerDebugWindow/README.md

@@ -45,7 +45,7 @@ playerDebugWindowRef.current?.setPlayerInstance(playerInstance);
 
 ```ts
 type Props = {
-    playerInstance?: PlayerBase<any>;
+    playerInstance?: PlayerBase;
     updateInterval?: number;
     onClose?: () => void;
 };

package/packages/developer-tools/src/DeveloperConsole/DeveloperConsole.tsx

@@ -351,6 +351,7 @@ export class DeveloperConsole extends Component<Props> implements IDeveloperTool
                 ref={this.developerConsoleRef}
                 onKeyDown={this.onKeyDown}
                 tabIndex={0}
+                dir="ltr"
             >
                 <div className="developer-console-panel" ref={this.developerConsolePanelRef} />
                 <div className="developer-console-controls">

package/packages/developer-tools/src/DeveloperToolsService/DeveloperToolsList.tsx

@@ -7,6 +7,7 @@ import {
 import { BACK } from '@24i/bigscreen-sdk/device/keymap';
 import { DISPLAY_NONE, getDisplayToggler, stopEvent } from '@24i/bigscreen-sdk/utils';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Storage } from '@24i/bigscreen-sdk/storage';
 import { IDeveloperTool, DeveloperToolProps } from '../IDeveloperTool';
 import { DeveloperToolItem } from './DeveloperToolItem';
 import { reloadApp } from '../utils/reload';
@@ -39,6 +40,11 @@ export class DeveloperToolsList extends Component<Props> {
         reloadApp();
     };
 
+    async onClearDataToolPress() {
+        await Storage.clear();
+        reloadApp();
+    }
+
     onKeyDown = (event: KeyboardEvent) => {
         if (BACK.is(event)) {
             const { onBack } = this.props;
@@ -90,6 +96,11 @@ export class DeveloperToolsList extends Component<Props> {
                                 />
                             );
                         })}
+                        <DeveloperToolItem
+                            ref={this.getNavigationRef()}
+                            label="Clear data"
+                            onPress={this.onClearDataToolPress}
+                        />
                         <DeveloperToolItem
                             ref={this.getNavigationRef()}
                             label="Restart app"

package/packages/developer-tools/src/PlayerDebugWindow/PlayerDebugWindow.tsx

@@ -1,12 +1,12 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
 import { DISPLAY_NONE, getDisplayToggler } from '@24i/bigscreen-sdk/utils';
 import { createInterval } from '@24i/bigscreen-sdk/utils/timers';
-import { IMediaInfo, PlayerBase } from '@24i/player-base';
+import { IMediaInfo, PlayerBase } from '@24i/bigscreen-players-engine-base';
 import { IDeveloperTool } from '../IDeveloperTool';
 import { MEDIA_INFO_DESCRIPTION, MediaInfo } from './constants';
 
 export type Props = {
-    playerInstance?: PlayerBase<any>;
+    playerInstance?: PlayerBase;
     updateInterval?: number;
     onClose?: () => void;
 };
@@ -16,7 +16,7 @@ export class PlayerDebugWindow extends Component<Props> implements IDeveloperToo
 
     div = createRef<HTMLDivElement>();
 
-    playerInstance: PlayerBase<any> | null = null;
+    playerInstance: PlayerBase | null = null;
 
     interval = createInterval();
 
@@ -34,12 +34,12 @@ export class PlayerDebugWindow extends Component<Props> implements IDeveloperToo
         if (playerInstance) this.setPlayerInstance(playerInstance);
     }
 
-    setPlayerInstance(playerInstance: PlayerBase<any>) {
+    setPlayerInstance(playerInstance: PlayerBase) {
         this.playerInstance = playerInstance;
     }
 
     getMediaInfo() {
-        return this.playerInstance?.getMediaInfo() || {};
+        return this.playerInstance?.mediaInfo || {};
     }
 
     getFormattedValue(item: MediaInfo, value: any) {

package/packages/developer-tools/src/PlayerDebugWindow/constants.ts

@@ -49,6 +49,21 @@ export const MEDIA_INFO_DESCRIPTION: Record<string, MediaInfo> = {
     audioCodec: {
         title: 'Audio codec',
     },
+    audioBitrate: {
+        title: 'Audio bitrate',
+    },
+    audioSamplingRate: {
+        title: 'Audio sampling rate',
+    },
+    audioLanguage: {
+        title: 'Audio language',
+    },
+    subtitlesAvailable: {
+        title: 'Subtitles available',
+    },
+    availableSubtitlesListString: {
+        title: 'List of available subtitles',
+    },
     drmProtection: {
         title: 'DRM protection',
     },

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfo.tsx

@@ -88,6 +88,7 @@ export class TechnicalInfo extends Component<Props> implements IDeveloperTool<Pr
                     ref={this.horizontalNavigation}
                     domRef={this.rootRef}
                     focusableChildren={[this.technicalInfoRef, this.closeButtonRef]}
+                    dir="ltr"
                 >
                     <div className="content">
                         <TechnicalInfoDetail
@@ -117,6 +118,7 @@ export class TechnicalInfo extends Component<Props> implements IDeveloperTool<Pr
                 ref={this.rootRef}
                 className={`technical-info ${DISPLAY_NONE}`}
                 onKeyDown={this.onKeyDown}
+                dir="ltr"
             />
         );
     }

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfoDetail.tsx

@@ -1,4 +1,5 @@
 import { createRef, Component } from '@24i/bigscreen-sdk/jsx';
+import { hasFocus } from '@24i/bigscreen-sdk/focus';
 import { ScrollText } from '@24i/bigscreen-sdk/scroll-text';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
 import { ITechnicalInfoProvider, TechnicalInfoData } from './ITechnicalInfoProvider';
@@ -38,7 +39,7 @@ class TechnicalInfoDetail extends Component<Props> {
     }
 
     hasFocus() {
-        return this.wrapRef.current!.contains(document.activeElement);
+        return hasFocus(this.wrapRef);
     }
 
     renderInfoData(data: TechnicalInfoData) {

package/packages/developer-tools/src/TechnicalInfo/TechnicalInfoProvider.ts

@@ -1,9 +1,10 @@
 import { DeviceBase } from '@24i/bigscreen-sdk/driver-base';
+import { DeviceAndroidTV } from '@24i/bigscreen-sdk/driver-androidtv';
 import { IStorage } from '@24i/bigscreen-sdk/storage/interface';
 import { getUsedJSHeapSize, getTotalJSHeapSize } from '@24i/bigscreen-sdk/utils/memoryInfo';
 import { ipify } from '@24i/bigscreen-sdk/ipify';
 import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { PlayerBase } from '@24i/player-base';
+import { PlayerBase } from '@24i/bigscreen-players-engine-base';
 import { hasEMESupport, getListOfSupportedDRM } from './utils/emeSupport';
 import {
     hasEMESupport as hasEMESupport01b,
@@ -35,6 +36,8 @@ type Props = {
     profileName: string,
     /** Version of application. */
     appVersion: string,
+    /** Version of the currently used core packages. */
+    appCoreVersions: string,
     /** App resolution, in format like "1280x720". */
     appResolution: string,
     /** OVP/CMS back-end base URL. */
@@ -108,6 +111,15 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
         return value || unknown;
     }
 
+    async getDeviceOsLanguage() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await this.props.device.getOsLanguage();
+        } catch (e) {}
+        return value || unknown;
+    }
+
     async getPlatformType() {
         let value;
         const { unknown } = this.translations;
@@ -134,6 +146,16 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
         return value || unknown;
     }
 
+    async getAdInfo() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            const { adId, type, latEnabled } = await this.props.device.getAdInfo();
+            value = `LAT: ${latEnabled}, AD ID TYPE: ${type}, AD ID: ${adId}`;
+        } catch (e) {}
+        return value || unknown;
+    }
+
     async getLocalIpAddress() {
         let value;
         const { unknown } = this.translations;
@@ -263,24 +285,42 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
         return this.props.backendBaseUrl || unknown;
     }
 
-    getSourceDataLayout() {
+    async getAppCoreVersions() {
+        const { unknown } = this.translations;
+        return this.props.appCoreVersions || unknown;
+    }
+
+    async getWrapperVersion() {
+        let value;
+        const { unknown } = this.translations;
+        try {
+            value = await (this.props.device as DeviceAndroidTV).getWrapperVersion();
+        } catch (e) {}
+        return value || unknown;
+    }
+
+    async getSourceDataLayout() {
         const {
             username, profile, appVersion, firmwareVersion, deviceModel,
-            deviceManufacturer, platform, player, serialNumber, localIpAddress,
-            publicIpAddress, connectionType, macAddress, memoryHeapSize,
+            deviceManufacturer, deviceLanguage, platform, player, serialNumber, adInfo,
+            localIpAddress, publicIpAddress, connectionType, macAddress, memoryHeapSize,
             usedLocalStorage, timeZone, dateAndTime, flavour, userAgent,
             emeSupport, emeDrmSystems, mseSupport, fourKSupport, resolution, baseUrl,
+            appCoreVersions, androidWrapperVersion,
         } = this.translations;
         const dataLayout: SourceDataLayout = [
             { label: username, getter: this.getUserName },
             { label: profile, getter: this.getProfileName },
             { label: appVersion, getter: this.getAppVersion },
+            { label: appCoreVersions, getter: this.getAppCoreVersions },
             { label: firmwareVersion, getter: this.getFirmwareVersion },
             { label: deviceModel, getter: this.getDeviceModelName },
             { label: deviceManufacturer, getter: this.getDeviceManufacturer },
+            { label: deviceLanguage, getter: this.getDeviceOsLanguage },
             { label: platform, getter: this.getPlatformType },
             { label: player, getter: this.getPlayerType },
             { label: serialNumber, getter: this.getDeviceSerialNumber },
+            { label: adInfo, getter: this.getAdInfo },
             { label: localIpAddress, getter: this.getLocalIpAddress },
             { label: publicIpAddress, getter: this.getPublicIpAddress },
             { label: connectionType, getter: this.getConnectionType },
@@ -298,9 +338,21 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
             { label: resolution, getter: this.getAppResolution },
             { label: baseUrl, getter: this.getBackendBaseUrl },
         ];
+
+        if (await this.isAndroidTV()) {
+            dataLayout.push(
+                { label: androidWrapperVersion, getter: this.getWrapperVersion },
+            );
+        }
+
         return dataLayout;
     }
 
+    async isAndroidTV() {
+        const platformName = await this.props.device.getPlatformName();
+        return platformName === 'AndroidTV';
+    }
+
     async loadDataLayout(dataLayout: SourceDataLayout) {
         const promises = map(dataLayout, async (item) => item.getter.call(this));
         const values = await Promise.all(promises);
@@ -310,7 +362,7 @@ class TechnicalInfoProvider implements ITechnicalInfoProvider {
     }
 
     async getInfoData() {
-        const sourceDataLayout = this.getSourceDataLayout();
+        const sourceDataLayout = await this.getSourceDataLayout();
         return this.loadDataLayout(sourceDataLayout);
     }
 }

package/packages/developer-tools/src/TechnicalInfo/__mocks__/Device.ts

@@ -43,9 +43,21 @@ class Device {
         return 'connection type';
     }
 
+    async getOsLanguage() {
+        return 'device language';
+    }
+
+    async getAdInfo() {
+        return { adId: 'ad-id', type: 'ad-id-type', latEnabled: false };
+    }
+
     async getMacAddress() {
         return 'mac address';
     }
+
+    async getWrapperVersion() {
+        return 'android wrapper version';
+    }
 }
 
 export { Device };

package/packages/developer-tools/src/TechnicalInfo/translations.ts

@@ -3,6 +3,7 @@ export type Translations = TranslationKeys | { [K in keyof TranslationKeys]?: ne
 export type TranslationKeys = {
     unknown: string
     anonymous: string,
+    androidWrapperVersion: string,
     yes: string,
     no: string,
     prefixed: string,
@@ -10,12 +11,15 @@ export type TranslationKeys = {
     username: string,
     profile: string,
     appVersion: string,
+    appCoreVersions: string,
     firmwareVersion: string,
     deviceModel: string,
     deviceManufacturer: string,
+    deviceLanguage: string;
     platform: string,
     player: string,
     serialNumber: string,
+    adInfo: string,
     localIpAddress: string,
     publicIpAddress: string,
     connectionType: string,
@@ -40,6 +44,7 @@ export type TranslationKeys = {
 export const defaultTranslations = {
     unknown: 'UNKNOWN',
     anonymous: 'ANONYMOUS',
+    androidWrapperVersion: 'Android wrapper version',
     yes: 'Yes',
     no: 'No',
     prefixed: 'prefixed',
@@ -47,12 +52,15 @@ export const defaultTranslations = {
     username: 'Username',
     profile: 'Profile',
     appVersion: 'App version',
+    appCoreVersions: 'Core versions',
     firmwareVersion: 'Firmware version',
     deviceModel: 'Device model',
     deviceManufacturer: 'Device manufacturer',
+    deviceLanguage: 'Device Language',
     platform: 'Platform',
     player: 'Player',
     serialNumber: 'Serial number',
+    adInfo: 'Ad info',
     localIpAddress: 'Local IP address',
     publicIpAddress: 'Public IP address',
     connectionType: 'Connection type',

package/packages/device/src/driver/index.android.tv.ts

@@ -0,0 +1 @@
+export { DeviceAndroidTV as Device } from '@24i/bigscreen-sdk/driver-androidtv';

package/packages/device/src/driver/index.firetv.ts

@@ -0,0 +1 @@
+export { DeviceFireTV as Device } from '@24i/bigscreen-sdk/driver-firetv';

package/packages/device/src/driver/index.smartcast.tv.ts

@@ -0,0 +1 @@
+export { DeviceSmartCast as Device } from '@24i/bigscreen-sdk/driver-smartcast';

package/packages/device/src/getKeyDigit.ts

@@ -1,8 +1,8 @@
 import { KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
 
 export const createGetKeyDigit = (
-    getKeyMap: () => Partial<KeycodeKeyMap>): (event: KeyboardEvent
-    ) => number | undefined => {
+    getKeyMap: () => Partial<KeycodeKeyMap>,
+): (event: KeyboardEvent) => number | undefined => {
     const {
         NUM_0, NUM_1, NUM_2, NUM_3, NUM_4, NUM_5, NUM_6, NUM_7, NUM_8, NUM_9,
         KP_0, KP_1, KP_2, KP_3, KP_4, KP_5, KP_6, KP_7, KP_8, KP_9,

package/packages/device/src/resolver/resolver.ts

@@ -1,11 +1,14 @@
 import { KeycodeKeyMap, DeviceEventMap } from '@24i/bigscreen-sdk/driver-base';
+import { DeviceAndroidTV } from '@24i/bigscreen-sdk/driver-androidtv';
 import { DeviceBrowser } from '@24i/bigscreen-sdk/driver-browser';
 import { DeviceEntone } from '@24i/bigscreen-sdk/driver-entone';
+import { DeviceFireTV } from '@24i/bigscreen-sdk/driver-firetv';
 import { DeviceHbbTV } from '@24i/bigscreen-sdk/driver-hbbtv';
 import { DeviceKreaTV } from '@24i/bigscreen-sdk/driver-kreatv';
 import { DeviceSaphi } from '@24i/bigscreen-sdk/driver-saphi';
 import { DeviceTizen } from '@24i/bigscreen-sdk/driver-tizen';
 import { DeviceVidaa } from '@24i/bigscreen-sdk/driver-vidaa';
+import { DeviceSmartCast } from '@24i/bigscreen-sdk/driver-smartcast';
 import { DeviceWebos } from '@24i/bigscreen-sdk/driver-webos';
 import { DeviceXbox } from '@24i/bigscreen-sdk/driver-xbox';
 
@@ -19,10 +22,26 @@ const getDevice = () => {
         info('HbbTV');
         return new DeviceHbbTV();
     }
+    // any because JavaScriptBridge property is defined on Android TV Bridge platform
+    if (typeof (window as any).JavaScriptBridge !== 'undefined'
+        && (userAgent.match(/AFT/) || userAgent.match('AmazonWebAppPlatform'))
+    ) {
+        info('FireTV');
+        return new DeviceFireTV();
+    }
+    // any because JavaScriptBridge property is defined on Android TV Bridge platform
+    if (typeof (window as any).JavaScriptBridge !== 'undefined') {
+        info('AndroidTV');
+        return new DeviceAndroidTV();
+    }
     if (userAgent.match(/Tizen/)) {
         info('Tizen');
         return new DeviceTizen();
     }
+    if (userAgent.match(/Vizio/i)) {
+        info('SmartCast');
+        return new DeviceSmartCast();
+    }
     if (userAgent.match(/Web0S/)) { // Yes, it is Web ZERO S
         info('WebOS');
         return new DeviceWebos();

package/packages/digital-clock/src/DigitalClock.tsx

@@ -8,9 +8,14 @@ export type Props = {
     withSeconds?: boolean,
     domRef?: Reference<HTMLDivElement>,
     className?: string,
+    isHiddenForAria?: boolean,
 };
 
-const WITHOUT_SECONDS_OPTIONS = { hour: 'numeric', minute: '2-digit' } as const;
+const WITHOUT_SECONDS_OPTIONS = {
+    hour: 'numeric',
+    minute: '2-digit',
+    formatType: 'timeFormat',
+} as const;
 const WITH_SECONDS_OPTIONS = { ...WITHOUT_SECONDS_OPTIONS, second: '2-digit' } as const;
 
 export class DigitalClock extends Component<Props> {
@@ -40,7 +45,7 @@ export class DigitalClock extends Component<Props> {
 
     setTime() {
         const { withSeconds } = this.props;
-        const currentTimestampMs = time.getCurrentUnixTime();
+        const currentTimestampMs = time.getCurrentTime().getTime();
         if (this.oldUnixTimestampMs !== currentTimestampMs) {
             const options = withSeconds ? WITH_SECONDS_OPTIONS : WITHOUT_SECONDS_OPTIONS;
             this.clearMount((
@@ -61,7 +66,13 @@ export class DigitalClock extends Component<Props> {
     }
 
     render() {
-        const { className } = this.props;
-        return <div ref={this.clockRef} className={className} />;
+        const { className, isHiddenForAria } = this.props;
+        return (
+            <div
+                ref={this.clockRef}
+                className={className}
+                {...isHiddenForAria && { 'aria-hidden': true }}
+            />
+        );
     }
 }