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

package/packages/player-ui/src/Subtitles.tsx

@@ -0,0 +1,151 @@
+import { PlayerBase, ITimeUpdateEvent } from '@24i/player-base';
+import { Component, createRef, DeclareProps, setText } from '@24i/bigscreen-sdk/jsx';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils';
+import { SubtitlesType } from '@24i/smartapps-datalayer/src/models';
+import { timeToMs } from './timeUtils';
+
+type Props = {
+    player: PlayerBase<any>,
+    className?: string,
+};
+
+type SubtitleData = {
+    id: string,
+    startTimeInMs: number,
+    endTimeInMs: number,
+    text: string,
+};
+
+const isInTimeRange = (
+    timeInMs: number, { startTimeInMs, endTimeInMs }: SubtitleData,
+) => timeInMs >= startTimeInMs && timeInMs <= endTimeInMs;
+const removeTags = (text: string) => text.replace(/<.*?>/g, '');
+
+export class Subtitles extends Component<Props> {
+    div = createRef<HTMLDivElement>();
+
+    displayToggler = getDisplayToggler(this.div, false);
+
+    subtitlesText = createRef<HTMLDivElement>();
+
+    subtitles: SubtitleData[] = [];
+
+    lastRenderedSubtitle: SubtitleData | null = null;
+
+    lastSubtitleIndex = NaN;
+
+    static defaultProps = {
+        className: '',
+    };
+
+    declare props: DeclareProps<Props, typeof Subtitles.defaultProps>;
+
+    componentDidMount() {
+        const { player } = this.props;
+        player.addEventListener('timeupdate', this.onPlayerTimeUpdate);
+    }
+
+    componentWillUnmount() {
+        const { player } = this.props;
+        player.removeEventListener('timeupdate', this.onPlayerTimeUpdate);
+    }
+
+    private onPlayerTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
+        if (this.subtitles.length === 0) return;
+        this.updateSubtitles(currentTime);
+    };
+
+    setSubtitles(data: string, type: SubtitlesType) {
+        this.clear();
+        // eslint-disable-next-line sonarjs/no-small-switch
+        switch (type) {
+            case SubtitlesType.SRT:
+                this.subtitles = this.parseSrt(data);
+                break;
+            default:
+                throw new Error(`Unsupported subtitles format: ${type}`);
+        }
+    }
+
+    show() {
+        this.displayToggler.show();
+    }
+
+    hide() {
+        this.displayToggler.hide();
+    }
+
+    /**
+     * Basic SRT parser (doesn't support coords and tags).
+     */
+    private parseSrt(srtData: string) {
+        const SRT_REGEX_GROUPS_COUNT = 5;
+        const processedData = srtData
+            .replace(/\r/g, '')
+            .split(/(\d+)\n(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})(.*\n)/g);
+        processedData.shift();
+        const { length } = processedData;
+        const subtitlesData: SubtitleData[] = [];
+        for (let i = 0; i < length; i += SRT_REGEX_GROUPS_COUNT) {
+            subtitlesData.push({
+                id: processedData[i].trim(),
+                startTimeInMs: timeToMs(processedData[i + 1].trim()),
+                endTimeInMs: timeToMs(processedData[i + 2].trim()),
+                // eslint-disable-next-line no-magic-numbers
+                text: removeTags(processedData[i + 4]).trim(),
+            });
+        }
+        return subtitlesData;
+    }
+
+    private updateSubtitles(currentTimeInMs: number) {
+        const subtitle = this.findSubtitleByTime(currentTimeInMs);
+        if (subtitle !== this.lastRenderedSubtitle) {
+            setText(this.subtitlesText, subtitle ? subtitle.text : '');
+            this.lastRenderedSubtitle = subtitle;
+        }
+    }
+
+    private findSubtitleByTime(timeInMs: number) {
+        if (this.lastRenderedSubtitle && isInTimeRange(timeInMs, this.lastRenderedSubtitle)) {
+            return this.lastRenderedSubtitle;
+        }
+        const startIndex = Number.isNaN(this.lastSubtitleIndex)
+            || this.subtitles[this.lastSubtitleIndex]?.startTimeInMs > timeInMs
+            ? 0 : this.lastSubtitleIndex + 1;
+        const subsLength = this.subtitles.length;
+        for (let i = startIndex; i < subsLength; i++) {
+            const subtitle = this.subtitles[i];
+            if (subtitle.startTimeInMs > timeInMs) break;
+            if (isInTimeRange(timeInMs, subtitle)) {
+                this.lastSubtitleIndex = i;
+                return subtitle;
+            }
+        }
+        this.lastSubtitleIndex = NaN;
+        return null;
+    }
+
+    clear() {
+        this.subtitles = [];
+        this.lastSubtitleIndex = NaN;
+        this.lastRenderedSubtitle = null;
+        setText(this.subtitlesText, '');
+    }
+
+    render() {
+        const { className } = this.props;
+        return (
+            <div
+                ref={this.div}
+                className={`subtitles ${className}`}
+            >
+                <div
+                    ref={this.subtitlesText}
+                    style={{ whiteSpace: 'pre-line' }}
+                    className="subtitles-text"
+                />
+            </div>
+        );
+    }
+}

