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

package/packages/conviva/src/theoPlugin/convivaTheoPluginWrapper.ts

@@ -0,0 +1,61 @@
+import './__external__/Conviva_4.0.15';
+import { NewConvivaIntegration } from './__external__/convivaTheoPlugin';
+import { ConvivaSDK } from '../ConvivaSDK';
+import { ConvivaConfiguration, GetContentInfo } from './ConvivaConviguration';
+
+declare const Conviva: ConvivaSDK;
+
+let convivaTracker: NewConvivaIntegration;
+
+const mapConfiguration = (config: ConvivaConfiguration): Record<string, string | number> => ({
+    [Conviva.Constants.GATEWAY_URL]: config.gatewayUrl,
+    [Conviva.Constants.LOG_LEVEL]: config.logLevel,
+    [Conviva.Constants.CUSTOMER_KEY]: config.customerKey,
+});
+
+const mapContentInfo = <T>(getContentInfo: GetContentInfo<T>) => (source: any) => {
+    const contentInfo = getContentInfo(source);
+    const streamType = contentInfo.isLive
+        ? Conviva.Constants.StreamType.LIVE
+        : Conviva.Constants.StreamType.VOD;
+    const mappedInfo = {
+        [Conviva.Constants.ASSET_NAME]: contentInfo.assetName,
+        [Conviva.Constants.STREAM_URL]: contentInfo.streamUrl,
+        [Conviva.Constants.IS_LIVE]: streamType,
+        [Conviva.Constants.PLAYER_NAME]: contentInfo.playerName,
+        [Conviva.Constants.VIEWER_ID]: contentInfo.viewerId,
+        [Conviva.Constants.DURATION]: contentInfo.duration,
+        [Conviva.Constants.ENCODED_FRAMERATE]: contentInfo.encodedFramerate,
+        [Conviva.Constants.DEFAULT_RESOURCE]: contentInfo.defaultResource,
+    };
+    Object.keys(contentInfo.extraTags).forEach((tag) => {
+        mappedInfo[tag] = contentInfo.extraTags[tag];
+    });
+    return mappedInfo;
+};
+
+/**
+ * Starts conviva tracking.
+ * @param player THEOplayer instance.
+ * @param config Conviva configuration object.
+ * @param getContentInfo Function which returns stream content info,
+ * is called when player stream stream changes.
+ */
+export const startConvivaTracker = <T>(
+    player: any,
+    config: ConvivaConfiguration,
+    getContentInfo: GetContentInfo<T>,
+) => {
+    convivaTracker = new NewConvivaIntegration(
+        player,
+        mapConfiguration(config),
+        mapContentInfo(getContentInfo),
+    );
+};
+
+/**
+ * Stops conviva tracking.
+ */
+export const stopConvivaTracker = () => {
+    convivaTracker?.destroy();
+};

package/packages/conviva/src/theoPlugin/index.ts

@@ -0,0 +1,2 @@
+export * from './convivaTheoPluginWrapper';
+export * from './ConvivaConviguration';

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

