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 (
- {transcriptData.map((i) => {
- const start = secondsToMediaTime(i.start)
-
- const isActive = i.start < currentTime && currentTime < i.end
-
- return (
-
- )
- })}
+ {transcriptData[0].start > currentTime ? (
+
+ ) : (
+ <>
+ {transcriptData.map((i) => {
+ const start = secondsToMediaTime(i.start)
+
+ const isActive = i.start < currentTime && currentTime < i.end
+
+ return i.start <= currentTime + 5 ? (
+
+ ) : null
+ })}
+ >
+ )}
)
}
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 (
Transcript
{clips.map((clip) => {
@@ -67,7 +67,7 @@ export const Transcript = () => {
return null
})}
- ) : null
+ )
}
const Wrapper = styled(Flex)`