render videos in md

Author: yann300

apps/learneth/src/pages/StepDetail/index.tsx

@@ -72,6 +72,39 @@ function StepDetailPage() {
     )
   }
 
+  const VideoRenderer = ({
+    node,
+    src,
+    alt,
+    ...props
+  }: {
+    node?: any;
+    src?: string;
+    alt?: string;
+    [key: string]: any;
+  }) => {
+    if (alt === 'youtube') {
+      /*
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/Eh1qgOurDxU?si=lz1JypmIJZ15OY4g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      */
+      return (
+        <iframe
+          /*width="560"
+          height="315"*/
+          src={src}
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      );
+    }
+    if (alt === 'video') {
+      return <video controls src={src} style={{ maxWidth: '100%' }} />;
+    }
+    return <img src={src} alt={alt} {...props} />;
+  };
+
   return (
     <div className='pb-4'>
       <div className="fixed-top">
@@ -104,7 +137,9 @@ function StepDetailPage() {
         </>
       )}
       <div className="container-fluid">
-        <Markdown rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
+        <Markdown components={{
+        img: VideoRenderer
+      }} rehypePlugins={[rehypeRaw]}>{clonedStep.markdown?.content}</Markdown>
       </div>
       {clonedStep.test?.content ? (
         <>