@@ -0,0 +1,114 @@
+---
+id: README
+title: Developer Console
+hide_title: true
+sidebar_label: Developer Console
+---
+
+# Developer Console
+
+The component that provides a way to display panels with information logs associated with the application, such as JavaScript logs, errors or network traffic.
+
+## Supported Features
+
+- Display console logs
+- Display network requests
+- Reload app
+- Clear storage
+
+## Usage
+
+There are two ways of initializing components:
+
+Init function (the preferred option, you want to initialize the component as soon as possible):
+
+```ts
+import { initDeveloperConsole } from '@24i/bigscreen-sdk/developer-tools/DeveloperConsole';
+
+const root = document.getElementById('root') as HTMLDivElement;
+
+initDeveloperConsole(root, {
+    storage: storage,
+    maxConsoleQueueLength: 100,
+    maxNetworkQueueLength: 50,
+    instrumentOptions: { xhr: false },
+    preserveScrollOnUpdate: true,
+    onShow: () => { console.log('showing developer console') },
+    onFocusOut: () => { console.log('focus out from developer console') },
+    onClose: () => { console.log('closing developer console') },
+});
+```
+
+JSX:
+
+```jsx
+import { DeveloperConsole } from '@24i/bigscreen-sdk/developer-tools/DeveloperConsole';
+
+const App = () => (
+    <DeveloperConsole
+        storage={storage}
+        maxConsoleQueueLength={100}
+        maxNetworkQueueLength={50}
+        instrumentOptions={{ xhr: false }}
+        preserveScrollOnUpdate
+        onShow={() => { console.log('showing developer console') }}
+        onFocusOut={() => { console.log('focus out from developer console') }}
+        onClose={() => { console.log('closing developer console') }}
+    />
+);
+```
+
+## Props
+
+```ts
+type Props = {
+    storage?: IStorage;
+    maxConsoleQueueLength?: number;
+    maxNetworkQueueLength?: number;
+    instrumentOptions?: Partial<InstrumentOptions>;
+    preserveScrollOnUpdate?: boolean;
+    onShow?: () => void;
+    onFocusOut?: () => void;
+    onClose?: () => void;
+};
+```
+
+- `storage` - Currently used storage instance (default: [LocalStorage](../../storage/README.md)).
+- `maxConsoleQueueLength` - Maximum number of stored and displayed console logs (default: `100`).
+- `maxNetworkQueueLength` - Maximum number of stored and displayed network requests (default: `50`).
+- `instrumentOptions` - An option to disable overriding of any of the Web APIs.
+
+    ```ts
+    interface InstrumentOptions {
+        onerror: boolean;
+        console: boolean;
+        fetch: boolean;
+        xhr: boolean;
+    }
+    ```
+
+- `preserveScrollOnUpdate` - Preserves vertical scroll when a new item is added to the console, when disabled will always jump to newest item.
+- `onShow`: - Function called when Developer Console is showed. It can be used e.g. for HBBTV device key mapping.
+- `onFocusOut`: - Function for custom focus out handling (default: focus on previous focused element).
+- `onClose` - Function called when Developer Console is closed.
+
+## Controls
+
+Key codes for Developer Console control:
+
+- `NUM_0` - Hides opened panel.
+- `NUM_1` - Displays console panel.
+- `NUM_2` - Displays network panel.
+- `NUM_3` - Reloads application.
+- `NUM_4` - Clears storage.
+- `YELLOW` - Focus/Focus out Developer Console.
+- `RED` - Clears the data of the opened panel.
+
+## Styles
+
+Package provides styles for `720p/1080p` resolutions by default.
+To import packages without prepared styles, use the `unstyled` import.
+
+```tsx
+import { DeveloperConsole } from '@24i/bigscreen-sdk/developer-tools/DeveloperConsole/unstyled';
+```

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

@@ -0,0 +1,3 @@
+import '../src/DeveloperConsole/styles';
+
+export { DeveloperConsole, initDeveloperConsole } from '../src/DeveloperConsole';

package/packages/developer-tools/DeveloperConsole/unstyled.ts

@@ -0,0 +1 @@
+export { DeveloperConsole, initDeveloperConsole } from '../src/DeveloperConsole';

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