package/packages/player-ui/src/index.ts

@@ -0,0 +1,14 @@
+export { PlayerUI } from './PlayerUI';
+export type { PlayerUIState } from './PlayerUI';
+export { BackwardButton } from './BackwardButton';
+export { CurrentTime } from './CurrentTime';
+export { Duration } from './Duration';
+export { ForwardButton } from './ForwardButton';
+export { PauseButton } from './PauseButton';
+export { PlayButton } from './PlayButton';
+export { PlayPauseButton } from './PlayPauseButton';
+export { RemainingTime } from './RemainingTime';
+export { Seekbar } from './Seekbar';
+export { StopButton } from './StopButton';
+export { Subtitles } from './Subtitles';
+export { PlayerTime } from './PlayerTime';

package/packages/player-ui/src/mocks.ts

@@ -0,0 +1,41 @@
+import { PlayerBase, PlayerBaseMock } from '@24i/player-base';
+import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
+import { IPlayerUI } from './types';
+
+const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
+    events: {} as EventsManager<{}>,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    triggerEvent: jest.fn(),
+    player: null!,
+    seekTime: null!,
+    automaticSeekInterval: null!,
+    isAutomaticallySeeking: jest.fn(),
+    isAutomaticallySeekingForward: false,
+    isAutomaticallySeekingBackward: false,
+    isSeeking: jest.fn(),
+    startSeeking: jest.fn(),
+    seekForward: jest.fn(),
+    seekBackward: jest.fn(),
+    startAutomaticSeekForward: jest.fn(),
+    startAutomaticSeekBackward: jest.fn(),
+    stopAutomaticSeek: jest.fn(),
+    cancelSeek: jest.fn(),
+    confirmSeek: jest.fn(),
+    subscribeEvents: jest.fn(),
+    unsubscribeEvents: jest.fn(),
+    setPlayer: jest.fn(),
+    nullSeekTime: jest.fn(),
+});
+
+export const getPlayerMock = (): PlayerBase<any> => new PlayerBaseMock();
+
+export const getUiMock = (): { ui: jest.Mocked<IPlayerUI> } => ({
+    ui: {
+        getPlayer: jest.fn((): PlayerBase<any> => getPlayerMock()),
+        heartbeat: jest.fn(),
+        trigger: jest.fn(),
+        isPlaying: jest.fn(),
+        seeking: getSeekingMock(),
+    },
+});

package/packages/player-ui/src/timeUtils.ts

