catchup-library-web 1.5.3 → 1.5.4

package/dist/index.js

@@ -3074,240 +3074,264 @@ var ShowBodyMediaByContentType = ({
   const [showFullScreen, setShowFullScreen] = (0, import_react9.useState)(false);
   const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react9.useState)("");
   const convertToPercentage = (size2) => {
-    if (size2 === "1/3") {
-      return "w-small-media";
-    } else if (size2 === "1/2") {
-      return "w-medium-media";
-    } else if (size2 === "1") {
-      return "w-large-media";
+    switch (size2) {
+      case "1/3":
+        return "w-small-media";
+      case "1/2":
+        return "w-medium-media";
+      case "1":
+        return "w-large-media";
+      default:
+        return "";
     }
   };
+  const renderSpecialExpressions = (inputPart, partIndex, parentKey) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "span",
+      {
+        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+      },
+      `${parentKey}-expr-${partIndex}`
+    );
+  };
+  const balanceSpecialChars = (text) => {
+    let result = text;
+    if ((result.split("__").length - 1) % 2 === 1) {
+      result = result + "__";
+    }
+    if ((result.split("**").length - 1) % 2 === 1) {
+      result = result + "**";
+    }
+    if ((result.split("`").length - 1) % 2 === 1) {
+      result = result + "`";
+    }
+    return result;
+  };
+  const renderTextContent = (text, itemKey) => {
+    const balancedText = balanceSpecialChars(text);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(balancedText).map(
+      (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+    ) }, itemKey);
+  };
+  const handleOpenFullScreen = (imageSource) => {
+    setSelectedFullScreenItem(imageSource);
+    setShowFullScreen(true);
+  };
   const retrieveValueParts = (value2) => {
     let currentIndex = 0;
     const valuePartList = [];
     let copyValue = JSON.parse(JSON.stringify(value2));
-    currentIndex = 0;
-    let checkText = "--TEXT--";
-    while (copyValue.includes(checkText)) {
-      const firstIndex = copyValue.indexOf(checkText);
-      let textValue = copyValue.substring(0, firstIndex);
-      let addition = 0;
-      if (textValue.trim() !== "") {
-        if ((textValue.split("__").length - 1) % 2 === 1) {
-          textValue = textValue + "__";
-          addition += 2;
+    const processTextTags = () => {
+      const checkText = "--TEXT--";
+      while (copyValue.includes(checkText)) {
+        const firstIndex = copyValue.indexOf(checkText);
+        const textBeforeTag = copyValue.substring(0, firstIndex);
+        if (textBeforeTag.trim() !== "") {
+          const balancedText = balanceSpecialChars(textBeforeTag);
+          currentIndex++;
+          const itemKey2 = `text-before-${index}-${currentIndex}`;
+          valuePartList.push(renderTextContent(balancedText, itemKey2));
         }
-        if ((textValue.split("**").length - 1) % 2 === 1) {
-          textValue = textValue + "**";
-          addition += 2;
+        const subValue = copyValue.substring(firstIndex + checkText.length);
+        const secondIndex = subValue.indexOf(checkText);
+        if (secondIndex === -1) break;
+        const textInsideTag = copyValue.substring(
+          firstIndex + checkText.length,
+          firstIndex + checkText.length + secondIndex
+        );
+        currentIndex++;
+        const itemKey = `text-inside-${index}-${currentIndex}`;
+        valuePartList.push(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xl font-bold whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+            (inputPart, exprIndex) => renderSpecialExpressions(inputPart, exprIndex, itemKey)
+          ) }, itemKey)
+        );
+        copyValue = copyValue.substring(
+          firstIndex + checkText.length + secondIndex + checkText.length
+        );
+        if ((copyValue.split("`").length - 1) % 2 === 1) {
+          copyValue = "`" + copyValue;
         }
-        if ((textValue.split("`").length - 1) % 2 === 1) {
-          textValue = textValue + "`";
-          addition += 1;
+      }
+    };
+    const processImageTags = () => {
+      const checkText = "--IMAGE--";
+      while (copyValue.includes(checkText)) {
+        const firstIndex = copyValue.indexOf(checkText);
+        const textBeforeTag = copyValue.substring(0, firstIndex);
+        if (textBeforeTag.trim() !== "") {
+          currentIndex++;
+          valuePartList.push(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "p",
+              {
+                className: "text-xl",
+                children: textBeforeTag
+              },
+              `text-before-img-${index}-${currentIndex}`
+            )
+          );
         }
+        const subValue = copyValue.substring(firstIndex + checkText.length);
+        const secondIndex = subValue.indexOf(checkText);
+        if (secondIndex === -1) break;
+        const imageSource = copyValue.substring(
+          firstIndex + checkText.length,
+          firstIndex + checkText.length + secondIndex
+        );
+        currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "span",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
             {
-              className: "text-xl whitespace-pre-wrap",
-              children: constructInputWithSpecialExpressionList(textValue).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "span",
+              className: "relative w-[200px]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  BaseImage_default,
                   {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                  },
-                  index2
+                    src: imageSource,
+                    alt: "media",
+                    size: "custom",
+                    className: "rounded-catchup-xlarge"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "div",
+                  {
+                    className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+                    onClick: () => handleOpenFullScreen(imageSource),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      BaseImage_default,
+                      {
+                        src: "/icons/arrow-up.webp",
+                        alt: "arrow-up",
+                        size: "custom",
+                        className: "w-full"
+                      }
+                    )
+                  }
                 )
-              )
+              ]
             },
