@itwin/imodel-components-react 3.7.0-dev.6 → 3.7.0-dev.8

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

@@ -1,359 +1,388 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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;
-require("./TimelineComponent.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const components_react_1 = require("@itwin/components-react");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-const InlineEdit_1 = require("./InlineEdit");
-const interfaces_1 = require("./interfaces");
-const PlayerButton_1 = require("./PlayerButton");
-const Scrubber_1 = require("./Scrubber");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-// cspell:ignore millisec
-const slowSpeed = 60 * 1000;
-const mediumSpeed = 20 * 1000;
-const fastSpeed = 10 * 1000;
-/**
- * [[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) => {
-            const timelineArgs = args;
-            // istanbul ignore else
-            if (!timelineArgs || this.props.componentId !== timelineArgs.uiComponentId || timelineArgs.timelineAction === undefined)
-                return;
-            let startPlaying;
-            switch (timelineArgs.timelineAction) {
-                case interfaces_1.TimelinePausePlayAction.Play:
-                    startPlaying = true;
-                    break;
-                case interfaces_1.TimelinePausePlayAction.Pause:
-                    startPlaying = false;
-                    break;
-                case interfaces_1.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) => {
-            const actualDuration = Math.min(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 / 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._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 icon-checkmark" }) : React.createElement("span", null);
-                    itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => { this._onRepeatChanged(); close(); }, icon: 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 },
-                React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon icon-more-vertical-2", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") })));
-        };
-        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);
-        }
-    }
-    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;
-        }
-    }
-    _createMenuItemNode(item, index, currentTimelineDuration, close) {
-        const label = item.label;
-        const checked = currentTimelineDuration === item.timelineDuration;
-        const icon = checked ? React.createElement("span", { className: "icon icon-checkmark" }) : React.createElement("span", null);
-        return (React.createElement(itwinui_react_1.MenuItem, { key: index, icon: icon, onClick: () => { this._onSetTotalDuration(item.timelineDuration); close(); } }, label));
-    }
-    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: "icon-caret-left", onClick: this._onBackward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
-                React.createElement(PlayerButton_1.PlayerButton, { className: "play-button-step", icon: "icon-media-controls-circular-play", 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: "icon-caret-right", 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())));
-    }
-}
-exports.TimelineComponent = TimelineComponent;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+require("./TimelineComponent.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const components_react_1 = require("@itwin/components-react");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const InlineEdit_1 = require("./InlineEdit");
+const interfaces_1 = require("./interfaces");
+const PlayerButton_1 = require("./PlayerButton");
+const Scrubber_1 = require("./Scrubber");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+// cspell:ignore millisec
+const slowSpeed = 60 * 1000;
+const mediumSpeed = 20 * 1000;
+const fastSpeed = 10 * 1000;
+/**
+ * [[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) => {
+            const timelineArgs = args;
+            // istanbul ignore else
+            if (!timelineArgs || this.props.componentId !== timelineArgs.uiComponentId || timelineArgs.timelineAction === undefined)
+                return;
+            let startPlaying;
+            switch (timelineArgs.timelineAction) {
+                case interfaces_1.TimelinePausePlayAction.Play:
+                    startPlaying = true;
+                    break;
+                case interfaces_1.TimelinePausePlayAction.Pause:
+                    startPlaying = false;
+                    break;
+                case interfaces_1.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) => {
+            const actualDuration = Math.min(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 / 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._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 icon-checkmark" }) : React.createElement("span", null);
+                    itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => { this._onRepeatChanged(); close(); }, icon: 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", 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 icon-more-vertical-2", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") })));
+        };
+        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);
+        }
+    }
+    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;
+        }
+    }
+    _createMenuItemNode(item, index, currentTimelineDuration, close) {
+        const label = item.label;
+        const checked = currentTimelineDuration === item.timelineDuration;
+        const icon = checked ? React.createElement("span", { className: "icon icon-checkmark" }) : React.createElement("span", null);
+        return (React.createElement(itwinui_react_1.MenuItem, { key: index, icon: icon, onClick: () => { this._onSetTotalDuration(item.timelineDuration); close(); } }, label));
+    }
+    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: "icon-caret-left", onClick: this._onBackward, title: UiIModelComponents_1.UiIModelComponents.translate("timeline.backward") }),
+                React.createElement(PlayerButton_1.PlayerButton, { className: "play-button-step", icon: "icon-media-controls-circular-play", 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: "icon-caret-right", 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())));
+    }
+}
+exports.TimelineComponent = TimelineComponent;
 //# sourceMappingURL=TimelineComponent.js.map