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

change(tracker): change assist replay timeline, request windows typing

Browse source
This commit is contained in:
sylenien 2022-09-16 17:18:32 +02:00 • committed by Delirium
parent 0d4cc837a9
commit 4baebb7a5a
4 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
View file

@ -30,13 +30,12 @@ const WIN_VARIANTS = {
function RequestingWindow({ userDisplayName, type }: Props) {
return (
<div className="w-full h-full absolute top-0 left-0 flex items-center justify-center" style={{ background: "rgba(0,0,0, 0.30)", zIndex: INDEXES.PLAYER_REQUEST_WINDOW}}>
<div className="rounded bg-white py-4 px-8 flex flex-col text-lg items-center max-w-md text-center">
<Icon size={40} name={WIN_VARIANTS[type].icon} className='mb-4'/>
<span>Waiting for</span>
<span className="font-semibold">{userDisplayName}</span>
<div className="rounded bg-white py-4 px-8 flex flex-col text-lg items-center max-w-lg text-center">
<Icon size={40} color="teal" name={WIN_VARIANTS[type].icon} className='mb-4'/>
<div>Waiting for <span className="font-semibold">{userDisplayName}</span></div>
<span>{WIN_VARIANTS[type].text}</span>
<Loader size={30} style={{ minHeight: 60 }} />
<Button variant="text-primary" onClick={WIN_VARIANTS[type].action}>cancel</Button>
<Button variant="text-primary" onClick={WIN_VARIANTS[type].action}>Cancel</Button>
</div>
</div>
)

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

@ -1,12 +1,12 @@
import React from 'react';
import { connectPlayer } from 'Player';
import styles from './timeTracker.module.css';
import cn from 'classnames'
const TimeTracker = ({ time, scale }) => (
const TimeTracker = ({ time, scale, live, left }) => (
<React.Fragment>
<span
className={ styles.playedTimeline }
className={ cn(styles.playedTimeline, live && left > 99 ? styles.liveTime : null) }
style={ { width: `${ time * scale }%` } }
/>
</React.Fragment>
@ -16,4 +16,4 @@ TimeTracker.displayName = 'TimeTracker';
export default connectPlayer(state => ({
time: state.time,
}))(TimeTracker);
}))(TimeTracker);

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

@ -206,7 +206,7 @@ export default class Timeline extends React.PureComponent {
minX={BOUNDRY}
maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
/>
<TimeTracker scale={scale} />
<TimeTracker scale={scale} live={this.props.live} left={this.props.time * scale} />
{!live && skip ?
skipIntervals.map((interval) => (

5
frontend/app/components/Session_/Player/Controls/timeTracker.module.css
View file

@ -21,3 +21,8 @@
height: 10px;
z-index: 1;
}
.liveTime {
background-color: rgba(66, 174, 94, 0.3)!important;
}