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

change(ui): change timeline width

Browse source
This commit is contained in:
sylenien 2022-09-15 15:27:04 +02:00 • committed by Delirium
parent cac29f9e87
commit 96f93aa0d4
2 changed files with 31 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/app/components/Session/Layout/Player/Timeline.js
View file

@ -8,52 +8,48 @@ import PlayerTime from './PlayerTime';
import cls from './timeline.module.css';
export default function Timeline({ player }) {
const seekProgress = useCallback((e) => {
if (player.controlsDisabled) {
return;
}
const seekProgress = useCallback((e) => {
if (player.controlsDisabled) {
return;
}
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
const time = Math.max(Math.round(p * player.state.endTime), 0);
player.jump(time);
});
const scale = 100 / player.state.endTime;
return (
<div className="flex items-center" >
<PlayerTime player={player} timeKey="time"/>
<div className={ cn(cls.progress, "relative flex items-center") } onClick={ seekProgress }>
<TimeTracker player={ player } scale={ scale } />
<div className={ cn("flex items-center", cls.timeline) }/>
{ player.lists[EVENTS].list.map(e => (
<div
key={ e.key }
className={ cls.event }
style={ { left: `${ e.time * scale }%` } }
/>
))}
{ player.lists[CRASHES].list.map(e => (
return (
<div className="flex items-center">
<PlayerTime player={player} timeKey="time" />
<div className={cn(cls.progress, 'relative flex items-center')} onClick={seekProgress}>
<TimeTracker player={player} scale={scale} />
<div className={cn('flex items-center', cls.timeline)} />
{player.lists[EVENTS].list.map((e) => (
<div key={e.key} className={cls.event} style={{ left: `${e.time * scale}%` }} />
))}
{player.lists[CRASHES].list.map((e) => (
<Popup
key={ e.key }
key={e.key}
offset="-19"
pinned
className="error"
content={
<div className={ cls.popup } >
<b>{ `Crash ${e.name}:` }</b>
<br/>
<span>{ e.reason }</span>
</div>
content={
<div className={cls.popup}>
<b>{`Crash ${e.name}:`}</b>
<br />
<span>{e.reason}</span>
</div>
}
>
<div
key={ e.key }
className={ cn(cls.markup, cls.error) }
style={ { left: `${ e.time * scale }%` } }
key={e.key}
className={cn(cls.markup, cls.error)}
style={{ left: `${e.time * scale}%` }}
/>
</Popup>
))}
</div>
<PlayerTime player={player} timeKey="endTime"/>
))}
</div>
<PlayerTime player={player} timeKey="endTime" />
</div>
);
}
);
}

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

@ -220,7 +220,7 @@ export default class Timeline extends React.PureComponent {
const scale = 100 / endTime;
return (
<div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%' }}>
<div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: 'calc(100% - 1rem)', left: '0.5rem' }}>
<div
className={stl.progress}
onClick={disabled ? null : this.jumpToTime}