@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts

@@ -0,0 +1,135 @@
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./TimelineComponent.scss";
+import * as React from "react";
+import { PlaybackSettings } from "./interfaces";
+/**
+ * [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu
+ * "replace" : use the app-supplied items in place of the standard items
+ * "append" : add the app-supplied items following the standard items
+ * "prefix" : add the app-supplied items before the standard items
+ *
+ * @public
+ */
+export declare type TimelineMenuItemOption = "replace" | "append" | "prefix";
+/**
+ * [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu
+ * @public
+ */
+export interface TimelineMenuItemProps {
+    /** localized label for menu item */
+    label: string;
+    /** duration for the entire timeline to play */
+    timelineDuration: number;
+}
+/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator
+ * @public
+ */
+export interface TimelineDateMarkerProps {
+    /** Date to mark. If undefined, today's date will be used. */
+    date?: Date;
+    /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */
+    dateMarker?: React.ReactNode;
+}
+/**
+ *  [[TimelineComponentProps]] configure the timeline
+ * @public
+ */
+export interface TimelineComponentProps {
+    /** Start date: beginning of the date range of a date-based timeline. */
+    startDate?: Date;
+    /** End date: end of the date range of a date-based timeline. */
+    endDate?: Date;
+    /** Total duration: range of the timeline in milliseconds. */
+    totalDuration: number;
+    /** Initial value for the current duration (the location of the thumb) in milliseconds */
+    initialDuration?: number;
+    /** Show in minimized mode (For future use. This prop will always be treated as true.) */
+    minimized?: boolean;
+    /** When playing, repeat indefinitely */
+    repeat?: boolean;
+    /** Show duration instead of time */
+    showDuration?: boolean;
+    /** Callback with current duration value (as a fraction) */
+    onChange?: (duration: number) => void;
+    /** Callback triggered when play/pause button is pressed */
+    onPlayPause?: (playing: boolean) => void;
+    /** Callback triggered when backward/forward buttons are pressed */
+    onJump?: (forward: boolean) => void;
+    /** Callback triggered when a setting is changed */
+    onSettingsChange?: (arg: PlaybackSettings) => void;
+    /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true) */
+    alwaysMinimized?: boolean;
+    /** ComponentId -- must be set to use TimelineComponentEvents */
+    componentId?: string;
+    /** Include the repeat option on the Timeline Context Menu */
+    includeRepeat?: boolean;
+    /** App-supplied speed entries in the Timeline Context Menu */
+    appMenuItems?: TimelineMenuItemProps[];
+    /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append, replace)*/
+    appMenuItemOption?: TimelineMenuItemOption;
+    /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */
+    timeZoneOffset?: number;
+    /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */
+    markDate?: TimelineDateMarkerProps;
+}
+/** @internal */
+interface TimelineComponentState {
+    /** Settings popup is opened or closed */
+    isSettingsOpen: boolean;
+    /**  True if timeline is currently playing, false if paused */
+    isPlaying: boolean;
+    /** Minimized mode (For future use. This will always be true) */
+    minimized?: boolean;
+    /** Current duration in milliseconds */
+    currentDuration: number;
+    /** Total duration in milliseconds */
+    totalDuration: number;
+    /** If true, automatically restart when the timeline is finished playing */
+    repeat: boolean;
+    /** If true, include the repeat option in the timeline context menu */
+    includeRepeat: boolean;
+}
+/**
+ * [[TimelineComponent]] is used to playback timeline data
+ * @public
+ */
+export declare class TimelineComponent extends React.Component<TimelineComponentProps, TimelineComponentState> {
+    private _timeLastCycle;
+    private _requestFrame;
+    private _unmounted;
+    private _settings;
+    private _repeatLabel;
+    private _removeListener?;
+    private _standardTimelineMenuItems;
+    constructor(props: TimelineComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: TimelineComponentProps, nextState: TimelineComponentState): boolean;
+    componentDidUpdate(prevProps: TimelineComponentProps): void;
+    private _handleTimelinePausePlayEvent;
+    private _onBackward;
+    private _onForward;
+    private _onPlay;
+    private _onPause;
+    private _onTimelineChange;
+    private _setDuration;
+    private _updateAnimation;
+    private _play;
+    private _replay;
+    private _displayTime;
+    private _getMilliseconds;
+    private _onTotalDurationChange;
+    private _onSettingsClick;
+    private _onCloseSettings;
+    private _changeRepeatSetting;
+    private _onRepeatChanged;
+    private _currentDate;
+    private _onSetTotalDuration;
+    private _createMenuItemNodes;
+    private _createMenuItemNode;
+    private _renderSettings;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=TimelineComponent.d.ts.map

package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineComponent.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"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"}

package/lib/esm/imodel-components-react/timeline/TimelineComponent.js