@@ -0,0 +1,54 @@
+---
+id: README
+title: Developer Tools Service
+hide_title: true
+sidebar_label: Developer Tools Service
+---
+
+# Developer Tools Service
+
+The Developer Tools Service is a JSX component for managing and displaying Developer Tools. It captures keyDown
+events on document DOM element and displays a list of Developer Tool components when a combination of remote
+control buttons are pressed.
+
+## Usage
+
+```tsx
+import { DeveloperToolsService } from '@24i/bigscreen-sdk/developer-tools/DeveloperToolsService';
+import { TechnicalInfo } from '@24i/bigscreen-sdk/developer-tools/TechnicalInfo';
+import { DeveloperConsole } from '@24i/bigscreen-sdk/developer-tools/DeveloperConsole';
+import { EnvironmentSelection } from '@24i/bigscreen-sdk/developer-tools/EnvironmentSelection';
+import { PlayerDebugWindow } from '@24i/bigscreen-sdk/developer-tools/PlayerDebugWindow';
+
+const App = () => (
+    <div id="app">
+        <DeveloperToolsService keySequence={[RED, GREEN, BLUE]}>
+            <TechnicalInfo getDataProvider={getDataProvider} />
+            <DeveloperConsole />
+            <EnvironmentSelection />
+            <PlayerDebugWindow playerInstance={playerInstance} />
+        </DeveloperToolsService>
+    </div>
+);
+```
+
+## Props
+
+```ts
+type Props = {
+    children?: JSX.Element | JSX.Element[];
+    keySequence?: Array<number>;
+};
+```
+
+- `children` - Developer Tool components.
+- `keySequence` - Sequence of key codes triggers displaying of the developer tools list (default: [BLUE, YELLOW, GREEN, BLUE, YELLOW]).
+
+## Styles
+
+Package provides styles for `720p/1080p` resolutions by default.
+To import packages without prepared styles, use the `unstyled` import.
+
+```tsx
+import { DeveloperToolsService } from '@24i/bigscreen-sdk/developer-tools/DeveloperToolsService/unstyled';
+```

package/packages/developer-tools/DeveloperToolsService/index.ts

@@ -0,0 +1,3 @@
+import '../src/DeveloperToolsService/styles';
+
+export { DeveloperToolsService } from '../src/DeveloperToolsService';

package/packages/developer-tools/DeveloperToolsService/unstyled.ts

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

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

@@ -0,0 +1,77 @@
+---
+id: README
+title: Environment Selection
+hide_title: true
+sidebar_label: Environment Selection
+---
+
+# Environment Selection
+
+The component that allows to select runtime environment configuration in the application.
+
+## Environment Configuration
+
+The configuration file must have the following structure:
+
+```json
+{
+    "environments":[
+        {
+            "name":"production",
+            "configuration":{
+                // production config...
+            }
+        },
+        {
+            "name":"development",
+            "configuration":{
+                // development config...
+            }
+        },
+        // more environment configurations...
+    ]
+}
+```
+
+The first environment configuration is used as the default and should be `production`.
+
+The initialization of the environment configuration is done using the `initEnvironmentConfig` function
+where the initialized instance of the [Runtime Config](../../runtime-config/README.md) is passed
+as a parameter.
+
+## Usage
+
+```tsx
+import { config } from '@24i/bigscreen-sdk/runtime-config';
+import { initEnvironmentConfig, EnvironmentSelection } from '@24i/bigscreen-sdk/developer-tools/EnvironmentSelection';
+
+await config.init('./config.json');
+initEnvironmentConfig(config);
+
+const App = () => (
+    <div id="app">
+        <EnvironmentSelection 
+            onClose={() => { console.log('closing environment selection list') }} 
+        />
+    </div>
+);
+```
+
+## Props
+
+```ts
+type Props = {
+    onClose?: () => void;
+};
+```
+
+- `onClose` - Function called when Environment Selection List is closed.
+
+## Styles
+
+Package provides styles for `720p/1080p` resolutions by default.
+To import packages without prepared styles, use the `unstyled` import.
+
+```tsx
+import { initEnvironmentConfig, EnvironmentSelection } from '@24i/bigscreen-sdk/developer-tools/EnvironmentSelection/unstyled';
+```

package/packages/developer-tools/EnvironmentSelection/index.ts

@@ -0,0 +1,3 @@
+import '../src/EnvironmentSelection/styles';
+
+export { EnvironmentSelection, initEnvironmentConfig } from '../src/EnvironmentSelection';

package/packages/developer-tools/EnvironmentSelection/unstyled.ts

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

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

