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

package/packages/logger/src/loggers/SentryLogger/Sentry.ts

@@ -0,0 +1 @@
+export * as Sentry from '@sentry/browser';

package/packages/logger/src/loggers/SentryLogger/SentryLogger.ts

@@ -0,0 +1,179 @@
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { IStorage, Storage as DefaultStorage } from '@24i/bigscreen-sdk/storage';
+import { LogOptions, LogLevel, SentryLoggerEnvironment, XhrBreadcrumbData } from '../../types';
+import { getFormattedMemoryHeapInfo, getFormattedUsedLocalStorageSize } from '../../utils';
+import { LoggerBase, Config as LoggerBaseConfig } from '../LoggerBase';
+import { Sentry } from './Sentry';
+
+type Config = {
+    sentryOptions: Sentry.BrowserOptions;
+    storage?: IStorage;
+    loggerEnvironment?: SentryLoggerEnvironment;
+};
+
+const defaultConfig: LoggerBaseConfig<Partial<Config>> = {
+    name: 'SentryLogger',
+};
+
+const contextKeys = {
+    DEVICE_INFO: 'Device Info',
+    APPLICATION: 'Application',
+    MEMORY_INFO: 'Memory Info',
+    ADDITIONAL_INFO: 'Additional Info',
+    ADDITIONAL_DATA: 'Additional Data',
+};
+
+const SentryLevelsMap: Partial<Record<Sentry.SeverityLevel, LogLevel>> = {
+    debug: 'debug',
+    info: 'info',
+    warning: 'warn',
+    error: 'error',
+};
+
+export class SentryLogger extends LoggerBase {
+    private storage = DefaultStorage;
+
+    constructor(config: LoggerBaseConfig<Config>) {
+        super({ ...defaultConfig, ...config });
+        const { storage, sentryOptions, loggerEnvironment } = config;
+
+        this.init(sentryOptions);
+        if (storage) this.setStorage(storage);
+        if (loggerEnvironment) this.setLoggerEnvironment(loggerEnvironment);
+    }
+
+    init(options: Sentry.BrowserOptions) {
+        const { beforeSend, ...restOptions } = options;
+        Sentry.init({
+            ...restOptions,
+            beforeSend: async (event: Sentry.Event, hint: Sentry.EventHint) => {
+                if (this.mute) return null;
+                await this.sendMemoryInfo(event);
+                return beforeSend ? beforeSend(event, hint) : event;
+            },
+        });
+    }
+
+    debug(message: string, options?: LogOptions) {
+        this.logMessage('debug', message, options);
+    }
+
+    info(message: string, options?: LogOptions) {
+        this.logMessage('info', message, options);
+    }
+
+    warn(message: string, options?: LogOptions) {
+        this.logMessage('warning', message, options);
+    }
+
+    error(message: string, options?: LogOptions) {
+        this.logMessage('error', message, options);
+    }
+
+    setStorage(storage: IStorage) {
+        this.storage = storage;
+    }
+
+    setLoggerEnvironment(loggerEnvironment: SentryLoggerEnvironment) {
+        const {
+            device,
+            platformName,
+            platformVersion,
+            serialNumber,
+            firmware,
+            macAddress,
+            flavour,
+            resolution,
+            player,
+            ...moreInfo
+        } = loggerEnvironment;
+        const application = { flavour, resolution, player };
+        const deviceInfo = {
+            device, platformName, platformVersion, serialNumber, firmware, macAddress,
+        };
+
+        Sentry.configureScope((scope) => {
+            scope.setContext(contextKeys.APPLICATION, application);
+            scope.setContext(contextKeys.DEVICE_INFO, deviceInfo);
+            if (Object.keys(moreInfo).length !== 0) {
+                scope.setContext(contextKeys.ADDITIONAL_INFO, moreInfo);
+            }
+        });
+        forEach(Object.keys(loggerEnvironment), (key) => this.setTag(key, loggerEnvironment[key]));
+    }
+
+    setUser(user: Sentry.User) {
+        Sentry.configureScope((scope) => {
+            scope.setUser(user);
+        });
+    }
+
+    removeUser() {
+        Sentry.configureScope((scope) => {
+            scope.setUser(null);
+        });
+    }
+
+    addBreadcrumb(breadcrumb: Sentry.Breadcrumb) {
+        Sentry.configureScope((scope) => {
+            scope.addBreadcrumb(breadcrumb);
+        });
+    }
+
+    /**
+     * An alternative option for xhr breadcrumbs
+     * The default xhr breadcrumbs integration must be disabled in init method:
+     * integrations: [ new Sentry.Integrations.Breadcrumbs({ xhr: false }) ]
+     */
+    addXhrBreadcrumb(xhrBreadcrumbData: XhrBreadcrumbData) {
+        const breadcrumb = {
+            category: 'xhr',
+            type: 'http',
+            data: xhrBreadcrumbData,
+        };
+        this.addBreadcrumb(breadcrumb);
+    }
+
+    setTag(key: string, value: string) {
+        Sentry.configureScope((scope) => {
+            scope.setTag(key, value);
+        });
+    }
+
+    clearScope() {
+        Sentry.configureScope((scope) => {
+            scope.clear();
+        });
+    }
+
+    private async sendMemoryInfo(event: Sentry.Event) {
+        const memoryHeapInfo = getFormattedMemoryHeapInfo();
+        const usedLocalStorage = await getFormattedUsedLocalStorageSize(this.storage);
+        const memoryInfo = { memoryHeapInfo, usedLocalStorage };
+        if (!event.contexts) event.contexts = {};
+        event.contexts = { ...event.contexts, ...{ [contextKeys.MEMORY_INFO]: memoryInfo } };
+    }
+
+    private async logMessage(
+        level: Partial<Sentry.SeverityLevel>,
+        message: string,
+        { category, additionalData }: LogOptions = {},
+    ) {
+        if (this.isMuted() || this.isBlockedByLevel(SentryLevelsMap[level]!)) return;
+
+        Sentry.withScope((scope) => {
+            let logMessage = message;
+            if (category) {
+                const categoryUpperCase = category.toUpperCase();
+                logMessage = `[${categoryUpperCase}] ${message}`;
+                scope.setTag('category', categoryUpperCase);
+            }
+            if (additionalData) {
+                if (additionalData.message) logMessage += ` - ${additionalData.message}`;
+                scope.setExtra(contextKeys.ADDITIONAL_DATA, JSON.stringify(additionalData));
+            }
+            Sentry.captureMessage(logMessage, level);
+        });
+        await Sentry.flush();
+    }
+}

