@gamelearn/arcade-components 3.32.0 → 3.32.1

package/dist/arcade-components.js

@@ -30742,15 +30742,28 @@ function ConversationalComponent({
   ) });
 }
 function Vignette({ vignette: l, alias: e, translate: n, backgroundImageCover: t }) {
-  var u;
+  var _;
   const o = (l.img || {
     url: "https://min.gamelearn.io/css-resources/gamelearn/resources/conversation.jpg"
-  }).url, [d, h] = useState(!0), f = (p) => {
-    document.querySelector(`#${p}`).focus(), h(!d);
+  }).url, [d, h] = useState(!0), f = (T) => {
+    document.querySelector(`#${T}`).focus(), h(!d);
+  }, u = /\.(mp4|mov|webm)$/i.test(o), p = {
+    src: o,
+    style: t ? {
+      minHeight: "100%",
+      minWidth: "100%",
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    } : { height: "100%", width: "100%" }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-testid": "comic-image", className: `comic-image ${t ? "comic-image--cover" : ""}`, children: o && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, alt: "comic pic" }) }),
-    (u = l == null ? void 0 : l.textData) != null && u.text ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "comic-image", className: `comic-image ${t ? "comic-image--cover" : ""}`, children: [
+      u && /* @__PURE__ */ jsxRuntimeExports.jsx("video", { "data-testid": "videoTestId", autoPlay: !0, ...p }),
+      o && !u && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, alt: "comic pic" })
+    ] }),
+    (_ = l == null ? void 0 : l.textData) != null && _.text ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         "data-testid": "comicCollapsable",