@digital-b2c/coreui-kit 0.29.4 → 0.29.5

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { createPortal } from 'react-dom';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { A11y, FreeMode, Navigation, Pagination as Pagination$1 } from 'swiper/modules';
-import ReactPlayer from 'react-player';
+import ReactPlayer2 from 'react-player';
 import 'swiper/css';
 
 var __defProp = Object.defineProperty;
@@ -2784,7 +2784,7 @@ var CardCarousel = ({
         ariaLabel: "Video player",
         closeLabel: "Close video",
         children: activeVideo && /* @__PURE__ */ jsx(
-          ReactPlayer,
+          ReactPlayer2,
           {
             src: activeVideo,
             playing: true,
@@ -6039,11 +6039,14 @@ var TextCenterWithMedia_module_default = {
   thumbnailWrapper: "TextCenterWithMedia_module_thumbnailWrapper",
   thumbnail: "TextCenterWithMedia_module_thumbnail",
   playButton: "TextCenterWithMedia_module_playButton",
-  video: "TextCenterWithMedia_module_video"
+  video: "TextCenterWithMedia_module_video",
+  videoPreview: "TextCenterWithMedia_module_videoPreview",
+  videoPreviewElement: "TextCenterWithMedia_module_videoPreviewElement"
 };
 var TextCenterWithMediaTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
+var DIRECT_FILE_PATTERN = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i;
 var TextCenterWithMedia = ({
   className,
   title,
@@ -6067,10 +6070,11 @@ var TextCenterWithMedia = ({
   };
   const slots = resolveCompoundSlots(children, { title: TextCenterWithMediaTitle });
   const titleNode = (_a = slots.title) != null ? _a : title;
+  const isDirectFile = !!videoUrl && DIRECT_FILE_PATTERN.test(videoUrl);
   return /* @__PURE__ */ jsxs("section", { className: clsx72(TextCenterWithMedia_module_default.textCenterWithMedia, className), children: [
     /* @__PURE__ */ jsxs(Container, { children: [
       titleNode && /* @__PURE__ */ jsx("h2", { className: "h2", children: titleNode }),
-      /* @__PURE__ */ jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Picture, { src: thumbnail, alt: "Video thumbnail", className: TextCenterWithMedia_module_default.thumbnail }),
         /* @__PURE__ */ jsx(
           "button",
@@ -6081,6 +6085,28 @@ var TextCenterWithMedia = ({
             children: /* @__PURE__ */ jsx(Icon, { type: "play", size: 90 })
           }
         )
+      ] }) : videoUrl && /* @__PURE__ */ jsxs("div", { className: TextCenterWithMedia_module_default.videoPreview, children: [
+        isDirectFile ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: videoUrl,
+            preload: "metadata",
+            muted: true,
+            playsInline: true,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            className: TextCenterWithMedia_module_default.videoPreviewElement
+          }
+        ) : /* @__PURE__ */ jsx(ReactPlayer2, { src: videoUrl, light: true, playing: false, width: "100%", height: "100%" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: TextCenterWithMedia_module_default.playButton,
+            onClick: () => setIsOpen(true),
+            "aria-label": "Play video",
+            children: /* @__PURE__ */ jsx(Icon, { type: "play", size: 90 })
+          }
+        )
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(
@@ -6091,7 +6117,7 @@ var TextCenterWithMedia = ({
         ariaLabel: "Video player",
         closeLabel: "Close video",
         children: videoUrl && isOpen && /* @__PURE__ */ jsx(
-          ReactPlayer,
+          ReactPlayer2,
           {
             ref: videoRef,
             src: videoUrl,