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

fix(player): fix resizer

Browse source
This commit is contained in:
sylenien 2022-10-05 17:30:07 +02:00
parent 617c78f224
commit b6e0446099
2 changed files with 66 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js
View file

@ -7,32 +7,41 @@ import { TYPES } from 'Types/session/event';
import Event from './Event'
import stl from './eventGroupWrapper.module.css';
import NoteEvent from './NoteEvent';
import { setEditNoteTooltip } from 'Duck/sessions';
import { Note } from 'App/services/NotesService';
import { setEditNoteTooltip } from 'Duck/sessions';;
// TODO: incapsulate toggler in LocationEvent
@withToggle("showLoadInfo", "toggleLoadInfo")
@connect(state => ({members: state.getIn(['members', 'list']), currentUserId: state.getIn(['user', 'account', 'id']) }), { setEditNoteTooltip })
@withToggle('showLoadInfo', 'toggleLoadInfo')
@connect(
(state) => ({
members: state.getIn(['members', 'list']),
currentUserId: state.getIn(['user', 'account', 'id']),
}),
{ setEditNoteTooltip }
)
class EventGroupWrapper extends React.Component {
toggleLoadInfo = (e) => {
e.stopPropagation();
this.props.toggleLoadInfo();
}
};
componentDidUpdate(prevProps) {
if (prevProps.showLoadInfo !== this.props.showLoadInfo || prevProps.query !== this.props.query) {
if (
prevProps.showLoadInfo !== this.props.showLoadInfo ||
prevProps.query !== this.props.query ||
prevProps.event.timestamp !== this.props.event.timestamp ||
prevProps.isNote !== this.props.isNote
) {
this.props.mesureHeight();
}
}
componentDidMount() {
this.props.toggleLoadInfo(this.props.isFirst)
this.props.toggleLoadInfo(this.props.isFirst);
this.props.mesureHeight();
}
onEventClick = (e) => this.props.onEventClick(e, this.props.event);
onCheckboxClick = e => this.props.onCheckboxClick(e, this.props.event);
onCheckboxClick = (e) => this.props.onCheckboxClick(e, this.props.event);
render() {
const {
@ -51,63 +60,71 @@ class EventGroupWrapper extends React.Component {
} = this.props;
const isLocation = event.type === TYPES.LOCATION;
const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
const whiteBg =
(isLastInGroup && event.type !== TYPES.LOCATION) ||
(!isLastEvent && event.type !== TYPES.LOCATION);
const safeRef = String(event.referrer || '');
return (
<div
className={
cn(stl.container, "!py-1", {
className={cn(
stl.container,
'!py-1',
{
[stl.last]: isLastInGroup,
[stl.first]: event.type === TYPES.LOCATION,
[stl.dashAfter]: isLastInGroup && !isLastEvent,
}, isLastInGroup && '!pb-2', event.type === TYPES.LOCATION && "!pt-2 !pb-2")
}
},
isLastInGroup && '!pb-2',
event.type === TYPES.LOCATION && '!pt-2 !pb-2'
)}
>
{ isFirst && isLocation && event.referrer &&
<div className={ stl.referrer }>
{isFirst && isLocation && event.referrer && (
<div className={stl.referrer}>
<TextEllipsis>
Referrer: <span className={stl.url}>{safeRef}</span>
</TextEllipsis>
</div>
}
)}
{isNote ? (
<NoteEvent
userEmail={this.props.members.find(m => m.id === event.userId)?.email || event.userId}
userEmail={this.props.members.find((m) => m.id === event.userId)?.email || event.userId}
note={event}
filterOutNote={filterOutNote}
onEdit={this.props.setEditNoteTooltip}
noEdit={this.props.currentUserId !== event.userId}
/>
) : isLocation
? <Event
extended={isFirst}
key={ event.key }
event={ event }
onClick={ this.onEventClick }
selected={ isSelected }
showLoadInfo={ showLoadInfo }
toggleLoadInfo={ this.toggleLoadInfo }
isCurrent={ isCurrent }
presentInSearch={presentInSearch}
isLastInGroup={isLastInGroup}
whiteBg={whiteBg}
/>
: <Event
key={ event.key }
event={ event }
onClick={ this.onEventClick }
onCheckboxClick={ this.onCheckboxClick }
selected={ isSelected }
isCurrent={ isCurrent }
showSelection={ showSelection }
overlayed={ isEditing }
presentInSearch={presentInSearch}
isLastInGroup={isLastInGroup}
whiteBg={whiteBg}
/>}
) : isLocation ? (
<Event
extended={isFirst}
key={event.key}
event={event}
onClick={this.onEventClick}
selected={isSelected}
showLoadInfo={showLoadInfo}
toggleLoadInfo={this.toggleLoadInfo}
isCurrent={isCurrent}
presentInSearch={presentInSearch}
isLastInGroup={isLastInGroup}
whiteBg={whiteBg}
/>
) : (
<Event
key={event.key}
event={event}
onClick={this.onEventClick}
onCheckboxClick={this.onCheckboxClick}
selected={isSelected}
isCurrent={isCurrent}
showSelection={showSelection}
overlayed={isEditing}
presentInSearch={presentInSearch}
isLastInGroup={isLastInGroup}
whiteBg={whiteBg}
/>
)}
</div>
)
);
}
}

6
frontend/app/components/Session_/EventsBlock/EventsBlock.js
View file

@ -24,7 +24,7 @@ import EventSearch from './EventSearch/EventSearch';
setEventFilter,
filterOutNote
})
export default class EventsBlock extends React.PureComponent {
export default class EventsBlock extends React.Component {
state = {
editingEvent: null,
mouseOver: false,
@ -177,8 +177,8 @@ export default class EventsBlock extends React.PureComponent {
isNote={isNote}
filterOutNote={filterOutNote}
/>
</div>
)}
</div>
)}
</CellMeasurer>
);
}