@itwin/imodel-components-react 4.9.0 → 4.10.0

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

@@ -1,391 +1,251 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 * as React from "react";
 import { UiAdmin } from "@itwin/appui-abstract";
 import { toDateString, toTimeString, UiComponents, } from "@itwin/components-react";
-import { Icon } from "@itwin/core-react";
-import { SvgCaretLeft, SvgCaretRight, SvgCheckmark, SvgMoreVertical, SvgPlayCircular, } from "@itwin/itwinui-icons-react";
-import { DropdownMenu, MenuDivider, MenuItem } from "@itwin/itwinui-react";
-import classnames from "classnames";
-import * as React from "react";
+import { SvgCheckmark, SvgMoreVertical } from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton, MenuDivider, MenuItem, } from "@itwin/itwinui-react";
 import { UiIModelComponents } from "../UiIModelComponents";
 import { InlineEdit } from "./InlineEdit";
 import { TimelinePausePlayAction } from "./interfaces";
-import { PlayButton, PlayerButton } from "./PlayerButton";
+import { PlayButton } from "./PlayButton";
 import { Scrubber } from "./Scrubber";
-import "./TimelineComponent.scss";
-// cspell:ignore millisec
 const slowSpeed = 60 * 1000;
 const mediumSpeed = 20 * 1000;
 const fastSpeed = 10 * 1000;