-            `${index}-${currentIndex}`
+            `img-${index}-${currentIndex}`
           )
         );
+        copyValue = copyValue.substring(
+          firstIndex + checkText.length + secondIndex + checkText.length
+        );
       }
-      const subValue = copyValue.substring(firstIndex + checkText.length);
-      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length - addition;
-      currentIndex++;
-      valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "span",
-          {
-            className: `text-xl font-bold whitespace-pre-wrap`,
-            children: constructInputWithSpecialExpressionList(
-              copyValue.substring(firstIndex + checkText.length, secondIndex)
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "span",
+    };
+    const processVideoTags = () => {
+      const checkText = "--VIDEO--";
+      while (copyValue.includes(checkText)) {
+        const firstIndex = copyValue.indexOf(checkText);
+        const textBeforeTag = copyValue.substring(0, firstIndex);
+        if (textBeforeTag.trim() !== "") {
+          currentIndex++;
+          valuePartList.push(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "p",
               {
-                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                className: "text-xl",
+                children: textBeforeTag
               },
-              index2
-            ))
-          },
-          `${index}-${currentIndex}`
-        )
-      );
-      copyValue = copyValue.substring(secondIndex + checkText.length);
-      if ((copyValue.split("`").length - 1) % 2 === 1) {
-        copyValue = "`" + copyValue;
-      }
-    }
-    checkText = "--IMAGE--";
-    while (copyValue.includes(checkText)) {
-      const firstIndex = copyValue.indexOf(checkText);
-      const textValue = copyValue.substring(0, firstIndex);
-      if (textValue.trim() !== "") {
+              `text-before-video-${index}-${currentIndex}`
+            )
+          );
+        }
+        const subValue = copyValue.substring(firstIndex + checkText.length);
+        const secondIndex = subValue.indexOf(checkText);
+        if (secondIndex === -1) break;
+        const videoSource = copyValue.substring(
+          firstIndex + checkText.length,
+          firstIndex + checkText.length + secondIndex
+        );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
-        );
-      }
-      const subValue = copyValue.substring(firstIndex + checkText.length);
-      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
-      const imageSource = copyValue.substring(
-        firstIndex + checkText.length,
-        secondIndex
-      );
-      currentIndex++;
-      valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-[200px]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            BaseImage_default,
+            "video",
             {
-              src: imageSource,
-              alt: "media",
-              size: "custom",
-              className: "rounded-catchup-xlarge"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "div",
-            {
-              className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
-              onClick: (event) => {
-                setShowFullScreen(true);
-                setSelectedFullScreenItem(imageSource);
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                BaseImage_default,
-                {
-                  src: "/icons/arrow-up.webp",
-                  alt: "arrow-up",
-                  size: "custom",
-                  className: "w-full"
-                }
-              )
-            }
+              src: videoSource,
+              className: "w-[200px] rounded-catchup-xlarge",
+              controls: true
+            },
+            `video-${index}-${currentIndex}`
           )
