feat(ui): add a context menu to player
This commit is contained in:
nick-delirium
parent
8272a9bebc
commit
55b4d0f244
5 changed files with 113 additions and 10 deletions
|
|
@ -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: <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,
|
||||
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 && <AutoplayTimer />}
|
||||
{loading ? <Loader /> : null}
|
||||
{showPlayIconLayer && <PlayIconLayer playing={playing} togglePlay={togglePlay} />}
|
||||
{markedTargets && <ElementsMarker targets={markedTargets} activeIndex={activeTargetIndex} />}
|
||||
{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 observer(Overlay);
|
||||
export default connect(null, {
|
||||
toggleBottomBlock,
|
||||
setCreateNoteTooltip
|
||||
})(observer(Overlay));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
3
frontend/app/svg/icons/arrow-down-up.svg
Normal file
3
frontend/app/svg/icons/arrow-down-up.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-arrow-down-up" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 414 B |
3
frontend/app/svg/icons/filetype-js.svg
Normal file
3
frontend/app/svg/icons/filetype-js.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-filetype-js" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H8v-1h4a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.186 15.29a1.176 1.176 0 0 1-.111-.449h.765a.578.578 0 0 0 .255.384c.07.049.153.087.249.114.095.028.202.041.319.041.164 0 .302-.023.413-.07a.559.559 0 0 0 .255-.193.507.507 0 0 0 .085-.29.387.387 0 0 0-.153-.326c-.101-.08-.255-.144-.462-.193l-.619-.143a1.72 1.72 0 0 1-.539-.214 1.001 1.001 0 0 1-.351-.367 1.068 1.068 0 0 1-.123-.524c0-.244.063-.457.19-.639.127-.181.303-.322.528-.422.224-.1.483-.149.776-.149.305 0 .564.05.78.152.216.102.383.239.5.41.12.17.186.359.2.566h-.75a.56.56 0 0 0-.12-.258.624.624 0 0 0-.247-.181.923.923 0 0 0-.369-.068c-.217 0-.388.05-.513.152a.472.472 0 0 0-.184.384c0 .121.048.22.143.3a.97.97 0 0 0 .405.175l.62.143c.218.05.406.12.566.211.16.09.285.21.375.358.09.148.135.335.135.56 0 .247-.063.466-.188.656a1.216 1.216 0 0 1-.539.439c-.234.105-.52.158-.858.158-.254 0-.476-.03-.665-.09a1.404 1.404 0 0 1-.478-.252 1.13 1.13 0 0 1-.29-.375Zm-3.104-.033A1.32 1.32 0 0 1 0 14.791h.765a.576.576 0 0 0 .073.27.499.499 0 0 0 .454.246c.19 0 .33-.055.422-.164.092-.11.138-.265.138-.466v-2.745h.79v2.725c0 .44-.119.774-.357 1.005-.236.23-.564.345-.984.345a1.59 1.59 0 0 1-.569-.094 1.145 1.145 0 0 1-.407-.266 1.14 1.14 0 0 1-.243-.39Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/app/svg/icons/redux.svg
Normal file
3
frontend/app/svg/icons/redux.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.91227 11.9011C5.39211 11.9011 4.95864 11.485 4.9413 10.9648C4.92397 10.7741 4.97598 10.5834 5.06267 10.462C4.09171 8.78017 3.57155 6.64752 4.36913 4.42818C4.9413 2.76367 6.38041 1.63666 7.94089 1.63666C9.60539 1.63666 11.3393 3.0931 11.5473 5.90196C11.2872 5.81527 10.9058 5.6939 10.6804 5.64188C10.6284 4.72293 9.84813 2.43423 8.01024 2.46891C7.35137 2.48625 6.38041 2.79835 5.87759 3.43987C5.27074 4.18544 4.92397 5.08704 4.85461 6.12736C4.75058 7.51445 5.04534 8.79751 5.75622 9.97653C5.7909 9.9592 5.84291 9.9592 5.87759 9.9592H5.91227C6.43243 9.9592 6.86589 10.3753 6.88323 10.8955C6.90057 11.433 6.48444 11.8838 5.94694 11.9011H5.91227ZM13.7562 8.52019C12.4385 6.97705 10.4966 6.12746 8.27721 6.12746H7.99979C7.84374 5.81536 7.51431 5.6073 7.1502 5.6073H7.11552C6.57802 5.62464 6.16189 6.07544 6.17923 6.61294C6.19657 7.1331 6.63004 7.54923 7.1502 7.54923H7.18487C7.56632 7.53189 7.89576 7.28915 8.03447 6.95971H8.34656C9.6643 6.95971 10.9127 7.34116 12.0397 8.08672C12.9066 8.6589 13.5308 9.40446 13.8776 10.3061C14.1723 11.0343 14.155 11.7452 13.8429 12.352C13.3574 13.271 12.5425 13.7738 11.4675 13.7738C10.774 13.7738 10.1151 13.5657 9.76833 13.4097C9.5776 13.5831 9.23083 13.8605 8.98809 14.0339C9.73365 14.3806 10.4966 14.5714 11.2248 14.5714C12.8893 14.5714 14.1203 13.6524 14.5885 12.7335C15.0913 11.7278 15.0566 9.99397 13.7562 8.52019ZM10.7045 10.6702C11.2073 10.6182 11.5888 10.1847 11.5714 9.66454C11.5541 9.14438 11.1206 8.72825 10.6005 8.72825H10.5658C10.0283 8.74559 9.61215 9.1964 9.62949 9.73389C9.64683 9.99397 9.75086 10.2194 9.90691 10.3754C9.3174 11.5371 8.41579 12.3867 7.06338 13.0976C6.14443 13.5831 5.1908 13.7565 4.23718 13.6351C3.45694 13.5311 2.85009 13.1843 2.46864 12.6121C1.91381 11.7625 1.86179 10.8436 2.32993 9.92462C2.65937 9.26575 3.17952 8.78027 3.50896 8.53753C3.4396 8.31213 3.33557 7.93068 3.28356 7.65326C0.769456 9.47381 1.02954 11.9359 1.79243 13.0976C2.36461 13.9645 3.5263 14.502 4.80936 14.502C5.15613 14.502 5.5029 14.4673 5.84967 14.3806C8.06902 13.9472 9.75086 12.6294 10.7045 10.6702Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Add table
Reference in a new issue