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

feat(ui): change player control tabs designs

Browse source
This commit is contained in:
sylenien 2022-05-27 10:08:58 +02:00 • committed by Delirium
parent b1d903f7f6
commit 02c87d237d
9 changed files with 143 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
frontend/app/components/Session_/Console/Console.js
View file

@ -1,125 +1,16 @@
import React from 'react';
// import cn from 'classnames';
// import { getRE } from 'App/utils';
// import { Icon, NoContent, Tabs, Input } from 'UI';
import { connectPlayer, jump } from 'Player';
// import { LEVEL } from 'Types/session/log';
// import Autoscroll from '../Autoscroll';
// import BottomBlock from '../BottomBlock';
// import stl from './console.module.css';
import ConsoleContent from './ConsoleContent';
// const ALL = 'ALL';
// const INFO = 'INFO';
// const WARNINGS = 'WARNINGS';
// const ERRORS = 'ERRORS';
// const LEVEL_TAB = {
// [ LEVEL.INFO ]: INFO,
// [ LEVEL.LOG ]: INFO,
// [ LEVEL.WARNING ]: WARNINGS,
// [ LEVEL.ERROR ]: ERRORS,
// [ LEVEL.EXCEPTION ]: ERRORS,
// };
// const TABS = [ ALL, INFO, WARNINGS, ERRORS ].map(tab => ({ text: tab, key: tab }));
// // eslint-disable-next-line complexity
// const getIconProps = (level) => {
// switch (level) {
// case LEVEL.INFO:
// case LEVEL.LOG:
// return {
// name: 'console/info',
// color: 'blue2',
// };
// case LEVEL.WARNING:
// return {
// name: 'console/warning',
// color: 'red2',
// };
// case LEVEL.ERROR:
// return {
// name: 'console/error',
// color: 'red',
// };
// }
// return null;
// };
// function renderWithNL(s = '') {
// if (typeof s !== 'string') return '';
// return s.split('\n').map((line, i) => <div className={ cn({ "ml-20": i !== 0 }) }>{ line }</div>)
// }
@connectPlayer(state => ({
logs: state.logList,
time: state.time,
livePlay: state.livePlay,
}))
export default class Console extends React.PureComponent {
// state = {
// filter: '',
// activeTab: ALL,
// }
// onTabClick = activeTab => this.setState({ activeTab })
// onFilterChange = (e, { value }) => this.setState({ filter: value })
render() {
const { logs, time } = this.props;
// const { filter, activeTab, currentError } = this.state;
// const filterRE = getRE(filter, 'i');
// const filtered = logs.filter(({ level, value }) => activeTab === ALL
// ? filterRE.test(value)
// : (filterRE.test(value) && LEVEL_TAB[ level ] === activeTab)
// );
return (
<>
<ConsoleContent jump={!this.props.livePlay && jump} logs={logs} time={time} />
{/* <BottomBlock>
<BottomBlock.Header>
<Tabs
tabs={ TABS }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
<Input
className="input-small"
placeholder="Filter"
icon="search"
iconPosition="left"
name="filter"
onChange={ this.onFilterChange }
/>
</BottomBlock.Header>
<BottomBlock.Content>
<NoContent
size="small"
show={ filtered.length === 0 }
>
<Autoscroll>
{ filtered.map(l => (
<div
key={ l.key }
className={ cn(stl.line, {
"info": !l.isYellow() && !l.isRed(),
"warn": l.isYellow(),
"error": l.isRed(),
}) }
data-scroll-item={ l.isRed() }
onClick={ () => jump(l.time) }
>
<Icon size="14" className={ stl.icon } { ...getIconProps(l.level) } />
<div className={ stl.message }>{ renderWithNL(l.value) }</div>
</div>
))}
</Autoscroll>
</NoContent>
</BottomBlock.Content>
</BottomBlock> */}
</>
);
}
}
}

21
frontend/app/components/Session_/Console/ConsoleContent.js
View file

@ -22,7 +22,7 @@ const LEVEL_TAB = {
[ LEVEL.EXCEPTION ]: ERRORS,
};
const TABS = [ ALL, INFO, WARNINGS, ERRORS ].map(tab => ({ text: tab, key: tab }));
const TABS = [ ALL, ERRORS, WARNINGS, INFO, ].map(tab => ({ text: tab, key: tab }));
// eslint-disable-next-line complexity
const getIconProps = (level) => {
@ -77,15 +77,18 @@ export default class ConsoleContent extends React.PureComponent {
<>
<BottomBlock style={{ height: 300 + additionalHeight + 'px' }}>
<BottomBlock.Header showClose={!isResult}>
<Tabs
tabs={ TABS }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
<div className="flex items-center">
<span className="font-semibold color-gray-medium mr-4">Console</span>
<Tabs
tabs={ TABS }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
</div>
<Input
className="input-small"
placeholder="Filter"
placeholder="Filter by keyword"
icon="search"
iconPosition="left"
name="filter"
@ -122,4 +125,4 @@ export default class ConsoleContent extends React.PureComponent {
</>
);
}
}
}

