From df3fc8f2b722a467b4d3e6e7f1f380fb1fc53eb2 Mon Sep 17 00:00:00 2001
From: Hoan Luu Huu <110280845+xquanluu@users.noreply.github.com>
Date: Tue, 23 Jan 2024 08:31:02 +0700
Subject: [PATCH] playback latency region on wavesurfer (#387)

* playback latency region on wavesurfer

* remove start-audio region
---
 .../internal/views/recent-calls/player.tsx        | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/containers/internal/views/recent-calls/player.tsx b/src/containers/internal/views/recent-calls/player.tsx
index 5b627bc..2c11425 100644
--- a/src/containers/internal/views/recent-calls/player.tsx
+++ b/src/containers/internal/views/recent-calls/player.tsx
@@ -309,7 +309,9 @@ export const Player = ({ call }: PlayerProps) => {
           color: "rgba(255, 3, 180, 0.55)",
           drag: false,
           resize: false,
-          content: `${(end - start).toFixed(2)} sec`,
+          content: createMultiLineTextElement(
+            `${(end - start).toFixed(2)} sec`
+          ),
         });
         const [statusCode] = getSpanAttributeByName(
           s.attributes,
@@ -326,6 +328,16 @@ export const Player = ({ call }: PlayerProps) => {
     }
   };
 
+  function createMultiLineTextElement(text: string) {
+    const div = document.createElement("div");
+    div.style.paddingLeft = "10px";
+    div.style.paddingTop = "10px";
+    div.appendChild(document.createElement("br"));
+    div.appendChild(document.createTextNode(text));
+
+    return div;
+  }
+
   const buildWavesurferRegion = () => {
     if (jaegerRoot) {
       const spans = getSpansFromJaegerRoot(jaegerRoot);
@@ -359,6 +371,7 @@ export const Player = ({ call }: PlayerProps) => {
         ttsSpans.forEach((tts) => {
           drawTtsLatencyRegion(tts, startPoint);
         });
+
         // Gather verb hook delay
         const verbHookSpans = getSpansByNameRegex(spans, /verb:hook/);
         verbHookSpans