catchup-library-web 1.20.2 → 1.20.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.js +82 -95
  2. package/dist/index.mjs +82 -95
  3. package/package.json +1 -1
  4. package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx +1 -3
  5. package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx +3 -5
  6. package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx +20 -4
  7. package/src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx +16 -35
package/dist/index.js CHANGED
@@ -4438,23 +4438,11 @@ var ShowMaterialMediaByContentType = ({
4438
4438
  const [showFullScreen, setShowFullScreen] = (0, import_react14.useState)(false);
4439
4439
  const [selectedFullScreenItem, setSelectedFullScreenItem] = (0, import_react14.useState)(null);
4440
4440
  const [isLoaded, setIsLoaded] = (0, import_react14.useState)(false);
4441
- const [isFullHeight, setIsFullHeight] = (0, import_react14.useState)(false);
4442
4441
  const imageRef = (0, import_react14.useRef)(null);
4442
+ const videoRef = (0, import_react14.useRef)(null);
4443
4443
  (0, import_react14.useEffect)(() => {
4444
4444
  setIsLoaded(false);
4445
4445
  }, []);
4446
- (0, import_react14.useEffect)(() => {
4447
- if (!isLoaded) return;
4448
- if (!imageRef) return;
4449
- if (!imageRef.current) return;
4450
- const w = imageRef.current.naturalWidth;
4451
- const h = imageRef.current.naturalHeight;
4452
- if (w >= h) {
4453
- setIsFullHeight(false);
4454
- } else {
4455
- setIsFullHeight(true);
4456
- }
4457
- }, [isLoaded, key]);
4458
4446
  const RenderShowFullScreenItem = () => {
4459
4447
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4460
4448
  import_react_modal3.default,
@@ -4506,7 +4494,7 @@ var ShowMaterialMediaByContentType = ({
4506
4494
  src: selectedFullScreenItem,
4507
4495
  alt: "selected-fullscreen-item",
4508
4496
  size: "custom",
4509
- className: "w-full"
4497
+ className: "w-full h-full object-contain"
4510
4498
  }
4511
4499
  ) })
4512
4500
  ] })
