@itwin/imodel-components-react 4.1.0 → 4.2.0-dev.1

package/lib/cjs/imodel-components-react/timeline/Scrubber.scss

@@ -1,105 +1,105 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-// the following overrides default iui-slider-thumb settings from  iTwinUI
-div.components-timeline-thumb.iui-slider-thumb {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--iui-color-background);
-  box-sizing: border-box;
-  width: 38px;
-  height: 20px;
-  border-radius: var(--iui-border-radius-1);
-  border: 1px solid var(--iui-color-border);
-  transform: translateX(-19.2px);
-  top: 4px;
-}
-
-.components-timeline-rail-marker-container {
-  width: 100%;
-  position: absolute;
-
-  div.components-timeline-tooltip {
-    @include uicore-z-index(tooltip);
-    position: absolute;
-    top: -8px;
-    display: inline-block;
-    transform: translateX(-50px);
-    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
-    font-size: 14px;
-
-    .tooltip-text {
-      width: 100px;
-      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
-      color: #fff;
-      // opacity: 0.8;
-      text-align: center;
-      border-radius: 6px;
-      padding: 8px 0;
-      position: absolute;
-      z-index: 1;
-      bottom: 150%;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
-          transparent transparent;
-      }
-    }
-  }
-}
-
-.scrubber-handle {
-  pointer-events: none;
-  position: absolute;
-  width: 38px;
-  height: 20px;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  > div {
-    width: 1px;
-    height: 10px;
-    margin: 0 1px;
-    background-color: var(--iui-color-border-subtle);
-  }
-}
-
-.scrubber-track {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 4px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-.components-timeline-date-marker {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(50%);
-}
-
-.date-marker-default {
-  height: 12px;
-  width: 3px;
-  border-radius: var(--iui-border-radius-1);
-  transform: translateY(1px);
-  background-color: var(--iui-color-border);
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+// the following overrides default iui-slider-thumb settings from  iTwinUI
+div.components-timeline-thumb.iui-slider-thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--iui-color-background);
+  box-sizing: border-box;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
+  transform: translateX(-19.2px);
+  top: 4px;
+}
+
+.components-timeline-rail-marker-container {
+  width: 100%;
+  position: absolute;
+
+  div.components-timeline-tooltip {
+    @include uicore-z-index(tooltip);
+    position: absolute;
+    top: -8px;
+    display: inline-block;
+    transform: translateX(-50px);
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
+    font-size: 14px;
+
+    .tooltip-text {
+      width: 100px;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
+      color: #fff;
+      // opacity: 0.8;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px 0;
+      position: absolute;
+      z-index: 1;
+      bottom: 150%;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
+      }
+    }
+  }
+}
+
+.scrubber-handle {
+  pointer-events: none;
+  position: absolute;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    width: 1px;
+    height: 10px;
+    margin: 0 1px;
+    background-color: var(--iui-color-border-subtle);
+  }
+}
+
+.scrubber-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.components-timeline-date-marker {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(50%);
+}
+
+.date-marker-default {
+  height: 12px;
+  width: 3px;
+  border-radius: var(--iui-border-radius-1);
+  transform: translateY(1px);
+  background-color: var(--iui-color-border);
+}

