@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/developer-tools/src/TechnicalInfo/styles/_sizes.1080.scss

@@ -0,0 +1,50 @@
+$technical-info-height: 1080px;
+$technical-info-width: 1920px;
+
+$content-width: 1180px;
+$controls-width: 740px;
+
+$technical-info-padding-left: 144px;
+$technical-info-padding-right: 56px;
+
+$scroll-wrap-width: 816px;
+
+$arrow-navigation-left: 880px;
+$arrow-navigation-top: 450px;
+$arrow-navigation-min-height: 180px;
+$arrow-navigation-min-width: 80px;
+$arrow-navigation-border-width: 2px;
+$arrow-navigation-border-radius: 40px;
+
+$arrow-height: 86px;
+$arrow-width: 76px;
+$arrow-margin: -1px;
+$arrow-top-margin-bottom: 6px;
+
+$arrow-navigation-focus-size: 8px;
+
+$icon-mask-size: 40px;
+
+$scroll-content-padding-top: 110px;
+$scroll-content-padding-bottom: 122px;
+
+$title-font-size: 76px;
+$title-margin-bottom: 64px;
+
+$item-font-size: 26px;
+$item-margin-bottom: 10px;
+
+$label-margin-right: 13px;
+$label-width: 300px;
+
+$value-width: 503px;
+
+$button-padding: 22px 15px;
+$button-top: 500px;
+$button-left: 244px;
+$button-height: 80px;
+$button-width: 176px;
+$button-border-radius: 40px;
+$button-border-width: 2px;
+$button-text: 30px;
+$button-focus-size: 8px;

package/packages/developer-tools/src/TechnicalInfo/styles/_sizes.scss

@@ -0,0 +1,50 @@
+$technical-info-height: 720px;
+$technical-info-width: 1280px;
+
+$content-width: 787px;
+$controls-width: 493px;
+
+$technical-info-padding-left: 96px;
+$technical-info-padding-right: 37px;
+
+$scroll-wrap-width: 544px;
+
+$arrow-navigation-left: 587px;
+$arrow-navigation-top: 300px;
+$arrow-navigation-min-height: 120px;
+$arrow-navigation-min-width: 53px;
+$arrow-navigation-border-width: 1px;
+$arrow-navigation-border-radius: 27px;
+
+$arrow-height: 57px;
+$arrow-width: 51px;
+$arrow-margin: -1px;
+$arrow-top-margin-bottom: 4px;
+
+$arrow-navigation-focus-size: 5px;
+
+$icon-mask-size: 27px;
+
+$scroll-content-padding-top: 73px;
+$scroll-content-padding-bottom: 81px;
+
+$title-font-size: 51px;
+$title-margin-bottom: 43px;
+
+$item-font-size: 17px;
+$item-margin-bottom: 7px;
+
+$label-margin-right: 9px;
+$label-width: 200px;
+
+$value-width: 335px;
+
+$button-padding: 15px 10px;
+$button-top: 333px;
+$button-left: 163px;
+$button-height: 53px;
+$button-width: 117px;
+$button-border-radius: 27px;
+$button-border-width: 1px;
+$button-text: 20px;
+$button-focus-size: 5px;

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

@@ -0,0 +1 @@
+import './styles/TechnicalInfo.styles';

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

