From c3e2dd3ec983003d50fcf99534dae84d04c274a1 Mon Sep 17 00:00:00 2001
From: KVV94 <vladislav.koleda94@gmail.com>
Date: Fri, 6 Dec 2024 00:12:04 +0300
Subject: [PATCH 1/2] feat: update transcript logic for improved playback
 experience #2503

---
 .../Sidebar/Transcript/Viewer/index.tsx       | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx b/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx
index a1c91fe68..f17b6cf94 100644
--- a/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx
+++ b/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx
@@ -90,21 +90,27 @@ export const Viewer = ({ transcriptString }: Props) => {
 
   return (
     <Wrapper ref={wrapperRef}>
-      {transcriptData.map((i) => {
-        const start = secondsToMediaTime(i.start)
-
-        const isActive = i.start < currentTime && currentTime < i.end
-
-        return (
-          <Paragraph
-            key={`${i.start}-${i.end}`}
-            ref={isActive ? activeRef : null}
-            active={isActive}
-            start={start}
-            text={i.text}
-          />
-        )
-      })}
+      {transcriptData[0].start > currentTime ? (
+        <Paragraph active={false} start={secondsToMediaTime(transcriptData[0].start)} text={transcriptData[0].text} />
+      ) : (
+        <>
+          {transcriptData.map((i) => {
+            const start = secondsToMediaTime(i.start)
+
+            const isActive = i.start < currentTime && currentTime < i.end
+
+            return i.start <= currentTime + 5 ? (
+              <Paragraph
+                key={`${i.start}-${i.end}`}
+                ref={isActive ? activeRef : null}
+                active={isActive}
+                start={start}
+                text={i.text}
+              />
+            ) : null
+          })}
+        </>
+      )}
     </Wrapper>
   )
 }

From d8b44c2d6d4ff16523bb3bdc77b96935f61a7d3e Mon Sep 17 00:00:00 2001
From: KVV94 <vladislav.koleda94@gmail.com>
Date: Fri, 6 Dec 2024 00:29:14 +0300
Subject: [PATCH 2/2] feat: update transcript logic for improved playback
 experience #2503

---
 .../mindset/components/Sidebar/Transcript/index.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mindset/components/Sidebar/Transcript/index.tsx b/src/components/mindset/components/Sidebar/Transcript/index.tsx
index c2245e2dd..a3df138f5 100644
--- a/src/components/mindset/components/Sidebar/Transcript/index.tsx
+++ b/src/components/mindset/components/Sidebar/Transcript/index.tsx
@@ -45,7 +45,7 @@ export const Transcript = () => {
     return () => clearInterval(interval)
   }, [playerRef, setCurrentTime])
 
-  return currentTime ? (
+  return (
     <Wrapper>
       <Flex className="heading">Transcript</Flex>
       {clips.map((clip) => {
@@ -67,7 +67,7 @@ export const Transcript = () => {
         return null
       })}
     </Wrapper>
-  ) : null
+  )
 }
 
 const Wrapper = styled(Flex)`