feat: implement transcription

src/components/Episode/Episode.Block.tsx

@@ -2,6 +2,7 @@ import {
   extractClassFromFirstTag,
   extractIdFromFirstTag,
 } from '@/utils/html.utils'
+import { lsdUtils } from '@/utils/lsd.utils'
 import { parseTranscriptionText } from '@/utils/string.utils'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
@@ -22,24 +23,30 @@ export const RenderEpisodeBlock = ({
 
   if (isYoutube) return <ReactPlayer url={youtubeLink[0]} />
   else {
-    const { time, transcript } = parseTranscriptionText(block.text)
+    const { time, speaker, transcript } = parseTranscriptionText(block.text)
 
-    return (
-      <TranscriptionItem variant="body1" component={'p'}>
+    return transcript?.length ? (
+      <TranscriptionItem variant="body1" component={'div'}>
         {time && (
           <>
-            <span>{time}</span>
-            <span>|</span>
+            <TranscriptInfo variant="body2">[{time}]</TranscriptInfo>
           </>
         )}
-        <span
-          className={extractClassFromFirstTag(block.html) || ''}
-          id={extractIdFromFirstTag(block.html) || `p-${block.id}`}
-        >
-          {transcript}
-        </span>
+        <Transcript>
+          <TranscriptInfo variant="body2" component="p">
+            {speaker}
+          </TranscriptInfo>
+          <TranscriptText
+            className={extractClassFromFirstTag(block.html) || ''}
+            id={extractIdFromFirstTag(block.html) || `p-${block.id}`}
+            variant="body1"
+            component="p"
+          >
+            {transcript}
+          </TranscriptText>
+        </Transcript>
       </TranscriptionItem>
-    )
+    ) : null
   }
 }
 
@@ -48,3 +55,23 @@ const TranscriptionItem = styled(Typography)`
   flex-direction: row;
   gap: 12px;
 `
+
+const TranscriptInfo = styled(Typography)`
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
+    font-size: var(--lsd-body3-fontSize);
+    line-height: var(--lsd-body3-lineHeight);
+  }
+`
+
+const Transcript = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+const TranscriptText = styled(Typography)`
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
+    font-size: var(--lsd-body2-fontSize);
+    line-height: var(--lsd-body2-lineHeight);
+  }
+`

src/components/Episode/Episode.Blocks.tsx

@@ -1,4 +1,3 @@
-import { lsdUtils } from '@/utils/lsd.utils'
 import useWindowSize from '@/utils/ui.utils'
 import { Button } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
@@ -37,7 +36,7 @@ const EpisodeBlocks = ({ data }: Props) => {
 const BlocksContainer = styled.div<{ n: number }>`
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 32px;
 
   > *:nth-of-type(n + ${({ n }) => n + 1}) {
     display: none;
@@ -48,10 +47,6 @@ const BlocksContainer = styled.div<{ n: number }>`
       display: flex;
     }
   }
-
-  ${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'down')} {
-    gap: 16px;
-  }
 `
 const ShowButton = styled(Button)`
   margin-top: calc(var(--lsd-body2-lineHeight) * 1);

src/utils/string.utils.ts

@@ -69,18 +69,38 @@ export function convertToIframe(url: string) {
 const removeFootnoteReferences = (text: string) =>
   text.replaceAll(/\[\d+\]/g, '')
 
-export const parseTranscriptionText = (text: string) => {
-  const time = text.match(/^(\d{1,2}:?){2,3}/g)?.[0] ?? ''
-  const transcript = removeFootnoteReferences(
-    time ? text.replace(time, '') : text,
-  ).trim()
+// export const parseTranscriptionText = (text: string) => {
+//   const time = text.match(/^(\d{1,2}:?){2,3}/g)?.[0] ?? ''
+//   const transcript = removeFootnoteReferences(
+//     time ? text.replace(time, '') : text,
+//   ).trim()
 
-  const parsedTime = time.endsWith(':') ? time.slice(0, -1) : time
-  const parsedTranscript = transcript.replace(/^(-|\||\s)*/, '')
+//   const parsedTime = time.endsWith(':') ? time.slice(0, -1) : time
+//   const parsedTranscript = transcript.replace(/^(-|\||\s)*/, '')
+
+//   return {
+//     time: parsedTime,
+//     transcript: parsedTranscript,
+//   }
+// }
+
+export function parseTranscriptionText(transcript: string) {
+  const regex = /\[(\d{2}:\d{2}:\d{2})\]\s*(.*?):\s*(.*)/
+
+  const match = transcript.match(regex)
+
+  if (!match) {
+    return {
+      time: '',
+      speaker: '',
+      transcript: '',
+    }
+  }
 
   return {
-    time: parsedTime,
-    transcript: parsedTranscript,
+    time: match[1],
+    speaker: match[2],
+    transcript: removeFootnoteReferences(match[3]).trim(),
   }
 }