-        ] }, `${index}-${currentIndex}`)
-      );
-      copyValue = copyValue.substring(secondIndex + checkText.length);
-    }
-    checkText = "--VIDEO--";
-    while (copyValue.includes(checkText)) {
-      const firstIndex = copyValue.indexOf(checkText);
-      const textValue = copyValue.substring(0, firstIndex);
-      if (textValue.trim() !== "") {
-        currentIndex++;
-        valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+        );
+        copyValue = copyValue.substring(
+          firstIndex + checkText.length + secondIndex + checkText.length
         );
       }
-      const subValue = copyValue.substring(firstIndex + checkText.length);
-      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
-      const videoSource = copyValue.substring(
-        firstIndex + checkText.length,
-        secondIndex
-      );
-      currentIndex++;
-      valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "video",
-          {
-            src: videoSource,
-            className: `w-[200px] rounded-catchup-xlarge`
-          },
-          `${index}-${currentIndex}`
-        )
-      );
-      copyValue = copyValue.substring(secondIndex + checkText.length);
-    }
-    checkText = "--AUDIO--";
-    while (copyValue.includes(checkText)) {
-      const firstIndex = copyValue.indexOf(checkText);
-      const textValue = copyValue.substring(0, firstIndex);
-      if (textValue.trim() !== "") {
+    };
+    const processAudioTags = () => {
+      const checkText = "--AUDIO--";
+      while (copyValue.includes(checkText)) {
+        const firstIndex = copyValue.indexOf(checkText);
+        const textBeforeTag = copyValue.substring(0, firstIndex);
+        if (textBeforeTag.trim() !== "") {
+          currentIndex++;
+          valuePartList.push(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "p",
+              {
+                className: "text-xl",
+                children: textBeforeTag
+              },
+              `text-before-audio-${index}-${currentIndex}`
+            )
+          );
+        }
+        const subValue = copyValue.substring(firstIndex + checkText.length);
+        const secondIndex = subValue.indexOf(checkText);
+        if (secondIndex === -1) break;
+        const audioSource = copyValue.substring(
+          firstIndex + checkText.length,
+          firstIndex + checkText.length + secondIndex
+        );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "audio",
+            {
+              src: audioSource,
+              className: "w-[200px] rounded-catchup-xlarge",
+              controls: true
+            },
+            `audio-${index}-${currentIndex}`
+          )
+        );
+        copyValue = copyValue.substring(
+          firstIndex + checkText.length + secondIndex + checkText.length
         );
       }
-      const subValue = copyValue.substring(firstIndex + checkText.length);
-      const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length;
-      const audioSource = copyValue.substring(
-        firstIndex + checkText.length,
-        secondIndex
-      );
-      currentIndex++;
-      valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "audio",
-          {
-            src: audioSource,
-            className: `w-[200px] rounded-catchup-xlarge`
-          },
-          `${index}-${currentIndex}`
-        )
-      );
-      copyValue = copyValue.substring(secondIndex + checkText.length);
-    }
+    };
+    processTextTags();
+    processImageTags();
+    processVideoTags();
+    processAudioTags();
     if (copyValue.trim() !== "") {
       currentIndex++;
-      if ((copyValue.split("__").length - 1) % 2 === 1) {
-        copyValue = "__" + copyValue;
-      }
-      if ((copyValue.split("**").length - 1) % 2 === 1) {
-        copyValue = "**" + copyValue;
-      }
-      if ((copyValue.split("`").length - 1) % 2 === 1) {
-        copyValue = "`" + copyValue;
-      }
+      copyValue = balanceSpecialChars(copyValue);
       const regexMatchImageText = copyValue.match(/<image>([\s\S]*?)<\/image>/);
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "span",
-              {
-                className: "text-xl whitespace-pre-wrap ",
-                children: imageText
-              },
-              `${index}-${currentIndex}`
-            )
-          ] })
-        );
-      } else {
-        valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "span",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
             {
-              className: "text-xl whitespace-pre-wrap",
-              children: constructInputWithSpecialExpressionList(copyValue).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "span",
-                  {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                  },
-                  index2
-                )
-              )
+              className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: imageText })
+              ]
             },