package/packages/logger/src/loggers/SentryLogger/index.ts

@@ -0,0 +1,2 @@
+export { SentryLogger } from './SentryLogger';
+export { Sentry } from './Sentry';

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

@@ -0,0 +1,2 @@
+export { ConsoleLogger } from './ConsoleLogger';
+export { SentryLogger } from './SentryLogger';

package/packages/logger/src/types.ts

@@ -0,0 +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;
+}

package/packages/lottie-animations/README.md

@@ -0,0 +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.

package/packages/lottie-animations/src/LottieAnimation.tsx

@@ -0,0 +1,125 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import {
+    AnimationEventName,
+    AnimationItem,
+    AnimationEventCallback,
+    AnimationConfig,
+} from 'lottie-web';
+
+// for some reason import statement does not work with jest testing
+const Lottie = require('lottie-web');
+
+// default quality is low for better performance on TVs
+Lottie.setQuality('low');
+
+type AnimationEvent = [AnimationEventName, AnimationEventCallback];
+
+type AnimationConfigWithPath = AnimationConfig<'svg' | 'canvas' | 'html'> & {
+    path?: string;
+};
+
+type AnimationConfigWithData = AnimationConfig<'svg' | 'canvas' | 'html'> & {
+    animationData?: any;
+};
+
+export type LottieEvents = Partial<Record<AnimationEventName, AnimationEventCallback>>;
+
+export type LottieOptions = Omit<AnimationConfigWithPath & AnimationConfigWithData, 'container'>;
+
+type Props = {
+    options: LottieOptions;
+    events?: LottieEvents;
+    className?: string;
+    [key: string]: any;
+};
+
+const defaultOptions = {
+    renderer: 'svg',
+    loop: false,
+    autoplay: false,
+};
+
+export class LottieAnimation extends Component<Props> {
+    private animation: AnimationItem | null = null;
+
+    domRef = createRef<HTMLDivElement>();
+
+    componentDidMount() {
+        const { options } = this.props;
+        const usedOptions = { ...defaultOptions, ...options };
+        this.animation = Lottie.loadAnimation({
+            ...(usedOptions as LottieOptions),
+            container: this.domRef.current!,
+        });
+        this.bindEvents();
+    }
+
+    componentWillUnmount() {
+        this.unbindEvents();
+        this.animation!.destroy();
+    }
+
+    getAnimationItem() {
+        return this.animation!;
+    }
+
+    setDirection(direction: 1 | -1) {
+        this.animation!.setDirection(direction);
+    }
+
+    setSpeed(speed: number) {
+        this.animation!.setSpeed(speed);
+    }
+
+    play() {
+        this.animation!.play();
+    }
+
+    stop() {
+        this.animation!.stop();
+    }
+
+    pause() {
+        this.animation!.pause();
+    }
+
+    goToAndStop(value: number, isFrame = false) {
+        this.animation!.goToAndStop(value, isFrame);
+    }
+
+    goToAndPlay(value: number, isFrame = false) {
+        this.animation!.goToAndPlay(value, isFrame);
+    }
+
+    private bindEvents() {
+        const { events } = this.props;
+        if (!events) return;
+        const eventsArray = Object.entries(events) as AnimationEvent[];
+        forEach(eventsArray, ([name, event]: AnimationEvent) => {
+            this.animation!.addEventListener(name, event);
+        });
+    }
+
+    private unbindEvents() {
+        const { events } = this.props;
+        if (!events) return;
+        const eventsArray = Object.entries(events) as AnimationEvent[];
+        forEach(eventsArray, ([name, event]: AnimationEvent) => {
+            this.animation!.removeEventListener(name, event);
+        });
+    }
+
+    render() {
+        const {
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            options,
+            events,
+            /* eslint-enable @typescript-eslint/no-unused-vars */
+            ...restProps
+        } = this.props;
+        return (
+            <div ref={this.domRef} {...restProps} />
+        );
+    }
+}

