From 0a871c738af26bfc4da29e8915d27e81b96f98b0 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Wed, 29 Nov 2023 09:37:53 +0530
Subject: [PATCH] add condition to display latency badge only

---
 .../src/components/profile/JKLatencyBadge.js  | 28 ++++++++++++-------
 .../components/profile/JKUserLatencyBadge.js  |  4 +--
 jam-ui/src/components/sessions/JKSession.js   |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/jam-ui/src/components/profile/JKLatencyBadge.js b/jam-ui/src/components/profile/JKLatencyBadge.js
index 468adc56d..9dc004150 100644
--- a/jam-ui/src/components/profile/JKLatencyBadge.js
+++ b/jam-ui/src/components/profile/JKLatencyBadge.js
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-const JKLatencyBadge = ({ latencyData, showAll }) => {
-  
+const JKLatencyBadge = ({ latencyData, showAll, showBadgeOnly }) => {
   const LATENCY_SCORES = {
     good: { label: 'GOOD', min: 0, max: 40 },
     fair: { label: 'FAIR', min: 40, max: 60 },
     high: { label: 'HIGH', min: 60, max: 10000000 },
-    me:   { label: 'ME', min: -1, max: -1 },
+    me: { label: 'ME', min: -1, max: -1 },
     unknown: { label: 'UNKNOWN', min: -2, max: -2 }
   };
 
@@ -36,27 +35,36 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
       setLatencyLabel(tot);
 
       if (showAll) {
-        setLatencyInfo(`${Math.round(latencyData.ars.internet_latency)}ms (Internet) + ${Math.round(latencyData.audio_latency)}ms (audio) = ${tot}ms (total) `);
+        setLatencyInfo(
+          `${Math.round(latencyData.ars.internet_latency)}ms (Internet) + ${Math.round(
+            latencyData.audio_latency
+          )}ms (audio) = ${tot}ms (total) `
+        );
       } else {
         setLatencyInfo(`${tot}ms`);
       }
     }
   }, [latencyData]);
 
-  return (
-    <>
-      {latencyInfo} <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
-    </>
+  return showBadgeOnly ? (
+    <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
+  ) : (
+    <div className="d-flex flex-row align-items-center">
+      <span className="me-1">{latencyInfo}</span>
+      <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
+    </div>
   );
 };
 
 JKLatencyBadge.propTypes = {
   latencyData: PropTypes.object,
-  showAll: PropTypes.bool
+  showAll: PropTypes.bool,
+  showBadgeOnly: PropTypes.bool
 };
 
 JKLatencyBadge.defaultProps = {
-  showAll: false
+  showAll: false,
+  showBadgeOnly: false
 };
 
 export default JKLatencyBadge;
diff --git a/jam-ui/src/components/profile/JKUserLatencyBadge.js b/jam-ui/src/components/profile/JKUserLatencyBadge.js
index 8281a50c8..f843b8ab8 100644
--- a/jam-ui/src/components/profile/JKUserLatencyBadge.js
+++ b/jam-ui/src/components/profile/JKUserLatencyBadge.js
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 
 import JKLatencyBadge from './JKLatencyBadge';
 
-const JKUserLatency = ({user, showAll}) => {
+const JKUserLatency = ({user, showAll, showBadgeOnly}) => {
   const latencyData = useSelector(state => state.latency.latencies.find(l => l.user_id === user.id));
   return (
-    <JKLatencyBadge latencyData={latencyData} showAll={showAll} />
+    <JKLatencyBadge latencyData={latencyData} showAll={showAll} showBadgeOnly={showBadgeOnly} />
   );
 };
 
diff --git a/jam-ui/src/components/sessions/JKSession.js b/jam-ui/src/components/sessions/JKSession.js
index a5249a2ca..93c88c661 100644
--- a/jam-ui/src/components/sessions/JKSession.js
+++ b/jam-ui/src/components/sessions/JKSession.js
@@ -133,7 +133,7 @@ clicks this button, we open an audio stream using Icecast server to let the user
             {session.participants.map(participant => (
               <Row key={participant.id} style={musicianRowStyle} className="align-items-top">
                 <Col>
-                  <JKUserLatencyBadge key={participant.id} user={participant.user} />
+                  <JKUserLatencyBadge key={participant.id} user={participant.user} showBadgeOnly={true} />
                 </Col>
               </Row>
             ))}