@@ -0,0 +1,139 @@
+import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const UNIT_DURATION = {
+    MS: 1,
+    S: 1000,
+    M: 60000,
+    H: 3600000,
+    D: 86400000,
+};
+
+export const isLessThanAnHour = (time: number) => time < UNIT_DURATION.H;
+
+const regex = /#\{(\d*)(MS|S|M|H|D)\}/g;
+
+type Unit = 'MS' | 'S' | 'M' | 'H' | 'D';
+
+type TimeUnitMatch = {
+    completeMatch: string,
+    count: number,
+    unit: Unit,
+};
+
+type UnitResults = Partial<Record<Unit, number>>;
+
+const sortUnits = (unit1: Unit, unit2: Unit) => (UNIT_DURATION[unit2] - UNIT_DURATION[unit1]);
+
+const findMatches = (pattern: string): TimeUnitMatch[] => {
+    const matches = pattern.match(regex);
+    if (matches === null) return [];
+    return map(matches, (match) => {
+        regex.lastIndex = 0;
+        const [completeMatch, count, unit] = regex.exec(match)!;
+        return {
+            completeMatch,
+            count: parseInt(count, 10),
+            unit: (unit as Unit),
+        };
+    });
+};
+
+const findUnits = (matches: TimeUnitMatch[]): Unit[] => {
+    const unitDurationMap: Record<string, Unit> = {};
+    forEach(matches, (match) => {
+        unitDurationMap[match.unit] = match.unit;
+    });
+    return map(Object.keys(unitDurationMap), (key) => (unitDurationMap[key])).sort(sortUnits);
+};
+
+const calculateUnitValues = (duration: number, units: Unit[]): UnitResults => {
+    let remaining = duration;
+    const unitValueMap: UnitResults = {};
+    forEach(units, (unit: Unit) => {
+        unitValueMap[unit] = Math.floor(remaining / UNIT_DURATION[unit]);
+        remaining -= UNIT_DURATION[unit] * unitValueMap[unit]!;
+    });
+    return unitValueMap;
+};
+
+export const formatTime = (duration: number, pattern: string) => {
+    regex.lastIndex = 0;
+    const matches = findMatches(pattern);
+    const units = findUnits(matches);
+    const unitValues = calculateUnitValues(duration, units);
+    let result: string = pattern;
+    forEach(matches, (match) => {
+        result = result.replace(
+            match.completeMatch,
+            unitValues[match.unit]!.toString().padStart(match.count, '0'),
+        );
+    });
+    return result;
+};
+
+/**
+ * Checks whether valid programStart and programEnd were provided.
+ *
+ * @param programStart
+ * @param programEnd
+ */
+export const areProgramMetadataValid = (
+    programStart: number,
+    programEnd: number,
+) => (
+    !Number.isNaN(programStart)
+        && !Number.isNaN(programEnd)
+        && (programStart < programEnd)
+        && (programEnd > Date.now())
+);
+
+export const getLiveProgressBasedOnCurrentTime = (
+    programStart: number,
+    programEnd: number,
+    dvrWindowStart: number,
+    dvrWindowEnd: number,
+    playerCurrentTime: number,
+    playerRelativeSeekTime = 0,
+) => {
+    const programMetadataAreValid = areProgramMetadataValid(
+        programStart,
+        programEnd,
+    );
+
+    /*
+    * Define player timeline start/end values. Within DVR or Program window.
+    */
+    const start = programMetadataAreValid ? programStart : dvrWindowStart;
+
+    /*
+    * Create time variable relatively to selected window - DVR or Program.
+    */
+    const windowRelativeTime = programMetadataAreValid
+        ? Date.now() - (dvrWindowEnd - playerCurrentTime)
+        : playerCurrentTime;
+
+    return (
+        windowRelativeTime + playerRelativeSeekTime - start
+    );
+};
+
+/**
+ * Parse timestamp string to milliseconds.
+ * @param timeString string of timestamp in format `hh:mm:ss,mmm`. Ex. "01:05:59,120"
+ * @returns number of milliseconds or zero if invalid format
+ */
+export const timeToMs = (timeString: string) => {
+    const parts = timeString.split(/[:,]/);
+    if (parts.length === 0) return 0;
+
+    const hours = parseInt(parts[0], 10) || 0;
+    const minutes = parseInt(parts[1], 10) || 0;
+    const seconds = parseInt(parts[2], 10) || 0;
+    // eslint-disable-next-line no-magic-numbers
+    const milliseconds = parseInt(parts[3], 10) || 0;
+
+    return hours * UNIT_DURATION.H
+        + minutes * UNIT_DURATION.M
+        + seconds * UNIT_DURATION.S
+        + milliseconds;
+};

package/packages/player-ui/src/types.ts

@@ -0,0 +1,42 @@
+import { PlayerBase } from '@24i/player-base';
+import { Seeking } from './Seeking';
+
+export enum PlayerAction {
+    PLAY,
+    PAUSE,
+    STOP,
+    FORWARD,
+    BACKWARD,
+}
+
+export interface ActionsWithoutPayloadMap {
+    [PlayerAction.PLAY]: never,
+    [PlayerAction.PAUSE]: never,
+    [PlayerAction.STOP]: never,
+}
+export interface ActionsWithPayloadMap {
+    [PlayerAction.FORWARD]: number,
+    [PlayerAction.BACKWARD]: number,
+}
+
+export interface IPlayerUI {
+    seeking: Seeking;
+    getPlayer: () => PlayerBase<any>,
+    heartbeat: () => void,
+    trigger<K extends keyof ActionsWithoutPayloadMap>(action: K): void,
+    trigger<K extends keyof ActionsWithPayloadMap>(
+        action: K, payload: ActionsWithPayloadMap[K],
+    ): void,
+    isPlaying: () => boolean,
+}
+
+export type PlayerUICommonProps = {
+    ui: IPlayerUI,
+    className?: string,
+};
+
+export type PlayerUITimeProps = {
+    shortFormat?: string,
+    longFormat?: string,
+    longTreshold?: number,
+};

