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

fix(ui): bugfixes

Browse source
This commit is contained in:
sylenien 2022-06-10 15:50:08 +02:00 • committed by Delirium
parent 43f52a9dcd
commit fee99d3bf1
9 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Session/RightBlock.tsx
View file

@ -11,7 +11,7 @@ const EventsBlockConnected = connectPlayer(state => ({
playing: state.playing,
}))(EventsBlock)
export default function RightBlock(props) {
function RightBlock(props) {
const { activeTab } = props;
const renderActiveTab = (tab) => {
@ -28,3 +28,5 @@ export default function RightBlock(props) {
</div>
)
}
export default React.memo(RightBlock)

9
frontend/app/components/Session/WebPlayer.js
View file

@ -35,11 +35,9 @@ function PlayerContent({ live, fullscreen, activeTab }) {
)
}
function RightMenu({ showEvents, live, tabs, activeTab, setActiveTab, fullscreen }) {
return showEvents && !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
return !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
}
const ConnectedMenu = connectPlayer(state => ({
showEvents: state.showEvents}), { toggleEvents })(RightMenu)
function WebPlayer (props) {
const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, config } = props;
@ -68,13 +66,14 @@ function WebPlayer (props) {
closeBottomBlock();
}, [])
return (
<PlayerProvider>
<InitLoader className="flex-1">
<PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
<div className="flex">
<div className="w-full"><PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} /></div>
{activeTab !== '' && <ConnectedMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
{activeTab !== '' && <RightMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
</div>
</InitLoader>
</PlayerProvider>

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

@ -38,7 +38,7 @@ const LOAD_TIME_COLOR = "red";
export function renderType(r) {
return (
<Popup content={ <div className={ stl.popupNameContent }>{ r.type }</div> } >
<Popup style={{width: '100%'}} content={ <div className={ stl.popupNameContent }>{ r.type }</div> } >
<div className={ stl.popupNameTrigger }>{ r.type }</div>
</Popup>
);
@ -46,7 +46,7 @@ export function renderType(r) {
export function renderName(r) {
return (
<Popup content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
<Popup style={{width: '100%'}} content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
<div className={ stl.popupNameTrigger }>{ r.name }</div>
</Popup>
);
@ -94,7 +94,7 @@ function renderSize(r) {
}
return (
<Popup content={ content } >
<Popup style={{width: '100%'}} content={ content } >
<div>{ triggerText }</div>
</Popup>
);
@ -118,6 +118,7 @@ export function renderDuration(r) {
return (
<Popup
style={{width: '100%'}}
content={ tooltipText }
>
<div className={ cn(className, stl.duration) } > { text } </div>

2
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -347,7 +347,7 @@ export default class Controls extends React.Component {
onClick={ this.props.toggleSkip }
data-disabled={ disabled }
>
<span className={ styles.checkIcon } />
{skip && <Icon name="check" size="24" className="mr-1" />}
{ 'Skip Inactivity' }
</button>
</div>

8
frontend/app/components/Session_/Player/Controls/Timeline.js
View file

@ -13,6 +13,8 @@ import CustomDragLayer from './CustomDragLayer';
import { debounce } from 'App/utils';
import { Tooltip } from 'react-tippy';
const BOUNDRY = 15
const getPointerIcon = (type) => {
// exception,
switch(type) {
@ -116,7 +118,7 @@ export default class Timeline extends React.PureComponent {
onDrag = (offset) => {
const { endTime } = this.props;
const p = (offset.x - 60) / this.progressRef.current.offsetWidth;
const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
const time = Math.max(Math.round(p * endTime), 0);
deboucneJump(time);
if (this.props.playing) {
@ -147,7 +149,7 @@ export default class Timeline extends React.PureComponent {
return (
<div
className="flex items-center absolute w-full"
style={{ top: '-5px', zIndex: 100, padding: '0 15px'}}
style={{ top: '-5px', zIndex: 100, padding: `0 ${BOUNDRY}px`}}
>
<div
className={ stl.progress }
@ -155,7 +157,7 @@ export default class Timeline extends React.PureComponent {
ref={ this.progressRef }
>
<DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} />
<CustomDragLayer onDrag={this.onDrag} minX={70} maxX={this.progressRef.current && this.progressRef.current.offsetWidth + 70} />
<CustomDragLayer onDrag={this.onDrag} minX={BOUNDRY} maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY} />
<TimeTracker scale={ scale } />
{ skip && skipIntervals.map(interval =>
(<div

6
frontend/app/components/Session_/Player/Controls/controls.module.css
View file

@ -85,12 +85,6 @@
}
}
.checkIcon {
@mixin icon check, $gray-dark, 24px;
margin-right: 2px;
display: none;
}
.liveTag {
cursor: pointer;
user-select: none;

3
frontend/app/components/Session_/Subheader.js
View file

@ -48,7 +48,6 @@ function SubHeader(props) {
entity="sessions"
id={ props.sessionId }
showCopyLink={true}
time={props.time}
trigger={
<div className="flex items-center hover:bg-gray-light-shade rounded-md p-1">
<Icon
@ -75,6 +74,6 @@ function SubHeader(props) {
)
}
const SubH = connectPlayer(state => ({ currentLocation: state.location, time: state.time }))(SubHeader)
const SubH = connectPlayer(state => ({ currentLocation: state.location }))(SubHeader)
export default React.memo(SubH)

3
frontend/app/components/Session_/TimeTable/BarRow.js
View file

@ -39,6 +39,7 @@ const BarRow = ({ resource: { time, ttfb = 0, duration, key }, popup=false, time
<div key={ key } className={ tableStyles.row } >
<Popup
basic
style={{ width: '100%' }}
unmountHTMLWhenHide
content={
<React.Fragment>
@ -81,4 +82,4 @@ const BarRow = ({ resource: { time, ttfb = 0, duration, key }, popup=false, time
BarRow.displayName = "BarRow";
export default BarRow;
export default BarRow;

4
frontend/app/components/shared/SharePopup/SharePopup.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { toast } from 'react-toastify';
import { connectPlayer } from 'Player'
import withRequest from 'HOCs/withRequest';
import { Popup, Dropdown, Icon, Button } from 'UI';
import styles from './sharePopup.module.css';
@ -9,6 +10,9 @@ import SessionCopyLink from './SessionCopyLink';
import Select from 'Shared/Select';
import { Tooltip } from 'react-tippy';
@connectPlayer(state => ({
time: state.time,
}))
@connect(state => ({
channels: state.getIn([ 'slack', 'list' ]),
tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),