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

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

@@ -1,142 +1,142 @@
-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) => {
-        const formatedValue = Number.isNaN(unitValues[match.unit])
-            ? '--'
-            : unitValues[match.unit]!.toString().padStart(match.count, '0');
-        result = result.replace(
-            match.completeMatch,
-            formatedValue,
-        );
-    });
-    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;
-};
+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) => {
+        const formatedValue = Number.isNaN(unitValues[match.unit])
+            ? '--'
+            : unitValues[match.unit]!.toString().padStart(match.count, '0');
+        result = result.replace(
+            match.completeMatch,
+            formatedValue,
+        );
+    });
+    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

@@ -1,48 +1,48 @@
-import { PlayerBase } from '@24i/bigscreen-players-engine-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,
-    disableHiding: () => void,
-    enableHiding: () => void,
-    disableSeeking: () => void,
-    enableSeeking: () => void,
-    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 IPlayerUIWithSeeking = Required<IPlayerUI>;
-
-export type PlayerUICommonProps = {
-    ui: IPlayerUI,
-    className?: string,
-};
-
-export type PlayerUITimeProps = {
-    shortFormat?: string,
-    longFormat?: string,
-    longTreshold?: number,
-};
+import { PlayerBase } from '@24i/bigscreen-players-engine-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,
+    disableHiding: () => void,
+    enableHiding: () => void,
+    disableSeeking: () => void,
+    enableSeeking: () => void,
+    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 IPlayerUIWithSeeking = Required<IPlayerUI>;
+
+export type PlayerUICommonProps = {
+    ui: IPlayerUI,
+    className?: string,
+};
+
+export type PlayerUITimeProps = {
+    shortFormat?: string,
+    longFormat?: string,
+    longTreshold?: number,
+};

package/packages/progress-bar/README.md

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

@@ -1,41 +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>
-        );
-    }
-}
+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

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

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

@@ -1,14 +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,
-}
+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,
+}