jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui change time popup to button behavior (#1997)

Browse source
This commit is contained in:
Delirium 2024-03-26 14:43:03 +01:00 • committed by GitHub
parent ebd77ea793
commit b459802851
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 102 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

170
frontend/app/components/Session_/Player/Controls/components/PlayingTime.tsx
View file

@ -1,12 +1,17 @@
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Popover } from 'UI';
import { ITimeMode, TimeMode } from 'Components/Session_/Player/Controls/components/PlayerControls';
import { Button } from 'antd';
import React from 'react';
import {
RealReplayTimeConnected,
ReduxTime,
RealUserReplayTimeConnected,
ReduxTime,
} from 'Components/Session_/Player/Controls/Time';
import {
ITimeMode,
TimeMode,
} from 'Components/Session_/Player/Controls/components/PlayerControls';
import { Popover } from 'UI';
interface Props {
timeMode: ITimeMode;
@ -17,78 +22,107 @@ interface Props {
function PlayingTime({ timeMode, setTimeMode, startedAt, sessionTz }: Props) {
return (
<div className={'flex items-center gap-2'}>
<div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
{timeMode === TimeMode.Real ? (
<RealReplayTimeConnected startedAt={startedAt} />
) : timeMode === TimeMode.UserReal ? (
<RealUserReplayTimeConnected startedAt={startedAt} sessionTz={sessionTz} />
) : (
<>
<ReduxTime isCustom name="time" format="mm:ss" />
<span className="px-1">/</span>
<ReduxTime isCustom name="endTime" format="mm:ss" />
</>
)}
</div>
<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 color-gray-darkest text-left'}>
<div className={'font-semibold px-4 cursor-default'}>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 text-left'}>
Current / Session Duration
</div>
<div
className={'flex items-center text-left'}
onClick={() => {
setTimeMode(TimeMode.Timestamp);
close();
}}
>
<ReduxTime isCustom name="time" format="mm:ss" />
<span className="px-1">/</span>
<ReduxTime isCustom name="endTime" format="mm:ss" />
</div>
<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 color-gray-darkest text-left'
}
>
<div className={'font-semibold px-4 cursor-default'}>
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 text-left'}>
Current / Session Duration
</div>
{sessionTz ? (
<div
className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}
onClick={() => {
setTimeMode(TimeMode.UserReal);
close();
}}
>
<div className={'text-sm text-disabled-text text-left'}>User's time</div>
<div className={'text-left'}>
<RealUserReplayTimeConnected startedAt={startedAt} sessionTz={sessionTz} />
</div>
</div>
) : null}
<div
className={'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'}
className={'flex items-center text-left'}
onClick={() => {
setTimeMode(TimeMode.Real);
setTimeMode(TimeMode.Timestamp);
close();
}}
>
<div className={'text-sm text-disabled-text text-left'}>Based on your settings</div>
<div className={'text-left'}>
<RealReplayTimeConnected startedAt={startedAt} />
</div>
<ReduxTime isCustom name="time" format="mm:ss" />
<span className="px-1">/</span>
<ReduxTime isCustom name="endTime" format="mm:ss" />
</div>
</div>
)}
>
<DownOutlined />
</Popover>
</div>
{sessionTz ? (
<div
className={
'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'
}
onClick={() => {
setTimeMode(TimeMode.UserReal);
close();
}}
>
<div className={'text-sm text-disabled-text text-left'}>
User's time
</div>
<div className={'text-left'}>
<RealUserReplayTimeConnected
startedAt={startedAt}
sessionTz={sessionTz}
/>
</div>
</div>
) : null}
<div
className={
'flex flex-col cursor-pointer hover:bg-active-blue w-full px-4'
}
onClick={() => {
setTimeMode(TimeMode.Real);
close();
}}
>
<div className={'text-sm text-disabled-text text-left'}>
Based on your settings
</div>
<div className={'text-left'}>
<RealReplayTimeConnected startedAt={startedAt} />
</div>
</div>
</div>
)}
>
<Button type={'text'}>
<div className={'flex items-center gap-2'}>
<div
className="flex items-center font-semibold text-center"
style={{ minWidth: 85 }}
>
{timeMode === TimeMode.Real ? (
<RealReplayTimeConnected startedAt={startedAt} />
) : timeMode === TimeMode.UserReal ? (
<RealUserReplayTimeConnected
startedAt={startedAt}
sessionTz={sessionTz}
/>
) : (
<>
<ReduxTime isCustom name="time" format="mm:ss" />
<span className="px-1">/</span>
<ReduxTime isCustom name="endTime" format="mm:ss" />
</>
)}
</div>
<DownOutlined />
</div>
</Button>
</Popover>
);
}