feat: video duration for episode

src/components/Article/Article.Stats.tsx

@@ -3,14 +3,14 @@ import styled from '@emotion/styled'
 
 const ArticleStats = ({
   date,
-  readingLength,
+  duration,
 }: {
   date: Date | null
-  readingLength: number
+  duration: number
 }) => (
   <Row>
     <Typography variant="body3" genericFontFamily="sans-serif">
-      {readingLength} minutes read
+      {duration ? duration : ' '} minutes
     </Typography>
     <Typography variant="body3">•</Typography>
     <Typography variant="body3" genericFontFamily="sans-serif">

src/components/Episode/Episode.Body.tsx

@@ -3,8 +3,8 @@ import { LPE } from '../../types/lpe.types'
 import EpisodeFooter from './Footer/Episode.Footer'
 import EpisodeHeader from './Header/Episode.Header'
 import EpisodeTranscript from './Episode.Transcript'
-import { calcReadingTime } from '@/utils/string.utils'
-import { extractContentFromHTML } from '@/utils/html.utils'
+import { playerState } from '../GlobalAudioPlayer/globalAudioPlayer.state'
+import { useHookstate } from '@hookstate/core'
 
 interface Props {
   data: LPE.Podcast.Document
@@ -15,17 +15,15 @@ export default function EpisodeBody({ data }: Props) {
     (channel) => channel?.name === LPE.Podcast.ChannelNames.Youtube,
   )
 
-  const trascriptionString = (data.transcription || [])
-    .map((block) => extractContentFromHTML(block.html))
-    .join(' ')
-  const readingTime = calcReadingTime(trascriptionString)
+  const state = useHookstate(playerState)
+  const duration = Math.round(state.value.duration / 60)
 
   return (
     <EpisodeContainer>
       <EpisodeHeader
         {...data}
         url={youtube?.url as string}
-        readingTime={readingTime}
+        duration={duration}
       />
       <EpisodeTranscript data={data} />
       <EpisodeFooter data={data} />

src/components/Episode/Header/Episode.Header.tsx

@@ -11,7 +11,7 @@ import EpisodeChannels from './Episode.Channels'
 
 export type EpisodeHeaderProps = LPE.Podcast.Document & {
   url: string
-  readingTime: number
+  duration: number
 }
 
 const EpisodeHeader = ({
@@ -21,7 +21,7 @@ const EpisodeHeader = ({
   tags,
   channels,
   url,
-  readingTime,
+  duration,
 }: EpisodeHeaderProps) => {
   const date = new Date(publishedAt)
   const state = useHookstate(playerState)
@@ -46,9 +46,12 @@ const EpisodeHeader = ({
             }))
           }
           onPause={() => state.set((prev) => ({ ...prev, playing: false }))}
+          onDuration={(duration) =>
+            state.set((prev) => ({ ...prev, duration }))
+          }
         />
       </PlayerContainer>
-      <Stats date={date} readingLength={readingTime} />
+      <Stats date={date} duration={duration} />
       <EpisodeTitle variant="h1" genericFontFamily="serif" component="h1">
         {title}
       </EpisodeTitle>