@@ -4515,63 +4503,58 @@ var ShowMaterialMediaByContentType = ({
4515
4503
  };
4516
4504
  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
4517
4505
  RenderShowFullScreenItem(),
4518
- /* @__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)(
4519
- "div",
4520
- {
4521
- className: `${isFullHeight ? "h-catchup-activity-media-box-item" : "max-w-catchup-activity-media-box-item"} flex flex-col justify-center items-center relative`,
4522
- children: [
4523
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4506
+ /* @__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: [
4507
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4508
+ BaseImage_default,
4509
+ {
4510
+ src,
4511
+ alt: "image",
4512
+ ref: imageRef,
4513
+ size: "custom",
4514
+ className: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
4515
+ onLoad: () => {
4516
+ setIsLoaded(true);
4517
+ }
4518
+ }
4519
+ ),
4520
+ src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4521
+ "div",
4522
+ {
4523
+ 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",
4524
+ onMouseEnter: (e) => {
4525
+ e.preventDefault();
4526
+ },
4527
+ onClick: (e) => {
4528
+ e.preventDefault();
4529
+ setShowFullScreen(true);
4530
+ setSelectedFullScreenItem(src);
4531
+ },
4532
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4524
4533
  BaseImage_default,
4525
4534
  {
4526
- src,
4527
- alt: "image",
4528
- ref: imageRef,
4535
+ src: "/icons/arrow-up.webp",
4536
+ alt: "arrow-up",
4529
4537
  size: "custom",
4530
- className: "h-full rounded-catchup-xlarge",
4531
- onLoad: () => {
4532
- setIsLoaded(true);
4533
- }
4534
- }
4535
- ),
4536
- src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4537
- "div",
4538
- {
4539
- 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",
4540
- onMouseEnter: (e) => {
4541
- e.preventDefault();
4542
- },
4543
- onClick: (e) => {
4544
- e.preventDefault();
4545
- setShowFullScreen(true);
4546
- setSelectedFullScreenItem(src);
4547
- },
4548
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4549
- BaseImage_default,
4550
- {
4551
- src: "/icons/arrow-up.webp",
4552
- alt: "arrow-up",
4553
- size: "custom",
4554
- className: "w-full"
4555
- }
4556
- )
4538
+ className: "w-full"
4557
4539
  }
4558
- ) : null
4559
- ]
4560
- }
4561
- ) }) })
4562
- ] }) : 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)(
4540
+ )
4541
+ }
4542
+ ) : null
4543
+ ] }) }) })
4544
+ ] }) : 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)(
4563
4545
  "video",
4564
4546
  {
4565
- className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
4547
+ ref: videoRef,
4548
+ className: "max-h-full max-w-full rounded-catchup-xlarge object-contain",
4566
4549
  src,
4567
4550
  controls: true,
4568
4551
  onClick: () => {
4569
4552
  }
4570
4553
  }
4571
- ) }) }) }) : 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)(
4554
+ ) }) }) }) : 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)(
4572
4555
  "audio",
4573
4556
  {
4574
- className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
4557
+ className: "w-full rounded-catchup-xlarge",
4575
4558
  src,
4576
4559
  controls: true,
4577
4560
  onClick: () => {
@@ -5335,22 +5318,16 @@ var GroupingActivityMaterialContent = ({
5335
5318
  "div",
5336
5319
  {
5337
5320
  className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
5338
- children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
5339
- "div",
5340
- {
5341
- className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
5342
- children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
5343
- (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
5344
- "span",
5345
- {
5346
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5347
- children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
5348
- },
5349
- index2
5350
- )
5351
- ) })
5352
- }
5353
- )
5321
+ children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
5322
+ (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
5323
+ "span",
5324
+ {
5325
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5326
+ children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
5327
+ },
5328
+ index2
5329
+ )
5330
+ ) }) })
5354
5331
  }
5355
5332
  ) }),
5356
5333
  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5594,22 +5571,16 @@ var MatchingActivityMaterialContent = ({
5594
5571
  setSelectedValue(null);
5595
5572
  }
5596
5573
  },
5597
- children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5598
- "div",
5574
+ children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5575
+ materialValue
5576
+ ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5577
+ "span",
5599
5578
  {
5600
- className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
5601
- children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5602
- materialValue
5603
- ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5604
- "span",
5605
- {
5606
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5607
- children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
5608
- },
5609
- index2
5610
- )) })
5611
- }
5612
- ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5579
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5580
+ children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
5581
+ },
5582
+ index2
5583
+ )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5613
5584
  ShowMaterialMediaByContentType_default,
5614
5585
  {
5615
5586
  contentType: contentMap.type,
@@ -5645,7 +5616,7 @@ var MatchingActivityMaterialContent = ({
5645
5616
  "div",
5646
5617
  {
5647
5618
  className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
5648
- children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5619
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5649
5620
  answerMapKey
5650
5621
  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5651
5622
  "span",
@@ -5678,7 +5649,7 @@ var MatchingActivityMaterialContent = ({
5678
5649
  component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
5679
5650
  "div",
5680
5651
  {
5681
- className: "h-full flex-1 flex flex-row items-center justify-center",
5652
+ className: "h-full flex-1 flex flex-row items-center justify-center px-4",
5682
5653
  onClick: (e) => {
5683
5654
  e.preventDefault();
5684
5655
  if (checkCanAnswerQuestion()) {
@@ -6419,13 +6390,29 @@ var OrderingActivityMaterialContent = ({
6419
6390
  };
6420
6391
  const calculateMarginTop = (index) => {
6421
6392
  if (index === 0) {
6422
- return 0;
6393
+ if (contentMap.type === "TEXT") {
6394
+ return 0;
6395
+ } else {
6396
+ return 0;
6397
+ }
6423
6398
  } else if (index === 1) {
6424
- return 65;
6399
+ if (contentMap.type === "TEXT") {
6400
+ return 65;
6401
+ } else {
6402
+ return 130;
6403
+ }
6425
6404
  } else if (index % 2 === 0) {
6426
- return -65;
6405
+ if (contentMap.type === "TEXT") {
6406
+ return -65;
6407
+ } else {
6408
+ return -130;
6409
+ }
6427
6410
  } else if (index % 2 === 1) {
6428
- return 0;
6411
+ if (contentMap.type === "TEXT") {
6412
+ return 0;
6413
+ } else {
6414
+ return 0;
6415
+ }
6429
6416
  }
6430
6417
  return 0;
6431
6418
  };
package/dist/index.mjs CHANGED
@@ -4222,23 +4222,11 @@ var ShowMaterialMediaByContentType = ({
4222
4222
  const [showFullScreen, setShowFullScreen] = useState14(false);
4223
4223
  const [selectedFullScreenItem, setSelectedFullScreenItem] = useState14(null);
4224
4224
  const [isLoaded, setIsLoaded] = useState14(false);
4225
- const [isFullHeight, setIsFullHeight] = useState14(false);
4226
4225
  const imageRef = useRef2(null);
4226
+ const videoRef = useRef2(null);
4227
4227
  useEffect4(() => {
4228
4228
  setIsLoaded(false);
4229
4229
  }, []);
4230
- useEffect4(() => {
4231
- if (!isLoaded) return;
4232
- if (!imageRef) return;
4233
- if (!imageRef.current) return;
4234
- const w = imageRef.current.naturalWidth;
4235
- const h = imageRef.current.naturalHeight;
4236
- if (w >= h) {
4237
- setIsFullHeight(false);
4238
- } else {
4239
- setIsFullHeight(true);
4240
- }
4241
- }, [isLoaded, key]);
4242
4230
  const RenderShowFullScreenItem = () => {
4243
4231
  return /* @__PURE__ */ jsx24(
4244
4232
  Modal3,
@@ -4290,7 +4278,7 @@ var ShowMaterialMediaByContentType = ({
4290
4278
  src: selectedFullScreenItem,
4291
4279
  alt: "selected-fullscreen-item",
4292
4280
  size: "custom",
4293
- className: "w-full"
4281
+ className: "w-full h-full object-contain"
4294
4282
  }
4295
4283
  ) })
