From 4baebb7a5a59578e42a1d7d1746fbbdcd82f2026 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 16 Sep 2022 17:18:32 +0200
Subject: [PATCH] change(tracker): change assist replay timeline, request
 windows typing

---
 .../Assist/RequestingWindow/RequestingWindow.tsx         | 9 ++++-----
 .../components/Session_/Player/Controls/TimeTracker.js   | 8 ++++----
 .../app/components/Session_/Player/Controls/Timeline.js  | 2 +-
 .../Session_/Player/Controls/timeTracker.module.css      | 5 +++++
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
index ac811de63..32f6c7d6f 100644
--- a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
+++ b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
@@ -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>
   )
diff --git a/frontend/app/components/Session_/Player/Controls/TimeTracker.js b/frontend/app/components/Session_/Player/Controls/TimeTracker.js
index 55e1b1c43..b5f9e2de3 100644
--- a/frontend/app/components/Session_/Player/Controls/TimeTracker.js
+++ b/frontend/app/components/Session_/Player/Controls/TimeTracker.js
@@ -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);
\ No newline at end of file
+}))(TimeTracker);
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index 883da9399..e53f567f0 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -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) => (
diff --git a/frontend/app/components/Session_/Player/Controls/timeTracker.module.css b/frontend/app/components/Session_/Player/Controls/timeTracker.module.css
index 86dd5bd16..8fdd7c6f6 100644
--- a/frontend/app/components/Session_/Player/Controls/timeTracker.module.css
+++ b/frontend/app/components/Session_/Player/Controls/timeTracker.module.css
@@ -21,3 +21,8 @@
   height: 10px;
   z-index: 1;
 }
+
+
+.liveTime {
+  background-color: rgba(66, 174, 94, 0.3)!important;
+}