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

package/packages/adobe-heartbeat/src/types.ts

@@ -0,0 +1,67 @@
+/* eslint-disable max-len */
+import { va as Adobe } from './__external__/Adobe/MediaSDK.min';
+
+type StreamType = typeof Adobe.MediaHeartbeat.StreamType[
+    keyof typeof Adobe.MediaHeartbeat.StreamType
+];
+
+/**
+ * Heartbeat configuration object. Most of these values are given
+ * to the customer by Adobe representative or in Adobe administration
+ * section.
+ * @see https://adobe-marketing-cloud.github.io/media-sdks/reference/javascript/MediaHeartbeatConfig.html
+ */
+export type HeartbeatConfig = {
+    trackingServer: string;
+    appVersion: string;
+    playerName: string;
+    publisher?: string;
+    ovp?: string;
+    channel?: string;
+    ssl?: boolean;
+    debugLogging?: boolean;
+};
+
+/**
+ * Contains parameters to be used in MediaHeartbeat.createMediaObject.
+ * Parameter `mediaType` is ommited, `Video` value is always used.
+ * Required to start tracking session.
+ * @see https://adobe-marketing-cloud.github.io/media-sdks/reference/javascript/MediaHeartbeat.html#.createMediaObject
+ */
+export type StandardMetadata = {
+    name: string;
+    channel?: string;
+    mediaId: string;
+    lengthSec: number;
+    streamType: StreamType;
+};
+
+export type CustomerMetadataValue = string | number | boolean | undefined | null;
+
+/**
+ * Customer specific parameters to be used when starting tracking session.
+ */
+export type CustomerMetadata = Record<string, CustomerMetadataValue>;
+
+/**
+ * Contains parameters to be used in MediaHeartbeat.createAdBreakObject.
+ * Required to start tracking ad break.
+ * @see https://adobe-marketing-cloud.github.io/media-sdks/reference/javascript/MediaHeartbeat.html#.createAdBreakObject
+ */
+export type AdBreakMetadata = {
+    name: string;
+    position: number;
+    startTime: number;
+};
+
+/**
+ * Contains parameters to be used in MediaHeartbeat.createAdObject.
+ * Required to start tracking ad playback.
+ * @see https://adobe-marketing-cloud.github.io/media-sdks/reference/javascript/MediaHeartbeat.html#.createAdObject
+ */
+export type AdMetadata = {
+    name: string;
+    adId: string;
+    position: number;
+    length: number;
+};

package/packages/animations/README.md