4296
4284
  ] })
@@ -4299,63 +4287,58 @@ var ShowMaterialMediaByContentType = ({
4299
4287
  };
4300
4288
  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
4301
4289
  RenderShowFullScreenItem(),
4302
- /* @__PURE__ */ jsx24("div", { className: "my-2", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ jsxs14(
4303
- "div",
4304
- {
4305
- className: `${isFullHeight ? "h-catchup-activity-media-box-item" : "max-w-catchup-activity-media-box-item"} flex flex-col justify-center items-center relative`,
4306
- children: [
4307
- /* @__PURE__ */ jsx24(
4290
+ /* @__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: [
4291
+ /* @__PURE__ */ jsx24(
4292
+ BaseImage_default,
4293
+ {
4294
+ src,
4295
+ alt: "image",
4296
+ ref: imageRef,
4297
+ size: "custom",
4298
+ className: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
4299
+ onLoad: () => {
4300
+ setIsLoaded(true);
4301
+ }
4302
+ }
4303
+ ),
4304
+ src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx24(
4305
+ "div",
4306
+ {
4307
+ 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",
4308
+ onMouseEnter: (e) => {
4309
+ e.preventDefault();
4310
+ },
4311
+ onClick: (e) => {
4312
+ e.preventDefault();
4313
+ setShowFullScreen(true);
4314
+ setSelectedFullScreenItem(src);
4315
+ },
4316
+ children: /* @__PURE__ */ jsx24(
4308
4317
  BaseImage_default,
4309
4318
  {
4310
- src,
4311
- alt: "image",
4312
- ref: imageRef,
4319
+ src: "/icons/arrow-up.webp",
4320
+ alt: "arrow-up",
4313
4321
  size: "custom",
4314
- className: "h-full rounded-catchup-xlarge",
4315
- onLoad: () => {
4316
- setIsLoaded(true);
4317
- }
4318
- }
4319
- ),
4320
- src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx24(
4321
- "div",
4322
- {
4323
- 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",
4324
- onMouseEnter: (e) => {
4325
- e.preventDefault();
4326
- },
4327
- onClick: (e) => {
4328
- e.preventDefault();
4329
- setShowFullScreen(true);
4330
- setSelectedFullScreenItem(src);
4331
- },
4332
- children: /* @__PURE__ */ jsx24(
4333
- BaseImage_default,
4334
- {
4335
- src: "/icons/arrow-up.webp",
4336
- alt: "arrow-up",
4337
- size: "custom",
4338
- className: "w-full"
4339
- }
4340
- )
4322
+ className: "w-full"
4341
4323
  }
4342
- ) : null
4343
- ]
4344
- }
4345
- ) }) })
4346
- ] }) : 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(
4324
+ )
4325
+ }
4326
+ ) : null
4327
+ ] }) }) })
4328
+ ] }) : 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(
4347
4329
  "video",
4348
4330
  {
4349
- className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
4331
+ ref: videoRef,
4332
+ className: "max-h-full max-w-full rounded-catchup-xlarge object-contain",
4350
4333
  src,
4351
4334
  controls: true,
4352
4335
  onClick: () => {
4353
4336
  }
4354
4337
  }
4355
- ) }) }) }) : 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(
4338
+ ) }) }) }) : 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(
4356
4339
  "audio",
4357
4340
  {
4358
- className: "h-catchup-activity-media-box-item rounded-catchup-xlarge",
4341
+ className: "w-full rounded-catchup-xlarge",
4359
4342
  src,
4360
4343
  controls: true,
4361
4344
  onClick: () => {
@@ -5119,22 +5102,16 @@ var GroupingActivityMaterialContent = ({
5119
5102
  "div",
5120
5103
  {
5121
5104
  className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
5122
- children: /* @__PURE__ */ jsx31(
5123
- "div",
5124
- {
5125
- className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
5126
- children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
5127
- (inputPart, index2) => /* @__PURE__ */ jsx31(
5128
- "span",
5129
- {
5130
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5131
- children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
5132
- },
5133
- index2
5134
- )
5135
- ) })
5136
- }
5137
- )
5105
+ children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
5106
+ (inputPart, index2) => /* @__PURE__ */ jsx31(
5107
+ "span",
5108
+ {
5109
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5110
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
5111
+ },
5112
+ index2
5113
+ )
5114
+ ) }) })
5138
5115
  }
