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