@@ -0,0 +1,75 @@
+export type Translations = TranslationKeys | { [K in keyof TranslationKeys]?: never };
+
+export type TranslationKeys = {
+    unknown: string
+    anonymous: string,
+    yes: string,
+    no: string,
+    prefixed: string,
+    unprefixed: string,
+    username: string,
+    profile: string,
+    appVersion: string,
+    firmwareVersion: string,
+    deviceModel: string,
+    deviceManufacturer: string,
+    platform: string,
+    player: string,
+    serialNumber: string,
+    localIpAddress: string,
+    publicIpAddress: string,
+    connectionType: string,
+    connectionCable: string,
+    connectionWifi: string,
+    connectionNone: string,
+    macAddress: string,
+    memoryHeapSize: string,
+    usedLocalStorage: string,
+    timeZone: string,
+    dateAndTime: string,
+    flavour: string,
+    userAgent: string,
+    emeSupport: string,
+    emeDrmSystems: string,
+    mseSupport: string,
+    fourKSupport: string,
+    resolution: string,
+    baseUrl: string,
+};
+
+export const defaultTranslations = {
+    unknown: 'UNKNOWN',
+    anonymous: 'ANONYMOUS',
+    yes: 'Yes',
+    no: 'No',
+    prefixed: 'prefixed',
+    unprefixed: 'unprefixed',
+    username: 'Username',
+    profile: 'Profile',
+    appVersion: 'App version',
+    firmwareVersion: 'Firmware version',
+    deviceModel: 'Device model',
+    deviceManufacturer: 'Device manufacturer',
+    platform: 'Platform',
+    player: 'Player',
+    serialNumber: 'Serial number',
+    localIpAddress: 'Local IP address',
+    publicIpAddress: 'Public IP address',
+    connectionType: 'Connection type',
+    connectionCable: 'Cable',
+    connectionWifi: 'Wifi',
+    connectionNone: 'None',
+    macAddress: 'MAC address',
+    memoryHeapSize: 'Memory heap size',
+    usedLocalStorage: 'Used local storage',
+    timeZone: 'Time zone',
+    dateAndTime: 'Date and time',
+    flavour: 'Flavour',
+    userAgent: 'User-Agent',
+    emeSupport: 'EME support',
+    emeDrmSystems: 'EME DRM systems',
+    mseSupport: 'MSE support',
+    fourKSupport: '4K support',
+    resolution: 'Resolution',
+    baseUrl: 'Base URL',
+};

package/packages/device/README.md