5139
5116
  ) }),
5140
5117
  /* @__PURE__ */ jsx31("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5378,22 +5355,16 @@ var MatchingActivityMaterialContent = ({
5378
5355
  setSelectedValue(null);
5379
5356
  }
5380
5357
  },
5381
- children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33(
5382
- "div",
5358
+ children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5359
+ materialValue
5360
+ ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
5361
+ "span",
5383
5362
  {
5384
- className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
5385
- children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5386
- materialValue
5387
- ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
5388
- "span",
5389
- {
5390
- className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5391
- children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
5392
- },
5393
- index2
5394
- )) })
5395
- }
5396
- ) : /* @__PURE__ */ jsx33(
5363
+ className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
5364
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
5365
+ },
5366
+ index2
5367
+ )) }) }) : /* @__PURE__ */ jsx33(
5397
5368
  ShowMaterialMediaByContentType_default,
5398
5369
  {
5399
5370
  contentType: contentMap.type,
@@ -5429,7 +5400,7 @@ var MatchingActivityMaterialContent = ({
5429
5400
  "div",
5430
5401
  {
5431
5402
  className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
5432
- children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5403
+ children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
5433
5404
  answerMapKey
5434
5405
  ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
5435
5406
  "span",
@@ -5462,7 +5433,7 @@ var MatchingActivityMaterialContent = ({
5462
5433
  component: /* @__PURE__ */ jsx33(
5463
5434
  "div",
5464
5435
  {
5465
- className: "h-full flex-1 flex flex-row items-center justify-center",
5436
+ className: "h-full flex-1 flex flex-row items-center justify-center px-4",
5466
5437
  onClick: (e) => {
5467
5438
  e.preventDefault();
5468
5439
  if (checkCanAnswerQuestion()) {
@@ -6203,13 +6174,29 @@ var OrderingActivityMaterialContent = ({
6203
6174
  };
6204
6175
  const calculateMarginTop = (index) => {
6205
6176
  if (index === 0) {
6206
- return 0;
6177
+ if (contentMap.type === "TEXT") {
6178
+ return 0;
6179
+ } else {
6180
+ return 0;
6181
+ }
6207
6182
  } else if (index === 1) {
6208
- return 65;
6183
+ if (contentMap.type === "TEXT") {
6184
+ return 65;
6185
+ } else {
6186
+ return 130;
6187
+ }
6209
6188
  } else if (index % 2 === 0) {
6210
- return -65;
6189
+ if (contentMap.type === "TEXT") {
6190
+ return -65;
6191
+ } else {
6192
+ return -130;
6193
+ }
6211
6194
  } else if (index % 2 === 1) {
6212
- return 0;
6195
+ if (contentMap.type === "TEXT") {
6196
+ return 0;
6197
+ } else {
6198
+ return 0;
6199
+ }
6213
6200
  }
6214
6201
  return 0;
6215
6202
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.20.02",
3
+ "version": "1.20.04",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx CHANGED
@@ -201,9 +201,7 @@ const GroupingActivityMaterialContent = ({
201
201
  : "h-catchup-activity-media-outer-box-item"
202
202
  } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
203
203
  >
204
- <div
205
- className={`flex flex-col items-center justify-center transition-all duration-300 m-4`}
206
- >
204
+ <div className="flex flex-col items-center justify-center transition-all duration-300 px-4">
207
205
  <p className="text-lg whitespace-pre-wrap">
208
206
  {constructInputWithSpecialExpressionList(answerMapKey).map(
209
207
  (inputPart, index) => (
package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx CHANGED
@@ -149,9 +149,7 @@ const MatchingActivityMaterialContent = ({
149
149
  }}
150
150
  >
151
151
  {contentMap.type === "TEXT" ? (
152
- <div
153
- className={`flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`}
154
- >
152
+ <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
155
153
  <p className="text-lg whitespace-pre-wrap">
156
154
  {constructInputWithSpecialExpressionList(
157
155
  materialValue
@@ -225,7 +223,7 @@ const MatchingActivityMaterialContent = ({
225
223
  : "border-catchup-blue"
226
224
  }`}
227
225
  >
228
- <div className="flex flex-col items-center justify-center transition-all duration-300 m-4">
226
+ <div className="flex flex-col items-center justify-center transition-all duration-300 px-4">
229
227
  <p className="text-lg whitespace-pre-wrap">
230
228
  {constructInputWithSpecialExpressionList(
231
229
  answerMapKey
@@ -286,7 +284,7 @@ const MatchingActivityMaterialContent = ({
286
284
  dropRef={drop}
287
285
  component={
288
286
  <div
289
- className="h-full flex-1 flex flex-row items-center justify-center"
287
+ className="h-full flex-1 flex flex-row items-center justify-center px-4"
290
288
  onClick={(e) => {
291
289
  e.preventDefault();
292
290
  if (checkCanAnswerQuestion()) {
package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx CHANGED
@@ -80,13 +80,29 @@ const OrderingActivityMaterialContent = ({
80
80
 
81
81
  const calculateMarginTop = (index: number) => {
82
82
  if (index === 0) {
83
- return 0;
83
+ if (contentMap.type === "TEXT") {
84
+ return 0;
85
+ } else {
86
+ return 0;
87
+ }
84
88
  } else if (index === 1) {
85
- return 65;
89
+ if (contentMap.type === "TEXT") {
90
+ return 65;
91
+ } else {
92
+ return 130;
93
+ }
86
94
  } else if (index % 2 === 0) {
87
- return -65;
95
+ if (contentMap.type === "TEXT") {
96
+ return -65;
97
+ } else {
98
+ return -130;
99
+ }
88
100
  } else if (index % 2 === 1) {
89
- return 0;
101
+ if (contentMap.type === "TEXT") {
102
+ return 0;
103
+ } else {
104
+ return 0;
105
+ }
90
106
  }
91
107
  return 0;
92
108
  };
package/src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx CHANGED
@@ -14,26 +14,13 @@ const ShowMaterialMediaByContentType = ({
14
14
  any | null
15
15
  >(null);
16
16
  const [isLoaded, setIsLoaded] = useState<boolean>(false);
17
- const [isFullHeight, setIsFullHeight] = useState<boolean>(false);
18
17
  const imageRef = useRef<HTMLImageElement>(null);
18
+ const videoRef = useRef<HTMLVideoElement>(null);
19
19
 
20
20
  useEffect(() => {
21
21
  setIsLoaded(false);
22
22
  }, []);
23
23
 
24
- useEffect(() => {
25
- if (!isLoaded) return;
26
- if (!imageRef) return;
27
- if (!imageRef.current) return;
28
- const w = imageRef.current.naturalWidth;
29
- const h = imageRef.current.naturalHeight;
30
- if (w >= h) {
31
- setIsFullHeight(false);
32
- } else {
33
- setIsFullHeight(true);
34
- }
35
- }, [isLoaded, key]);
36
-
37
24
  const RenderShowFullScreenItem = () => {
38
25
  return (
39
26
  <Modal
@@ -66,7 +53,6 @@ const ShowMaterialMediaByContentType = ({
66
53
  contentLabel=""
67
54
  >
68
55
  <div className="flex-1 flex flex-col">
69
- {/* <div className="m-4"> */}
70
56
  <div className="ml-auto px-5 py-3">
71
57
  <BaseImage
72
58
  src="/icons/cross-red.webp"
@@ -83,7 +69,7 @@ const ShowMaterialMediaByContentType = ({
83
69
  src={selectedFullScreenItem}
84
70
  alt="selected-fullscreen-item"
85
71
  size="custom"
86
- className="w-full"
72
+ className="w-full h-full object-contain"
87
73
  />
88
74
  </div>
89
75
  </div>
@@ -94,21 +80,15 @@ const ShowMaterialMediaByContentType = ({
94
80
  return contentType === "IMAGE" ? (
95
81
  <>
96
82
  {RenderShowFullScreenItem()}
97
- <div className="my-2">
98
- <div className="h-full flex flex-row flex-wrap items-center">
99
- <div
100
- className={`${
101
- isFullHeight
102
- ? "h-catchup-activity-media-box-item"
103
- : "max-w-catchup-activity-media-box-item"
104
- } flex flex-col justify-center items-center relative`}
105
- >
83
+ <div className="my-2 w-full h-full">
84
+ <div className="h-full flex items-center justify-center">
85
+ <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative">
106
86
  <BaseImage
107
87
  src={src}
108
88
  alt="image"
109
89
  ref={imageRef}
110
90
  size="custom"
111
- className="h-full rounded-catchup-xlarge"
91
+ className="max-h-full max-w-full object-contain rounded-catchup-xlarge"
112
92
  onLoad={() => {
113
93
  setIsLoaded(true);
114
94
  }}
@@ -118,7 +98,7 @@ const ShowMaterialMediaByContentType = ({
118
98
  src !== "DEFAULT_OPTION" &&
119
99
  canFullScreen ? (
120
100
  <div
121
- 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"
101
+ 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"
122
102
  onMouseEnter={(e) => {
123
103
  e.preventDefault();
124
104
  }}
@@ -141,11 +121,12 @@ const ShowMaterialMediaByContentType = ({
141
121
  </div>
142
122
  </>
143
123
  ) : contentType === "VIDEO" ? (
144
- <div className="my-2">
145
- <div className="h-full flex flex-row flex-wrap items-center">
146
- <div className="h-full flex flex-col justify-center items-center">
124
+ <div className="my-2 w-full h-full">
125
+ <div className="h-full flex items-center justify-center">
126
+ <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center">
147
127
  <video
148
- className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
128
+ ref={videoRef}
129
+ className="max-h-full max-w-full rounded-catchup-xlarge object-contain"
149
130
  src={src}
150
131
  controls
151
132
  onClick={() => {}}
@@ -154,11 +135,11 @@ const ShowMaterialMediaByContentType = ({
154
135
  </div>
155
136
  </div>
156
137
  ) : contentType === "AUDIO" ? (
157
- <div className="my-2">
158
- <div className="h-full flex flex-row flex-wrap items-center">
159
- <div className="h-full flex flex-col justify-center items-center">
138
+ <div className="my-2 w-full h-full">
139
+ <div className="h-full flex items-center justify-center">
140
+ <div className="h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center">
160
141
  <audio
161
- className="h-catchup-activity-media-box-item rounded-catchup-xlarge"
142
+ className="w-full rounded-catchup-xlarge"
162
143
  src={src}
163
144
  controls
164
145
  onClick={() => {}}