@@ -0,0 +1,341 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./TimelineComponent.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { UiAdmin } from "@itwin/appui-abstract";
+import { ContextMenu, ContextMenuDirection, ContextMenuItem } from "@itwin/core-react";
+import { toDateString, toTimeString, UiComponents } from "@itwin/components-react";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { InlineEdit } from "./InlineEdit";
+import { TimelinePausePlayAction } from "./interfaces";
+import { PlayButton, PlayerButton } from "./PlayerButton";
+import { Scrubber } from "./Scrubber";
+// cspell:ignore millisec
+const slowSpeed = 60 * 1000;
+const mediumSpeed = 20 * 1000;
+const fastSpeed = 10 * 1000;
+/**
+ * [[TimelineComponent]] is used to playback timeline data
+ * @public
+ */
+export class TimelineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._timeLastCycle = 0;
+        this._requestFrame = 0;
+        this._unmounted = false;
+        this._settings = null;
+        this._standardTimelineMenuItems = [
+            { label: UiIModelComponents.translate("timeline.slow"), timelineDuration: slowSpeed },
+            { label: UiIModelComponents.translate("timeline.medium"), timelineDuration: mediumSpeed },
+            { label: UiIModelComponents.translate("timeline.fast"), timelineDuration: fastSpeed },
+        ];
+        this._handleTimelinePausePlayEvent = (args) => {
+            const timelineArgs = args;
+            // istanbul ignore else
+            if (!timelineArgs || this.props.componentId !== timelineArgs.uiComponentId || timelineArgs.timelineAction === undefined)
+                return;
+            let startPlaying;
+            switch (timelineArgs.timelineAction) {
+                case TimelinePausePlayAction.Play:
+                    startPlaying = true;
+                    break;
+                case TimelinePausePlayAction.Pause:
+                    startPlaying = false;
+                    break;
+                case TimelinePausePlayAction.Toggle:
+                    startPlaying = !this.state.isPlaying;
+                    break;
+                // istanbul ignore next
+                default:
+                    return; // throw error?
+            }
+            if (startPlaying)
+                this._onPlay();
+            else
+                this._onPause();
+        };
+        // user clicked backward button
+        this._onBackward = () => {
+            // istanbul ignore else
+            if (this.props.onJump)
+                this.props.onJump(false);
+        };
+        // user clicked forward button
+        this._onForward = () => {
+            // istanbul ignore else
+            if (this.props.onJump)
+                this.props.onJump(true);
+        };
+        // user clicked play button
+        this._onPlay = () => {
+            // istanbul ignore if
+            if (this.state.isPlaying)
+                return;
+            // timeline was complete, restart from the beginning
+            if (this.state.currentDuration >= this.state.totalDuration) {
+                this._replay();
+            }
+            else
+                this._play();
+            // istanbul ignore else
+            if (this.props.onPlayPause)
+                this.props.onPlayPause(true);
+        };
+        // user clicked pause button
+        this._onPause = () => {
+            // istanbul ignore if
+            if (!this.state.isPlaying)
+                return;
+            // stop requesting frames
+            window.cancelAnimationFrame(this._requestFrame);
+            // stop playing
+            this.setState({ isPlaying: false });
+            // istanbul ignore else
+            if (this.props.onPlayPause)
+                this.props.onPlayPause(false);
+        };
+        // user clicked on timeline rail or dragged scrubber handle
+        this._onTimelineChange = (values) => {
+            const currentDuration = values[0];
+            this._setDuration(currentDuration);
+        };
+        // set the current duration, which will call the OnChange callback
+        this._setDuration = (currentDuration) => {
+            this._timeLastCycle = new Date().getTime();
+            // istanbul ignore else
+            if (!this._unmounted)
+                this.setState({ currentDuration });
+            // istanbul ignore else
+            if (this.props.onChange) {
+                const fraction = currentDuration / this.state.totalDuration;
+                this.props.onChange(fraction);
+            }
+        };
+        // recursively update the animation until we hit the end or the pause button is clicked
+        this._updateAnimation = (_timestamp) => {
+            // istanbul ignore else
+            if (!this.state.isPlaying && !this._unmounted) {
+                return;
+            }
+            // update duration
+            const currentTime = new Date().getTime();
+            const millisecondsElapsed = currentTime - this._timeLastCycle;
+            const duration = this.state.currentDuration + millisecondsElapsed;
+            this._setDuration(duration);
+            // stop the animation!
+            if (duration >= this.state.totalDuration) {
+                window.cancelAnimationFrame(this._requestFrame);
+                this.setState({ isPlaying: false });
+                if (this.state.repeat)
+                    this._replay();
+                else {
+                    // istanbul ignore else
+                    if (this.props.onPlayPause)
+                        this.props.onPlayPause(false);
+                }
+                return;
+            }
+            // continue the animation - request the next frame
+            this._requestFrame = window.requestAnimationFrame(this._updateAnimation);
+        };
+        this._replay = () => {
+            // timeline was complete, restart from the beginning
+            this.setState({ currentDuration: 0 }, (() => this._play()));
+        };
+        // user changed the total duration
+        this._onTotalDurationChange = (value) => {
+            // NOTE: we should reset the current duration to 0
+            const milliseconds = this._getMilliseconds(value);
+            this._onSetTotalDuration(milliseconds);
+        };
+        this._onSettingsClick = () => {
+            this.setState((prevState) => ({ isSettingsOpen: !prevState.isSettingsOpen }));
+        };
+        this._onCloseSettings = () => {
+            this.setState({ isSettingsOpen: false });
+        };
+        this._changeRepeatSetting = (newValue) => {
+            // istanbul ignore else
+            if (newValue !== undefined) {
+                this.setState(() => ({ repeat: newValue, isSettingsOpen: false }), () => {
+                    // istanbul ignore else
+                    if (this.props.onSettingsChange) {
+                        this.props.onSettingsChange({ loop: this.state.repeat });
+                    }
+                });
+            }
+        };
+        this._onRepeatChanged = () => {
+            this.setState((prevState) => ({ repeat: !prevState.repeat, isSettingsOpen: false }), () => {
+                // istanbul ignore else
+                if (this.props.onSettingsChange) {
+                    this.props.onSettingsChange({ loop: this.state.repeat });
+                }
+            });
+        };
+        this._currentDate = () => {
+            const fraction = this.state.currentDuration / this.state.totalDuration;
+            if (this.props.endDate && this.props.startDate) {
+                const timeElapsed = (this.props.endDate.getTime() - this.props.startDate.getTime()) * fraction;
+                return new Date(this.props.startDate.getTime() + timeElapsed);
+            }
+            return new Date();
+        };
+        this._onSetTotalDuration = (milliseconds) => {
+            this.setState({ totalDuration: milliseconds, isSettingsOpen: false }, () => {
+                // istanbul ignore else
+                if (this.props.onSettingsChange) {
+                    this.props.onSettingsChange({ duration: milliseconds });
+                }
+            });
+        };
+        this._renderSettings = () => {
+            const { totalDuration } = this.state;
+            let contextMenuItems = [];
+            if (!this.props.appMenuItems) {
+                contextMenuItems = this._standardTimelineMenuItems;
+            }
+            else {
+                if (this.props.appMenuItemOption === "append") {
+                    contextMenuItems = this._standardTimelineMenuItems.concat(this.props.appMenuItems);
+                }
+                else if (this.props.appMenuItemOption === "prefix") {
+                    contextMenuItems = this.props.appMenuItems.concat(this._standardTimelineMenuItems);
+                }
+                else {
+                    contextMenuItems = this.props.appMenuItems;
+                }
+            }
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon icon-more-vertical-2", ref: (element) => this._settings = element, onClick: this._onSettingsClick, role: "button", tabIndex: -1, title: UiComponents.translate("button.label.settings") }),
+                React.createElement(ContextMenu, { opened: this.state.isSettingsOpen, onOutsideClick: this._onCloseSettings, direction: ContextMenuDirection.BottomRight, "data-testid": "timeline-contextmenu-div" },
+                    this.state.includeRepeat && React.createElement(ContextMenuItem, { icon: this.state.repeat && "icon icon-checkmark", onSelect: this._onRepeatChanged }, this._repeatLabel),
+                    this.state.includeRepeat && React.createElement("div", { className: "separator", role: "separator" }),
+                    this._createMenuItemNodes(contextMenuItems, totalDuration))));
+        };
+        this.state = {
+            isSettingsOpen: false,
+            isPlaying: false,
+            minimized: true,
+            currentDuration: props.initialDuration ? props.initialDuration : /* istanbul ignore next */ 0,
+            totalDuration: this.props.totalDuration,
+            repeat: this.props.repeat ? true : false,
+            includeRepeat: this.props.includeRepeat || this.props.includeRepeat === undefined ? true : false,
+        };
+        this._repeatLabel = UiIModelComponents.translate("timeline.repeat");
+        // istanbul ignore else
+        if (this.props.componentId) { // can't handle an event if we have no id
+            this._removeListener = UiAdmin.onGenericUiEvent.addListener(this._handleTimelinePausePlayEvent);
+        }
+    }
+    componentWillUnmount() {
+        if (this._removeListener)
+            this._removeListener();
+        window.cancelAnimationFrame(this._requestFrame);
+        this._unmounted = true;
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        let result = false;
+        // istanbul ignore next
+        if (nextState !== this.state || nextProps !== this.props ||
+            nextProps.startDate !== this.props.startDate ||
+            nextProps.endDate !== this.props.endDate ||
+            nextProps.initialDuration !== this.props.initialDuration ||
+            nextProps.repeat !== this.props.repeat)
+            result = true;
+        return result;
+    }
+    componentDidUpdate(prevProps) {
+        // istanbul ignore else
+        if (this.props.initialDuration !== prevProps.initialDuration) {
+            this._setDuration(this.props.initialDuration ? this.props.initialDuration : /* istanbul ignore next */ 0);
+        }
+        // istanbul ignore else
+        if (this.props.repeat !== prevProps.repeat) {
+            this._changeRepeatSetting(this.props.repeat);
+        }
+        // istanbul ignore else
+        if (this.props.totalDuration !== prevProps.totalDuration) {
+            this._onSetTotalDuration(this.props.totalDuration);
+        }
+    }
+    _play() {
+        // start playing
+        this.setState({ isPlaying: true }, () => {
+            // request the next frame
+            this._timeLastCycle = new Date().getTime();
+            this._requestFrame = window.requestAnimationFrame(this._updateAnimation);
+        });
+    }
+    _displayTime(millisec) {
+        const addZero = (i) => {
+            return (i < 10) ? `0${i}` : i;
+        };
+        const date = new Date(millisec);
+        // const hours = date.getUTCHours();
+        const minutes = date.getUTCMinutes();
+        const seconds = date.getUTCSeconds();
+        return `${addZero(minutes)}:${addZero(seconds)}`;
+    }
+    _getMilliseconds(time) {
+        // istanbul ignore else - WIP
+        if (time.indexOf(":") !== -1) {
+            return (Number(time.split(":")[0]) * 60 + Number(time.split(":")[1])) * 1000;
+        }
+        else {
+            return Number(time) * 1000;
+        }
+    }
+    _createMenuItemNodes(itemList, currentTimelineDuration) {
+        const itemNodes = [];
+        itemList.forEach((item, index) => {
+            const reactItem = this._createMenuItemNode(item, index, currentTimelineDuration);
+            // istanbul ignore else
+            if (reactItem)
+                itemNodes.push(reactItem);
+        });
+        return itemNodes;
+    }
+    _createMenuItemNode(item, index, currentTimelineDuration) {
+        let node = null;
+        const label = item.label;
+        const iconSpec = currentTimelineDuration === item.timelineDuration ? "icon icon-checkmark" : undefined;
+        node = (React.createElement(ContextMenuItem, { key: index, onSelect: () => this._onSetTotalDuration(item.timelineDuration), icon: iconSpec }, label));
+        return node;
+    }
+    render() {
+        const { startDate, endDate, showDuration, timeZoneOffset } = this.props;
+        const { currentDuration, totalDuration, minimized } = this.state;
+        const currentDate = this._currentDate();
+        const durationString = this._displayTime(currentDuration);
+        const totalDurationString = this._displayTime(totalDuration);
+        const hasDates = !!startDate && !!endDate;
+        return (React.createElement("div", { "data-testid": "timeline-component", className: classnames("timeline-component", !!minimized && "minimized", hasDates && "has-dates") },
+            React.createElement("div", { className: "header" },
+                React.createElement(PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, "data-testid": "timeline-play" }),
+                React.createElement(PlayerButton, { className: "play-backward", icon: "icon-caret-left", onClick: this._onBackward, title: UiIModelComponents.translate("timeline.backward") }),
+                React.createElement(PlayerButton, { className: "play-button-step", icon: "icon-media-controls-circular-play", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, title: UiIModelComponents.translate("timeline.step") }),
+                React.createElement(PlayerButton, { className: "play-forward", icon: "icon-caret-right", onClick: this._onForward, title: UiIModelComponents.translate("timeline.backward") }),
+                React.createElement("span", { className: "current-date" }, toDateString(currentDate, timeZoneOffset))),
+            React.createElement("div", { className: "scrubber" },
+                React.createElement(PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
+                React.createElement("div", { className: "start-time-container" },
+                    hasDates && React.createElement("span", { "data-testid": "test-start-date", className: "start-date" }, toDateString(startDate, timeZoneOffset)),
+                    hasDates && !showDuration && React.createElement("span", { "data-testid": "test-start-time", className: "start-time" }, toTimeString(startDate, timeZoneOffset)),
+                    showDuration && React.createElement("span", { className: "duration-start-time" }, durationString)),
+                React.createElement(Scrubber, { className: "slider", currentDuration: this.state.currentDuration, totalDuration: totalDuration, startDate: startDate, endDate: endDate, isPlaying: this.state.isPlaying, inMiniMode: !!minimized, showTime: !showDuration, onChange: this._onTimelineChange, onUpdate: this._onTimelineChange, timeZoneOffset: this.props.timeZoneOffset, markDate: this.props.markDate }),
+                React.createElement("div", { className: "end-time-container" },
+                    hasDates && React.createElement("span", { className: "end-date" }, toDateString(endDate, timeZoneOffset)),
+                    hasDates && !showDuration && React.createElement("span", { className: "end-time" }, toTimeString(endDate, timeZoneOffset)),
+                    showDuration && React.createElement(InlineEdit, { className: "duration-end-time", defaultValue: totalDurationString, onChange: this._onTotalDurationChange })),
+                minimized && this._renderSettings())));
+    }
+}
+//# sourceMappingURL=TimelineComponent.js.map

