feat: update transcript logic for improved playback experience #2503

stakwork · Dec 5, 2024 · c3e2dd3 · c3e2dd3
1 parent 324b004
commit c3e2dd3
Showing 1 changed file with 21 additions and 15 deletions.
diff --git 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>
   )
 }