feat(ui): display real session time

frontend/app/components/Session_/Player/Controls/Controls.tsx

@@ -85,6 +85,7 @@ function Controls(props: any) {
     skipInterval,
     disabledRedux,
     showStorageRedux,
+    session
   } = props;
 
   const storageType = selectStorageType(store.get());
@@ -169,6 +170,7 @@ function Controls(props: any) {
               skipIntervals={SKIP_INTERVALS}
               setSkipInterval={changeSkipInterval}
               currentInterval={skipInterval}
+              startedAt={session.startedAt}
             />
             <div className={cn('mx-2')} />
             <XRayButton

frontend/app/components/Session_/Player/Controls/Time.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { PlayerContext } from 'App/components/Session/playerContext';
-import { observer } from 'mobx-react-lite';
-import { PlayTime } from 'App/player-ui'
-
-const ReduxTime = observer(({ format, name, isCustom }) => {
-  const { store } = React.useContext(PlayerContext)
-  const time = store.get()[name] || 0
-
-  return <PlayTime format={format} time={time} isCustom={isCustom} />
-})
-
-ReduxTime.displayName = "ReduxTime";
-
-export { ReduxTime };

frontend/app/components/Session_/Player/Controls/Time.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
+import { PlayTime, RealPlayTime } from 'App/player-ui'
+import { useStore } from 'App/mstore'
+
+interface IProps {
+    format: string;
+    name: 'time' | 'endTime';
+    isCustom?: boolean;
+}
+
+const ReduxTime: React.FC<IProps> = observer(({ format, name, isCustom }) => {
+  const { store } = React.useContext(PlayerContext)
+  const time = store.get()[name] || 0
+
+  return <PlayTime format={format} time={time} isCustom={isCustom} />
+})
+
+const RealReplayTimeConnected: React.FC<{startedAt: number}> = observer(({ startedAt }) => {
+  const { store } = React.useContext(PlayerContext)
+  const { settingsStore } = useStore()
+  const tz = settingsStore.sessionSettings.timezone.value
+  const time = store.get().time || 0
+
+  return <RealPlayTime sessionStart={startedAt} time={time} tz={tz} />
+})
+
+ReduxTime.displayName = "ReduxTime";
+
+export { ReduxTime, RealReplayTimeConnected };

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { Icon, Tooltip, Popover } from 'UI';
 import cn from 'classnames';
-import { ReduxTime } from '../Time';
+import { RealReplayTimeConnected, ReduxTime } from '../Time';
 // @ts-ignore
 import styles from '../controls.module.css';
 import { SkipButton } from 'App/player-ui';
 import { SPEED_OPTIONS } from 'App/player/player/Player';
+import PlayingTime from './PlayingTime'
 
 interface Props {
   skip: boolean;
   speed: number;
   disabled: boolean;
+  startedAt: number;
   playButton: JSX.Element;
   skipIntervals: Record<number, number>;
   currentInterval: number;
@@ -34,13 +36,20 @@ function PlayerControls(props: Props) {
     skipIntervals,
     setSkipInterval,
     currentInterval,
+    startedAt,
   } = props;
   const [showTooltip, setShowTooltip] = React.useState(false);
+  const [isUniTime, setUniTime] = React.useState(localStorage.getItem('__or_player_time_mode') === 'real');
   const speedRef = React.useRef<HTMLButtonElement>(null);
   const arrowBackRef = React.useRef<HTMLButtonElement>(null);
   const arrowForwardRef = React.useRef<HTMLButtonElement>(null);
   const skipRef = React.useRef<HTMLDivElement>(null);
 
+  const setIsUniTime = (isUniTime: boolean) => {
+    localStorage.setItem('__or_player_time_mode', isUniTime ? 'real' : 'current');
+    setUniTime(isUniTime);
+  }
+
   React.useEffect(() => {
     const handleKeyboard = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
@@ -72,12 +81,9 @@ function PlayerControls(props: Props) {
       {playButton}
       <div className="mx-1" />
 
-      <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
-        {/* @ts-ignore */}
-        <ReduxTime isCustom name="time" format="mm:ss" />
-        <span className="px-1">/</span>
-        {/* @ts-ignore */}
-        <ReduxTime isCustom name="endTime" format="mm:ss" />
+
+      <div className={'hover:bg-gray-light-shade p-2 rounded cursor-pointer'}>
+        <PlayingTime isUniTime={isUniTime} setIsUniTime={setIsUniTime} startedAt={startedAt} />
       </div>
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">

frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Popover } from 'UI'
+import { RealReplayTimeConnected, ReduxTime } from "Components/Session_/Player/Controls/Time";
+
+interface Props {
+  isUniTime: boolean;
+  startedAt: number;
+  setIsUniTime: (isUniTime: boolean) => void;
+}
+
+function PlayingTime({ isUniTime, setIsUniTime, startedAt }: Props) {
+  return (
+    <Popover
+      // @ts-ignore
+      theme="nopadding"
+      animation="none"
+      duration={0}
+      className="cursor-pointer select-none"
+      distance={20}
+      render={({close}) => (
+        <div className={'flex flex-col gap-2 bg-white py-2 rounded'}>
+          <div className={'font-semibold px-4'}>Playback Time Mode</div>
+          <div className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}>
+            <div className={'text-sm text-disabled-text'}>Current / Session Duration</div>
+            <div className={'flex items-center font-semibold text-center'} onClick={() => {
+              setIsUniTime(false);
+              close();
+            }}>
+              <ReduxTime isCustom name="time" format="mm:ss" />
+              <span className="px-1">/</span>
+              <ReduxTime isCustom name="endTime" format="mm:ss" />
+            </div>
+          </div>
+          <div className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'} onClick={() => {
+            setIsUniTime(true);
+            close();
+          }}>
+            <div className={'text-sm text-disabled-text'}>Real session time</div>
+            <div className={'font-semibold'}><RealReplayTimeConnected startedAt={startedAt} /></div>
+          </div>
+        </div>
+      )}
+    >
+      <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
+        {isUniTime ? (
+          <RealReplayTimeConnected startedAt={startedAt} />
+        ) : (
+          <>
+            <ReduxTime isCustom name="time" format="mm:ss" />
+            <span className="px-1">/</span>
+            <ReduxTime isCustom name="endTime" format="mm:ss" />
+          </>
+        )}
+      </div>
+    </Popover>
+  )
+}
+
+export default PlayingTime

frontend/app/date.ts

@@ -62,6 +62,11 @@ export const diffFromNowShortString = (ts: number): string =>
 export const getDateFromMill = date =>
   (typeof date === "number" ? DateTime.fromMillis(date) : undefined);
 
+export const getTimeFromMill = (dateTime: number, tz: string) => {
+  const date = DateTime.fromMillis(dateTime);
+  return date.setZone(tz).toFormat('HH:mm:ss ZZZZ');
+}
+
 
 /**
  * Check if the given date is today.

frontend/app/player-ui/PlayTime.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Duration } from 'luxon';
+import { getTimeFromMill } from 'App/date'
 
 const styles = {
   padding: '0 12px',
@@ -24,4 +25,11 @@ export const PlayTime = ({ time, isCustom, format = 'm:ss', }: IProps) => (
   </div>
 )
 
+/** Displays current time during replay */
+export const RealPlayTime = ({ time, sessionStart, tz }: { time: number, sessionStart: number, tz: string }) => (
+  <div>
+    {getTimeFromMill(time + sessionStart, tz)}
+  </div>
+)
+
 PlayTime.displayName = "PlayTime";

frontend/app/player-ui/index.tsx

@@ -1,6 +1,6 @@
 export { PlayButton, PlayingState } from './PlayButton'
 export { SkipButton } from './SkipButton'
 export { FullScreenButton } from './FullScreenButton'
-export { PlayTime } from './PlayTime'
+export { PlayTime, RealPlayTime } from './PlayTime'
 export { ProgressBar } from './ProgressBar'
 export { ProgressCircle } from './ProgressCircle'