package/lib/cjs/imodel-components-react/timeline/SolarTimeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAS3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuHtD,UAAU,2BAA2B;IACnC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,2BAA2B,EAAE,2BAA2B,CAAC;IAC9G,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,mBAAmB,CAA6D;IACxF,OAAO,CAAC,UAAU,CAAsD;IACxE,OAAO,CAAC,aAAa,CAA0D;IAC/E,OAAO,CAAC,UAAU,CAAmD;IACrE,OAAO,CAAC,WAAW,CAAuD;IAC1E,OAAO,CAAC,cAAc,CAA0D;IAEhF,OAAO,CAAC,OAAO,CAab;IAEF,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;gBAEU,KAAK,EAAE,2BAA2B;IAgC9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CAuCtB;IAEF,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,QAAQ,CAiBd;IAGF,OAAO,CAAC,OAAO,CAWb;IAEF,OAAO,CAAC,wBAAwB;IAIhC;qBACiB;IACjB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,cAAc,CAkBpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CASjB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,4BAA4B,CAMlC;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMxB,MAAM;CAsFvB"}
+{"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAKH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAc3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAyKtD,UAAU,2BAA2B;IACnC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CACpD,2BAA2B,EAC3B,2BAA2B,CAC5B;IACC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,mBAAmB,CAEzB;IACF,OAAO,CAAC,UAAU,CAAsD;IACxE,OAAO,CAAC,aAAa,CAEnB;IACF,OAAO,CAAC,UAAU,CAAmD;IACrE,OAAO,CAAC,WAAW,CAAuD;IAC1E,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,OAAO,CAab;IAEF,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;gBAEU,KAAK,EAAE,2BAA2B;IA8C9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CA6CtB;IAEF,OAAO,CAAC,KAAK;IAYb,OAAO,CAAC,QAAQ,CAed;IAGF,OAAO,CAAC,OAAO,CAab;IAEF,OAAO,CAAC,wBAAwB;IAWhC;qBACiB;IACjB,OAAO,CAAC,WAAW,CAoCjB;IAEF,OAAO,CAAC,cAAc,CA2BpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IA0B5B,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CAajB;IAEF,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,4BAA4B,CAUlC;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,MAAM;CAiNvB"}

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -58,7 +58,7 @@ const millisecPerHour = millisecPerMinute * 60;
 // const millisecPerDay = millisecPerHour * 24;
 const defaultPlaybackDuration = 40 * 1000; // 40 seconds
 const addZero = (i) => {
-    return (i < 10) ? `0${i}` : i;
+    return i < 10 ? `0${i}` : i;
 };
 function Timeline(props) {
     const sliderRef = React.useRef(null);
@@ -93,15 +93,29 @@ function Timeline(props) {
         sliderContainer &&
             setPointerPercent((0, Scrubber_1.getPercentageOfRectangle)(sliderContainer.getBoundingClientRect(), event.clientX));
     }, [sliderContainer]);
-    const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying } = props;
+    const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying, } = props;
     const thumbHasFocus = (0, Scrubber_1.useFocusedThumb)(sliderContainer);
     const tickLabel = React.useMemo(() => {
         const showTip = isPlaying || showRailTooltip || thumbHasFocus;
         const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;
-        const percent = (isPlaying || thumbHasFocus) ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration : pointerPercent;
-        const tooltipText = formatTime((isPlaying || thumbHasFocus) ? (dayStartMs + currentTimeOffsetMs) : (dayStartMs + (sunRiseOffsetMs + (pointerPercent * totalDuration))));
+        const percent = isPlaying || thumbHasFocus
+            ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration
+            : pointerPercent;
+        const tooltipText = formatTime(isPlaying || thumbHasFocus
+            ? dayStartMs + currentTimeOffsetMs
+            : dayStartMs + (sunRiseOffsetMs + pointerPercent * totalDuration));
         return (React.createElement(Scrubber_1.RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText }));
-    }, [isPlaying, showRailTooltip, thumbHasFocus, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, pointerPercent, formatTime, dayStartMs]);
+    }, [
+        isPlaying,
+        showRailTooltip,
+        thumbHasFocus,
+        sunSetOffsetMs,
+        sunRiseOffsetMs,
+        currentTimeOffsetMs,
+        pointerPercent,
+        formatTime,
+        dayStartMs,
+    ]);
     const className = (0, classnames_1.default)("solar-slider", props.className, formatTick && "showticks");
     const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);
     const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);
@@ -169,14 +183,14 @@ class SolarTimeline extends React.PureComponent {
                 return;
             }
             const currentTime = new Date().getTime();
-            this._totalPlayTime += (currentTime - this._timeLastCycle);
+            this._totalPlayTime += currentTime - this._timeLastCycle;
             this._timeLastCycle = currentTime;
             let percentComplete = this._totalPlayTime / this.state.adjustedDuration;
             if (percentComplete > 1)
                 percentComplete = 1;
             let newPlayingState = true;
             // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider
