@telefonica/mistica 14.7.1 → 14.9.0

package/dist-es/video.js

@@ -77,78 +77,157 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import * as n from "react";
-import { useMediaBorderRadius as v } from "./image.js";
-import { AspectRatioElement as E } from "./utils/aspect-ratio-support.js";
-import { combineRefs as y } from "./utils/common.js";
-import { getPrefixedDataAttributes as S } from "./utils/dom.js";
-import { isSafari as I, isRunningAcceptanceTest as k } from "./utils/platform.js";
-import { video as w } from "./video.css-mistica.js";
-import { vars as C } from "./skins/skin-contract.css-mistica.js";
-import { jsx as r } from "./_virtual/jsx-runtime.js";
-const F = {
+import * as o from "react";
+import { useMediaBorderRadius as D, ImageContent as J, ImageError as O } from "./image.js";
+import { AspectRatioElement as P } from "./utils/aspect-ratio-support.js";
+import { combineRefs as Q } from "./utils/common.js";
+import { getPrefixedDataAttributes as V } from "./utils/dom.js";
+import { isRunningAcceptanceTest as X } from "./utils/platform.js";
+import { video as Y } from "./video.css-mistica.js";
+import { vars as q } from "./skins/skin-contract.css-mistica.js";
+import { useElementDimensions as H } from "./hooks.js";
+import { jsx as d, jsxs as K } from "./_virtual/jsx-runtime.js";
+const L = {
+    loading: {
+        play: "playing",
+        pause: "paused",
+        fail: "error",
+        finishLoad: "loaded"
+    },
+    loaded: {
+        play: "playing",
+        pause: "paused",
+        reset: "loading"
+    },
+    playing: {
+        pause: "paused",
+        reset: "loading"
+    },
+    paused: {
+        play: "playing",
+        reset: "loading"
+    },
+    error: {
+        reset: "loading"
+    }
+}, M = (t, l)=>L[t][l] || t, W = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, N = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", O = /*#__PURE__*/ n.forwardRef((_param, R)=>{
-    var { src: t , poster: i , autoPlay: o = !k() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, s = _objectWithoutProperties(_param, [
+}, _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", ae = /*#__PURE__*/ o.forwardRef((_param, F)=>{
+    var { src: t , poster: l , autoPlay: u = "when-loaded" , muted: C = !0 , loop: E = !0 , preload: S = "none" , loadingTimeout: y = 1e4 , onLoad: h , onError: c , onPause: f , onPlay: m , aspectRatio: A = "1:1" , dataAttributes: T  } = _param, i = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
         "muted",
         "loop",
         "preload",
+        "loadingTimeout",
+        "onLoad",
+        "onError",
+        "onPause",
+        "onPlay",
         "aspectRatio",
         "dataAttributes"
     ]);
-    const l = v(), p = typeof A == "number" ? A : F[A], a = n.useRef(null);
-    n.useEffect(()=>{
-        const e = a.current;
-        e && o && e.paused && e.play();
+    const [r, s] = o.useReducer(M, "loading"), g = o.useRef(null), b = o.useRef(), w = D(), p = typeof A == "number" ? A : W[A], R = o.useCallback(()=>{
+        r === "loading" && (s("fail"), c == null || c());
+    }, [
+        c,
+        r
+    ]);
+    o.useEffect(()=>{
+        var e;
+        if (b.current !== t) {
+            b.current = t;
+            const n = setTimeout(R, y);
+            return (e = g.current) == null || e.load(), ()=>{
+                clearTimeout(n);
+            };
+        }
     }, [
-        o
+        t,
+        y,
+        R
     ]);
-    const g = (Array.isArray(t) ? t : [
+    const v = ()=>{
+        h == null || h();
+        const e = g.current, n = u && !X();
+        s("finishLoad"), e && n && e.paused && e.play();
+    }, x = (Array.isArray(t) ? t : [
         t
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), d = /* @__PURE__ */ r("video", _objectSpreadProps(_objectSpread({
-        ref: y(R, a),
+        } : e), a = r === "error" || r === "loading" || r === "loaded", { ref: I , width: N , height: k  } = H(), B = /* @__PURE__ */ d("video", _objectSpreadProps(_objectSpread({
+        ref: Q(F, g),
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        autoPlay: o,
-        muted: c,
-        loop: m,
-        className: w,
-        preload: u,
-        poster: i || N
-    }, S(f)), {
+        muted: C,
+        loop: E,
+        className: Y,
+        preload: S,
+        onLoadStart: ()=>{
+            s("reset");
+        },
+        onError: R,
+        onPause: ()=>{
+            f == null || f(), s("pause");
+        },
+        onPlay: ()=>{
+            m == null || m(), s("play");
+        },
+        onCanPlay: ()=>{
+            u === "streaming" && v();
+        },
+        onCanPlayThrough: ()=>{
+            u !== "streaming" && v();
+        },
+        poster: _
+    }, V(T)), {
         style: {
-            borderRadius: l ? C.borderRadii.container : 0
+            borderRadius: w ? q.borderRadii.container : 0,
+            visibility: a ? "hidden" : "visible",
+            position: a || p !== 0 ? "absolute" : "static",
+            width: a ? N : "100%",
+            height: a ? k : "100%"
         },
-        children: g.map((param, b)=>/* @__PURE__ */ {
-            let { src: e , type: h  } = param;
-            return r("source", {
+        children: x.map((param, U)=>/* @__PURE__ */ {
+            let { src: e , type: n  } = param;
+            return d("source", {
                 src: e,
-                type: h
-            }, b);
+                type: n
+            }, U);
         })
-    }));
-    return /* @__PURE__ */ r(E, {
+    })), j = !!(p !== 0 || i.width && i.height), G = l ? /* @__PURE__ */ d(J, {
+        ref: I,
+        aspectRatio: A,
+        width: i.width,
+        height: i.height,
+        src: l
+    }) : j ? /* @__PURE__ */ d("div", {
+        style: {
+            position: "absolute",
+            width: "100%",
+            height: "100%"
+        },
+        children: /* @__PURE__ */ d(O, {
+            ref: I,
+            noBorderRadius: !w,
+            withIcon: r === "error"
+        })
+    }) : void 0;
+    return /* @__PURE__ */ K(P, {
+        style: {
+            position: "relative"
+        },
         aspectRatio: p,
-        width: s.width,
-        height: s.height,
-        children: I() ? /* @__PURE__ */ r("div", {
-            style: {
-                width: "100%",
-                height: "100%",
-                backgroundImage: i ? `url("${i}")` : void 0,
-                backgroundSize: "cover",
-                backgroundPosition: "50% 50%"
-            },
-            children: d
-        }) : d
+        width: i.width,
+        height: i.height,
+        children: [
+            B,
+            a && G
+        ]
     });
 });
-export { F as RATIO, O as default };
+export { W as RATIO, ae as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "14.7.1",
+    "version": "14.9.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -30,7 +30,7 @@
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
-        "vercel-build": "yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
+        "vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "storybook-static": "rimraf public && yarn build-storybook -s ./.storybook/css/fonts -o public --quiet",
         "serve-static-storybook": "node ./scripts/serve-static-storybook.js",