@@ -0,0 +1,74 @@
+---
+id: README
+title: Animations
+hide_title: true
+sidebar_label: Animations
+---
+
+# Animations
+This package is for easy implementation of JS animations.
+
+## AnimationUtils
+This part contains definitions for easing functions and calculations of easing functions.
+If you use it in combination with *JSAnimations* then you will need only static easing function members.
+* linear - css `linear`
+* ease - css `cubic-bezier(0.25, 0.1, 0.25, 1)`
+* easeInSine - css `cubic-bezier(0.47, 0, 0.745, 0.715)`
+* easeOutSine - css `cubic-bezier(0.39, 0.575, 0.565, 1)`
+* easeInOutSine - css `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
+* easeInQuad - css `cubic-bezier(0.55, 0.085, 0.68, 0.53)`
+* easeOutQuad - css `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
+* easeInOutQuad - css `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
+* easeInCubic - css `cubic-bezier(0.55, 0.055, 0.675, 0.19)`
+* easeOutCubic - css `cubic-bezier(0.215, 0.61, 0.355, 1)`
+* easeInOutCubic - css `cubic-bezier(0.645, 0.045, 0.355, 1)`
+* easeInQuart - css `cubic-bezier(0.895, 0.03, 0.685, 0.22)`
+* easeOutQuart - css `cubic-bezier(0.165, 0.84, 0.44, 1)`
+* easeInOutQuart - css `cubic-bezier(0.77, 0, 0.175, 1)`
+* easeInQuint - css `cubic-bezier(0.755, 0.05, 0.855, 0.06)`
+* easeOutQuint - css `cubic-bezier(0.23, 1, 0.32, 1)`
+* easeInOutQuint - css `cubic-bezier(0.86, 0, 0.07, 1)`
+* easeInExpo - css `cubic-bezier(0.95, 0.05, 0.795, 0.035)`
+* easeOutExpo - css `cubic-bezier(0.19, 1, 0.22, 1)`
+* easeInOutExpo - css `cubic-bezier(1, 0, 0, 1)`
+* easeInCirc - css `cubic-bezier(0.6, 0.04, 0.98, 0.335)`
+* easeOutCirc - css `cubic-bezier(0.075, 0.82, 0.165, 1)`
+* easeInOutCirc - css `cubic-bezier(0.785, 0.135, 0.15, 0.86)`
+* easeInBack - css `cubic-bezier(0.6, -0.28, 0.735, 0.045)`
+* easeOutBack - css `cubic-bezier(0.175, 0.885, 0.32, 1.275)`
+* easeInOutBack - css `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
+
+## JSAnimations
+Create your own instance in your component. To start the animation you call start and pass callback;
+```javascript
+animations = new JSAnimations();
+...
+animations.start(from, to, timeInMs, AnimationUtils.ease).onFrame(this.onFrame);
+...
+```
+
+If you start another animation (with the same instance) before the previous ends.
+Then the from is not what you passed but current position of running animation.
+
+## Timing Example
+Time | Call | Result
+---|---|---
+`0ms` | `animations.start(0, 300, 3000, AnimationUtils.linear)` | starts animation from 0 to 300 3s long
+`1200ms` | `animations.start(300, 600, 3000, AnimationUtils.linear)` | starts animation from 120 to 600 3s long
+`4200ms` | `...` | animation finishes
+
+## How to mock
+To the root of your package add this file:
+```
+__mocks__/@24i/smartapps-bigscreenen-animations.ts
+```
+with this content
+```js
+export { AnimationUtils } from '@24i/bigscreen-sdk/animations';
+export { JSAnimations } from '@24i/bigscreen-sdk/animations/mock';
+
+```
+
+Then you need to tell jest to use fake timers: `jest.useFakeTimers();`
+
+And after each `animations.start(...).onFrame(...)` you need to call `jest.runAllTimers();`

package/packages/animations/src/AnimationUtils.ts

