feat: add timestamp to transcription

src/components/Episode/Episode.Block.tsx

@@ -7,6 +7,7 @@ import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import ReactPlayer from 'react-player'
 import { LPE } from '../../types/lpe.types'
+import { convertSecToMinAndSec } from '@/utils/string.utils'
 
 export const RenderEpisodeBlock = ({
   block,
@@ -23,21 +24,44 @@ export const RenderEpisodeBlock = ({
   return isYoutube ? (
     <ReactPlayer url={youtubeLink[0]} />
   ) : (
-    <Paragraph
-      variant="body1"
+    <TranscriptionItem>
+      <TranscriptionData>
+        {block?.start && (
+          <Typography variant="body2" component={'p'}>
+            {convertSecToMinAndSec(Number(block.start))}
+          </Typography>
+        )}
+        <Typography variant="body2" component={'p'}>
+          {block.speaker}
+        </Typography>
+      </TranscriptionData>
+      <Transcript
+        variant="body2"
         component={'p'}
         genericFontFamily="sans-serif"
         className={extractClassFromFirstTag(block.html) || ''}
         id={extractIdFromFirstTag(block.html) || `p-${block.start}`}
         dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }}
       />
+    </TranscriptionItem>
   )
 }
 
-const Paragraph = styled(Typography)`
+const TranscriptionItem = styled.div`
+  margin-bottom: calc(var(--lsd-body2-lineHeight) * 2);
+`
+
+const Transcript = styled(Typography)`
   &.subtitle,
   &#p-2 {
     font-size: var(--lsd-h6-fontSize);
     line-height: var(--lsd-h6-lineHeight);
   }
 `
+
+const TranscriptionData = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: var(--lsd-body2-lineHeight);
+`

src/components/Episode/Episode.Blocks.tsx

@@ -30,7 +30,7 @@ const EpisodeBlocks = ({ data }: Props) => {
 }
 
 const ShowButton = styled(Button)`
-  margin-top: 24px;
+  margin-top: calc(var(--lsd-body2-lineHeight) * -1);
 `
 
 export default EpisodeBlocks

src/components/Episode/Episode.Transcript.tsx

@@ -8,12 +8,16 @@ const EpisodeTranscript = ({ data }: { data: LPE.Podcast.Document }) => {
   return (
     <>
       <EpisodeDivider />
-      <Typography component="h6" variant="h6">
+      <Title component="h6" variant="h6">
         Transcript
-      </Typography>
+      </Title>
       <EpisodeBlocks data={data} />
     </>
   )
 }
 
+const Title = styled(Typography)`
+  margin-bottom: 8px;
+`
+
 export default EpisodeTranscript

src/pages/podcasts/episode-temp-data.json

@@ -105,16 +105,16 @@
     ],
     "transcription": [
       {
-        "html": "<p class=\"c1\"><span class=\"c0\">You ready to get into it?</span></p>"
+        "html": "<p class=\"c1\"><span class=\"c0\">You ready to get into it?</span></p>", "start": 1, "end": 3, "speaker": "John" 
       },
       {
-        "html": "<p class=\"c1\"><span class=\"c0\">Everybody. Welcome back. Bringing you another amazing interview, hashing it out, interview, doing it the way we love. I'm here solo dolo today. Well, not so well, though. I'm interviewing someone, but as far as hosts go, I'm so low on this one. Today we're going to talk a little bit about centralized messaging.</span></p>"
+        "html": "<p class=\"c1\"><span class=\"c0\">Everybody. Welcome back. Bringing you another amazing interview, hashing it out, interview, doing it the way we love. I'm here solo dolo today. Well, not so well, though. I'm interviewing someone, but as far as hosts go, I'm so low on this one. Today we're going to talk a little bit about centralized messaging.</span></p>", "start": 3, "end": 6, "speaker": "Doe" 
       },
       {
-        "html": "<p class=\"c1\"><span class=\"c0\">And I'm joined with Franck Royer, and he wanted it now. He’s a Waku guy. So we're going to call him Waku guy. Before we do that, Franck, because you introduce yourself. To the audience.. So I'll try not to just dive straight into Waku, but I feel like that's the only way to do it, right?</span></p>"
+        "html": "<p class=\"c1\"><span class=\"c0\">And I'm joined with Franck Royer, and he wanted it now. He’s a Waku guy. So we're going to call him Waku guy. Before we do that, Franck, because you introduce yourself. To the audience.. So I'll try not to just dive straight into Waku, but I feel like that's the only way to do it, right?</span></p>",  "start": 6, "end": 72, "speaker": "John" 
       },
       {
-        "html": "<p class=\"c1\"><span class=\"c0\">So for those unfamiliar with what Waku is, could you give us like a  quick brief message, like a brief overview of Waku and then we're going to try to peel away the layers and get a little bit deeper. All right. I like that. So it's a if this were to have trouble with an ephemeral communication network.</span></p>"
+        "html": "<p class=\"c1\"><span class=\"c0\">So for those unfamiliar with what Waku is, could you give us like a  quick brief message, like a brief overview of Waku and then we're going to try to peel away the layers and get a little bit deeper. All right. I like that. So it's a if this were to have trouble with an ephemeral communication network.</span></p>",  "start": 72, "end": 80, "speaker": "John" 
       },
       {
         "html": "<p class=\"c1\"><span class=\"c0\">Okay. So I do know that there's a lot of projects working on decentralized messaging. But when you say decentralized messaging, I don't think a lot of people quite understand what it is and why it's needed. So I guess we could start there. Like what is the centralized messaging in comparison to what people are used to? And then we'll go to the tail end of that question and so yeah.</span></p>"