-            let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + (percentComplete * this.state.sunDeltaMs));
+            let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + percentComplete * this.state.sunDeltaMs);
             if (percentComplete > 0.99) {
                 if (!this.state.loop) {
                     newPlayingState = false;
@@ -203,7 +217,7 @@ class SolarTimeline extends React.PureComponent {
             if (!this.state.isPlaying)
                 return;
             const currentTime = new Date().getTime();
-            this._totalPlayTime += (currentTime - this._timeLastCycle);
+            this._totalPlayTime += currentTime - this._timeLastCycle;
             // stop requesting frames
             window.cancelAnimationFrame(this._requestFrame);
             // stop playing
@@ -217,7 +231,8 @@ class SolarTimeline extends React.PureComponent {
             // istanbul ignore if
             if (this.state.isPlaying)
                 return;
-            if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs || this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {
+            if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs ||
+                this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {
                 this._totalPlayTime = 0;
                 this._play(this.state.sunRiseOffsetMs);
             }
@@ -239,14 +254,21 @@ class SolarTimeline extends React.PureComponent {
             /** call dataProvider to update display style */
             if (this.props.dataProvider.onTimeChanged)
                 this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);
-            this.setState({ dayStartMs, sunRiseOffsetMs, sunSetOffsetMs, currentTimeOffsetMs: sunOffsetMs, sunDeltaMs, isDateOpened: false }, () => {
+            this.setState({
+                dayStartMs,
+                sunRiseOffsetMs,
+                sunSetOffsetMs,
+                currentTimeOffsetMs: sunOffsetMs,
+                sunDeltaMs,
+                isDateOpened: false,
+            }, () => {
                 this._timeLastCycle = new Date().getTime();
             });
         };
         this._onTimeChanged = (time) => {
             // compute the current date (with time)
             const dayStartMs = this.props.dataProvider.dayStartMs;
-            const sunTime = (time.hours * millisecPerHour) + (time.minutes * millisecPerMinute);
+            const sunTime = time.hours * millisecPerHour + time.minutes * millisecPerMinute;
             const dateWithNewTime = new Date(dayStartMs + sunTime);
             this.props.dataProvider.setDateAndTime(dateWithNewTime, true);
             // notify the provider to update style
@@ -268,7 +290,9 @@ class SolarTimeline extends React.PureComponent {
             this.setState({ isSettingsOpened: false });
         };
         this._onOpenSettingsPopup = () => {
-            this.setState((prevState) => ({ isSettingsOpened: !prevState.isSettingsOpened }));
+            this.setState((prevState) => ({
+                isSettingsOpened: !prevState.isSettingsOpened,
+            }));
         };
         this._onUpdate = (values) => {
             if (!this.state.isPlaying)
@@ -291,18 +315,19 @@ class SolarTimeline extends React.PureComponent {
             const localTime = (0, components_react_1.adjustDateToTimezone)(date, this.props.dataProvider.timeZoneOffset * 60);
             let hours = localTime.getHours();
             const minutes = addZero(date.getMinutes());
-            const abbrev = (hours < 12) ? this._amLabel : (hours === 24) ? this._amLabel : this._pmLabel;
-            hours = (hours > 12) ? hours - 12 : hours;
+            const abbrev = hours < 12 ? this._amLabel : hours === 24 ? this._amLabel : this._pmLabel;
+            hours = hours > 12 ? hours - 12 : hours;
             return `${hours}:${minutes} ${abbrev}`;
         };
         this._onPresetColorPick = (shadowColor) => {
-            this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);
+            this.setState({ shadowColor }, () => (this.props.dataProvider.shadowColor = shadowColor));
         };
         this._handleHueOrSaturationChange = (hueOrSaturation) => {
-            if (hueOrSaturation.s === 0) // for a ColorDef to be created from hsv s can't be 0
+            if (hueOrSaturation.s === 0)
+                // for a ColorDef to be created from hsv s can't be 0
                 hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);
             const shadowColor = hueOrSaturation.toColorDef();
-            this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);
+            this.setState({ shadowColor }, () => (this.props.dataProvider.shadowColor = shadowColor));
         };
         const dayStartMs = this.props.dataProvider.dayStartMs;
         const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
@@ -311,7 +336,9 @@ class SolarTimeline extends React.PureComponent {
         const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;
         const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);
         const shadowColor = this.props.dataProvider.shadowColor;
-        const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;
+        const duration = this.props.duration
+            ? this.props.duration
+            : defaultPlaybackDuration;
         const speed = this.props.speed ? this.props.speed : 2;
         const adjustedDuration = duration / speed;
         this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration);
@@ -346,7 +373,9 @@ class SolarTimeline extends React.PureComponent {
         });
     }
     setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration) {
-        this._totalPlayTime = ((sunOffsetMs - sunRiseOffsetMs) / (sunDeltaMs)) * ((adjustedDuration) ? adjustedDuration : this.state.adjustedDuration);
+        this._totalPlayTime =
+            ((sunOffsetMs - sunRiseOffsetMs) / sunDeltaMs) *
+                (adjustedDuration ? adjustedDuration : this.state.adjustedDuration);
     }
     ensureRange(value, min, max) {
         return Math.max(Math.min(value, max), min);
@@ -362,7 +391,8 @@ class SolarTimeline extends React.PureComponent {
         this.setState({ currentTimeOffsetMs }, () => {
             const currentTime = new Date().getTime();
             this._timeLastCycle = currentTime;
-            const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) / this.state.sunDeltaMs;
+            const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) /
+                this.state.sunDeltaMs;
             this._totalPlayTime = percentComplete * this.state.adjustedDuration;
         });
     }