package/lib/esm/imodel-components-react/timeline/TimelineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineComponent.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\n\nimport \"./TimelineComponent.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { GenericUiEventArgs, UiAdmin } from \"@itwin/appui-abstract\";\nimport { ContextMenu, ContextMenuDirection, ContextMenuItem } from \"@itwin/core-react\";\nimport { toDateString, toTimeString, UiComponents } from \"@itwin/components-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { InlineEdit } from \"./InlineEdit\";\nimport { PlaybackSettings, TimelinePausePlayAction, TimelinePausePlayArgs } from \"./interfaces\";\nimport { PlayButton, PlayerButton } from \"./PlayerButton\";\nimport { Scrubber } from \"./Scrubber\";\n\n// cspell:ignore millisec\n\nconst slowSpeed = 60 * 1000;\nconst mediumSpeed = 20 * 1000;\nconst fastSpeed = 10 * 1000;\n/**\n * [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu\n * \"replace\" : use the app-supplied items in place of the standard items\n * \"append\" : add the app-supplied items following the standard items\n * \"prefix\" : add the app-supplied items before the standard items\n *\n * @public\n */\nexport type TimelineMenuItemOption = \"replace\" | \"append\" | \"prefix\";\n/**\n * [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu\n * @public\n */\nexport interface TimelineMenuItemProps {\n  /** localized label for menu item */\n  label: string;\n\n  /** duration for the entire timeline to play */\n  timelineDuration: number;\n}\n/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator\n * @public\n */\nexport interface TimelineDateMarkerProps {\n  /** Date to mark. If undefined, today's date will be used. */\n  date?: Date;\n  /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */\n  dateMarker?: React.ReactNode;\n}\n/**\n *  [[TimelineComponentProps]] configure the timeline\n * @public\n */\nexport interface TimelineComponentProps {\n  /** Start date: beginning of the date range of a date-based timeline. */\n  startDate?: Date;\n  /** End date: end of the date range of a date-based timeline. */\n  endDate?: Date;\n  /** Total duration: range of the timeline in milliseconds. */\n  totalDuration: number;\n  /** Initial value for the current duration (the location of the thumb) in milliseconds */\n  initialDuration?: number;\n  /** Show in minimized mode (For future use. This prop will always be treated as true.) */\n  minimized?: boolean;\n  /** When playing, repeat indefinitely */\n  repeat?: boolean;\n  /** Show duration instead of time */\n  showDuration?: boolean;\n  /** Callback with current duration value (as a fraction) */\n  onChange?: (duration: number) => void;\n  /** Callback triggered when play/pause button is pressed */\n  onPlayPause?: (playing: boolean) => void;\n  /** Callback triggered when backward/forward buttons are pressed */\n  onJump?: (forward: boolean) => void;\n  /** Callback triggered when a setting is changed */\n  onSettingsChange?: (arg: PlaybackSettings) => void;\n  /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true) */\n  alwaysMinimized?: boolean;\n  /** ComponentId -- must be set to use TimelineComponentEvents */\n  componentId?: string;\n  /** Include the repeat option on the Timeline Context Menu */\n  includeRepeat?: boolean;\n  /** App-supplied speed entries in the Timeline Context Menu */\n  appMenuItems?: TimelineMenuItemProps[];\n  /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append, replace)*/\n  appMenuItemOption?: TimelineMenuItemOption;\n  /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */\n  timeZoneOffset?: number;\n  /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */\n  markDate?: TimelineDateMarkerProps;\n\n}\n/** @internal */\ninterface TimelineComponentState {\n  /** Settings popup is opened or closed */\n  isSettingsOpen: boolean;\n  /**  True if timeline is currently playing, false if paused */\n  isPlaying: boolean;\n  /** Minimized mode (For future use. This will always be true) */\n  minimized?: boolean;\n  /** Current duration in milliseconds */\n  currentDuration: number;\n  /** Total duration in milliseconds */\n  totalDuration: number;\n  /** If true, automatically restart when the timeline is finished playing */\n  repeat: boolean;\n  /** If true, include the repeat option in the timeline context menu */\n  includeRepeat: boolean;\n}\n\n/**\n * [[TimelineComponent]] is used to playback timeline data\n * @public\n */\nexport class TimelineComponent extends React.Component<TimelineComponentProps, TimelineComponentState> {\n  private _timeLastCycle = 0;\n  private _requestFrame = 0;\n  private _unmounted = false;\n  private _settings: HTMLElement | null = null;\n  private _repeatLabel: string;\n  private _removeListener?: () => void;\n  private _standardTimelineMenuItems: TimelineMenuItemProps[] = [\n    { label: UiIModelComponents.translate(\"timeline.slow\"), timelineDuration: slowSpeed },\n    { label: UiIModelComponents.translate(\"timeline.medium\"), timelineDuration: mediumSpeed },\n    { label: UiIModelComponents.translate(\"timeline.fast\"), timelineDuration: fastSpeed },\n  ];\n\n  constructor(props: TimelineComponentProps) {\n    super(props);\n\n    this.state = {\n      isSettingsOpen: false,\n      isPlaying: false,\n      minimized: true,\n      currentDuration: props.initialDuration ? props.initialDuration : /* istanbul ignore next */ 0,\n      totalDuration: this.props.totalDuration,\n      repeat: this.props.repeat ? true : false,\n      includeRepeat: this.props.includeRepeat || this.props.includeRepeat === undefined ? true : false,\n    };\n\n    this._repeatLabel = UiIModelComponents.translate(\"timeline.repeat\");\n    // istanbul ignore else\n    if (this.props.componentId) { // can't handle an event if we have no id\n      this._removeListener = UiAdmin.onGenericUiEvent.addListener(this._handleTimelinePausePlayEvent);\n    }\n  }\n\n  public override componentWillUnmount() {\n    if (this._removeListener)\n      this._removeListener();\n    window.cancelAnimationFrame(this._requestFrame);\n    this._unmounted = true;\n  }\n\n  public override shouldComponentUpdate(nextProps: TimelineComponentProps, nextState: TimelineComponentState) {\n    let result = false;\n\n    // istanbul ignore next\n    if (nextState !== this.state || nextProps !== this.props ||\n      nextProps.startDate !== this.props.startDate ||\n      nextProps.endDate !== this.props.endDate ||\n      nextProps.initialDuration !== this.props.initialDuration ||\n      nextProps.repeat !== this.props.repeat\n    )\n      result = true;\n\n    return result;\n  }\n\n  public override componentDidUpdate(prevProps: TimelineComponentProps) {\n    // istanbul ignore else\n    if (this.props.initialDuration !== prevProps.initialDuration) {\n      this._setDuration(this.props.initialDuration ? this.props.initialDuration : /* istanbul ignore next */ 0);\n    }\n\n    // istanbul ignore else\n    if (this.props.repeat !== prevProps.repeat) {\n      this._changeRepeatSetting(this.props.repeat);\n    }\n\n    // istanbul ignore else\n    if (this.props.totalDuration !== prevProps.totalDuration) {\n      this._onSetTotalDuration(this.props.totalDuration);\n    }\n  }\n  private _handleTimelinePausePlayEvent = (args: GenericUiEventArgs): void => {\n    const timelineArgs = args as TimelinePausePlayArgs;\n    // istanbul ignore else\n    if (!timelineArgs || this.props.componentId !== timelineArgs.uiComponentId || timelineArgs.timelineAction === undefined)\n      return;\n\n    let startPlaying: boolean;\n    switch (timelineArgs.timelineAction) {\n      case TimelinePausePlayAction.Play:\n        startPlaying = true;\n        break;\n      case TimelinePausePlayAction.Pause:\n        startPlaying = false;\n        break;\n      case TimelinePausePlayAction.Toggle:\n        startPlaying = !this.state.isPlaying;\n        break;\n      // istanbul ignore next\n      default:\n        return; // throw error?\n    }\n    if (startPlaying)\n      this._onPlay();\n    else\n      this._onPause();\n  };\n\n  // user clicked backward button\n  private _onBackward = () => {\n    // istanbul ignore else\n    if (this.props.onJump)\n      this.props.onJump(false);\n  };\n\n  // user clicked forward button\n  private _onForward = () => {\n    // istanbul ignore else\n    if (this.props.onJump)\n      this.props.onJump(true);\n  };\n\n  // user clicked play button\n  private _onPlay = () => {\n    // istanbul ignore if\n    if (this.state.isPlaying)\n      return;\n\n    // timeline was complete, restart from the beginning\n    if (this.state.currentDuration >= this.state.totalDuration) {\n      this._replay();\n    } else\n      this._play();\n\n    // istanbul ignore else\n    if (this.props.onPlayPause)\n      this.props.onPlayPause(true);\n  };\n\n  // user clicked pause button\n  private _onPause = () => {\n    // istanbul ignore if\n    if (!this.state.isPlaying)\n      return;\n\n    // stop requesting frames\n    window.cancelAnimationFrame(this._requestFrame);\n\n    // stop playing\n    this.setState({ isPlaying: false });\n\n    // istanbul ignore else\n    if (this.props.onPlayPause)\n      this.props.onPlayPause(false);\n  };\n\n  // user clicked on timeline rail or dragged scrubber handle\n  private _onTimelineChange = (values: ReadonlyArray<number>) => {\n    const currentDuration = values[0];\n    this._setDuration(currentDuration);\n  };\n\n  // set the current duration, which will call the OnChange callback\n  private _setDuration = (currentDuration: number) => {\n    this._timeLastCycle = new Date().getTime();\n    // istanbul ignore else\n    if (!this._unmounted)\n      this.setState({ currentDuration });\n    // istanbul ignore else\n    if (this.props.onChange) {\n      const fraction = currentDuration / this.state.totalDuration;\n      this.props.onChange(fraction);\n    }\n  };\n\n  // recursively update the animation until we hit the end or the pause button is clicked\n  private _updateAnimation = (_timestamp: number) => {\n    // istanbul ignore else\n    if (!this.state.isPlaying && !this._unmounted) {\n      return;\n    }\n\n    // update duration\n    const currentTime = new Date().getTime();\n    const millisecondsElapsed = currentTime - this._timeLastCycle;\n    const duration = this.state.currentDuration + millisecondsElapsed;\n    this._setDuration(duration);\n\n    // stop the animation!\n    if (duration >= this.state.totalDuration) {\n      window.cancelAnimationFrame(this._requestFrame);\n      this.setState({ isPlaying: false });\n      if (this.state.repeat)\n        this._replay();\n      else {\n        // istanbul ignore else\n        if (this.props.onPlayPause)\n          this.props.onPlayPause(false);\n      }\n\n      return;\n    }\n\n    // continue the animation - request the next frame\n    this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n  };\n\n  private _play() {\n    // start playing\n    this.setState({ isPlaying: true }, () => {\n      // request the next frame\n      this._timeLastCycle = new Date().getTime();\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n    });\n  }\n\n  private _replay = () => {\n    // timeline was complete, restart from the beginning\n    this.setState({ currentDuration: 0 }, (() => this._play()));\n  };\n\n  private _displayTime(millisec: number) {\n    const addZero = (i: number) => {\n      return (i < 10) ? `0${i}` : i;\n    };\n\n    const date = new Date(millisec);\n    // const hours = date.getUTCHours();\n    const minutes = date.getUTCMinutes();\n    const seconds = date.getUTCSeconds();\n    return `${addZero(minutes)}:${addZero(seconds)}`;\n  }\n\n  private _getMilliseconds(time: string) {\n    // istanbul ignore else - WIP\n    if (time.indexOf(\":\") !== -1) {\n      return (Number(time.split(\":\")[0]) * 60 + Number(time.split(\":\")[1])) * 1000;\n    } else {\n      return Number(time) * 1000;\n    }\n  }\n\n  // user changed the total duration\n  private _onTotalDurationChange = (value: string) => {\n    // NOTE: we should reset the current duration to 0\n    const milliseconds = this._getMilliseconds(value);\n    this._onSetTotalDuration(milliseconds);\n  };\n\n  private _onSettingsClick = () => {\n    this.setState((prevState) => ({ isSettingsOpen: !prevState.isSettingsOpen }));\n  };\n\n  private _onCloseSettings = () => {\n    this.setState({ isSettingsOpen: false });\n  };\n\n  private _changeRepeatSetting = (newValue?: boolean) => {\n    // istanbul ignore else\n    if (newValue !== undefined) {\n      this.setState(\n        () => ({ repeat: newValue, isSettingsOpen: false }),\n        () => {\n          // istanbul ignore else\n          if (this.props.onSettingsChange) {\n            this.props.onSettingsChange({ loop: this.state.repeat });\n          }\n        });\n    }\n  };\n\n  private _onRepeatChanged = () => {\n    this.setState(\n      (prevState) => ({ repeat: !prevState.repeat, isSettingsOpen: false }),\n      () => {\n        // istanbul ignore else\n        if (this.props.onSettingsChange) {\n          this.props.onSettingsChange({ loop: this.state.repeat });\n        }\n      });\n  };\n\n  private _currentDate = (): Date => {\n    const fraction = this.state.currentDuration / this.state.totalDuration;\n    if (this.props.endDate && this.props.startDate) {\n      const timeElapsed = (this.props.endDate.getTime() - this.props.startDate.getTime()) * fraction;\n      return new Date(this.props.startDate.getTime() + timeElapsed);\n    }\n    return new Date();\n  };\n\n  private _onSetTotalDuration = (milliseconds: number) => {\n    this.setState(\n      { totalDuration: milliseconds, isSettingsOpen: false },\n      () => {\n        // istanbul ignore else\n        if (this.props.onSettingsChange) {\n          this.props.onSettingsChange({ duration: milliseconds });\n        }\n      });\n  };\n  private _createMenuItemNodes(itemList: TimelineMenuItemProps[], currentTimelineDuration: number): React.ReactNode[] {\n    const itemNodes: React.ReactNode[] = [];\n\n    itemList.forEach((item: TimelineMenuItemProps, index: number) => {\n      const reactItem = this._createMenuItemNode(item, index, currentTimelineDuration);\n      // istanbul ignore else\n      if (reactItem)\n        itemNodes.push(reactItem);\n    });\n\n    return itemNodes;\n  }\n\n  private _createMenuItemNode(item: TimelineMenuItemProps, index: number, currentTimelineDuration: number): React.ReactNode {\n    let node: React.ReactNode = null;\n    const label = item.label;\n    const iconSpec = currentTimelineDuration === item.timelineDuration ? \"icon icon-checkmark\" : undefined;\n\n    node = (\n      <ContextMenuItem key={index} onSelect={() => this._onSetTotalDuration(item.timelineDuration)} icon={iconSpec} >\n        {label}\n      </ContextMenuItem>\n    );\n    return node;\n  }\n\n  private _renderSettings = () => {\n    const { totalDuration } = this.state;\n    let contextMenuItems: Array<TimelineMenuItemProps> = [];\n\n    if (!this.props.appMenuItems) {\n      contextMenuItems = this._standardTimelineMenuItems;\n    } else {\n      if (this.props.appMenuItemOption === \"append\") {\n        contextMenuItems = this._standardTimelineMenuItems.concat(this.props.appMenuItems);\n      } else if (this.props.appMenuItemOption === \"prefix\") {\n        contextMenuItems = this.props.appMenuItems.concat(this._standardTimelineMenuItems);\n      } else {\n        contextMenuItems = this.props.appMenuItems;\n      }\n    }\n\n    return (\n      <>\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n        <span data-testid=\"timeline-settings\" className=\"timeline-settings icon icon-more-vertical-2\" ref={(element) => this._settings = element} onClick={this._onSettingsClick}\n          role=\"button\" tabIndex={-1} title={UiComponents.translate(\"button.label.settings\")}\n        ></span>\n        <ContextMenu opened={this.state.isSettingsOpen} onOutsideClick={this._onCloseSettings} direction={ContextMenuDirection.BottomRight} data-testid=\"timeline-contextmenu-div\">\n          {this.state.includeRepeat && <ContextMenuItem icon={this.state.repeat && \"icon icon-checkmark\"} onSelect={this._onRepeatChanged}>{this._repeatLabel}</ContextMenuItem>}\n          {this.state.includeRepeat && <div className=\"separator\" role=\"separator\" />}\n          {this._createMenuItemNodes(contextMenuItems, totalDuration)}\n        </ContextMenu>\n      </>\n    );\n  };\n\n  public override render() {\n    const { startDate, endDate, showDuration, timeZoneOffset } = this.props;\n    const { currentDuration, totalDuration, minimized } = this.state;\n    const currentDate = this._currentDate();\n    const durationString = this._displayTime(currentDuration);\n    const totalDurationString = this._displayTime(totalDuration);\n    const hasDates = !!startDate && !!endDate;\n\n    return (\n      <div data-testid=\"timeline-component\" className={classnames(\"timeline-component\", !!minimized && \"minimized\", hasDates && \"has-dates\")} >\n        <div className=\"header\">\n          <PlayButton className=\"play-button\" isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause} data-testid=\"timeline-play\" />\n          <PlayerButton className=\"play-backward\" icon=\"icon-caret-left\" onClick={this._onBackward}\n            title={UiIModelComponents.translate(\"timeline.backward\")} />\n          <PlayerButton className=\"play-button-step\" icon=\"icon-media-controls-circular-play\"\n            isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause}\n            title={UiIModelComponents.translate(\"timeline.step\")} />\n          <PlayerButton className=\"play-forward\" icon=\"icon-caret-right\" onClick={this._onForward}\n            title={UiIModelComponents.translate(\"timeline.backward\")} />\n          <span className=\"current-date\">{toDateString(currentDate, timeZoneOffset)}</span>\n        </div>\n        <div className=\"scrubber\">\n          <PlayButton className=\"play-button\" isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause} />\n          <div className=\"start-time-container\">\n            {hasDates && <span data-testid=\"test-start-date\" className=\"start-date\">{toDateString(startDate, timeZoneOffset)}</span>}\n            {hasDates && !showDuration && <span data-testid=\"test-start-time\" className=\"start-time\">{toTimeString(startDate, timeZoneOffset)}</span>}\n            {showDuration && <span className=\"duration-start-time\">{durationString}</span>}\n          </div>\n          <Scrubber\n            className=\"slider\"\n            currentDuration={this.state.currentDuration}\n            totalDuration={totalDuration}\n            startDate={startDate}\n            endDate={endDate}\n            isPlaying={this.state.isPlaying}\n            inMiniMode={!!minimized}\n            showTime={!showDuration}\n            onChange={this._onTimelineChange}\n            onUpdate={this._onTimelineChange}\n            timeZoneOffset={this.props.timeZoneOffset}\n            markDate={this.props.markDate}\n          />\n          <div className=\"end-time-container\">\n            {hasDates && <span className=\"end-date\">{toDateString(endDate, timeZoneOffset)}</span>}\n            {hasDates && !showDuration && <span className=\"end-time\">{toTimeString(endDate, timeZoneOffset)}</span>}\n            {showDuration && <InlineEdit className=\"duration-end-time\" defaultValue={totalDurationString} onChange={this._onTotalDurationChange} />}\n          </div>\n          {minimized && this._renderSettings()}\n        </div>\n      </div>\n    );\n  }\n}\n"]}