@24i/bigscreen-sdk 1.0.40-alpha.2687 → 1.0.41-alpha.2695

package/packages/logger/src/types.ts

@@ -1,46 +1,46 @@
-export interface ILogger {
-    debug: LogMethod;
-    info: LogMethod;
-    warn: LogMethod;
-    error: LogMethod;
-}
-
-type LogMethod = (message: string, options?: LogOptions) => void;
-
-export interface LogOptions {
-    category?: LogCategory;
-    additionalData?: any;
-}
-
-export interface ServiceLogOptions extends LogOptions {
-    onlyLoggers?: string[],
-}
-
-export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
-
-export interface LevelConfig {
-    loggerName: string;
-    levels: LogLevel[];
-}
-
-export type LogCategory = 'ui' | 'api' | 'player' | 'middleware' | 'error' | 'debug';
-
-export interface SentryLoggerEnvironment {
-    [key: string]: string;
-    device: string;
-    platformName: string;
-    platformVersion: string;
-    serialNumber: string;
-    firmware: string;
-    macAddress: string;
-    flavour: string;
-    resolution: string;
-    player: string;
-}
-
-export interface XhrBreadcrumbData {
-    status_code: number;
-    method: string;
-    url: string;
-    body?: string;
-}
+export interface ILogger {
+    debug: LogMethod;
+    info: LogMethod;
+    warn: LogMethod;
+    error: LogMethod;
+}
+
+type LogMethod = (message: string, options?: LogOptions) => void;
+
+export interface LogOptions {
+    category?: LogCategory;
+    additionalData?: any;
+}
+
+export interface ServiceLogOptions extends LogOptions {
+    onlyLoggers?: string[],
+}
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface LevelConfig {
+    loggerName: string;
+    levels: LogLevel[];
+}
+
+export type LogCategory = 'ui' | 'api' | 'player' | 'middleware' | 'error' | 'debug';
+
+export interface SentryLoggerEnvironment {
+    [key: string]: string;
+    device: string;
+    platformName: string;
+    platformVersion: string;
+    serialNumber: string;
+    firmware: string;
+    macAddress: string;
+    flavour: string;
+    resolution: string;
+    player: string;
+}
+
+export interface XhrBreadcrumbData {
+    status_code: number;
+    method: string;
+    url: string;
+    body?: string;
+}

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

@@ -1,25 +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';
-};
+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

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

package/packages/lottie-animations/README.md

