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

package/packages/announcement-banner/src/AnnouncementBanner.tsx

@@ -0,0 +1,136 @@
+import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { AnimationUtils, JSAnimations } from '@24i/bigscreen-sdk/animations';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { SECOND_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import './AnnouncementBanner.scss';
+
+type Props = {
+    messages: string[];
+    visibleLines: number;
+    heightPx: number;
+    timePerLineMs?: number;
+    className?: string;
+};
+
+export class AnnouncementBanner extends Component<Props> {
+    domRef = createRef<HTMLDivElement>();
+
+    innerDomRef = createRef<HTMLDivElement>();
+
+    animations = new JSAnimations();
+
+    messages: string[] = [];
+
+    linesTotal = 0;
+
+    scrollMax = 0;
+
+    animationTimer = createTimeout();
+
+    cycleTimer = createTimeout();
+
+    static defaultProps = {
+        className: '',
+        timePerLineMs: SECOND_IN_MS,
+    };
+
+    declare props: DeclareProps<Props, typeof AnnouncementBanner.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        this.messages = props.messages;
+    }
+
+    componentDidMount() {
+        this.resizeAndInit();
+    }
+
+    componentWillUnmount() {
+        this.clearTimers();
+    }
+
+    onFrame = (y: number) => {
+        offsetPosition(this.innerDomRef, { y });
+    };
+
+    animate = () => {
+        const { visibleLines, timePerLineMs } = this.props;
+        const animationTime = timePerLineMs * (this.linesTotal - visibleLines);
+
+        this.animations
+            .start(0, -this.scrollMax, animationTime, AnimationUtils.linear)
+            .onFrame(this.onFrame);
+    };
+
+    resetCycle = () => {
+        this.onFrame(0);
+        this.startCycle();
+    };
+
+    updateMessages(messages: string[]) {
+        this.clearTimers();
+        this.animations.animationRunning = false;
+        this.animations.frameCallback = undefined;
+        this.onFrame(0);
+        this.messages = messages;
+        this.clearMount(
+            messages.map((message) => (
+                <div className="message">
+                    {message}
+                </div>
+            )),
+            this.innerDomRef,
+        );
+        this.resizeAndInit();
+    }
+
+    resizeAndInit() {
+        if (!this.domRef.current || !this.innerDomRef.current) return;
+
+        const { visibleLines, heightPx } = this.props;
+        const lineHeightPx = heightPx / visibleLines;
+        this.innerDomRef.current.style.lineHeight = `${lineHeightPx}px`;
+        const { height: innerHeightPx } = this.innerDomRef.current.getBoundingClientRect();
+
+        this.scrollMax = innerHeightPx - heightPx;
+        this.linesTotal = Math.round(innerHeightPx / lineHeightPx);
+
+        if (this.linesTotal > visibleLines) this.startCycle();
+    }
+
+    clearTimers() {
+        this.animationTimer.clear();
+        this.cycleTimer.clear();
+    }
+
+    startCycle() {
+        const { visibleLines, timePerLineMs } = this.props;
+        const timeToAnimation = visibleLines * timePerLineMs;
+        const cycleTime = timePerLineMs * (this.linesTotal + visibleLines);
+
+        this.clearTimers();
+        this.animationTimer.set(this.animate, timeToAnimation);
+        this.cycleTimer.set(this.resetCycle, cycleTime);
+    }
+
+    render() {
+        const { className, heightPx } = this.props;
+        const { messages } = this;
+        return (
+            <div
+                style={{ height: `${heightPx}px` }}
+                className={`announcement-banner-outer ${className}`}
+                ref={this.domRef}
+            >
+                <div className="announcement-banner-inner" ref={this.innerDomRef}>
+                    {messages.map((message) => (
+                        <div className="message">
+                            {message}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}

package/packages/announcement-banner/src/index.ts

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

package/packages/async-image/README.md

@@ -0,0 +1,47 @@
+---
+id: README
+title: AsyncImage
+hide_title: true
+sidebar_label: AsyncImage
+---
+
+# AsyncImage
+This component provides the functionality of asynchronous image loading and displaying.
+Image starts loading after component is rendered in `componendDidMount` method.
+During loading, previous image is removed, so there is visible feedback, when new
+image is being loaded. Image is set as component's div `backgroundImage` property.
+
+## Props
+```ts
+export type Props = {
+    src: string; // url of the image
+    clearBeforeLoading?: boolean;  // optional - default true, when it's false, image is not removed before new loading
+    onImageLoad?: (src: string) => void; // optional - callback triggered when image is loaded and displayed
+    onImageError?: (src: string) => void; // optional - callback triggered when there is error during loading
+} & React.HTMLAttributes<HTMLDivElement>;
+```
+
+Props are supporting `HTMLAttributes`, so you can work with AsyncImage as you work with regular div.
+
+## Image updating
+Component provides only one method for the manipulation with the image:
+
+```ts
+updateImage(src: string): void
+```
+
+Under the hood, there is only one `Image` instance for image loading, so if AsyncImage
+is updated before previous image is loaded, previous request is canceled and current
+image is loaded, so there are no unfinished requests in the background.
+
+## Usage
+
+```tsx
+<AsyncImage
+    ref={this.image}
+    src={"http://readme.com/images/epv/iamyourfather.png"}
+    onImageLoad={() => {
+        console.log(`No. That's not true. That's impossible!`);
+    }}
+/>
+```

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

@@ -0,0 +1,96 @@
+import { createRef, Component, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+
+export type Props = {
+    src: string;
+    clearBeforeLoading?: boolean;
+    onImageLoad?: (src: string) => void;
+    onImageError?: (src: string) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export class AsyncImage extends Component<Props> {
+    domRef = createRef<HTMLDivElement>();
+
+    src = '';
+
+    image: HTMLImageElement = new Image();
+
+    isCleared = true;
+
+    static defaultProps = {
+        clearBeforeLoading: true,
+    };
+
+    declare props: DeclareProps<Props, typeof AsyncImage.defaultProps>;
+
+    constructor(props: Props) {
+        super(props);
+        this.image.onload = this.onLoad;
+        this.image.onerror = this.onError;
+    }
+
+    componentDidMount() {
+        const { src } = this.props;
+        this.updateImage(src);
+    }
+
+    private readonly onLoad = () => {
+        if (this.isMounted) {
+            const { onImageLoad } = this.props;
+            this.domRef.current!.style.backgroundImage = `url(${this.src})`;
+            this.isCleared = false;
+            if (typeof onImageLoad === 'function') {
+                onImageLoad(this.src);
+            }
+        }
+    };
+
+    private readonly onError = () => {
+        if (this.isMounted) {
+            const { onImageError } = this.props;
+            this.clearImage();
+            if (typeof onImageError === 'function') {
+                onImageError(this.src);
+            }
+        }
+    };
+
+    private clearImage() {
+        if (!this.isCleared) {
+            this.domRef.current!.style.backgroundImage = '';
+            this.isCleared = true;
+        }
+    }
+
+    updateImage(src: string) {
+        if (src === this.src) return;
+        if (!src) {
+            this.src = '';
+            this.image.src = '';
+            this.clearImage();
+        } else {
+            this.src = src;
+            this.loadImage(src);
+        }
+    }
+
+    private loadImage(src: string) {
+        const { props: { clearBeforeLoading }, image } = this;
+        image.src = src;
+        if (clearBeforeLoading === true && !image.complete) {
+            this.clearImage();
+        }
+    }
+
+    render() {
+        const {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            src, clearBeforeLoading, onImageLoad, onImageError, ...restProps
+        } = this.props;
+        return (
+            <div
+                ref={this.domRef}
+                {...restProps}
+            />
+        );
+    }
+}

package/packages/async-image/src/index.ts

@@ -0,0 +1,2 @@
+export { AsyncImage } from './AsyncImage';
+export type { Props } from './AsyncImage';

package/packages/conviva/README.md

@@ -0,0 +1,48 @@
+---
+id: README
+title: Conviva
+hide_title: true
+sidebar_label: Conviva
+---
+
+# Conviva
+This package contains conviva integrations.
+If a specific integration is missing feel free to add it.
+
+## Conviva SDK utilities
+1. Conviva Type - conviva object will be available on window object.
+To add Conviva SDK type to it just add the following code to a root or near root file in you project, something like index.ts.
+This will just extend window object for typechecking, no changes in javascript code.
+```typescript
+import type { ConvivaSDK } from '@24i/bigscreen-sdk/conviva'; // type keyword not required
+
+declare global {
+    interface Window {
+        Conviva: ConvivaSDK;
+    }
+}
+```
+2. Conviva Mock - if you need some Conviva SDK variables in a project you can use ConvivaMock provided by this package.
+```typescript
+import { ConvivaMock } from '@24i/bigscreen-sdk/conviva/convivaMock';
+
+(global as any).Conviva = ConvivaMock;
+```
+
+## THEO Player
+Conviva for THEOplayer uses [Conviva Connector](https://github.com/THEOplayer/sample-conviva-analytics-html5-sdk) developed by THEOplayer, conviva_player_metadata_plugin.js to be more precise.
+Currently used conviva version is 4.0.15 and it is included in this package.
+It was downloaded from [THEOplayer CDN](https://cdn.theoplayer.com/conviva/conviva-4.0.15.js), only modification was changing `this` to `window` in first function call (Ln3,Col45 in 4.0.15).
+
+### Usage
+2. Start tracking with `startConvivaTracker`
+3. After exiting player stop the tracking with `stopConvivaTracker`
+```typescript
+import { startConvivaTracker, stopConvivaTracker } from '@24i/bigscreen-sdk/conviva/theoPlugin';
+
+// Should be called on player startup
+startConvivaTracker(theoPlayerInstance, convivaConvigObject, getContentInfoFunction);
+
+// Shoulld be called on player exit
+stopConvivaTracker();
+```

package/packages/conviva/src/ConvivaSDK.ts

@@ -0,0 +1,38 @@
+/**
+ * Just an incomplete type, please fill any missing attributes that you might need.
+ * Conviva SDK itself has to be added with <script> tag, see README.
+ */
+export type ConvivaSDK = {
+    Constants: {
+        StreamType: {
+            LIVE: string;
+            VOD: string;
+        };
+        LogLevel: {
+            DEBUG: number;
+            ERROR: number;
+            INFO: number;
+            NONE: number;
+            WARNING: number;
+        };
+        DeviceMetadata: {
+            TYPE: string;
+            MODEL: string;
+            MANUFACTURER: string;
+        };
+        DeviceType: {
+            SMARTTV: string;
+        };
+        ASSET_NAME: string;
+        STREAM_URL: string;
+        IS_LIVE: string;
+        PLAYER_NAME: string;
+        VIEWER_ID: string;
+        DURATION: string;
+        ENCODED_FRAMERATE: string;
+        DEFAULT_RESOURCE: string;
+        GATEWAY_URL: string;
+        LOG_LEVEL: string;
+        CUSTOMER_KEY: string;
+    };
+};

package/packages/conviva/src/index.ts

@@ -0,0 +1 @@
+export * from './ConvivaSDK';

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

@@ -0,0 +1,19 @@
+export type ConvivaConfiguration = {
+    gatewayUrl: string;
+    logLevel: number;
+    customerKey: string;
+};
+
+export type ConvivaContentInfo = {
+    assetName: string;
+    streamUrl: string;
+    isLive: boolean;
+    playerName: string;
+    viewerId: string;
+    duration: string;
+    encodedFramerate: number;
+    defaultResource: string;
+    extraTags: Record<string, string>;
+};
+
+export type GetContentInfo<T> = (source: T) => ConvivaContentInfo;