add video with fallback

zbook_frontend/src/components/parsers/CodeBlock.tsx

@@ -34,7 +34,7 @@ export default function CodeBlock({
   }, [codeString, t]);
 
   return (
-    <div className="relative z-10 my-[1.25em] pb-1 col-span-3 font-base rounded-md dark:bg-slate-800/50 dark:ring-1 ring-slate-200/50 dark:ring-slate-900/10 border-[0.01rem] border-slate-300 dark:border-0">
+    <div className="relative z-10 my-[1.25em] md:pb-4 pb-2 col-span-3 font-base rounded-md dark:bg-slate-800/50 dark:ring-1 ring-slate-200/50 dark:ring-slate-900/10 border-[0.01rem] border-slate-300 dark:border-0">
       <div className="relative py-1 md:py-2 space-x-4 rounded-t-md flex items-center justify-center text-slate-400 text-xs md:text-sm leading-6 border-b-[0.01rem] border-slate-300 dark:border-slate-700/30 dark:bg-slate-800/50">
         <div className="relative ml-2 md:ml-4 w-7 h-7 rounded-full text-white flex items-center justify-center">
           <AiFillCode className="w-5 h-5 md:w-6 md:h-6 text-slate-500 dark:text-slate-200" />
@@ -49,7 +49,7 @@ export default function CodeBlock({
           />
         </div>
       </div>
-      <div className="highlight px-2 md:px-4 mt-1 text-xs md:text-sm text-slate-800 dark:text-slate-200 scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md overflow-auto">
+      <div className="highlight px-2 md:px-4 mt-2 md:mt-4 text-xs md:text-sm text-slate-800 dark:text-slate-200 scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md overflow-auto">
         {lang === "mermaid" ? (
           <CodeMermaid graphDefinition={codeString} />
         ) : (

zbook_frontend/src/components/parsers/CodeMermaid.tsx

@@ -105,7 +105,6 @@ function CodeMermaid({ graphDefinition }: { graphDefinition: string }) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mounted, resolvedTheme, mutationToggleTheme]);
-
   if (!mounted) {
     return (
       <MdOutlineCode className="w-full h-96 rounded-md py-40 bg-gray-200 dark:bg-gray-700/75 animate-pulse text-slate-500 dark:text-slate-400" />

zbook_frontend/src/components/parsers/HtmlParser.tsx

@@ -10,6 +10,7 @@ import ImageWithFallback from "./ImageWithFallback";
 import { ThemeColor } from "../TableOfContent";
 import { headers } from "next/headers";
 import { getAdmonitionType } from "@/utils/util";
+import VideoWithFallBack from "./VideoWithFallBack";
 interface Attribute {
   name: string;
   value: string;
@@ -288,13 +289,18 @@ const parseHTMLString = (
         );
       } else if (tagName === "IFRAME") {
         return (
-          <iframe
-            key={randomKey}
+          <VideoWithFallBack
             src={props.src}
-            className="w-full embed-video my-[1.25em] rounded-md"
-          >
-            {Array.from(node.childNodes).map(processNode)}
-          </iframe>
+            alt="Landscape picture"
+            key={randomKey}
+          />
+          // <iframe
+          //   key={randomKey}
+          //   src={props.src}
+          //   className="w-full embed-video my-[1.25em] rounded-md"
+          // >
+          //   {Array.from(node.childNodes).map(processNode)}
+          // </iframe>
         );
       }
     } else if (node instanceof window.Text) {

zbook_frontend/src/components/parsers/VideoWithFallBack.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import { FaVideo, FaVideoSlash } from "react-icons/fa";
+
+const VideoWithFallBack = ({ src, alt }: { src: string; alt: string }) => {
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const [imgError, setImgError] = useState(false);
+
+  return (
+    <>
+      {!imgLoaded && !imgError && (
+        <FaVideo className="w-full my-[1.25em] h-96 rounded-md py-40 bg-gray-200 dark:bg-gray-700/75 animate-pulse text-slate-500 dark:text-slate-400" />
+      )}
+      {imgError && (
+        <FaVideoSlash className="w-full my-[1.25em] h-96 rounded-md py-40 bg-gray-200 dark:bg-gray-700/75 text-slate-500 dark:text-slate-400" />
+      )}
+      <iframe
+        className="w-full embed-video my-[1.25em] rounded-md"
+        src={src}
+        style={{ display: imgLoaded && !imgError ? "block" : "none" }}
+        onLoad={() => setImgLoaded(true)}
+        onError={() => setImgError(true)}
+      />
+    </>
+  );
+};
+
+export default VideoWithFallBack;