Merge pull request #2504 from KVV94/master

feat: update transcript logic for improved playback experience
stakwork · Dec 6, 2024 · 8713dec · 8713dec
2 parents 31c19de + d8b44c2
commit 8713dec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 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>
   )
 }

diff --git 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)`