package/packages/progress-bar/README.md

@@ -0,0 +1,31 @@
+---
+id: README
+title: Progress Bar
+hide_title: true
+sidebar_label: Progress Bar
+---
+
+# Progress Bar
+Simple component for displaying progress visually.
+
+## Props
+- `progress` - progress from 0 to 1
+- `domRef` - optional, allows you to manage the DOM
+
+## Usage
+Following jsx
+```tsx
+<ProgressBar progress={0.5} />
+```
+
+Will render this html
+```html
+<div class="progress-bar-outer">
+    <div class="progress-bar-inner" style="width: 50%;"></div>
+</div>
+```
+
+Component also has method `setProgress` available to change the current progress:
+```ProgressBarRef.current.setProgress(0.2)```
+
+Styling of this component is up to you.

package/packages/progress-bar/src/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import { createRef, Reference, Component } from '@24i/bigscreen-sdk/jsx';
+import { Props, ProgressBar as IProgressBar } from './interface';
+
+const FULL_PERCENT = 100;
+
+export class ProgressBar extends Component<Props> implements IProgressBar {
+    ref: Reference<HTMLDivElement>;
+
+    innerRef = createRef<HTMLDivElement>();
+
+    constructor(props: Props) {
+        super(props);
+        this.ref = props.domRef || createRef();
+    }
+
+    getPercent(progress: number) {
+        const clampedProgress = Math.min(1, Math.max(0, progress));
+        return clampedProgress * FULL_PERCENT;
+    }
+
+    setProgress(progress: number) {
+        this.innerRef.current!.style.width = `${this.getPercent(progress)}%`;
+    }
+
+    render() {
+        const { progress } = this.props;
+        return (
+            <div
+                ref={this.ref}
+                dir="ltr"
+                className="progress-bar-outer"
+            >
+                <div
+                    ref={this.innerRef}
+                    className="progress-bar-inner"
+                    style={{ width: `${this.getPercent(progress)}%` }}
+                />
+            </div>
+        );
+    }
+}

package/packages/progress-bar/src/index.ts

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

package/packages/progress-bar/src/interface.ts

@@ -0,0 +1,14 @@
+import { Component, Reference } from '@24i/bigscreen-sdk/jsx';
+
+export type Props = {
+    progress: number;
+    domRef?: Reference<HTMLDivElement>;
+};
+
+export interface ProgressBar extends Component<Props> {
+    setProgress: (progress: number) => void,
+}
+
+export interface ProgressBarComponent {
+    new(props: Props): ProgressBar,
+}

package/packages/qr-code/README.md

