refactor: update Youtube and Simplecast regex

src/components/Article/Article.Block.tsx

@@ -13,6 +13,8 @@ import { HeadingElementsRef } from '@/utils/ui.utils'
 import UnbodyDocumentTypeNames = UnbodyGraphQl.UnbodyDocumentTypeNames
 import { ArticleHeading } from '@/components/Article/Article.Heading'
 import ReactPlayer from 'react-player'
+import { getAudioSourceFromSimplecastPlayer } from '@/utils/data.utils'
+import { convertToIframe, extractUUIDFromEpisode } from '@/utils/string.utils'
 
 export const RenderArticleBlock = ({
   block,
@@ -51,21 +53,39 @@ export const RenderArticleBlock = ({
           const isIframe = isIframeRegex.test(block.text)
 
           const isYoutubeRegex =
-            /https?:\/\/(?:www\.)?youtu\.be\/([a-zA-Z0-9_-]{11})/
+            /^(https?\:\/\/)?((www\.)?youtube\.com|youtu\.?be)\/.+$/
 
           const isYoutube = isYoutubeRegex.test(block.text)
           const youtubeLink = block.text.match(isYoutubeRegex) ?? []
 
-          const isSimplecastRegex = /https?:\/\/.*cdn\.simplecast\.com\/.*/
+          const isSimplecastRegex =
+            /^https?:\/\/([a-zA-Z0-9-]+\.)*simplecast\.com\/[^?\s]+(\?[\s\S]*)?$/
+
           const isSimplecast = isSimplecastRegex.test(block.text)
           const simplecastLink = block.text.match(isSimplecastRegex) ?? []
 
+          // const episodeId = extractUUIDFromEpisode(simplecastLink[0] ?? '')
+
+          // let audioSrc = ''
+
+          // if (isSimplecast) {
+          //   fetch(
+          //     `https://api.simplecast.com/episodes/audio/bc313c16-82e9-439a-8e0c-af59833d22d7`,
+          //   )
+          //     .then((response) => response.json())
+          //     .then((data) => console.log(data))
+          // }
+
           return isIframe ? (
             <IframeContainer dangerouslySetInnerHTML={{ __html: block.text }} />
           ) : isYoutube ? (
             <ReactPlayer url={youtubeLink[0]} />
           ) : isSimplecast ? (
-            <ReactPlayer height={100} controls url={simplecastLink[0]} />
+            <IframeContainer
+              dangerouslySetInnerHTML={{
+                __html: convertToIframe(simplecastLink[0] ?? ''),
+              }}
+            />
           ) : (
             <Paragraph
               variant="body1"

src/utils/data.utils.ts

@@ -7,7 +7,7 @@ import {
 } from '@/lib/unbody/unbody.types'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
 import { isAuthorsParagraph } from './html.utils'
-import { similarity } from './string.utils'
+import { extractUUIDFromEpisode, similarity } from './string.utils'
 import { ArticleBlocksOrders } from '@/configs/data.configs'
 
 function hasClassName(inputString: string, className: string) {
@@ -99,3 +99,25 @@ export const shuffle = (array: any[]) => {
 
   return array
 }
+
+export const getAudioSourceFromSimplecastPlayer = async (url: string) => {
+  const myHeaders = new Headers()
+  myHeaders.append(
+    'Authorization',
+    'Bearer eyJhcGlfa2V5IjoiMzg3OTdhY2Y5N2NmZjgzZjQxNGI5ODNiN2E2MjY3NmQifQ==',
+  )
+
+  const requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+  }
+
+  const result = await fetch(
+    `https://api.simplecast.com/episodes/${url}`,
+    requestOptions,
+  )
+
+  const data = await result.json()
+  console.log(data)
+  return data
+}

src/utils/string.utils.ts

@@ -53,3 +53,15 @@ export function convertSecToMinAndSec(totalSeconds: number) {
 
   return `${formattedMinutes}:${formattedSeconds}`
 }
+
+export function extractUUIDFromEpisode(url: string) {
+  const regex = /([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/
+  const match = url.match(regex)
+  return match ? match[1] : null
+}
+
+export function convertToIframe(url: string) {
+  if (!url) return ''
+
+  return `<iframe height="200px" width="100%" frameborder="no" scrolling="no" seamless src="${url}"></iframe>`
+}