package/packages/lottie-animations/src/index.ts

@@ -0,0 +1,7 @@
+export { AnimationItem } from 'lottie-web';
+
+export {
+    LottieAnimation,
+    LottieOptions,
+    LottieEvents,
+} from './LottieAnimation';

package/packages/menu/README.md

@@ -0,0 +1,90 @@
+---
+id: README
+title: Menu
+hide_title: true
+sidebar_label: Menu
+---
+
+# Menu
+This package provides unifying methods of how to handle menu functionality using
+SmartApps BIGscreen SDK. It consists of the main menu component `MenuAndContentContainer`
+and visual implementation of side menu `WhitelabelMenu`. Both components are originally
+from Whitelabel project.
+
+## MenuAndContentContainer
+Non-visual component for handling basic menu behavior such as opening the menu, closing,
+the menu, key downs and mouse handling. It is basically wrapper component around the
+actual graphic menu and the whole app content.
+
+### Props
+- children - content of the app to render
+- elementForEvents - element that the component binds event listeners to (in most cases the app root element)
+- router - reference to a Router instance for accessing current rendered scene instance
+- items - array of menu items inside the graphic menu
+- Menu - component of the actual graphic menu component (side menu, top menu, Whitelabel menu etc.)
+
+### MenuItem props
+- go - callback action to do after pressing the menu item
+- getPath - callback action to get the path that the menu item leads to
+- label - label displayed by the menu item
+- icon - optional - name of the icon displayed by the menu item
+- iconUrl - optional - url of the icon displayed by the menu item
+
+### Usage
+```tsx
+<div id="app" ref={rootDiv}>
+    <MenuAndContentContainer
+        ref={menuRef}
+        items={menuItems}
+        elementForEvents={rootDiv}
+        router={router}
+        Menu={WhitelabelMenu}
+    >
+        <Router ref={router} defaultPath={window.location.href.split('#')[1] || '/landing'}>
+            ...
+        </Router>
+    </MenuAndContentContainer>
+</div>
+```
+
+## Menu Service
+There is also a tiny service exported. This service exists to notify parts of the app that
+need to know when the menu changes its visible state. (E.g. Hiding client logo on Home scene of WL.)
+
+How to:
+```ts
+import { menuService } from '@24i/bigscreen-sdk/menu';
+
+class MyComponent extends Component<Props> {
+    componentDidMount() {
+        menuService.addEventListener('visibilitychange', this.onMenuVisibilityChange);
+    }
+
+    componentWillUnmount() {
+        menuService.removeEventListener('visibilitychange', this.onMenuVisibilityChange);
+    }
+
+    onMenuVisibilityChange = (isVisible: boolean) => {
+        // You have your answer, Daniel Jackson. I suggest you act on it.
+    };
+}
+```
+
+## WhitelabelMenu
+This is pre-implemented component of a graphic side menu. It is the exact same menu as in
+Whitelabel project with all the styles as well. Although the types are more strict
+than in Whitelabel and item component can't be replaced with another, the whole menu
+can be styled in a complete custom way.
+
+The usage is simple, `WhitelabelMenu` export is only used in `Menu` param in
+`MenuAndContentContainer` component (as above in the example). If you want to
+use Whitelabel styles (both menu and the item), use this import:
+
+```
+import '@24i/bigscreen-sdk/menu/WhitelabelMenu/styles';
+```
+
+## Custom graphic menu
+There could be also completely custom menu implementation in your app (for example top menu).
+To achieve this, follow the WhitelabelMenu implementation and use the interfaces in
+`@24i/bigscreen-sdk/menu/interface`.

package/packages/menu/WhitelabelMenu/index.ts

@@ -0,0 +1 @@
+export { SideMenu as WhitelabelMenu } from '../src/WhitelabelMenu';

package/packages/menu/WhitelabelMenu/interface.ts

@@ -0,0 +1,2 @@
+export { SideMenu as WhitelabelMenu } from '../src/WhitelabelMenu/interface';
+export { SideMenuItem as WhitelabelMenuItem } from '../src/WhitelabelMenu/SideMenuItem/interface';

package/packages/menu/WhitelabelMenu/styles.ts

@@ -0,0 +1,2 @@
+import '../src/WhitelabelMenu/styles';
+import '../src/WhitelabelMenu/SideMenuItem/styles';

package/packages/menu/interface.ts

@@ -0,0 +1,3 @@
+export {
+    Menu, MenuComponent, MenuItem, MenuProps, MenuAndContentContainer, SceneWithMenuAvailability,
+} from './src/MenuAndContentContainer/interface';