@@ -0,0 +1,80 @@
+---
+id: README
+title: QR Code
+hide_title: true
+sidebar_label: QR Code
+---
+
+# QR Code
+Renders QR code image from given text.
+Just a wrapper around https://davidshimjs.github.io/qrcodejs/.
+
+## Props
+- `options: QROptions` - qrCodeJS options
+- other `div` props
+
+### QR Code options
+```typescript
+type QROptions = {
+    /** Text to encode. */
+    text: string;
+    /** Image width in pixels. Defaults to `256`. */
+    width?: number;
+    /** Image height in pixels. Defaults to `256`. */
+    height?: number;
+    /**
+     * Dark Color. Supported CSS Color formats like Hexa, RGB(A) etc.
+     * Note: dark color should always be darker than `colorLight`.
+     * Defaults to `#000000`.
+     */
+    colorDark?: string;
+    /**
+     * Light Color. Supported CSS Color formats like Hexa, RGB(A) etc.
+     * Defaults to `#ffffff`.
+     */
+    colorLight?: string;
+    /** Error correction level. Defaults to `QRCorrectLevel.H`. */
+    correctLevel?: QRCorrectLevel;
+};
+```
+
+### Error correction level
+It allows to successfully scan a QR Code even if the symbol is dirty or damaged.
+Four levels are available to choose according to the operating environment.
+
+Higher levels offer a better error resistance but reduce the symbol's capacity.
+If the chances that the QR Code symbol may be corrupted are low (for example
+if it is showed through a monitor) is possible to safely use a low error level
+such as Low or Medium.
+
+```typescript
+enum QRCorrectLevel {
+    L = 1, // (Low) for up to 7% damage
+    M = 0, // (Medium) for up to 15% damage
+    Q = 3, // (Quartile) for up to 25% damage
+    H = 2, // (High) for up to 30% damage
+}
+```
+
+## Usage
+```typescript
+<QRCode options={{ text: 'myWebsiteUrl' }} ref={qrCodeRef}/> // Creates QR code image for given website url
+```
+
+```typescript
+<QRCode className="qr-code" options={{
+    text: 'http://jindo.dev.naver.com/collie',
+    width: 128,
+    height: 128,
+    colorDark: "#000000",
+    colorLight: "#ffffff",
+    correctLevel: QRCorrectLevel.M
+}} ref={qrCodeRef} />
+```
+
+### Changing image
+Image can be changed by calling refresh with new text.
+
+```typescript
+qrCodeRef.current.refresh(newText);
+```

package/packages/qr-code/src/QRCode.tsx

@@ -0,0 +1,39 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { generateQr, QROptions, QRGenerator } from './qrGenerator';
+
+type Props = {
+    options: QROptions;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const DEFAULT_WIDTH = 256;
+const DEFAULT_HEIGHT = 256;
+
+export class QRCode extends Component<Props> {
+    qrGenerator: QRGenerator | null = null;
+
+    imageContainerRef = createRef<HTMLDivElement>();
+
+    componentDidMount() {
+        const { options } = this.props;
+        this.qrGenerator = generateQr(this.imageContainerRef, options);
+    }
+
+    refresh(text: string) {
+        this.qrGenerator!.makeCode(text);
+    }
+
+    render() {
+        const {
+            options,
+            ...rest
+        } = this.props;
+        const { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT } = options;
+        return (
+            <div
+                ref={this.imageContainerRef}
+                style={{ width: `${width}px`, height: `${height}px` }}
+                {...rest}
+            />
+        );
+    }
+}

package/packages/qr-code/src/index.ts

@@ -0,0 +1,2 @@
+export { QRCode } from './QRCode';
+export { QRCorrectLevel, QRGenerator, QROptions, generateQr } from './qrGenerator';

package/packages/qr-code/src/qrGenerator/__external__/constants.ts

@@ -0,0 +1,23 @@
+/* eslint-disable no-magic-numbers */
+
+/**
+ * Error correction level
+ *
+ * It allows to successfully scan a QR Code even if the symbol is dirty or damaged.
+ * Four levels are available to choose according to the operating environment.
+ *
+ * Higher levels offer a better error resistance but reduce the symbol's capacity.
+ * If the chances that the QR Code symbol may be corrupted are low (for example
+ * if it is showed through a monitor) is possible to safely use a low error level
+ * such as Low or Medium.
+ */
+export enum QRCorrectLevel {
+    /** (Low) for up to 7% damage */
+    L = 1,
+    /** (Medium) for up to 15% damage */
+    M = 0,
+    /** (Quartile) for up to 25% damage */
+    Q = 3,
+    /** (High) for up to 30% damage */
+    H = 2,
+}

package/packages/qr-code/src/qrGenerator/__external__/qrcode.d.ts

@@ -0,0 +1,31 @@
+import { QRCorrectLevel } from './constants';
+
+export type QROptions = {
+    /** Text to encode. */
+    text: string;
+    /** Image width in pixels. Defaults to `256`. */
+    width?: number;
+    /** Image height in pixels. Defaults to `256`. */
+    height?: number;
+    /**
+     * Dark Color. Supported CSS Color formats like Hexa, RGB(A) etc.
+     * Note: dark color should always be darker than `colorLight`.
+     * Defaults to `#000000`.
+     */
+    colorDark?: string;
+    /**
+     * Light Color. Supported CSS Color formats like Hexa, RGB(A) etc.
+     * Defaults to `#ffffff`.
+     */
+    colorLight?: string;
+    /** Error correction level. Defaults to `QRCorrectLevel.H`. */
+    correctLevel?: QRCorrectLevel;
+};
+
+export class QRGenerator {
+    constructor(element: HTMLDivElement, options: string | QROptions);
+
+    clear(): void;
+
+    makeCode(text: string): void;
+}