@digital-b2c/coreui-kit 0.29.4 → 0.29.5

package/dist/index.cjs

@@ -9,7 +9,7 @@ var ScrollTrigger = require('gsap/ScrollTrigger');
 var reactDom = require('react-dom');
 var react$1 = require('swiper/react');
 var modules = require('swiper/modules');
-var ReactPlayer = require('react-player');
+var ReactPlayer2 = require('react-player');
 require('swiper/css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,7 +17,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var clsx72__default = /*#__PURE__*/_interopDefault(clsx72);
 var React73__default = /*#__PURE__*/_interopDefault(React73);
 var gsap__default = /*#__PURE__*/_interopDefault(gsap);
-var ReactPlayer__default = /*#__PURE__*/_interopDefault(ReactPlayer);
+var ReactPlayer2__default = /*#__PURE__*/_interopDefault(ReactPlayer2);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -2793,7 +2793,7 @@ var CardCarousel = ({
         ariaLabel: "Video player",
         closeLabel: "Close video",
         children: activeVideo && /* @__PURE__ */ jsxRuntime.jsx(
-          ReactPlayer__default.default,
+          ReactPlayer2__default.default,
           {
             src: activeVideo,
             playing: true,
@@ -6048,11 +6048,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
+var DIRECT_FILE_PATTERN = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i;
 var TextCenterWithMedia = ({
   className,
   title,
@@ -6076,10 +6079,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__ */ jsxRuntime.jsxs("section", { className: clsx72__default.default(TextCenterWithMedia_module_default.textCenterWithMedia, className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "h2", children: titleNode }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterWithMedia_module_default.thumbnailWrapper, children: thumbnail ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Picture, { src: thumbnail, alt: "Video thumbnail", className: TextCenterWithMedia_module_default.thumbnail }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -6090,6 +6094,28 @@ var TextCenterWithMedia = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "play", size: 90 })
           }
         )
+      ] }) : videoUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TextCenterWithMedia_module_default.videoPreview, children: [
+        isDirectFile ? /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            src: videoUrl,
+            preload: "metadata",
+            muted: true,
+            playsInline: true,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            className: TextCenterWithMedia_module_default.videoPreviewElement
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer2__default.default, { src: videoUrl, light: true, playing: false, width: "100%", height: "100%" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: TextCenterWithMedia_module_default.playButton,
+            onClick: () => setIsOpen(true),
+            "aria-label": "Play video",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "play", size: 90 })
+          }
+        )
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6100,7 +6126,7 @@ var TextCenterWithMedia = ({
         ariaLabel: "Video player",
         closeLabel: "Close video",
         children: videoUrl && isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          ReactPlayer__default.default,
+          ReactPlayer2__default.default,
           {
             ref: videoRef,
             src: videoUrl,