@@ -1,217 +1,217 @@
----
-id: README
-title: Lottie animations
-hide_title: true
-sidebar_label: Lottie animations
----
-
-# Lottie animations
-This is simple library for creating svg (or canvas/html based) animations with Lottie framework (Bodymovin).
-
-Lottie docs: https://github.com/airbnb/lottie-web
-
-## Creating animation
-There is `LottieAnimation` component, which is rendering DIV element wrapper and Lottie animation into it. This is the simplest way how to create LottieAnimation:
-
-```tsx
-<LottieAnimation
-    className="tv2-logo-animation"
-    options={{
-        animationData: tv2logo,
-    }}
-/>
-```
-
-This will create wrapper element with class *tv2-logo-animation*, Lottie animation item and load your animation into wrapper element. In this state, the animation is SVG based, not looped, and is stopped on the first frame.
-
-Component is creating animation item instance in `componentDidMount` method, when the wrapper element is created. In `componentWillUnmount` the animation instance is destroyed.
-
-All animations have set quality to low by default for best performance on TV devices. Quality could be set with Lottie global method for all animations.
-
-## Props
-
-```ts
-type Props = {
-    options: LottieOptions; // Lottie options, without container parameter
-    events?: LottieEvents;  // Lottie events
-    className?: string;     // className for wrapper element
-    [key: string]: any;     // any other parameter inserted into wrapper element
-};
-```
-
-## Types in props
-```ts
-// Record type for events, AnimationEventCallback type is not generic and is any
-type LottieEvents = Partial<Record<AnimationEventName, AnimationEventCallback>>;
-
-// Lottie config types without animation container parameter, because component is rendering one by itself
-type LottieOptions = Omit<AnimationConfigWithPath & AnimationConfigWithData, 'container'>;
-```
-
-## Options
-`LottieOptions` are all available Lottie options, only container is excluded. These are some most important options:
-
-```ts
-{
-    animationData?: Object; // an Object with the exported animation data
-    path?: string; // the relative path to the animation JSON object (animationData and path are mutually exclusive)
-    loop?: boolean | number;
-    autoplay?: boolean; // it will start playing as soon as it is ready
-    renderer?: 'svg' | 'canvas' | 'html';
-    ... // see Types for more info (search Lottie index file)
-}
-```
-
-Default options for every `LottieAnimation` component are:
-```ts
-{
-    renderer: 'svg',
-    loop: false,
-    autoplay: false,
-}
-```
-
-There are more specific options, for example `rendererSettings` in which you can set renderer in [more detail](https://github.com/airbnb/lottie-web#other-loading-options).
-
-## Events
-Lottie is providing a number of events for your animation. In the `LottieAnimation` component, these are available through prop called `events`. These are then bound to the animation after its creation.
-
-These are events which you can use:
- - complete
- - loopComplete
- - enterFrame
- - segmentStart
- - config_ready (when initial config is done)
- - data_ready (when all parts of the animation have been loaded)
- - data_failed (when part of the animation can not be loaded)
- - loaded_images (when all image loads have either succeeded or errored)
- - DOMLoaded (when elements have been added to the DOM)
- - destroy
-
-### Usage
-```tsx
-<LottieAnimation
-    options={{
-        animationData: tv2logo,
-    }}
-    events={{
-        data_ready: () => {
-            console.log('Animation data are ready')
-        },
-        complete: () => {
-            console.log('Animation complete')
-        },
-        destroy: () => {
-            console.log('Animation is destroyed')
-        },
-    }}
-/>
-```
-
-## Creating animation with Lottie global method
-Lottie is exporting a global instance which provides various methods for working with animations. However, the preferred way in our SDK is to use the `LottieAnimation` component and not Lottie itself. To access Lottie in your project you will need to import Lottie package by yourself. Checkout [Lottie docs](https://github.com/airbnb/lottie-web#lottie-has-several-global-methods-that-will-affect-all-animations) to explore all global methods.
-
-Example of using the global Lottie instance (This will return `AnimationItem` instance on which you can perform any actions you want):
-```ts
-Lottie.loadAnimation({
-  name: 'tv2_logo' // animation name which you can use to access animation instance via Lottie global methods
-  container: element, // the dom element that will contain the animation, it needs to be included unlike in LottieAnimation component
-  renderer: 'svg',
-  loop: true,
-  autoplay: true,
-  path: 'data.json' // the path to the animation json
-});
-```
-
-# Controlling the animation
-
-`LottieAnimation` component implements method wrappers only with the most important controls.
-
-### play
-
-***
-### stop
-
-***
-### pause
-
-***
-### setSpeed(speed)
-- `speed`: 1 is normal speed.
-
-***
-### goToAndStop(value, isFrame)
-- `value`: numeric value.
-- `isFrame`: defines if first argument is a time based value or a frame based (default false).
-
-***
-### goToAndPlay(value, isFrame)
-- `value`: numeric value.
-- `isFrame`: defines if first argument is a time based value or a frame based (default false).
-
-***
-### setDirection(direction)
-- `direction`: 1 is forward, -1 is reverse.
-***
-### getDuration(inFrames)
-- `inFrames`:  If true, returns duration in frames, if false, in seconds.
-***
-### destroy()
-***
-
-For other methods provided by Lottie, global methods and more detailed explanation, go [here](https://github.com/airbnb/lottie-web/blob/master/README.md#usage).
-
-# Types
-
-Lottie `AnimationItem` provides a lot of other properties and functions but for most use cases, they're not needed. If you would need access to the animation item itself, you can use `getAnimationItem` method in `LottieAnimation` component.
-
-Full type definition:
-
-```ts
-export type AnimationItem = {
-    name: string;
-    isLoaded: boolean;
-    currentFrame: number;
-    currentRawFrame: number;
-    firstFrame: number;
-    totalFrames: number;
-    frameRate: number;
-    frameMult: number;
-    playSpeed: number;
-    playDirection: number;
-    playCount: number;
-    isPaused: boolean;
-    autoplay: boolean;
-    loop: boolean;
-    renderer: any;
-    animationID: string;
-    assetsPath: string;
-    timeCompleted: number;
-    segmentPos: number;
-    isSubframeEnabled: boolean;
-    segments: AnimationSegment | AnimationSegment[];
-    play(name?: string): void;
-    stop(name?: string): void;
-    togglePause(name?: string): void;
-    destroy(name?: string): void;
-    pause(name?: string): void;
-    goToAndStop(value: number, isFrame?: boolean, name?: string): void;
-    goToAndPlay(value: number, isFrame?: boolean, name?: string): void;
-    includeLayers(data: any): void;
-    setSegment(init: number, end: number): void;
-    resetSegments(forceFlag: boolean): void;
-    hide(): void;
-    show(): void;
-    resize(): void;
-    setSpeed(speed: number): void;
-    setDirection(direction: AnimationDirection): void;
-    playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
-    setSubframe(useSubFrames: boolean): void;
-    getDuration(inFrames?: boolean): number;
-    triggerEvent<T = any>(name: AnimationEventName, args: T): void;
-    addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void;
-    removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void;
-}
-```
-
-Lottie is using various of types, but only few of them are exported from the package. If you would work with `LottieAnimation` component, they are not requested, but if needed, you can look into the [index file](https://github.com/airbnb/lottie-web/blob/master/index.d.ts) in Lottie git.
+---
+id: README
+title: Lottie animations
+hide_title: true
+sidebar_label: Lottie animations
+---
+
+# Lottie animations
+This is simple library for creating svg (or canvas/html based) animations with Lottie framework (Bodymovin).
+
+Lottie docs: https://github.com/airbnb/lottie-web
+
+## Creating animation
+There is `LottieAnimation` component, which is rendering DIV element wrapper and Lottie animation into it. This is the simplest way how to create LottieAnimation:
+
+```tsx
+<LottieAnimation
+    className="tv2-logo-animation"
+    options={{
+        animationData: tv2logo,
+    }}
+/>
+```
+
+This will create wrapper element with class *tv2-logo-animation*, Lottie animation item and load your animation into wrapper element. In this state, the animation is SVG based, not looped, and is stopped on the first frame.
+
+Component is creating animation item instance in `componentDidMount` method, when the wrapper element is created. In `componentWillUnmount` the animation instance is destroyed.
+
+All animations have set quality to low by default for best performance on TV devices. Quality could be set with Lottie global method for all animations.
+
+## Props
+
+```ts
+type Props = {
+    options: LottieOptions; // Lottie options, without container parameter
+    events?: LottieEvents;  // Lottie events
+    className?: string;     // className for wrapper element
+    [key: string]: any;     // any other parameter inserted into wrapper element
+};
+```
+
+## Types in props
+```ts
+// Record type for events, AnimationEventCallback type is not generic and is any
+type LottieEvents = Partial<Record<AnimationEventName, AnimationEventCallback>>;
+
+// Lottie config types without animation container parameter, because component is rendering one by itself
+type LottieOptions = Omit<AnimationConfigWithPath & AnimationConfigWithData, 'container'>;
+```
+
+## Options
+`LottieOptions` are all available Lottie options, only container is excluded. These are some most important options:
+
+```ts
+{
+    animationData?: Object; // an Object with the exported animation data
+    path?: string; // the relative path to the animation JSON object (animationData and path are mutually exclusive)
+    loop?: boolean | number;
+    autoplay?: boolean; // it will start playing as soon as it is ready
+    renderer?: 'svg' | 'canvas' | 'html';
+    ... // see Types for more info (search Lottie index file)
+}
+```
+
+Default options for every `LottieAnimation` component are:
+```ts
+{
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+}
+```
+
+There are more specific options, for example `rendererSettings` in which you can set renderer in [more detail](https://github.com/airbnb/lottie-web#other-loading-options).
+
+## Events
+Lottie is providing a number of events for your animation. In the `LottieAnimation` component, these are available through prop called `events`. These are then bound to the animation after its creation.
+
+These are events which you can use:
+ - complete
+ - loopComplete
+ - enterFrame
+ - segmentStart
+ - config_ready (when initial config is done)
+ - data_ready (when all parts of the animation have been loaded)
+ - data_failed (when part of the animation can not be loaded)
+ - loaded_images (when all image loads have either succeeded or errored)
+ - DOMLoaded (when elements have been added to the DOM)
+ - destroy
+
+### Usage
+```tsx
+<LottieAnimation
+    options={{
+        animationData: tv2logo,
+    }}
+    events={{
+        data_ready: () => {
+            console.log('Animation data are ready')
+        },
+        complete: () => {
+            console.log('Animation complete')
+        },
+        destroy: () => {
+            console.log('Animation is destroyed')
+        },
+    }}
+/>
+```
+
+## Creating animation with Lottie global method
+Lottie is exporting a global instance which provides various methods for working with animations. However, the preferred way in our SDK is to use the `LottieAnimation` component and not Lottie itself. To access Lottie in your project you will need to import Lottie package by yourself. Checkout [Lottie docs](https://github.com/airbnb/lottie-web#lottie-has-several-global-methods-that-will-affect-all-animations) to explore all global methods.
+
+Example of using the global Lottie instance (This will return `AnimationItem` instance on which you can perform any actions you want):
+```ts
+Lottie.loadAnimation({
+  name: 'tv2_logo' // animation name which you can use to access animation instance via Lottie global methods
+  container: element, // the dom element that will contain the animation, it needs to be included unlike in LottieAnimation component
+  renderer: 'svg',
+  loop: true,
+  autoplay: true,
+  path: 'data.json' // the path to the animation json
+});
+```
+
+# Controlling the animation
+
+`LottieAnimation` component implements method wrappers only with the most important controls.
+
+### play
+
+***
+### stop
+
+***
+### pause
+
+***
+### setSpeed(speed)
+- `speed`: 1 is normal speed.
+
+***
+### goToAndStop(value, isFrame)
+- `value`: numeric value.
+- `isFrame`: defines if first argument is a time based value or a frame based (default false).
+
+***
+### goToAndPlay(value, isFrame)
+- `value`: numeric value.
+- `isFrame`: defines if first argument is a time based value or a frame based (default false).
+
+***
+### setDirection(direction)
+- `direction`: 1 is forward, -1 is reverse.
+***
+### getDuration(inFrames)
+- `inFrames`:  If true, returns duration in frames, if false, in seconds.
+***
+### destroy()
+***
+
+For other methods provided by Lottie, global methods and more detailed explanation, go [here](https://github.com/airbnb/lottie-web/blob/master/README.md#usage).
+
+# Types
+
+Lottie `AnimationItem` provides a lot of other properties and functions but for most use cases, they're not needed. If you would need access to the animation item itself, you can use `getAnimationItem` method in `LottieAnimation` component.
+
+Full type definition:
+
+```ts
+export type AnimationItem = {
+    name: string;
+    isLoaded: boolean;
+    currentFrame: number;
+    currentRawFrame: number;
+    firstFrame: number;
+    totalFrames: number;
+    frameRate: number;
+    frameMult: number;
+    playSpeed: number;
+    playDirection: number;
+    playCount: number;
+    isPaused: boolean;
+    autoplay: boolean;
+    loop: boolean;
+    renderer: any;
+    animationID: string;
+    assetsPath: string;
+    timeCompleted: number;
+    segmentPos: number;
+    isSubframeEnabled: boolean;
+    segments: AnimationSegment | AnimationSegment[];
+    play(name?: string): void;
+    stop(name?: string): void;
+    togglePause(name?: string): void;
+    destroy(name?: string): void;
+    pause(name?: string): void;
+    goToAndStop(value: number, isFrame?: boolean, name?: string): void;
+    goToAndPlay(value: number, isFrame?: boolean, name?: string): void;
+    includeLayers(data: any): void;
+    setSegment(init: number, end: number): void;
+    resetSegments(forceFlag: boolean): void;
+    hide(): void;
+    show(): void;
+    resize(): void;
+    setSpeed(speed: number): void;
+    setDirection(direction: AnimationDirection): void;
+    playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
+    setSubframe(useSubFrames: boolean): void;
+    getDuration(inFrames?: boolean): number;
+    triggerEvent<T = any>(name: AnimationEventName, args: T): void;
+    addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void;
+    removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void;
+}
+```
+
+Lottie is using various of types, but only few of them are exported from the package. If you would work with `LottieAnimation` component, they are not requested, but if needed, you can look into the [index file](https://github.com/airbnb/lottie-web/blob/master/index.d.ts) in Lottie git.