@@ -373,7 +403,7 @@ class SolarTimeline extends React.PureComponent {
     }
     render() {
         const { dataProvider } = this.props;
-        const { speed, loop, currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs } = this.state;
+        const { speed, loop, currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs, } = this.state;
         const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);
         const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);
         const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;
@@ -384,7 +414,7 @@ class SolarTimeline extends React.PureComponent {
         return (React.createElement("div", { className: "solar-timeline-wrapper" },
             React.createElement("div", { className: "header" },
                 React.createElement(PlayerButton_1.PlayButton, { tooltip: this._playLabel, className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
-                React.createElement("button", { "data-testid": "solar-date-time-button", title: this._dateTimeLabel, className: "current-date", ref: (element) => this._datePicker = element, onClick: this._onOpenDayPicker },
+                React.createElement("button", { "data-testid": "solar-date-time-button", title: this._dateTimeLabel, className: "current-date", ref: (element) => (this._datePicker = element), onClick: this._onOpenDayPicker },
                     React.createElement("span", null, formattedDate),
                     React.createElement("span", null, "/"),
                     React.createElement("span", null, formattedTime),
@@ -395,7 +425,11 @@ class SolarTimeline extends React.PureComponent {
                         React.createElement(components_react_1.DatePicker, { selected: localTime, onDateChange: this._onDayClick, showFocusOutline: false }),
                         React.createElement("div", { className: "time-container" },
                             React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, this._timeLabel),
-                            React.createElement(components_react_1.TimeField, { time: { hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }, timeDisplay: appui_abstract_1.TimeDisplay.H12MC, onTimeChange: this._onTimeChanged })))),
+                            React.createElement(components_react_1.TimeField, { time: {
+                                    hours: localTime.getHours(),
+                                    minutes: localTime.getMinutes(),
+                                    seconds: 0,
+                                }, timeDisplay: appui_abstract_1.TimeDisplay.H12MC, onTimeChange: this._onTimeChanged })))),
                 React.createElement(Timeline, { className: "solar-timeline", dayStartMs: dataProvider.dayStartMs, sunSetOffsetMs: sunSetOffsetMs, sunRiseOffsetMs: sunRiseOffsetMs, currentTimeOffsetMs: currentTimeOffsetMs, onChange: this._onChange, onUpdate: this._onUpdate, formatTime: this._formatTime, isPlaying: this.state.isPlaying }),
                 React.createElement("div", { className: "speed-container" },
                     React.createElement("span", { title: this._speedLabel },
@@ -404,7 +438,7 @@ class SolarTimeline extends React.PureComponent {
                     React.createElement(SpeedTimeline_1.SpeedTimeline, { className: "speed", onChange: this._onSpeedChange, speed: this.state.speed })),
                 React.createElement("span", { title: this._loopLabel, className: (0, classnames_1.default)("icon", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 },
                     React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgLoop, null) })),
-                React.createElement("button", { "data-testid": "shadow-settings-button", title: this._settingLabel, className: "shadow-settings-button", ref: (element) => this._settings = element, onClick: this._onOpenSettingsPopup },
+                React.createElement("button", { "data-testid": "shadow-settings-button", title: this._settingLabel, className: "shadow-settings-button", ref: (element) => (this._settings = element), onClick: this._onOpenSettingsPopup },
                     React.createElement("span", { className: "icon" },
                         React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSettings, null) }))),
                 React.createElement(core_react_1.Popup, { className: "shadow-settings-popup", target: this._settings, offset: 11, isOpen: this.state.isSettingsOpened, onClose: this._onCloseSettingsPopup, position: appui_abstract_1.RelativePosition.Top },