@@ -0,0 +1,219 @@
+---
+id: README
+title: Device
+hide_title: true
+sidebar_label: Device
+---
+
+# Device
+This package contains the device driver. It uses either a platform-specific or a runtime resolved version
+based on your project settings.
+The default setting in SmartApps BIGscreen projects through rnv uses a platform-specific driver.
+
+It has these exports:
+- `device` - an instance of Device class based on your platform.
+the device initialization finishes.
+- `isClickOrEnter` - a function that returns true if the passed event is either ENTER key press or
+left mouse button press.
+- `DeviceEventMap` - a type of all supported device events
+- ~`getKeyMap`~ **deprecated** - synchronous KeyMap getter. It may return an empty object on some platforms before
+
+There is also a pathed export available at: `/keymap`. This exports all keys supported for checking.
+More on that in [Handling key inputs](#inputs)
+
+If you are creating a driver or you wish to edit a driver, please also check
+[Device Base](../driver-base/DeviceBase) documentation.
+
+## What device can do for you
+
+- [notify you of various events](#events)
+- [convert key presses into actions](#inputs)
+- [get information about the device](#information)
+- [control native features](#control)
+
+### Events
+Device supports typed event handling. There are several events common for all devices. Then each
+driver can have its own events. To access those you first need to make sure which device is instantiated.
+
+Events:
+- `networkchange` - called each time device's connection availability changes.
+```ts
+type NetworkChangeListener = (payload: { isConnected: boolean }) => void;
+```
+- `visibilitychange` - called each time the app becomes (in)active.
+Not supported by all platforms, only those that support multitasking (web, tizen).
+```ts
+type VisibilityChangeListener = (payload: { isVisible: boolean }) => void;
+```
+- `mouseactive` - called each time the app starts or ends mouse usage.
+Supported by platforms that allow mouse or similar pointing device (e.g. LG's MRCU).
+```ts
+type MouseActiveListener = (payload: { isMouseActive: boolean }) => void;
+```
+
+### Inputs
+Since device has to support multiple types of input for the same action, there are
+some helper functions that should be used over direct comparison with keycode. Example
+of such device is XBOX. It can be controlled by a keyboard/mouse or gamepad. This creates
+several keycodes for one action such as:
+- LEFT:
+  - left keyboard arrow
+  - left movement of left thumbstick
+  - left movement of right thumbstick
+  - left on D-PAD
+- ENTER:
+  - enter on keyboard
+  - A on gamepad
+
+Another reason for this is that these helper functions also take into account the layout
+of the document (left-to-right or right-to-left) and mirror left and right actions accordingly.
+This way it is possible to program the horizontal direction (left/right) actions only
+for classic LTR layout and have it transparently handled also for RTL.
+
+There are two ways to check for the pressed key:
+1. If you need an exact key or its equivalent as before mentioned LEFT case. This method does not
+take into account direction of the document (LTR or RTL):
+```ts
+// For one key
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+
+const onKeyDown = (event: KeyboardEvent) => {
+    if (BACK.is(event)) {
+        // handle and stop the event
+    }
+}
+
+// For multiple keys
+import { switchByKey } from '@24i/bigscreen-sdk/device/keymap';
+
+const onKeyDown = (event: KeyboardEvent) => {
+    const processed = switchByKey(event, {
+        PLAY: this.onKeyPlay,
+        PAUSE: this.onKeyPause,
+        STOP: this.onKeyStop,
+    });
+}
+```
+
+2. If you need to know the direction that takes into account swapping LEFT and RIGHT for RTL layouts:
+```ts
+/**
+ * Returns true for any action in the direction left, right, up or down.
+ */
+isDirectionalArrow(event: KeyboardEvent): boolean;
+
+/**
+ * Returns true for any action in the left direction. (or right in RTL layout)
+ */
+isDirectionLeft(event: KeyboardEvent): boolean;
+
+/**
+ * Returns true for any action in the right direction. (or left in RTL layout)
+ */
+isDirectionRight(event: KeyboardEvent): boolean;
+
+/**
+ * Returns true for any action in the up direction.
+ */
+isDirectionUp(event: KeyboardEvent): boolean;
+
+/**
+ * Returns true for any action in the down direction.
+ */
+isDirectionDown(event: KeyboardEvent): boolean;
+
+/**
+ * Returns true for any confirm action.
+ */
+isClickOrEnter(event: MouseEvent | KeyboardEvent): boolean;
+
+/**
+ * Returns true for any cancel action.
+ */
+isBackOrEscape(event: MouseEvent | KeyboardEvent): boolean;
+```
+
+### Information
+The device supports gaining information about the device. The amount of information
+is limited by each platform and these are taken only as best effort.
+
+Supported information:
+```ts
+getManufacturerName(): Promise<string>;
+
+getPlatformName(): Promise<string>;
+
+getPlatformVersion(): Promise<string>;
+
+getDeviceName(): Promise<string>;
+
+getModelName(): Promise<string>;
+
+getFirmware(): Promise<string>;
+
+is4KSupported(): Promise<boolean>;
+
+is8KSupported(): Promise<boolean>;
+
+getUuid(): Promise<string>;
+
+isNetworkConnected(): Promise<boolean>;
+
+getConnectionType(): Promise<ConnectionType>;
+
+getLocalIP(): Promise<string>;
+
+getMacAddress(): Promise<string>;
+```
+
+### Control
+Some devices let you control the app or device itself. Some platforms (e.g. Entone STBs)
+event require some actions (e.g. volume control) to be handled by the app.
+
+Control (not all are supported by all platforms):
+```ts
+/**
+ * Function that should be called to quit the application in a top level BACK key handler.
+ */
+exit(options?: ExitOptions): void;
+
+/**
+ * Function to restart the device/application (platform-dependent).
+ */
+reboot(): void;
+
+/**
+ * Returns the volume level in the range 0-100.
+ */
+getVolume(): Promise<number>;
+
+/**
+ * Sets the volume level in the range 0-100.
+ */
+setVolume(volumePercentage: number): Promise<void>;
+
+/**
+ * (Un)mutes the device.
+ */
+mute(mute: boolean): Promise<void>;
+
+/**
+ * Returns true if the device is muted.
+ */
+isMute(): Promise<boolean>;
+
+/**
+ * Returns screensaver information for supported platforms.
+ */
+getScreenSaver(): Promise<ScreenSaverStatus>;
+
+/**
+ * Sets screensaver information for supported platforms.
+ */
+setScreenSaver(status: ScreenSaverStatus): Promise<void>;
+
+/**
+ * Changes the user agent string for platforms that support it.
+ */
+setUserAgent(userAgent: string): Promise<boolean>;
+```

package/packages/device/keymap.ts

@@ -0,0 +1 @@
+export * from '@24i/bigscreen-sdk/driver-base/keymap';

package/packages/device/resolver/index.ts

@@ -0,0 +1,2 @@
+export { device, getKeyDigit, getKeyMap, isClickOrEnter } from '../src/resolver';
+export type { DeviceEventMap } from '../src/resolver';

package/packages/device/resolver/keymap.ts

@@ -0,0 +1 @@
+export * from '@24i/bigscreen-sdk/driver-base/keymap';

package/packages/device/src/DeviceEventMap.ts

@@ -0,0 +1 @@
+export { DeviceEventMap } from '@24i/bigscreen-sdk/driver-base';

package/packages/device/src/device.ts

@@ -0,0 +1,6 @@
+import { Device } from './driver';
+
+const device = new Device();
+device.internalInit();
+
+export { device };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/packages/device/src/getKeyDigit.ts

@@ -0,0 +1,35 @@
+import { KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
+
+export const createGetKeyDigit = (
+    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,
+    } = getKeyMap();
+
+    const digits = {
+        [NUM_0!]: 0,
+        [KP_0!]: 0,
+        [NUM_1!]: 1,
+        [KP_1!]: 1,
+        [NUM_2!]: 2,
+        [KP_2!]: 2,
+        [NUM_3!]: 3,
+        [KP_3!]: 3,
+        [NUM_4!]: 4,
+        [KP_4!]: 4,
+        [NUM_5!]: 5,
+        [KP_5!]: 5,
+        [NUM_6!]: 6,
+        [KP_6!]: 6,
+        [NUM_7!]: 7,
+        [KP_7!]: 7,
+        [NUM_8!]: 8,
+        [KP_8!]: 8,
+        [NUM_9!]: 9,
+        [KP_9!]: 9,
+    };
+
+    return (event: KeyboardEvent): number | undefined => digits[event.keyCode];
+};

package/packages/device/src/getKeyMap.ts

@@ -0,0 +1,4 @@
+import { KeycodeKeyMap } from '@24i/bigscreen-sdk/driver-base';
+import { device } from './device';
+
+export const getKeyMap = (): Partial<KeycodeKeyMap> => device.getKeyMapSync();

package/packages/device/src/index.ts

@@ -0,0 +1,8 @@
+import { createGetKeyDigit } from './getKeyDigit';
+import { getKeyMap } from './getKeyMap';
+
+export { getKeyMap };
+export { device } from './device';
+export type { DeviceEventMap } from './DeviceEventMap';
+export { isClickOrEnter } from './isClickOrEnter';
+export const getKeyDigit = createGetKeyDigit(getKeyMap);

package/packages/device/src/isClickOrEnter.ts

@@ -0,0 +1,3 @@
+import { device } from './device';
+
+export const isClickOrEnter = (event: MouseEvent | KeyboardEvent) => device.isClickOrEnter(event);

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

@@ -0,0 +1,2 @@
+export { getKeyMap, getKeyDigit, isClickOrEnter, device } from './resolver';
+export type { DeviceEventMap } from './resolver';

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

@@ -0,0 +1,60 @@
+import { KeycodeKeyMap, DeviceEventMap } from '@24i/bigscreen-sdk/driver-base';
+import { DeviceBrowser } from '@24i/bigscreen-sdk/driver-browser';
+import { DeviceEntone } from '@24i/bigscreen-sdk/driver-entone';
+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 { DeviceWebos } from '@24i/bigscreen-sdk/driver-webos';
+import { DeviceXbox } from '@24i/bigscreen-sdk/driver-xbox';
+
+import { createGetKeyDigit } from '../getKeyDigit';
+
+const info = (platform: string) => console.log(`[DEVICE RESOLVER] Device resolved as ${platform}`);
+
+const getDevice = () => {
+    const { userAgent } = window.navigator;
+    if (userAgent.match(/HbbTV\//)) {
+        info('HbbTV');
+        return new DeviceHbbTV();
+    }
+    if (userAgent.match(/Tizen/)) {
+        info('Tizen');
+        return new DeviceTizen();
+    }
+    if (userAgent.match(/Web0S/)) { // Yes, it is Web ZERO S
+        info('WebOS');
+        return new DeviceWebos();
+    }
+    if (userAgent.match(/Philips/)) {
+        info('Saphi');
+        return new DeviceSaphi();
+    }
+    if (userAgent.match(/Ekioh/)) {
+        info('KreaTV');
+        return new DeviceKreaTV();
+    }
+    // any because ENTONE property is defined on Entone platform
+    if (typeof (window as any).ENTONE !== 'undefined') {
+        info('Entone');
+        return new DeviceEntone();
+    }
+    if (userAgent.match(/Xbox/)) {
+        // Optionally use /Win64/ for Windows UWP application
+        info('Xbox');
+        return new DeviceXbox();
+    }
+    info('generic browser');
+    return new DeviceBrowser();
+};
+
+const device = getDevice();
+device.internalInit();
+
+export const getKeyMap = (): Partial<KeycodeKeyMap> => device.getKeyMapSync();
+
+export const isClickOrEnter = (event: MouseEvent | KeyboardEvent) => device.isClickOrEnter(event);
+
+export { device, DeviceEventMap };
+
+export const getKeyDigit = createGetKeyDigit(getKeyMap);

package/packages/digital-clock/README.md

@@ -0,0 +1,26 @@
+---
+id: README
+title: DigitalClock
+hide_title: true
+sidebar_label: DigitalClock
+---
+
+# DigitalClock
+Package used to display time across SmartApps BIGscreen applications.
+
+## Props
+- `withSeconds?: boolean` - if set to true will display time in a format `hh:mm:ss`.
+- `domRef?: Reference<HTMLDivElement>` - possibility to pass a ref to allow dom manipulation
+- `className?: string`
+
+## Usage
+
+```tsx
+import { DigitalClock } from '@24i/smartapps-bigscreenen-digital-clock';
+
+<DigitalClock />
+
+// OR with multiple props
+
+<DigitalClock className="digital-clock digital-clock-styled" withSeconds />
+```

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

@@ -0,0 +1,67 @@
+import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
+import { Locale } from '@24i/bigscreen-sdk/l10n';
+import { MINUTE_IN_MS, SECOND_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+
+export type Props = {
+    withSeconds?: boolean,
+    domRef?: Reference<HTMLDivElement>,
+    className?: string,
+};
+
+const WITHOUT_SECONDS_OPTIONS = { hour: 'numeric', minute: '2-digit' } as const;
+const WITH_SECONDS_OPTIONS = { ...WITHOUT_SECONDS_OPTIONS, second: '2-digit' } as const;
+
+export class DigitalClock extends Component<Props> {
+    clockRef: Reference<HTMLDivElement>;
+
+    static defaultProps = {
+        withSeconds: false,
+    };
+
+    oldUnixTimestampMs = NaN;
+
+    updateTimeout = createTimeout();
+
+    constructor(props: Props) {
+        super(props);
+        this.clockRef = props.domRef || createRef();
+    }
+
+    componentDidMount() {
+        this.setTime();
+        this.planNextUpdate();
+    }
+
+    componentWillUnmount() {
+        this.updateTimeout.clear();
+    }
+
+    setTime() {
+        const { withSeconds } = this.props;
+        const currentTimestampMs = time.getCurrentUnixTime();
+        if (this.oldUnixTimestampMs !== currentTimestampMs) {
+            const options = withSeconds ? WITH_SECONDS_OPTIONS : WITHOUT_SECONDS_OPTIONS;
+            this.clearMount((
+                <Locale type="date" value={currentTimestampMs} options={options} />
+            ), this.clockRef);
+            this.oldUnixTimestampMs = currentTimestampMs;
+        }
+    }
+
+    planNextUpdate() {
+        const { withSeconds } = this.props;
+        const maxTimeBetweenUpdates = withSeconds ? SECOND_IN_MS : MINUTE_IN_MS;
+        const updateIn = maxTimeBetweenUpdates - (this.oldUnixTimestampMs % maxTimeBetweenUpdates);
+        this.updateTimeout.set(() => {
+            this.setTime();
+            this.planNextUpdate();
+        }, updateIn);
+    }
+
+    render() {
+        const { className } = this.props;
+        return <div ref={this.clockRef} className={className} />;
+    }
+}

package/packages/digital-clock/src/index.ts

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