catchup-library-web 1.20.2 → 1.20.3

package/dist/index.js

@@ -4438,23 +4438,11 @@ var ShowMaterialMediaByContentType = ({
   const [showFullScreen, setShowFullScreen] = (0, import_react14.useState)(false);
   const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react14.useState)(null);
   const [isLoaded, setIsLoaded] = (0, import_react14.useState)(false);
-  const [isFullHeight, setIsFullHeight] = (0, import_react14.useState)(false);
   const imageRef = (0, import_react14.useRef)(null);
+  const videoRef = (0, import_react14.useRef)(null);
   (0, import_react14.useEffect)(() => {
     setIsLoaded(false);
   }, []);
-  (0, import_react14.useEffect)(() => {
-    if (!isLoaded) return;
-    if (!imageRef) return;
-    if (!imageRef.current) return;
-    const w = imageRef.current.naturalWidth;
-    const h = imageRef.current.naturalHeight;
-    if (w >= h) {
-      setIsFullHeight(false);
-    } else {
-      setIsFullHeight(true);
-    }
-  }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_react_modal3.default,
@@ -4506,7 +4494,7 @@ var ShowMaterialMediaByContentType = ({
               src: selectedFullScreenItem,
               alt: "selected-fullscreen-item",
               size: "custom",
-              className: "w-full"
+              className: "w-full h-full object-contain"
             }
           ) })
         ] })
@@ -4515,63 +4503,58 @@ var ShowMaterialMediaByContentType = ({
   };
   return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      "div",
-      {
-        className: `${isFullHeight ? "h-catchup-activity-media-box-item" : "max-w-catchup-activity-media-box-item"}  flex flex-col justify-center items-center relative`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        BaseImage_default,
+        {
+          src,
+          alt: "image",
+          ref: imageRef,
+          size: "custom",
+          className: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
+          onLoad: () => {
+            setIsLoaded(true);
+          }
+        }
+      ),
+      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime24.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 bg-white bg-opacity-80",
+          onMouseEnter: (e) => {
+            e.preventDefault();
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            setShowFullScreen(true);
+            setSelectedFullScreenItem(src);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
             {
-              src,
-              alt: "image",
-              ref: imageRef,
+              src: "/icons/arrow-up.webp",
+              alt: "arrow-up",
               size: "custom",
-              className: "h-full rounded-catchup-xlarge",
-              onLoad: () => {
-                setIsLoaded(true);
-              }
-            }
-          ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime24.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",
-              onMouseEnter: (e) => {
-                e.preventDefault();
-              },
-              onClick: (e) => {
-                e.preventDefault();
-                setShowFullScreen(true);
-                setSelectedFullScreenItem(src);
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                BaseImage_default,
-                {
-                  src: "/icons/arrow-up.webp",
-                  alt: "arrow-up",
-                  size: "custom",
-                  className: "w-full"
-                }
-              )
+              className: "w-full"
             }
-          ) : null
-        ]
-      }
-    ) }) })
-  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          )
+        }
+      ) : null
+    ] }) }) })
+  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "video",
     {
-      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
+      ref: videoRef,
+      className: "max-h-full max-w-full rounded-catchup-xlarge object-contain",
       src,
       controls: true,
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "audio",
     {
-      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
+      className: "w-full rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -6419,13 +6402,29 @@ var OrderingActivityMaterialContent = ({
   };
   const calculateMarginTop = (index) => {
     if (index === 0) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     } else if (index === 1) {
-      return 65;
+      if (contentMap.type === "TEXT") {
+        return 65;
+      } else {
+        return 130;
+      }
     } else if (index % 2 === 0) {
-      return -65;
+      if (contentMap.type === "TEXT") {
+        return -65;
+      } else {
+        return -130;
+      }
     } else if (index % 2 === 1) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     }
     return 0;
   };

package/dist/index.mjs