@@ -0,0 +1,65 @@
+---
+id: README
+title: Player Debug Window
+hide_title: true
+sidebar_label: Player Debug Window
+---
+
+# Player Debug Window
+
+Player Debug Window renders debug information about the player and the current video stream.
+
+The amount of information depends on several aspects:
+
+- Used player
+- Type of the streaming protocol (MPEG-DASH, HLS, Smooth Streaming, progressive download, etc.)
+- Used type of stream (VOD, live, advertisement, etc.)
+
+## Usage
+
+```tsx
+import { PlayerDebugWindow } from '@24i/bigscreen-sdk/developer-tools/PlayerDebugWindow';
+
+const App = () => (
+    <PlayerDebugWindow
+        playerInstance={playerInstance}
+        updateInterval={1500}
+        onClose={() => { console.log('closing player debug window') }}
+    />
+);
+```
+
+If you initialize the Player Debug Window component before the player instance, you can use `setPlayerInstance` method.
+
+```tsx
+const playerDebugWindowRef = createRef<PlayerDebugWindow>();
+
+const App = () => (
+    <PlayerDebugWindow ref={playerDebugWindowRef} />
+);
+
+playerDebugWindowRef.current?.setPlayerInstance(playerInstance);
+```
+
+## Props
+
+```ts
+type Props = {
+    playerInstance?: PlayerBase<any>;
+    updateInterval?: number;
+    onClose?: () => void;
+};
+```
+
+- `playerInstance` - The instance of used player engine.
+- `updateInterval` - Setting for the debug information update interval in ms (default: `1000`).
+- `onClose` - Function called on view is closed.
+
+## Styles
+
+Package provides styles for `720p/1080p` resolutions by default.
+To import packages without prepared styles, use the `unstyled` import.
+
+```tsx
+import { PlayerDebugWindow } from '@24i/bigscreen-sdk/developer-tools/PlayerDebugWindow/unstyled';
+```

package/packages/developer-tools/PlayerDebugWindow/index.ts

@@ -0,0 +1,3 @@
+import '../src/PlayerDebugWindow/styles';
+
+export { PlayerDebugWindow } from '../src/PlayerDebugWindow';

package/packages/developer-tools/PlayerDebugWindow/unstyled.ts

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

package/packages/developer-tools/README.md

@@ -0,0 +1,24 @@
+---
+id: README
+title: Developer Tools
+hide_title: true
+sidebar_label: Developer Tools
+---
+
+# Developer Tools
+
+This package contains developer tools for easier debugging or detection of bugs in the application. In addition to
+these tools, it also includes a [Developer Tools Service](./DeveloperToolsService/README.md) component for easier
+management of multiple developer tools.
+
+Each Developer Tool component can be used separately but it is recommended to use it together with Developer Tools Service component.
+
+## List of Developer Tools
+
+All Developer Tools must implement the [IDeveloperTool](./src/IDeveloperTool.ts) interface.
+
+- [Developer Tools Service](./DeveloperToolsService/README.md)
+- [Technical Information](./TechnicalInfo/README.md)
+- [Developer Console](./DeveloperConsole/README.md)
+- [Environment Selection](./EnvironmentSelection/README.md)
+- [Player Debug Window](./PlayerDebugWindow/README.md)

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