-            `${index}-${currentIndex}`
+            `img-desc-${index}-${currentIndex}`
           )
         );
+      } else {
+        const itemKey = `remaining-${index}-${currentIndex}`;
+        valuePartList.push(renderTextContent(copyValue, itemKey));
       }
     }
     return valuePartList;
@@ -3317,8 +3341,6 @@ var ShowBodyMediaByContentType = ({
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
-        onAfterOpen: () => {
-        },
         onRequestClose: () => {
           setShowFullScreen(false);
           setSelectedFullScreenItem("");
@@ -3343,13 +3365,13 @@ var ShowBodyMediaByContentType = ({
             background: "rgba(0, 0, 0, 0.6)"
           }
         },
-        contentLabel: "",
+        contentLabel: "Image Fullscreen View",
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-1 flex flex-col", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
-              alt: "cross-red",
+              alt: "close fullscreen",
               size: "medium",
               onClick: () => {
                 setShowFullScreen(false);
@@ -3361,7 +3383,7 @@ var ShowBodyMediaByContentType = ({
             BaseImage_default,
             {
               src: selectedFullScreenItem,
-              alt: "selected-fullscreen-item",
+              alt: "fullscreen image",
               size: "custom",
               className: "w-full"
             }
@@ -3371,62 +3393,66 @@ var ShowBodyMediaByContentType = ({
     );
   };
   const RenderMainContent = () => {
-    if (type === "TEXT") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: retrieveValueParts(value) }) });
-    } else if (type === "IMAGE") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        "div",
-        {
-          className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge relative`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              BaseImage_default,
-              {
-                src: value,
-                alt: "body-image",
-                size: "custom",
-                className: "w-full rounded-catchup-xlarge"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "div",
-              {
-                className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
-                onClick: () => {
-                  setShowFullScreen(true);
-                  setSelectedFullScreenItem(value);
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  BaseImage_default,
-                  {
-                    src: "/icons/arrow-up.webp",
-                    alt: "arrow-up",
-                    size: "custom",
-                    className: "w-full"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ) });
-    } else if (type === "VIDEO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        "video",
-        {
-          src: value,
-          className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge`,
-          controls: true
-        }
-      ) });
-    } else if (type === "AUDIO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
+    switch (type) {
+      case "TEXT":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: retrieveValueParts(value) });
+      case "IMAGE":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: `${convertToPercentage(
+              size || ""
+            )} rounded-catchup-xlarge relative`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                BaseImage_default,
+                {
+                  src: value,
+                  alt: "body image",
+                  size: "custom",
+                  className: "w-full rounded-catchup-xlarge"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "div",
+                {
+                  className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
+                  onClick: () => handleOpenFullScreen(value),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    BaseImage_default,
+                    {
+                      src: "/icons/arrow-up.webp",
+                      alt: "expand",
+                      size: "custom",
+                      className: "w-full"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) });
+      case "VIDEO":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "video",
+          {
+            src: value,
+            className: `${convertToPercentage(
+              size || ""
+            )} rounded-catchup-xlarge`,
+            controls: true
+          }
+        ) });
+      case "AUDIO":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+      default:
+        return null;
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
-  ] }, index);
+  ] }, `body-content-${index}`);
 };
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
@@ -6275,7 +6301,7 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "my-3", children: constructInputWithSpecialExpressionList(value).map(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
         (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {