139 lines
3.4 KiB
TypeScript
139 lines
3.4 KiB
TypeScript
import {
|
|
CONSOLE,
|
|
NETWORK,
|
|
PERFORMANCE,
|
|
STACKEVENTS,
|
|
STORAGE,
|
|
toggleBottomBlock
|
|
} from "Duck/components/player";
|
|
import React from 'react';
|
|
import AutoplayTimer from './Overlay/AutoplayTimer';
|
|
import PlayIconLayer from './Overlay/PlayIconLayer';
|
|
import Loader from './Overlay/Loader';
|
|
import ElementsMarker from './Overlay/ElementsMarker';
|
|
import { PlayerContext } from 'App/components/Session/playerContext';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { Dropdown } from "antd"
|
|
import type {MenuProps} from 'antd';
|
|
import { connect } from 'react-redux';
|
|
import { setCreateNoteTooltip } from 'Duck/sessions';
|
|
import { Icon } from 'UI'
|
|
|
|
interface Props {
|
|
nextId?: string,
|
|
closedLive?: boolean,
|
|
isClickmap?: boolean,
|
|
toggleBottomBlock: (block: number) => void,
|
|
setCreateNoteTooltip: (args: any) => void,
|
|
}
|
|
|
|
enum ItemKey {
|
|
Console = '1',
|
|
Network = '2',
|
|
Performance = '3',
|
|
Events = '4',
|
|
State = '5',
|
|
AddNote = '6',
|
|
}
|
|
|
|
const menuItems: MenuProps['items'] = [
|
|
{
|
|
key: ItemKey.Console,
|
|
label: 'Console',
|
|
icon: <Icon name={"terminal"} size={14} />,
|
|
},
|
|
{
|
|
key: ItemKey.Network,
|
|
label: 'Network',
|
|
icon: <Icon name={"arrow-down-up"} size={14} />
|
|
},
|
|
{
|
|
key: ItemKey.Performance,
|
|
label: 'Performance',
|
|
icon: <Icon name={"speedometer2"} size={14} />
|
|
},
|
|
{
|
|
key: ItemKey.Events,
|
|
label: 'Events',
|
|
icon: <Icon name={"filetype-js"} size={14} />
|
|
},
|
|
{
|
|
key: ItemKey.State,
|
|
label: 'State',
|
|
icon: <Icon name={"redux"} size={14} />
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
key: ItemKey.AddNote,
|
|
label: 'Add Note',
|
|
icon: <Icon name={"quotes"} size={14} />
|
|
}
|
|
]
|
|
|
|
function Overlay({
|
|
nextId,
|
|
isClickmap,
|
|
toggleBottomBlock,
|
|
setCreateNoteTooltip
|
|
}: Props) {
|
|
const {player, store} = React.useContext(PlayerContext)
|
|
|
|
const togglePlay = () => player.togglePlay()
|
|
const {
|
|
playing,
|
|
messagesLoading,
|
|
completed,
|
|
autoplay,
|
|
inspectorMode,
|
|
markedTargets,
|
|
activeTargetIndex,
|
|
tabStates,
|
|
} = store.get()
|
|
const cssLoading = Object.values(tabStates).some(({cssLoading}) => cssLoading)
|
|
const loading = messagesLoading || cssLoading
|
|
|
|
const showAutoplayTimer = completed && autoplay && nextId
|
|
const showPlayIconLayer = !isClickmap && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
|
|
|
|
const onClick = ({key}: { key: string }) => {
|
|
switch (key) {
|
|
case ItemKey.Console:
|
|
toggleBottomBlock(CONSOLE)
|
|
break;
|
|
case ItemKey.Network:
|
|
toggleBottomBlock(NETWORK)
|
|
break;
|
|
case ItemKey.Performance:
|
|
toggleBottomBlock(PERFORMANCE)
|
|
break;
|
|
case ItemKey.Events:
|
|
toggleBottomBlock(STACKEVENTS)
|
|
break;
|
|
case ItemKey.State:
|
|
toggleBottomBlock(STORAGE)
|
|
break;
|
|
case ItemKey.AddNote:
|
|
setCreateNoteTooltip({ time: store.get().time, isVisible: true });
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
{showAutoplayTimer && <AutoplayTimer/>}
|
|
{loading ? <Loader/> : null}
|
|
<Dropdown menu={{items: menuItems, onClick}} trigger={['contextMenu']}>
|
|
<div>
|
|
{showPlayIconLayer && <PlayIconLayer playing={playing} togglePlay={togglePlay}/>}
|
|
</div>
|
|
</Dropdown>
|
|
{markedTargets && <ElementsMarker targets={markedTargets} activeIndex={activeTargetIndex}/>}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default connect(null, {
|
|
toggleBottomBlock,
|
|
setCreateNoteTooltip
|
|
})(observer(Overlay));
|