diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.tsx b/frontend/app/components/Session_/Player/Controls/Timeline.tsx index 5a47b1df2..89ce80e65 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.tsx +++ b/frontend/app/components/Session_/Player/Controls/Timeline.tsx @@ -100,10 +100,11 @@ function Timeline(props) { }; } else { const time = getTime(e); + const tz = settingsStore.sessionSettings.timezone.value + const timeStr = DateTime.fromMillis(props.startedAt + time).setZone(tz).toFormat(`hh:mm:ss a`) timeLineTooltip = { - time: !settingsStore.isUniTs - ? Duration.fromMillis(time).toFormat(`mm:ss`) - : DateTime.fromMillis(props.startedAt + time).toFormat(`hh:mm:ss a`), + time: Duration.fromMillis(time).toFormat(`mm:ss`), + timeStr, offset: e.nativeEvent.offsetX, isVisible: true, }; diff --git a/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx b/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx index 5c4d19c0d..e47593b97 100644 --- a/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx +++ b/frontend/app/components/Session_/Player/Controls/components/TimeTooltip.tsx @@ -8,30 +8,39 @@ interface Props { time: number; offset: number; isVisible: boolean; + timeStr: string; } function TimeTooltip({ time, offset, isVisible, + timeStr, }: Props) { return (
{!time ? 'Loading' : time} + {timeStr ? ( + <> +
+ ({timeStr}) + + ) : null}
); } export default connect((state) => { - const { time = 0, offset = 0, isVisible } = state.getIn(['sessions', 'timeLineTooltip']); - return { time, offset, isVisible }; + const { time = 0, offset = 0, isVisible, timeStr } = state.getIn(['sessions', 'timeLineTooltip']); + return { time, offset, isVisible, timeStr }; })(TimeTooltip); diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 45d5540bb..72ae28e3d 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -13,7 +13,6 @@ import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import AutoplayToggle from 'Shared/AutoplayToggle'; -import { Toggler } from 'UI'; function SubHeader(props) { const { player, store } = React.useContext(PlayerContext) @@ -28,7 +27,6 @@ function SubHeader(props) { eventList: eventsList, endTime, } = store.get() - const { settingsStore } = useStore() const mappedResourceList = resourceList .filter((r) => r.isRed() || r.isYellow()) @@ -56,19 +54,9 @@ function SubHeader(props) { showModal(, { right: true }); }; - const timeStr = settingsStore.isUniTs ? 'Local Time' : 'Relative Timestamp' - const onFormatCh = (e) => { - e.stopPropagation(); - e.preventDefault(); - settingsStore.toggleTimeFormat() - } return (
- {!isAssist && (
- - {timeStr} -
)} {location && (
{ @@ -49,7 +50,7 @@ function FetchDetailsModal(props: Props) { return (
Network Request
- + {isXHR && !fetchPresented && } {isXHR && } diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js index ecce3d713..8afb6d073 100644 --- a/frontend/app/duck/sessions.js +++ b/frontend/app/duck/sessions.js @@ -70,7 +70,7 @@ const initialState = Map({ timelinePointer: null, sessionPath: {}, lastPlayedSessionId: null, - timeLineTooltip: { time: 0, offset: 0, isVisible: false }, + timeLineTooltip: { time: 0, offset: 0, isVisible: false, timeStr: '' }, createNoteTooltip: { time: 0, isVisible: false, isEdit: false, note: null }, }); @@ -454,4 +454,4 @@ export function updateLastPlayedSession(sessionId) { type: LAST_PLAYED_SESSION_ID, sessionId, }; -} \ No newline at end of file +} diff --git a/frontend/app/mstore/settingsStore.ts b/frontend/app/mstore/settingsStore.ts index b05c9ce58..45cb9610c 100644 --- a/frontend/app/mstore/settingsStore.ts +++ b/frontend/app/mstore/settingsStore.ts @@ -8,7 +8,6 @@ export default class SettingsStore { sessionSettings: SessionSettings = new SessionSettings() captureRateFetched: boolean = false; limits: any = null; - isUniTs = false; constructor() { makeAutoObservable(this, { @@ -16,10 +15,6 @@ export default class SettingsStore { }) } - toggleTimeFormat = () => { - this.isUniTs = !this.isUniTs - } - saveCaptureRate(data: any) { return sessionService.saveCaptureRate(data) .then(data => data.json()) diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts index 95005b85d..bde66cdaf 100644 --- a/frontend/app/mstore/types/sessionSettings.ts +++ b/frontend/app/mstore/types/sessionSettings.ts @@ -13,27 +13,52 @@ const defaultDurationFilter = { countType: 'sec' } +const negativeExceptions = { + 4: ['-04:30'], + 3: ['-03:30'], + +} +const exceptions = { + 3: ['+03:30'], + 4: ['+04:30'], + 5: ['+05:30', '+05:45'], + 6: ['+06:30'], + 9: ['+09:30'] +} + export const generateGMTZones = (): Timezone[] => { const timezones: Timezone[] = []; - const positiveNumbers = [...Array(12).keys()]; - const negativeNumbers = [...Array(12).keys()].reverse(); + const positiveNumbers = [...Array(13).keys()]; + const negativeNumbers = [...Array(13).keys()].reverse(); negativeNumbers.pop(); // remove trailing zero since we have one in positive numbers array const combinedArray = [...negativeNumbers, ...positiveNumbers]; for (let i = 0; i < combinedArray.length; i++) { - let symbol = i < 11 ? '-' : '+'; - let isUTC = i === 11; - let value = String(combinedArray[i]).padStart(2, '0'); + let symbol = i < 12 ? '-' : '+'; + let isUTC = i === 12; + const item = combinedArray[i] + let value = String(item).padStart(2, '0'); - let tz = `UTC ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`; + let tz = `UTC ${symbol}${String(item).padStart(2, '0')}:00`; let dropdownValue = `UTC${symbol}${value}`; timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue }); + + // @ts-ignore + const negativeMatch = negativeExceptions[item], positiveMatch = exceptions[item] + if (i < 11 && negativeMatch) { + negativeMatch.forEach((str: string) => { + timezones.push({ label: `UTC ${str}`, value: `UTC${str}`}) + }) + } else if (i > 11 && positiveMatch) { + positiveMatch.forEach((str: string) => { + timezones.push({ label: `UTC ${str}`, value: `UTC${str}`}) + }) + } } - timezones.splice(17, 0, { label: 'GMT +05:30', value: 'UTC+05:30' }); return timezones; };