@@ -0,0 +1,90 @@
+---
+id: README
+title: Technical Info
+hide_title: true
+sidebar_label: Technical Info
+---
+
+# Technical Info
+
+The component displays technical information which is useful for customer
+support for resolving errors, especially in production environment.
+
+## Usage
+
+```tsx
+import { TechnicalInfoProvider, TechnicalInfo } from '@24i/bigscreen-sdk/developer-tools/TechnicalInfo';
+
+const getDataProvider = () => (
+    new TechnicalInfoProvider({
+        userName: 'Jožin',
+        profileName: '',
+        appVersion: 'v1.0.2',
+        flavour: 'tv2_basic_720',
+        appResolution: '1280x720',
+        backendBaseUrl: 'http://tv2.com/api',
+        device: device,
+        storage: storage,
+        player: HTML5Video,
+    });
+);
+
+const onClose = () => { /* set focus back to app, e.g. Router.focus() */ }
+
+const App = () => (
+    <TechnicalInfo getDataProvider={getDataProvider} onClose={onClose} />
+);
+```
+
+## Props
+
+```ts
+type Props = {
+    getDataProvider: () => ITechnicalInfoProvider;
+    onClose?: () => void;
+};
+```
+
+- `getDataProvider` - Function returns TechnicalInfoProvider instance
+- `onClose` - Function called on view is closed. Typically, it should be used for returning focus back to your app.
+
+## TechnicalInfoProvider
+
+The default `TechnicalInfoProvider` data model providing basic
+technical information data to display. It collects almost all technical info
+data by itself, but still needed to pass minimal config object to constructor.
+
+- `constructor(options)`
+  - `options` - An object brings technical information data. The available properties are:
+    - `userName`*: string* - User name. Displayed `"ANONYMOUS"` if empty string.
+    - `profileName`*: string* - Profile name.
+    - `appVersion`*: string* - Version of application.
+    - `flavour`*: string* - Flavor of application.
+    - `appResolution`*: string* - App resolution, e.g "1280x720".
+    - `backendBaseUrl`*: string* - OVP/CMS back-end base URL.
+    - `device`*: DeviceBase* - Current used device instance ([DeviceBase](https://github.com/24i/smartapps-bigscreen-sdk/blob/development/packages/driver-base/DeviceBase.md) interface).
+    - `storage`*: IStorage* - Current used storage instance ([IStorage](https://github.com/24i/smartapps-bigscreen-sdk/blob/development/packages/storage/src/types.ts) interface).
+    - `player`*: typeof PlayerBase* - Current used player engine class ([PlayerBase](https://github.com/24i/prd-player-js/blob/develop/packages/engine%40base/src/PlayerBase.ts) interface).
+    - `timeProvider`*: () => number* (default: Date.now) - optional, Function
+        returns the milliseconds elapsed since the UNIX epoch.
+
+Implements interface `ITechnicalInfoProvider`:
+
+```ts
+interface ITechnicalInfoProvider {
+    getInfoData(): Promise<TechnicalInfoData>;
+}
+
+type TechnicalInfoData = Array<{ label: string, value: string }>;
+```
+
+- `getInfoData` - Returns promise with output data to be displayed.
+
+## Styles
+
+Package provides styles for `720p/1080p` resolutions by default.
+To import packages without prepared styles, use the `unstyled` import.
+
+```tsx
+import { TechnicalInfoProvider, TechnicalInfo } from '@24i/bigscreen-sdk/developer-tools/TechnicalInfo/unstyled';
+```

package/packages/developer-tools/TechnicalInfo/index.ts

@@ -0,0 +1,9 @@
+import '../src/TechnicalInfo/styles';
+
+export { TechnicalInfoProvider, TechnicalInfoDetail, TechnicalInfo } from '../src/TechnicalInfo';
+export type {
+    TechnicalInfoData,
+    ITechnicalInfoProvider,
+    Translations,
+    TranslationKeys,
+} from '../src/TechnicalInfo';

package/packages/developer-tools/TechnicalInfo/unstyled.ts

@@ -0,0 +1,6 @@
+export {
+    ITechnicalInfoProvider,
+    TechnicalInfoProvider,
+    TechnicalInfoDetail,
+    TechnicalInfo,
+} from '../src/TechnicalInfo';

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

@@ -0,0 +1,16 @@
+import { FC, Reference, forwardRef } from '@24i/bigscreen-sdk/jsx';
+
+type Props = {
+    id: string;
+    key: number | string;
+    text: string;
+};
+
+export const ControlButton: FC<Props> = forwardRef((
+    { id, key, text }: Props, ref: Reference,
+) => (
+    <div id={id} className="control-item" ref={ref}>
+        <span className="control-item-button">{ key }</span>
+        <span className="control-item-action">{ text }</span>
+    </div>
+));