@itwin/imodel-components-react 4.10.0-dev.1 → 4.11.0

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

@@ -22,370 +22,266 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineComponent = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+require("./TimelineComponent.scss");
+const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const components_react_1 = require("@itwin/components-react");
-const core_react_1 = require("@itwin/core-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const UiIModelComponents_1 = require("../UiIModelComponents");
 const InlineEdit_1 = require("./InlineEdit");
 const interfaces_1 = require("./interfaces");
-const PlayerButton_1 = require("./PlayerButton");
+const PlayButton_1 = require("./PlayButton");
 const Scrubber_1 = require("./Scrubber");
-require("./TimelineComponent.scss");
-// cspell:ignore millisec
+const useTranslation_1 = require("../useTranslation");
 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
  */
-class TimelineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._timeLastCycle = 0;
-        this._requestFrame = 0;
-        this._unmounted = false;
-        this._standardTimelineMenuItems = [
-            {
-                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.slow"),
-                timelineDuration: slowSpeed,
-            },
-            {
-                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.medium"),
-                timelineDuration: mediumSpeed,
-            },
-            {
-                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.fast"),
-                timelineDuration: fastSpeed,
-            },
-        ];
-        this._handleTimelinePausePlayEvent = (args) => {
+function TimelineComponent(props) {
+    var _a, _b, _c, _d;
+    const { appMenuItemOption = "replace", startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions, includeRepeat = true, onSettingsChange, onChange, onPlayPause, } = props;
+    const [isPlaying, setIsPlaying] = React.useState(!!props.isPlaying);
+    const [currentDuration, setCurrentDuration] = React.useState((_a = props.initialDuration) !== null && _a !== void 0 ? _a : 0);
+    const [totalDuration, setTotalDuration] = React.useState(props.totalDuration);
+    const [repeat, setRepeat] = React.useState((_b = props.repeat) !== null && _b !== void 0 ? _b : false);
+    const playOrReplay = React.useCallback(() => {
+        if (isPlaying)
+            return;
+        if (currentDuration >= totalDuration) {
+            setCurrentDuration(0);
+        }
+        setIsPlaying(true);
+        onPlayPause === null || onPlayPause === void 0 ? void 0 : onPlayPause(true);
+    }, [isPlaying, onPlayPause, currentDuration, totalDuration]);
+    const pause = React.useCallback(() => {
+        if (!isPlaying)
+            return;
+        setIsPlaying(false);
+        onPlayPause === null || onPlayPause === void 0 ? void 0 : onPlayPause(false);
+    }, [isPlaying, onPlayPause]);
+    const updateTotalDuration = (newTotalDuration) => {
+        if (newTotalDuration === totalDuration)
+            return;
+        const fraction = currentDuration / totalDuration;
+        const newCurrentDuration = fraction * newTotalDuration;
+        setTotalDuration(newTotalDuration);
+        setCurrentDuration(newCurrentDuration);
+        onSettingsChange === null || onSettingsChange === void 0 ? void 0 : 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 === null || onChange === void 0 ? void 0 : onChange(fraction);
+    };
+    const updateRepeat = (newRepeat) => {
+        if (newRepeat === repeat)
+            return;
+        setRepeat(newRepeat);
+        onSettingsChange === null || onSettingsChange === void 0 ? void 0 : 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((_c = props.initialDuration) !== null && _c !== void 0 ? _c : 0, props.totalDuration);
+    }
+    const [prevRepeat, setPrevRepeat] = React.useState(props.repeat);
+    if (prevRepeat !== props.repeat) {
+        setPrevRepeat(props.repeat);
+        updateRepeat((_d = props.repeat) !== null && _d !== void 0 ? _d : repeat);
+    }
+    React.useEffect(() => {
+        // eslint-disable-next-line deprecation/deprecation
+        if (!props.componentId)
+            return;
+        return appui_abstract_1.UiAdmin.onGenericUiEvent.addListener((args) => {
             const timelineArgs = args;
-            // istanbul ignore else
             if (!timelineArgs ||
-                this.props.componentId !== timelineArgs.uiComponentId ||
+                // eslint-disable-next-line deprecation/deprecation
+                props.componentId !== timelineArgs.uiComponentId ||
                 timelineArgs.timelineAction === undefined)
                 return;
-            let startPlaying;
             switch (timelineArgs.timelineAction) {
                 case interfaces_1.TimelinePausePlayAction.Play:
-                    startPlaying = true;
+                    playOrReplay();
                     break;
                 case interfaces_1.TimelinePausePlayAction.Pause:
-                    startPlaying = false;
+                    pause();
                     break;
                 case interfaces_1.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 ?? 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 ?? 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);
-                }
+        });
+        // eslint-disable-next-line deprecation/deprecation
+    }, [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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
-                        " ")) : (React.createElement("span", null));
-                    itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => {
-                            this._onRepeatChanged();
-                            close();
-                        }, startIcon: icon }, this._repeatLabel));
-                    itemNodes.push(React.createElement(itwinui_react_1.MenuDivider, { key: ++keyIndex }));
-                }
-                contextMenuItems.forEach((item, index) => {
-                    itemNodes.push(this._createMenuItemNode(item, index + keyIndex + 1, totalDuration, close));
-                });
-                return itemNodes;
-            };
-            return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: createMenuItemNodes, placement: "top-start" },
-                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") },
-                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.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_1.UiIModelComponents.translate("timeline.repeat");
-        // istanbul ignore else
-        if (this.props.componentId) {
-            // can't handle an event if we have no id
-            this._removeListener = appui_abstract_1.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);
+    React.useEffect(() => {
+        if (props.isPlaying)
+            playOrReplay();
+        if (props.isPlaying === false)
+            pause();
+    }, [props.isPlaying, playOrReplay, pause]);
+    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_1.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" }, (0, components_react_1.toDateString)(startDate, timeZoneOffset, dateFormatOptions))),
+            hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "timeline-time" }, (0, components_react_1.toTimeString)(startDate, timeZoneOffset, timeFormatOptions))),
+            showDuration && (React.createElement("span", { className: "timeline-duration-time" }, currentDurationStr))),
+        React.createElement(Scrubber_1.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" }, (0, components_react_1.toDateString)(endDate, timeZoneOffset))),
+            hasDates && !showDuration && (React.createElement("span", { className: "timeline-time" }, (0, components_react_1.toTimeString)(endDate, timeZoneOffset, timeFormatOptions))),
+            showDuration && (React.createElement(InlineEdit_1.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);
+            } })));
+}
+exports.TimelineComponent = TimelineComponent;
+function SettingsMenu({ appMenuItems, appMenuItemOption, includeRepeat, repeat, totalDuration, onRepeatClick, onTotalDurationChange, }) {
+    const { translate } = (0, useTranslation_1.useTranslation)();
+    const menuItems = React.useMemo(() => {
+        const standardItems = [
+            {
+                label: translate("timeline.slow"),
+                timelineDuration: slowSpeed,
+            },
+            {
+                label: translate("timeline.medium"),
+                timelineDuration: mediumSpeed,
+            },
+            {
+                label: translate("timeline.fast"),
+                timelineDuration: fastSpeed,
+            },
+        ];
+        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, translate]);
+    return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => {
+            return [
+                ...(includeRepeat
+                    ? [
+                        React.createElement(itwinui_react_1.MenuItem, { key: "repeat", onClick: () => {
+                                onRepeatClick();
+                                close();
+                            }, startIcon: repeat ? React.createElement(itwinui_icons_react_1.SvgCheckmark, null) : React.createElement(React.Fragment, null) }, translate("timeline.repeat")),
+                        React.createElement(itwinui_react_1.MenuDivider, { key: "divider" }),
+                    ]
+                    : []),
+                ...menuItems.map((item, index) => {
+                    const checked = totalDuration === item.timelineDuration;
+                    return (React.createElement(itwinui_react_1.MenuItem, { key: index, startIcon: checked ? React.createElement(itwinui_icons_react_1.SvgCheckmark, null) : React.createElement(React.Fragment, null), onClick: () => {
+                            onTotalDurationChange(item.timelineDuration);
+                            close();
+                        } }, item.label));
+                }),
+            ];
+        }, placement: "top-start" },
+        React.createElement(itwinui_react_1.IconButton, { "data-testid": "timeline-settings", label: translate("button.label.settings"), styleType: "borderless" },
+            React.createElement(itwinui_icons_react_1.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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
-            " ")) : (React.createElement("span", null));
-        return (React.createElement(itwinui_react_1.MenuItem, { key: index, startIcon: 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: (0, classnames_1.default)("timeline-component", !!minimized && "minimized", hasDates && "has-dates") },
-            React.createElement("div", { className: "header" },
-                React.createElement(PlayerButton_1.PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, "data-testid": "timeline-play" }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-backward", icon: React.createElement(itwinui_icons_react_1.SvgCaretLeft, null), onClick: this._onBackward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-button-step", icon: React.createElement(itwinui_icons_react_1.SvgPlayCircular, null), isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.step") }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-forward", icon: React.createElement(itwinui_icons_react_1.SvgCaretRight, null), onClick: this._onForward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
-                React.createElement("span", { className: "current-date" }, (0, components_react_1.toDateString)(currentDate, timeZoneOffset, dateFormatOptions))),
-            React.createElement("div", { className: "scrubber" },
-                React.createElement(PlayerButton_1.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" }, (0, components_react_1.toDateString)(startDate, timeZoneOffset, dateFormatOptions))),
-                    hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "start-time" }, (0, components_react_1.toTimeString)(startDate, timeZoneOffset, timeFormatOptions))),
-                    showDuration && (React.createElement("span", { className: "duration-start-time" }, durationString))),
-                React.createElement(Scrubber_1.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" }, (0, components_react_1.toDateString)(endDate, timeZoneOffset))),
-                    hasDates && !showDuration && (React.createElement("span", { className: "end-time" }, (0, components_react_1.toTimeString)(endDate, timeZoneOffset, timeFormatOptions))),
-                    showDuration && (React.createElement(InlineEdit_1.InlineEdit, { className: "duration-end-time", defaultValue: totalDurationString, onChange: this._onTotalDurationChange }))),
-                minimized && this._renderSettings())));
+    else {
+        return Number(time) * 1000;
     }
 }
-exports.TimelineComponent = TimelineComponent;
+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