@@ -0,0 +1,232 @@
+/* eslint-disable no-magic-numbers */
+export type EasingType = number[];
+
+/**
+ * @class AnimationUtils
+ */
+export class AnimationUtils {
+    /**
+     * @member {EasingType} linear - linear easing function
+     * @static
+     */
+    static linear: EasingType = [];
+
+    /**
+     * @member {EasingType} ease - ease easing function (default CSS easing)
+     * @static
+     */
+    static ease: EasingType = [0.25, 0.1, 0.25, 1];
+
+    /**
+     * @member {EasingType} easeInSine - in sin easing function
+     * @static
+     */
+    static easeInSine: EasingType = [0.47, 0, 0.745, 0.715];
+
+    /**
+     * @member {EasingType} easeOutSine - out sin easing function
+     * @static
+     */
+    static easeOutSine: EasingType = [0.39, 0.575, 0.565, 1];
+
+    /**
+     * @member {EasingType} easeInOutSine - in out sin easing function
+     * @static
+     */
+    static easeInOutSine: EasingType = [0.445, 0.05, 0.55, 0.95];
+
+    /**
+     * @member {EasingType} easeInQuad - in quad easing function
+     * @static
+     */
+    static easeInQuad: EasingType = [0.55, 0.085, 0.68, 0.53];
+
+    /**
+     * @member {EasingType} easeOutQuad - out quad easing function
+     * @static
+     */
+    static easeOutQuad: EasingType = [0.25, 0.46, 0.45, 0.94];
+
+    /**
+     * @member {EasingType} easeInOutQuad - in out quad easing function
+     * @static
+     */
+    static easeInOutQuad: EasingType = [0.455, 0.03, 0.515, 0.955];
+
+    /**
+     * @member {EasingType} easeInCubic - in cubic easing function
+     * @static
+     */
+    static easeInCubic: EasingType = [0.55, 0.055, 0.675, 0.19];
+
+    /**
+     * @member {EasingType} easeOutCubic - out cubic easing function
+     * @static
+     */
+    static easeOutCubic: EasingType = [0.215, 0.61, 0.355, 1];
+
+    /**
+     * @member {EasingType} easeInOutCubic - in out cubic easing function
+     * @static
+     */
+    static easeInOutCubic: EasingType = [0.645, 0.045, 0.355, 1];
+
+    /**
+     * @member {EasingType} easeInQuart - in quart easing function
+     * @static
+     */
+    static easeInQuart: EasingType = [0.895, 0.03, 0.685, 0.22];
+
+    /**
+     * @member {EasingType} easeOutQuart - out quart easing function
+     * @static
+     */
+    static easeOutQuart: EasingType = [0.165, 0.84, 0.44, 1];
+
+    /**
+     * @member {EasingType} easeInOutQuart - in out quart easing function
+     * @static
+     */
+    static easeInOutQuart: EasingType = [0.77, 0, 0.175, 1];
+
+    /**
+     * @member {EasingType} easeInQuint - in quint easing function
+     * @static
+     */
+    static easeInQuint: EasingType = [0.755, 0.05, 0.855, 0.06];
+
+    /**
+     * @member {EasingType} easeOutQuint - out quint easing function
+     * @static
+     */
+    static easeOutQuint: EasingType = [0.23, 1, 0.32, 1];
+
+    /**
+     * @member {EasingType} easeInOutQuint - in out quint easing function
+     * @static
+     */
+    static easeInOutQuint: EasingType = [0.86, 0, 0.07, 1];
+
+    /**
+     * @member {EasingType} easeInExpo - in expo easing function
+     * @static
+     */
+    static easeInExpo: EasingType = [0.95, 0.05, 0.795, 0.035];
+
+    /**
+     * @member {EasingType} easeOutExpo - out expo easing function
+     * @static
+     */
+    static easeOutExpo: EasingType = [0.19, 1, 0.22, 1];
+
+    /**
+     * @member {EasingType} easeInOutExpo - in out expo easing function
+     * @static
+     */
+    static easeInOutExpo: EasingType = [1, 0, 0, 1];
+
+    /**
+     * @member {EasingType} easeInCirc - in circ easing function
+     * @static
+     */
+    static easeInCirc: EasingType = [0.6, 0.04, 0.98, 0.335];
+
+    /**
+     * @member {EasingType} easeOutCirc - out circ easing function
+     * @static
+     */
+    static easeOutCirc: EasingType = [0.075, 0.82, 0.165, 1];
+
+    /**
+     * @member {EasingType} easeInOutCirc - in out easing function
+     * @static
+     */
+    static easeInOutCirc: EasingType = [0.785, 0.135, 0.15, 0.86];
+
+    /**
+     * @member {EasingType} easeInBack - in back easing function
+     * @static
+     */
+    static easeInBack: EasingType = [0.6, -0.28, 0.735, 0.045];
+
+    /**
+     * @member {EasingType} easeOutBack - out back easing function
+     * @static
+     */
+    static easeOutBack: EasingType = [0.175, 0.885, 0.32, 1.275];
+
+    /**
+     * @member {EasingType} easeInOutBack - in out back easing function
+     * @static
+     */
+    static easeInOutBack: EasingType = [0.68, -0.55, 0.265, 1.55];
+
+    /**
+     * Returns value at given percentage
+     * @param {number} min - minimal value
+     * @param {number} max - maximal value
+     * @param {number} percentage - percentage of time
+     * @param {EasingType} easingFunction - easing function for calculation
+     * @returns {number} calculated value
+     */
+    xInTime(min: number, max: number, percentage: number, easingFunction: EasingType): number {
+        const percentageInTime = this.getPercentageAt(percentage, easingFunction);
+        return this.linearInterpolation(min, max, percentageInTime);
+    }
+
+    /**
+     * Linear interpolation of two points (0 => a and 1 => b)
+     * @private
+     * @param {number} a - value at 0
+     * @param {number} b - value at 1
+     * @param {number} percentage - position of calculated value
+     * @returns {number} value at given percentage linearily interpolated
+     */
+    private linearInterpolation(a: number, b: number, percent: number): number {
+        return ((1 - percent) * a) + (percent * b);
+    }
+
+    /**
+     * Returns percentage value at given percentage time in easing function
+     * @private
+     * @param {number} percentage - percentage of time
+     * @param {EasingType} eF - easing function
+     * @returns {number} percentual value
+     */
+    private getPercentageAt(percentage: number, easingFunction: EasingType): number {
+        const eF = this.simplifyEF(easingFunction, percentage);
+        return this.linearInterpolation(eF[1], eF[3], percentage);
+    }
+
+    /**
+     * Simplifies the easing function to single degree
+     * @private
+     * @param {EasingType} eF - easing function to simplify
+     * @returns {EasingType} simplified easing function
+     */
+    private simplifyEF(eF: EasingType, percentage: number): EasingType {
+        let newEF: EasingType = [0, 0, ...eF, 1, 1];
+        while (newEF.length > 4) {
+            newEF = this.simplifyEFByDegree(newEF, percentage);
+        }
+        return newEF;
+    }
+
+    /**
+     * Simplifies easing function by one degree
+     * @private
+     * @throws Throws if easing function has odd length
+     * @param {EasingType} eF - easing function to simplify
+     * @returns {EasingType} simplified easing function
+     */
+    private simplifyEFByDegree(eF: EasingType, percentage: number): EasingType {
+        if (eF.length % 2 !== 0) {
+            throw new Error('Invalid easing function');
+        }
+        const newEF = [];
+        for (let i = 0; i < eF.length - 2; i += 1) {
+            newEF.push(this.linearInterpolation(eF[i], eF[i + 2], percentage));
+        }
+        return newEF;
+    }
+}

