@telefonica/mistica 14.34.0 → 14.36.0

package/dist-es/video.js

@@ -28,13 +28,15 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as l, jsxs as G } from "react/jsx-runtime";
 import * as n from "react";
-import { useMediaBorderRadius as J, ImageContent as M, ImageError as O } from "./image.js";
-import { AspectRatioContainer as P } from "./utils/aspect-ratio-support.js";
-import { isRunningAcceptanceTest as Q } from "./utils/platform.js";
-import { video as X } from "./video.css-mistica.js";
-import { vars as Y } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as $ } from "./utils/dom.js";
-const q = {
+import { ImageContent as $, ImageError as J } from "./image.js";
+import { AspectRatioContainer as O } from "./utils/aspect-ratio-support.js";
+import { isRunningAcceptanceTest as P } from "./utils/platform.js";
+import { video as Q } from "./video.css-mistica.js";
+import { vars as X } from "./image.css-mistica.js";
+import { getPrefixedDataAttributes as Y } from "./utils/dom.js";
+import { fallbackVar as q } from "@vanilla-extract/css";
+import { vars as D } from "./skins/skin-contract.css-mistica.js";
+const K = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -61,12 +63,12 @@ const q = {
     error: {
         reset: "loading"
     }
-}, D = (r, u)=>q[r][u] || r, K = {
+}, M = (r, u)=>K[r][u] || r, _ = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", z = /*#__PURE__*/ n.forwardRef((_param, A)=>{
-    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: x = !0, loop: N = !0, preload: k = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: R, onPlay: b, aspectRatio: c = "1:1", dataAttributes: B } = _param, o = _object_without_properties(_param, [
+}, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", H = /*#__PURE__*/ n.forwardRef((_param, A)=>{
+    var { src: r, poster: u, autoPlay: p = "when-loaded", muted: k = !0, loop: N = !0, preload: V = "none", loadingTimeout: T = 1e4, onLoad: y, onError: h, onPause: v, onPlay: R, aspectRatio: c = "1:1", dataAttributes: x } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -81,7 +83,7 @@ const q = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [a, d] = n.useReducer(D, "loading"), s = n.useRef(null), C = n.useRef(), f = n.useRef(null), w = J(), g = typeof c == "number" ? c : K[c], v = n.useCallback(()=>{
+    const [a, d] = n.useReducer(M, "loading"), s = n.useRef(null), C = n.useRef(), f = n.useRef(null), b = q(X.mediaBorderRadius, D.borderRadii.container), m = typeof c == "number" ? c : _[c], w = n.useCallback(()=>{
         a === "loading" && (d("fail"), h == null || h());
     }, [
         h,
@@ -91,39 +93,39 @@ const q = {
         var e;
         if (C.current !== r) {
             let t;
-            return C.current = r, d("reset"), r ? (t = setTimeout(v, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
+            return C.current = r, d("reset"), r ? (t = setTimeout(w, T), (e = s.current) == null || e.load()) : d("fail"), ()=>{
                 clearTimeout(t);
             };
         }
     }, [
         r,
         T,
-        v
+        w
     ]);
     const I = ()=>{
         y == null || y();
-        const e = s.current, t = p && !Q();
+        const e = s.current, t = p && !P();
         d("finishLoad"), e && t && e.paused && e.play();
     }, U = (Array.isArray(r) ? r : [
         r
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), m = a === "error" || a === "loading" || a === "loaded", V = /* @__PURE__ */ l("video", {
+        } : e), g = a === "error" || a === "loading" || a === "loaded", j = /* @__PURE__ */ l("video", {
         ref: s,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: x,
+        muted: k,
         loop: N,
-        className: X,
-        preload: k,
-        onError: v,
+        className: Q,
+        preload: V,
+        onError: w,
         onPause: ()=>{
-            R == null || R(), d("pause");
+            v == null || v(), d("pause");
         },
         onTimeUpdate: ()=>{
             var e;
-            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (b == null || b(), d("play"));
+            a !== "playing" && ((e = s.current) == null ? void 0 : e.currentTime) !== 0 && (R == null || R(), d("play"));
         },
         onCanPlay: ()=>{
             p === "streaming" && I();
@@ -131,12 +133,12 @@ const q = {
         onCanPlayThrough: ()=>{
             p !== "streaming" && I();
         },
-        poster: _,
+        poster: z,
         style: {
             // For some reason adding this style with classnames doesn't add the border radius in safari
-            borderRadius: w ? Y.borderRadii.container : 0,
-            visibility: m ? "hidden" : "visible",
-            position: m || g !== 0 ? "absolute" : "static",
+            borderRadius: b,
+            visibility: g ? "hidden" : "visible",
+            position: g || m !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
@@ -147,7 +149,7 @@ const q = {
                 type: t
             }, i);
         })
-    }), E = !!(g !== 0 || o.width && o.height), F = a === "error", j = n.useMemo(()=>u ? /* @__PURE__ */ l(M, {
+    }), E = !!(m !== 0 || o.width && o.height), F = a === "error", B = n.useMemo(()=>u ? /* @__PURE__ */ l($, {
             aspectRatio: c,
             width: o.width,
             height: o.height,
@@ -158,27 +160,27 @@ const q = {
                 width: "100%",
                 height: "100%"
             },
-            children: /* @__PURE__ */ l(O, {
-                noBorderRadius: !w,
+            children: /* @__PURE__ */ l(J, {
+                borderRadius: b,
                 withIcon: F
             })
         }) : void 0, [
         c,
         o.height,
         o.width,
-        w,
+        b,
         F,
         u,
         E
     ]);
-    return /* @__PURE__ */ G(P, {
+    return /* @__PURE__ */ G(O, {
         style: {
             position: "relative"
         },
-        aspectRatio: g,
+        aspectRatio: m,
         width: o.width,
         height: o.height,
-        dataAttributes: $(B, "Video"),
+        dataAttributes: Y(x, "Video"),
         children: [
             /* @__PURE__ */ l("div", {
                 style: {
@@ -205,18 +207,18 @@ const q = {
                     }), typeof A == "function" ? A(t) : A && (A.current = t);
                 }
             }),
-            V,
+            j,
             /* @__PURE__ */ l("div", {
                 ref: f,
                 style: {
-                    position: g !== 0 ? "absolute" : "static",
-                    width: m ? "100%" : 0,
-                    height: m ? "100%" : 0,
+                    position: m !== 0 ? "absolute" : "static",
+                    width: g ? "100%" : 0,
+                    height: g ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: j
+                children: B
             })
         ]
     });
-}), re = z;
-export { K as RATIO, re as default };
+}), ne = H;
+export { _ as RATIO, ne as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.34.0",
+    "version": "14.36.0",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/utils/key-codes.d.ts

@@ -1,8 +0,0 @@
-export declare const LEFT = 37;
-export declare const UP = 38;
-export declare const RIGHT = 39;
-export declare const DOWN = 40;
-export declare const ENTER = 13;
-export declare const ESC = 27;
-export declare const SPACE = 32;
-export declare const TAB = 9;

package/dist-es/utils/key-codes.js

@@ -1,2 +0,0 @@
-const o = 37, t = 38, c = 39, n = 40, s = 13, E = 27, T = 32, A = 9;
-export { n as DOWN, s as ENTER, E as ESC, o as LEFT, c as RIGHT, T as SPACE, A as TAB, t as UP };