18
frontend/app/components/Session_/Network/NetworkContent.js
View file

@ -189,13 +189,16 @@ export default class NetworkContent extends React.PureComponent {
<React.Fragment>
<BottomBlock style={{ height: 300 + additionalHeight + 'px' }} className="border">
<BottomBlock.Header showClose={!isResult}>
<Tabs
className="uppercase"
tabs={ tabs }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
<div className="flex items-center">
<span className="font-semibold color-gray-medium mr-4">Network</span>
<Tabs
className="uppercase"
tabs={ tabs }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
</div>
<Input
// className="input-small"
placeholder="Filter by Name"
@ -283,4 +286,3 @@ export default class NetworkContent extends React.PureComponent {
);
}
}

51
frontend/app/components/Session_/Performance/Performance.tsx
View file

@ -224,30 +224,33 @@ export default class Performance extends React.PureComponent {
return (
<BottomBlock>
<BottomBlock.Header>
<InfoLine>
<InfoLine.Point
label="Device Heap Size"
value={ formatBytes(userDeviceHeapSize) }
display={ userDeviceHeapSize != null }
/>
{/* <InfoLine.Point */}
{/* label="Device Memory Size" */}
{/* value={ formatBytes(userDeviceMemorySize*1e6) } */}
{/* /> */}
<InfoLine.Point
label="Connection Type"
value={ connType }
display={ connType != null && connType !== "unknown" }
/>
<InfoLine.Point
label="Connection Speed"
value={ connBandwidth >= 1000
? `${ connBandwidth / 1000 } Mbps`
: `${ connBandwidth } Kbps`
}
display={ connBandwidth != null }
/>
</InfoLine>
<div className="flex items-center">
<span className="font-semibold color-gray-medium mr-4">Performance</span>
<InfoLine>
<InfoLine.Point
label="Device Heap Size"
value={ formatBytes(userDeviceHeapSize) }
display={ userDeviceHeapSize != null }
/>
{/* <InfoLine.Point */}
{/* label="Device Memory Size" */}
{/* value={ formatBytes(userDeviceMemorySize*1e6) } */}
{/* /> */}
<InfoLine.Point
label="Connection Type"
value={ connType }
display={ connType != null && connType !== "unknown" }
/>
<InfoLine.Point
label="Connection Speed"
value={ connBandwidth >= 1000
? `${ connBandwidth / 1000 } Mbps`
: `${ connBandwidth } Kbps`
}
display={ connBandwidth != null }
/>
</InfoLine>
</div>
</BottomBlock.Header>
<BottomBlock.Content>
{ fps &&

78
frontend/app/components/Session_/Player/Player.js
View file

@ -5,11 +5,40 @@ import cn from 'classnames';
import { EscapeButton } from 'UI';
import { hide as hideTargetDefiner } from 'Duck/components/targetDefiner';
import { fullscreenOff } from 'Duck/components/player';
import { attach as attachPlayer, Controls as PlayerControls, connectPlayer } from 'Player';
import {
NONE,
CONSOLE,
NETWORK,
STACKEVENTS,
STORAGE,
PROFILER,
PERFORMANCE,
GRAPHQL,
FETCH,
EXCEPTIONS,
LONGTASKS,
INSPECTOR,
} from 'Duck/components/player';
import Network from '../Network';
import Console from '../Console/Console';
import StackEvents from '../StackEvents/StackEvents';
import Storage from '../Storage';
import Profiler from '../Profiler';
import { ConnectedPerformance } from '../Performance';
import GraphQL from '../GraphQL';
import Fetch from '../Fetch';
import Exceptions from '../Exceptions/Exceptions';
import LongTasks from '../LongTasks';
import Inspector from '../Inspector';
import {
attach as attachPlayer,
Controls as PlayerControls,
scale as scalePlayerScreen,
connectPlayer,
} from 'Player';
import Controls from './Controls';
import Overlay from './Overlay';
import stl from './player.module.css';
import EventsToggleButton from '../../Session/EventsToggleButton';
import { updateLastPlayedSession } from 'Duck/sessions';
@connectPlayer(state => ({
@ -31,6 +60,13 @@ import { updateLastPlayedSession } from 'Duck/sessions';
export default class Player extends React.PureComponent {
screenWrapper = React.createRef();
componentDidUpdate(prevProps) {
if ([ prevProps.bottomBlock, this.props.bottomBlock ].includes(NONE) ||
prevProps.fullscreen !== this.props.fullscreen) {
scalePlayerScreen();
}
}
componentDidMount() {
this.props.updateLastPlayedSession(this.props.sessionId);
if (this.props.closedLive) return;
@ -48,6 +84,7 @@ export default class Player extends React.PureComponent {
nextId,
live,
closedLive,
bottomBlock,
} = this.props;
return (
@ -63,6 +100,43 @@ export default class Player extends React.PureComponent {
ref={ this.screenWrapper }
/>
</div>
{ !fullscreen && !!bottomBlock &&
<div className="">
{ bottomBlock === CONSOLE &&
<Console />
}
{ bottomBlock === NETWORK &&
<Network />
}
{ bottomBlock === STACKEVENTS &&
<StackEvents />
}
{ bottomBlock === STORAGE &&
<Storage />
}
{ bottomBlock === PROFILER &&
<Profiler />
}
{ bottomBlock === PERFORMANCE &&
<ConnectedPerformance />
}
{ bottomBlock === GRAPHQL &&
<GraphQL />
}
{ bottomBlock === FETCH &&
<Fetch />
}
{ bottomBlock === EXCEPTIONS &&
<Exceptions />
}
{ bottomBlock === LONGTASKS &&
<LongTasks />
}
{ bottomBlock === INSPECTOR &&
<Inspector />
}
</div>
}
<Controls
{ ...PlayerControls }
/>

3
frontend/app/components/Session_/Player/player.module.css
View file

@ -15,7 +15,8 @@
/* border: solid thin $gray-light; */
/* border-radius: 3px; */
overflow: hidden;
background: $gray-lightest;
background: repeating-conic-gradient($gray-lightest 0% 25%, transparent 0% 50%)
50% / 10px 10px;
}
.disconnected {

70
frontend/app/components/Session_/PlayerBlock.js
View file

@ -1,33 +1,11 @@
import React from 'react';
import cn from "classnames";
import { connect } from 'react-redux';
import { scale as scalePlayerScreen } from 'Player';
import { } from 'Player';
import {
NONE,
CONSOLE,
NETWORK,
STACKEVENTS,
STORAGE,
PROFILER,
PERFORMANCE,
GRAPHQL,
FETCH,
EXCEPTIONS,
LONGTASKS,
INSPECTOR,
} from 'Duck/components/player';
import Player from './Player';
import Network from './Network';
import Console from './Console/Console';
import StackEvents from './StackEvents/StackEvents';
import Storage from './Storage';
import Profiler from './Profiler';
import { ConnectedPerformance } from './Performance';
import GraphQL from './GraphQL';
import Fetch from './Fetch';
import Exceptions from './Exceptions/Exceptions';
import LongTasks from './LongTasks';
import Inspector from './Inspector';
import SubHeader from './Subheader';
import styles from './playerBlock.css';
@ -39,13 +17,6 @@ import styles from './playerBlock.css';
disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]),
}))
export default class PlayerBlock extends React.PureComponent {
componentDidUpdate(prevProps) {
if ([ prevProps.bottomBlock, this.props.bottomBlock ].includes(NONE) ||
prevProps.fullscreen !== this.props.fullscreen) {
scalePlayerScreen();
}
}
render() {
const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues } = this.props;
@ -58,44 +29,9 @@ export default class PlayerBlock extends React.PureComponent {
<Player
className="flex-1"
bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
bottomBlock={bottomBlock}
fullscreen={fullscreen}
/>
{ !fullscreen && !!bottomBlock &&
<div className="">
{ bottomBlock === CONSOLE &&
<Console />
}
{ bottomBlock === NETWORK &&
<Network />
}
{ bottomBlock === STACKEVENTS &&
<StackEvents />
}
{ bottomBlock === STORAGE &&
<Storage />
}
{ bottomBlock === PROFILER &&
<Profiler />
}
{ bottomBlock === PERFORMANCE &&
<ConnectedPerformance />
}
{ bottomBlock === GRAPHQL &&
<GraphQL />
}
{ bottomBlock === FETCH &&
<Fetch />
}
{ bottomBlock === EXCEPTIONS &&
<Exceptions />
}
{ bottomBlock === LONGTASKS &&
<LongTasks />
}
{ bottomBlock === INSPECTOR &&
<Inspector />
}
</div>
}
</div>
);
}

2
frontend/app/components/Session_/PlayerBlockHeader.js
View file

@ -106,7 +106,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
<div className={ cn(stl.header, "flex justify-between", { "hidden" : fullscreen}) }>
<div className="flex w-full items-center">
<BackLink onClick={this.backHandler} label="Back" />
<BackLink label="Back" onClick={this.backHandler} className="h-full" />
<div className={ stl.divider } />
<UserCard
className=""

19
frontend/app/components/Session_/StackEvents/StackEvents.js
View file

@ -39,13 +39,16 @@ export default class StackEvents extends React.PureComponent {
return (
<BottomBlock>
<BottomBlock.Header>
<Tabs
className="uppercase"
tabs={ tabs }
active={ activeTab }
onClick={ setActiveTab }
border={ false }
/>
<div className="flex items-center">
<span className="font-semibold color-gray-medium mr-4">Events</span>
<Tabs
className="uppercase"
tabs={ tabs }
active={ activeTab }
onClick={ setActiveTab }
border={ false }
/>
</div>
</BottomBlock.Header>
<BottomBlock.Content>
<NoContent
@ -79,4 +82,4 @@ export default class StackEvents extends React.PureComponent {
</BottomBlock>
);
}
}
}