package/packages/animations/src/JSAnimations.ts

@@ -0,0 +1,142 @@
+import { AnimationUtils, EasingType } from './AnimationUtils';
+
+/**
+ * This callback is called on each animation frame
+ * @callback FrameCallback
+ * @param {number} value - value at which the animation is
+ */
+
+/**
+ * @class JSAnimations
+ */
+export class JSAnimations {
+    /**
+     * @member {Animations} animations - animations class
+     * @private
+     */
+    animations: AnimationUtils = new AnimationUtils();
+
+    /**
+     * @member {AnimationFrameID} animationFrameID
+     * @private
+     */
+    animationFrameID: number | null = null;
+
+    /**
+     * @member {boolean} animationRunning - flag of running animation
+     * @private
+     */
+    animationRunning = false;
+
+    /**
+     * @member {number} from - starting point of the animation
+     * @private
+     */
+    from = 0;
+
+    /**
+     * @member {number} to - ending point of the animation
+     * @private
+     */
+    to = 0;
+
+    /**
+     * @member {number} animationTime - time of the animation
+     * @private
+     */
+    animationTime = 0;
+
+    /**
+     * @member {number} currentTime - current time of the running animation
+     * @private
+     */
+    currentTime = 0;
+
+    /**
+     * @member {number} currentPosition - current position of the running animation
+     * @private
+     */
+    currentPosition = 0;
+
+    /**
+     * @member {number} lastFrameTime - time of the previous frame
+     * @private
+     */
+    lastFrameTime = 0;
+
+    /**
+     * @member {EasingType} easingFunction - easing function that is being used
+     * @private
+     */
+    easingFunction: EasingType = AnimationUtils.ease;
+
+    /**
+     * @member {FrameCallback} frameCallback - callback being called on evry frame
+     * @private
+     */
+    frameCallback?: (value: number) => void;
+
+    /**
+     * Starts animation
+     * @param {number} from - value from which to animate
+     * @param {number} to - value to which to animate
+     * @param {number} time - length of animation
+     * @param {EasingType} easingFunction - easing function to use
+     */
+    start(from: number, to: number, time: number, easingFunction: EasingType): JSAnimations {
+        if (!this.animationRunning) {
+            this.from = from;
+        } else {
+            this.from = this.currentPosition;
+            window.cancelAnimationFrame(this.animationFrameID!);
+        }
+        this.to = to;
+        this.animationTime = time;
+        this.currentTime = 0;
+        this.lastFrameTime = Date.now();
+        this.easingFunction = easingFunction;
+        this.animationRunning = true;
+        this.frameCallback = undefined;
+        this.animationFrameID = window.requestAnimationFrame(this.frame);
+        return this;
+    }
+
+    /**
+     * Processes animation frame
+     * @private
+     */
+    frame = (): void => {
+        const now = Date.now();
+        const frameTime = now - this.lastFrameTime;
+        this.lastFrameTime = now;
+        this.currentTime += frameTime;
+        if (this.currentTime >= this.animationTime) {
+            this.currentTime = this.animationTime;
+            this.animationRunning = false;
+        }
+        const timePercentage = this.currentTime / this.animationTime;
+        const value = this.animations.xInTime(
+            this.from,
+            this.to,
+            timePercentage,
+            this.easingFunction,
+        );
+        this.currentPosition = value;
+        if (this.frameCallback) {
+            this.frameCallback(value);
+        }
+        if (this.animationRunning) {
+            this.animationFrameID = window.requestAnimationFrame(this.frame);
+        }
+    };
+
+    /**
+     * Frame callback handler
+     * @param {FrameCallback} callback - callback to run on every animation frame
+     */
+    onFrame(callback: (value: number) => void) {
+        if (typeof callback === 'function') {
+            this.frameCallback = callback;
+        }
+    }
+}