-/**
- * [[TimelineComponent]] is used to playback timeline data
+/** [[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._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) => {
+export function TimelineComponent(props) {
+    const { appMenuItemOption = "replace", startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions, includeRepeat = true, onSettingsChange, onChange, onPlayPause, } = props;
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [currentDuration, setCurrentDuration] = React.useState(props.initialDuration ?? 0);
+    const [totalDuration, setTotalDuration] = React.useState(props.totalDuration);
+    const [repeat, setRepeat] = React.useState(props.repeat ?? false);
+    const playOrReplay = React.useCallback(() => {
+        if (isPlaying)
+            return;
+        if (currentDuration >= totalDuration) {
+            setCurrentDuration(0);
+        }
+        setIsPlaying(true);
+        onPlayPause?.(true);
+    }, [isPlaying, onPlayPause, currentDuration, totalDuration]);
+    const pause = React.useCallback(() => {
+        if (!isPlaying)
+            return;
+        setIsPlaying(false);
+        onPlayPause?.(false);
+    }, [isPlaying, onPlayPause]);
+    const updateTotalDuration = (newTotalDuration) => {
+        if (newTotalDuration === totalDuration)
+            return;
+        const fraction = currentDuration / totalDuration;
+        const newCurrentDuration = fraction * newTotalDuration;
+        setTotalDuration(newTotalDuration);
+        setCurrentDuration(newCurrentDuration);
+        onSettingsChange?.({ duration: newTotalDuration });
+    };
+    const updateDuration = (newDuration, currentTotalDuration = totalDuration) => {
+        newDuration = Math.max(newDuration, 0);
+        newDuration = Math.min(newDuration, currentTotalDuration);
+        if (newDuration === currentDuration)
+            return;
+        setCurrentDuration(newDuration);
+        const fraction = newDuration / currentTotalDuration;
+        onChange?.(fraction);
+    };
+    const updateRepeat = (newRepeat) => {
+        if (newRepeat === repeat)
+            return;
+        setRepeat(newRepeat);
+        onSettingsChange?.({ loop: newRepeat });
+    };
+    const [prevTotalDuration, setPrevTotalDuration] = React.useState(props.totalDuration);
+    if (prevTotalDuration !== props.totalDuration) {
+        setPrevTotalDuration(props.totalDuration);
+        updateTotalDuration(props.totalDuration);
+    }
+    const [prevInitialDuration, setPrevInitialDuration] = React.useState(props.initialDuration);
+    if (prevInitialDuration !== props.initialDuration) {
+        setPrevInitialDuration(props.initialDuration);
+        updateDuration(props.initialDuration ?? 0, props.totalDuration);
+    }
+    const [prevRepeat, setPrevRepeat] = React.useState(props.repeat);
+    if (prevRepeat !== props.repeat) {
+        setPrevRepeat(props.repeat);
+        updateRepeat(props.repeat ?? repeat);
+    }
+    React.useEffect(() => {
+        if (!props.componentId)
+            return;
+        return UiAdmin.onGenericUiEvent.addListener((args) => {
             const timelineArgs = args;
-            // istanbul ignore else
             if (!timelineArgs ||
-                this.props.componentId !== timelineArgs.uiComponentId ||
+                props.componentId !== timelineArgs.uiComponentId ||
                 timelineArgs.timelineAction === undefined)
                 return;
-            let startPlaying;
             switch (timelineArgs.timelineAction) {
                 case TimelinePausePlayAction.Play:
-                    startPlaying = true;
+                    playOrReplay();
                     break;
                 case TimelinePausePlayAction.Pause:
-                    startPlaying = false;
+                    pause();
                     break;
                 case TimelinePausePlayAction.Toggle:
-                    startPlaying = !this.state.isPlaying;
+                    if (isPlaying) {
+                        pause();
+                    }
+                    else {
+                        playOrReplay();
+                    }
                     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, updatedTotal) => {
-            const actualDuration = Math.min(updatedTotal !== null && updatedTotal !== void 0 ? updatedTotal : this.state.totalDuration, Math.max(currentDuration, 0));
-            this._timeLastCycle = new Date().getTime();
-            // istanbul ignore else
-            if (!this._unmounted)
-                this.setState({ currentDuration: actualDuration });
-            // istanbul ignore else
-            if (this.props.onChange) {
-                const fraction = actualDuration / (updatedTotal !== null && updatedTotal !== void 0 ? updatedTotal : 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);
-                }
+        });
+    }, [isPlaying, pause, playOrReplay, props.componentId]);
+    useAnimation(({ delta }) => {
+        const duration = currentDuration + delta;
+        updateDuration(duration);
+        if (duration >= totalDuration) {
+            if (repeat) {
+                setCurrentDuration(0);
                 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._changeRepeatSetting = (newValue) => {
-            // istanbul ignore else
-            if (newValue !== undefined) {
-                this.setState(() => ({ repeat: newValue }), () => {
-                    // istanbul ignore else
-                    if (this.props.onSettingsChange) {
-                        this.props.onSettingsChange({ loop: this.state.repeat });
-                    }
-                });
-            }
-        };
-        this._onRepeatChanged = () => {
-            this.setState((prevState) => ({ repeat: !prevState.repeat }), () => {
-                // 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 }, () => {
-                // istanbul ignore else
-                if (this.props.onSettingsChange) {
-                    this.props.onSettingsChange({ duration: milliseconds });
-                }
-            });
-        };
-        this._renderSettings = () => {
-            const createMenuItemNodes = (close) => {
-                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;
-                    }
-                }
-                const itemNodes = [];
-                let keyIndex = 0;
-                if (this.state.includeRepeat) {
-                    const checked = this.state.repeat;
-                    const icon = checked ? (React.createElement("span", { className: "icon" },
-                        React.createElement(Icon, { iconSpec: React.createElement(SvgCheckmark, null) }),
-                        " ")) : (React.createElement("span", null));
-                    itemNodes.push(React.createElement(MenuItem, { key: ++keyIndex, onClick: () => {
-                            this._onRepeatChanged();
-                            close();
-                        }, icon: icon }, this._repeatLabel));
-                    itemNodes.push(React.createElement(MenuDivider, { key: ++keyIndex }));
-                }
-                contextMenuItems.forEach((item, index) => {
-                    itemNodes.push(this._createMenuItemNode(item, index + keyIndex + 1, totalDuration, close));
-                });
-                return itemNodes;
-            };
-            return (React.createElement(DropdownMenu, { menuItems: createMenuItemNodes, placement: "top-start", popperOptions: {
-                    modifiers: [
-                        {
-                            name: "hide", // When the timeline is no longer visible, hide the popper.
-                        },
-                        {
-                            name: "preventOverflow",
-                            options: {
-                                altAxis: true, // Allow the popper to go below the reference element and use as much space as needed.
-                            },
-                        },
-                        {
-                            name: "computeStyles",
-                            options: {
-                                roundOffsets: ({ x, y }) => ({
-                                    x,
-                                    y: Math.max(y, 0), // Ensure that the top of the popper will not go over the top of the document.
-                                }),
-                            },
-                        },
-                        {
-                            name: "setPopperClass",
-                            enabled: true,
-                            phase: "beforeWrite",
-                            fn({ state }) {
-                                state.attributes.popper.class =
-                                    "timeline-component-max-sized-scrolling-menu";
-                            },
-                        },
-                    ],
-                } },
-                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon", role: "button", tabIndex: -1, title: UiComponents.translate("button.label.settings") },
-                    React.createElement(Icon, { iconSpec: React.createElement(SvgMoreVertical, null) }))));
-        };
-        this.state = {
-            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);
+            pause();
         }
-    }
-    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, this.props.totalDuration !== prevProps.totalDuration
-                ? this.props.totalDuration
-                : undefined);
+    }, isPlaying);
+    const onTimelineChange = (values) => {
+        const newDuration = values[0];
+        updateDuration(newDuration);
+    };
+    const currentDurationStr = toDisplayTime(currentDuration);
+    const totalDurationStr = toDisplayTime(totalDuration);
+    const hasDates = !!startDate && !!endDate;
+    return (React.createElement("div", { "data-testid": "timeline-component", className: "timeline-component" },
+        React.createElement(PlayButton, { isPlaying: isPlaying, onPlay: playOrReplay, onPause: pause }),
+        React.createElement("div", { className: "time-container" },
+            hasDates && (React.createElement("span", { "data-testid": "test-start-date", className: "timeline-date" }, toDateString(startDate, timeZoneOffset, dateFormatOptions))),
+            hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "timeline-time" }, toTimeString(startDate, timeZoneOffset, timeFormatOptions))),
+            showDuration && (React.createElement("span", { className: "timeline-duration-time" }, currentDurationStr))),
+        React.createElement(Scrubber, { className: "slider", currentDuration: currentDuration, totalDuration: totalDuration, startDate: startDate, endDate: endDate, isPlaying: isPlaying, showTime: !showDuration, onChange: onTimelineChange, onUpdate: onTimelineChange, timeZoneOffset: props.timeZoneOffset, markDate: props.markDate }),
+        React.createElement("div", { className: "time-container" },
+            hasDates && (React.createElement("span", { "data-testid": "test-end-date", className: "timeline-date" }, toDateString(endDate, timeZoneOffset))),
+            hasDates && !showDuration && (React.createElement("span", { className: "timeline-time" }, toTimeString(endDate, timeZoneOffset, timeFormatOptions))),
+            showDuration && (React.createElement(InlineEdit, { className: "timeline-duration-time", defaultValue: totalDurationStr, onChange: (value) => {
+                    const newTotalDuration = timeToMs(value);
+                    updateTotalDuration(newTotalDuration);
+                } }))),
+        React.createElement(SettingsMenu, { appMenuItems: props.appMenuItems, appMenuItemOption: appMenuItemOption, includeRepeat: includeRepeat, repeat: repeat, totalDuration: totalDuration, onRepeatClick: () => {
+                updateRepeat(!repeat);
+            }, onTotalDurationChange: (newTotalDuration) => {
+                updateTotalDuration(newTotalDuration);
+            } })));
+}
+function SettingsMenu({ appMenuItems, appMenuItemOption, includeRepeat, repeat, totalDuration, onRepeatClick, onTotalDurationChange, }) {
+    const settingsLabel = React.useMemo(() => UiComponents.translate("button.label.settings"), []);
+    const repeatLabel = React.useMemo(() => UiIModelComponents.translate("timeline.repeat"), []);
+    const standardItems = React.useMemo(() => [
+        {
+            label: UiIModelComponents.translate("timeline.slow"),
+            timelineDuration: slowSpeed,
+        },
+        {
+            label: UiIModelComponents.translate("timeline.medium"),
+            timelineDuration: mediumSpeed,
+        },
+        {
+            label: UiIModelComponents.translate("timeline.fast"),
+            timelineDuration: fastSpeed,
+        },
+    ], []);
+    const menuItems = React.useMemo(() => {
+        if (!appMenuItems) {
+            return standardItems;
         }
-        // istanbul ignore else
-        if (this.props.repeat !== prevProps.repeat) {
-            this._changeRepeatSetting(this.props.repeat);
+        if (appMenuItemOption === "append") {
+            return [...standardItems, ...appMenuItems];
         }
-        // istanbul ignore else
-        if (this.props.totalDuration !== prevProps.totalDuration) {
-            this._onSetTotalDuration(this.props.totalDuration);
+        if (appMenuItemOption === "prefix") {
+            return [...appMenuItems, ...standardItems];
         }
-    }
-    _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;
+        // Replace
+        return appMenuItems;
+    }, [appMenuItemOption, appMenuItems, standardItems]);
+    return (React.createElement(DropdownMenu, { menuItems: (close) => {
+            return [
+                ...(includeRepeat
+                    ? [
+                        React.createElement(MenuItem, { key: "repeat", onClick: () => {
+                                onRepeatClick();
+                                close();
+                            }, startIcon: repeat ? React.createElement(SvgCheckmark, null) : React.createElement(React.Fragment, null) }, repeatLabel),
+                        React.createElement(MenuDivider, { key: "divider" }),
+                    ]
+                    : []),
+                ...menuItems.map((item, index) => {
+                    const checked = totalDuration === item.timelineDuration;
+                    return (React.createElement(MenuItem, { key: index, startIcon: checked ? React.createElement(SvgCheckmark, null) : React.createElement(React.Fragment, null), onClick: () => {
+                            onTotalDurationChange(item.timelineDuration);
+                            close();
+                        } }, item.label));
+                }),
+            ];
+        }, placement: "top-start" },
+        React.createElement(IconButton, { "data-testid": "timeline-settings", title: settingsLabel, styleType: "borderless" },
+            React.createElement(SvgMoreVertical, null))));
+}
+function useAnimation(onAnimate, playing = true) {
+    const onAnimateRef = React.useRef(onAnimate);
+    onAnimateRef.current = onAnimate;
+    const lastTimeRef = React.useRef();
+    React.useEffect(() => {
+        if (!playing)
+            return;
+        let handle = 0;
+        let didCancel = false;
+        const animate = (time) => {
+            if (lastTimeRef.current === undefined) {
+                lastTimeRef.current = time;
+            }
+            const delta = time - lastTimeRef.current;
+            lastTimeRef.current = time;
+            onAnimateRef.current({
+                delta,
+            });
+            if (didCancel)
+                return;
+            handle = window.requestAnimationFrame(animate);
         };
-        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;
-        }
-    }
-    _createMenuItemNode(item, index, currentTimelineDuration, close) {
-        const label = item.label;
-        const checked = currentTimelineDuration === item.timelineDuration;
-        const icon = checked ? (React.createElement("span", { className: "icon" },
-            React.createElement(Icon, { iconSpec: React.createElement(SvgCheckmark, null) }),
-            " ")) : (React.createElement("span", null));
-        return (React.createElement(MenuItem, { key: index, icon: icon, onClick: () => {
-                this._onSetTotalDuration(item.timelineDuration);
-                close();
-            } }, label));
+        handle = window.requestAnimationFrame(animate);
+        return () => {
+            didCancel = true;
+            lastTimeRef.current = undefined;
+            window.cancelAnimationFrame(handle);
+        };
+    }, [playing]);
+}
+function timeToMs(time) {
+    if (time.indexOf(":") !== -1) {
+        return ((Number(time.split(":")[0]) * 60 + Number(time.split(":")[1])) * 1000);
     }
-    render() {
-        const { startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions, } = 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: React.createElement(SvgCaretLeft, null), onClick: this._onBackward, title: UiIModelComponents.translate("timeline.backward") }),
-                React.createElement(PlayerButton, { className: "play-button-step", icon: React.createElement(SvgPlayCircular, null), isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, title: UiIModelComponents.translate("timeline.step") }),
-                React.createElement(PlayerButton, { className: "play-forward", icon: React.createElement(SvgCaretRight, null), onClick: this._onForward, title: UiIModelComponents.translate("timeline.backward") }),
-                React.createElement("span", { className: "current-date" }, toDateString(currentDate, timeZoneOffset, dateFormatOptions))),
-            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, dateFormatOptions))),
-                    hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "start-time" }, toTimeString(startDate, timeZoneOffset, timeFormatOptions))),
-                    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, timeFormatOptions))),
-                    showDuration && (React.createElement(InlineEdit, { className: "duration-end-time", defaultValue: totalDurationString, onChange: this._onTotalDurationChange }))),
-                minimized && this._renderSettings())));
+    else {
+        return Number(time) * 1000;
     }
 }
+function toDisplayTime(ms) {
+    const addZero = (i) => {
+        return i < 10 ? `0${i}` : i;
+    };
+    const date = new Date(ms);
+    // const hours = date.getUTCHours();
+    const minutes = date.getUTCMinutes();
+    const seconds = date.getUTCSeconds();
+    return `${addZero(minutes)}:${addZero(seconds)}`;
+}
 //# sourceMappingURL=TimelineComponent.js.map