diff --git a/frontend/app/components/Session_/Player/Overlay.tsx b/frontend/app/components/Session_/Player/Overlay.tsx
index 85fed07e6..7240ceff3 100644
--- a/frontend/app/components/Session_/Player/Overlay.tsx
+++ b/frontend/app/components/Session_/Player/Overlay.tsx
@@ -1,3 +1,11 @@
+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';
@@ -5,18 +13,70 @@ 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: ,
+ },
+ {
+ key: ItemKey.Network,
+ label: 'Network',
+ icon:
+ },
+ {
+ key: ItemKey.Performance,
+ label: 'Performance',
+ icon:
+ },
+ {
+ key: ItemKey.Events,
+ label: 'Events',
+ icon:
+ },
+ {
+ key: ItemKey.State,
+ label: 'State',
+ icon:
+ },
+ { type: 'divider' },
+ {
+ key: ItemKey.AddNote,
+ label: 'Add Note',
+ icon:
+ }
+]
+
function Overlay({
- nextId,
- isClickmap,
+ nextId,
+ isClickmap,
+ toggleBottomBlock,
+ setCreateNoteTooltip
}: Props) {
- const { player, store } = React.useContext(PlayerContext)
+ const {player, store} = React.useContext(PlayerContext)
const togglePlay = () => player.togglePlay()
const {
@@ -29,20 +89,51 @@ function Overlay({
activeTargetIndex,
tabStates,
} = store.get()
- const cssLoading = Object.values(tabStates).some(({ cssLoading }) => cssLoading)
+ 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 && }
- {loading ? : null}
- {showPlayIconLayer && }
- {markedTargets && }
+ {showAutoplayTimer && }
+ {loading ? : null}
+
+
+ {showPlayIconLayer &&
}
+