package/packages/animations/src/index.ts

@@ -0,0 +1,3 @@
+export { AnimationUtils } from './AnimationUtils';
+export type { EasingType } from './AnimationUtils';
+export { JSAnimations } from './JSAnimations';

package/packages/announcement-banner/README.md

@@ -0,0 +1,49 @@
+---
+id: README
+title: Announcement Banner
+hide_title: true
+sidebar_label: Announcement Banner
+---
+
+# Announcement Banner
+This component is used for displaying text messages that do not require any user interaction and cannot be focused or dissmissed.
+
+## Props
+- `messages` - array of messages do display
+- `heightPx` - height of the component in pixels (used in style property)
+- `visibleLines` - number of lines fully visible at given height
+- `timePerLineMs` (default: `1000`) - optional, used to control fadeOut animation in the animated version of the component
+- `className` (default: `''`)  - optional, className to pass to outermost component element
+
+## Usage
+Upon mount the component renders all of the messages provided by props. However only `visibleLines` of text are shown.
+The component waits for `timePerLineMs` for each visible line and then starts scrolling to the bottom. The animation takes `timePerLineMs` times the number of rendered lines. After that the component again waits for `timePerLineMs` for each visible line.
+Then the component resets to it's starting state and the whole cycle repeats. This is illustrated on the following example picture:
+![Example 1](./examples/example1.gif)
+
+You can use the `updateMessages` method on components reference to update the rendered messages at runtime. This will stop the component cycle and reset it immediately.
+
+## Styling
+The component has minimal styling provided (both classes and inline styles) to make the scrolling animation work but nothing more. Calling the following example:
+
+```tsx
+<AnnouncementBanner
+    messages={['msg1', 'msg2', ...]}
+    visibleLines={4}
+    heightPx={200}
+    className="my-class"
+/>
+```
+will render the following html:
+```xml
+<div style="height: 200px;" class="announcement-banner-outer my-class">
+    <div class="announcement-banner-inner" style="line-height: 50px;">
+        <div class="message">msg1</div>
+        <div class="message">msg2</div>
+        ...
+    </div>
+</div>
+```
+
+When providing custom styling note that component `height` is determined by props and message `line-height` property is calculated on mount and modifying them might break the functionality.
+You can however change `font-size` or add padding to the outermost element to achieve similar result as changing `line-height`.

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

@@ -0,0 +1,8 @@
+.announcement-banner-outer {
+    position: relative;
+    overflow: hidden;
+
+    > .announcement-banner-inner {
+        position: absolute;
+    }
+}