@@ -4222,23 +4222,11 @@ var ShowMaterialMediaByContentType = ({
   const [showFullScreen, setShowFullScreen] = useState14(false);
   const [selectedFullScreenItem, setSelectedFullScreenItem] = useState14(null);
   const [isLoaded, setIsLoaded] = useState14(false);
-  const [isFullHeight, setIsFullHeight] = useState14(false);
   const imageRef = useRef2(null);
+  const videoRef = useRef2(null);
   useEffect4(() => {
     setIsLoaded(false);
   }, []);
-  useEffect4(() => {
-    if (!isLoaded) return;
-    if (!imageRef) return;
-    if (!imageRef.current) return;
-    const w = imageRef.current.naturalWidth;
-    const h = imageRef.current.naturalHeight;
-    if (w >= h) {
-      setIsFullHeight(false);
-    } else {
-      setIsFullHeight(true);
-    }
-  }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
     return /* @__PURE__ */ jsx24(
       Modal3,
@@ -4290,7 +4278,7 @@ var ShowMaterialMediaByContentType = ({
               src: selectedFullScreenItem,
               alt: "selected-fullscreen-item",
               size: "custom",
-              className: "w-full"
+              className: "w-full h-full object-contain"
             }
           ) })
         ] })
@@ -4299,63 +4287,58 @@ var ShowMaterialMediaByContentType = ({
   };
   return contentType === "IMAGE" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs14(
-      "div",
-      {
-        className: `${isFullHeight ? "h-catchup-activity-media-box-item" : "max-w-catchup-activity-media-box-item"}  flex flex-col justify-center items-center relative`,
-        children: [
-          /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx24("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs14("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+      /* @__PURE__ */ jsx24(
+        BaseImage_default,
+        {
+          src,
+          alt: "image",
+          ref: imageRef,
+          size: "custom",
+          className: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
+          onLoad: () => {
+            setIsLoaded(true);
+          }
+        }
+      ),
+      src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx24(
+        "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 bg-white bg-opacity-80",
+          onMouseEnter: (e) => {
+            e.preventDefault();
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            setShowFullScreen(true);
+            setSelectedFullScreenItem(src);
+          },
+          children: /* @__PURE__ */ jsx24(
             BaseImage_default,
             {
-              src,
-              alt: "image",
-              ref: imageRef,
+              src: "/icons/arrow-up.webp",
+              alt: "arrow-up",
               size: "custom",
-              className: "h-full rounded-catchup-xlarge",
-              onLoad: () => {
-                setIsLoaded(true);
-              }
-            }
-          ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx24(
-            "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",
-              onMouseEnter: (e) => {
-                e.preventDefault();
-              },
-              onClick: (e) => {
-                e.preventDefault();
-                setShowFullScreen(true);
-                setSelectedFullScreenItem(src);
-              },
-              children: /* @__PURE__ */ jsx24(
-                BaseImage_default,
-                {
-                  src: "/icons/arrow-up.webp",
-                  alt: "arrow-up",
-                  size: "custom",
-                  className: "w-full"
-                }
-              )
+              className: "w-full"
             }
-          ) : null
-        ]
-      }
-    ) }) })
-  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx24(
+          )
+        }
+      ) : null
+    ] }) }) })
+  ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx24("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx24("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx24(
     "video",
     {
-      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
+      ref: videoRef,
+      className: "max-h-full max-w-full rounded-catchup-xlarge object-contain",
       src,
       controls: true,
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx24(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx24("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx24("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx24(
     "audio",
     {
-      className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
+      className: "w-full rounded-catchup-xlarge",
       src,
       controls: true,
       onClick: () => {
@@ -6203,13 +6186,29 @@ var OrderingActivityMaterialContent = ({
   };
   const calculateMarginTop = (index) => {
     if (index === 0) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     } else if (index === 1) {
-      return 65;
+      if (contentMap.type === "TEXT") {
+        return 65;
+      } else {
+        return 130;
+      }
     } else if (index % 2 === 0) {
-      return -65;
+      if (contentMap.type === "TEXT") {
+        return -65;
+      } else {
+        return -130;
+      }
     } else if (index % 2 === 1) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     }
     return 0;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.02",
+  "version": "1.20.03",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -80,13 +80,29 @@ const OrderingActivityMaterialContent = ({
 
   const calculateMarginTop = (index: number) => {
     if (index === 0) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     } else if (index === 1) {
-      return 65;
+      if (contentMap.type === "TEXT") {
+        return 65;
+      } else {
+        return 130;
+      }
     } else if (index % 2 === 0) {
-      return -65;
+      if (contentMap.type === "TEXT") {
+        return -65;
+      } else {
+        return -130;
+      }
     } else if (index % 2 === 1) {
-      return 0;
+      if (contentMap.type === "TEXT") {
+        return 0;
+      } else {
+        return 0;
+      }
     }
     return 0;
   };

package/src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx

@@ -14,26 +14,13 @@ const ShowMaterialMediaByContentType = ({
     any | null
   >(null);
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [isFullHeight, setIsFullHeight] = useState<boolean>(false);
   const imageRef = useRef<HTMLImageElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     setIsLoaded(false);
   }, []);
 
-  useEffect(() => {
-    if (!isLoaded) return;
-    if (!imageRef) return;
-    if (!imageRef.current) return;
-    const w = imageRef.current.naturalWidth;
-    const h = imageRef.current.naturalHeight;
-    if (w >= h) {
-      setIsFullHeight(false);
-    } else {
-      setIsFullHeight(true);
-    }
-  }, [isLoaded, key]);
-
   const RenderShowFullScreenItem = () => {
     return (
       <Modal
@@ -66,7 +53,6 @@ const ShowMaterialMediaByContentType = ({
         contentLabel=""
       >
         <div className="flex-1 flex flex-col">
-          {/* <div className="m-4"> */}
           <div className="ml-auto px-5 py-3">
             <BaseImage
               src="/icons/cross-red.webp"
@@ -83,7 +69,7 @@ const ShowMaterialMediaByContentType = ({
               src={selectedFullScreenItem}
               alt="selected-fullscreen-item"
               size="custom"
-              className="w-full"
+              className="w-full h-full object-contain"
             />
           </div>
         </div>
@@ -94,21 +80,15 @@ const ShowMaterialMediaByContentType = ({
   return contentType === "IMAGE" ? (
     <>
       {RenderShowFullScreenItem()}
-      <div className="my-2">
-        <div className="h-full flex flex-row flex-wrap items-center">
-          <div
-            className={`${
-              isFullHeight
-                ? "h-catchup-activity-media-box-item"
-                : "max-w-catchup-activity-media-box-item"
-            }  flex flex-col justify-center items-center relative`}
-          >
+      <div className="my-2 w-full h-full">
+        <div className="h-full flex items-center justify-center">
+          <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative">
             <BaseImage
               src={src}
               alt="image"
               ref={imageRef}
               size="custom"
-              className="h-full rounded-catchup-xlarge"
+              className="max-h-full max-w-full object-contain rounded-catchup-xlarge"
               onLoad={() => {
                 setIsLoaded(true);
               }}
@@ -118,7 +98,7 @@ const ShowMaterialMediaByContentType = ({
             src !== "DEFAULT_OPTION" &&
             canFullScreen ? (
               <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"
+                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 bg-white bg-opacity-80"
                 onMouseEnter={(e) => {
                   e.preventDefault();
                 }}
@@ -141,11 +121,12 @@ const ShowMaterialMediaByContentType = ({
       </div>
     </>
   ) : contentType === "VIDEO" ? (
-    <div className="my-2">
-      <div className="h-full flex flex-row flex-wrap items-center">
-        <div className="h-full flex flex-col justify-center items-center">
+    <div className="my-2 w-full h-full">
+      <div className="h-full flex items-center justify-center">
+        <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center">
           <video
-            className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
+            ref={videoRef}
+            className="max-h-full max-w-full rounded-catchup-xlarge object-contain"
             src={src}
             controls
             onClick={() => {}}
@@ -154,11 +135,11 @@ const ShowMaterialMediaByContentType = ({
       </div>
     </div>
   ) : contentType === "AUDIO" ? (
-    <div className="my-2">
-      <div className="h-full flex flex-row flex-wrap items-center">
-        <div className="h-full flex flex-col justify-center items-center">
+    <div className="my-2 w-full h-full">
+      <div className="h-full flex items-center justify-center">
+        <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center">
           <audio
-            className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
+            className="w-full rounded-catchup-xlarge"
             src={src}
             controls
             onClick={() => {}}