@telefonica/mistica 16.64.0 → 16.65.0

package/dist-es/video.js

@@ -26,16 +26,16 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import { jsxs as P, jsx as l } from "react/jsx-runtime";
 import * as s from "react";
-import { ImageContent as B, ImageError as G } from "./image.js";
-import { AspectRatioContainer as V } from "./utils/aspect-ratio-support.js";
-import { isRunningAcceptanceTest as J } from "./utils/platform.js";
-import { video as O } from "./video.css-mistica.js";
-import { defaultBorderRadius as E } from "./image.css-mistica.js";
-import { getPrefixedDataAttributes as Q } from "./utils/dom.js";
-import X from "classnames";
-const Y = {
+import { ImageContent as q, ImageError as J } from "./image.js";
+import { AspectRatioContainer as M } from "./utils/aspect-ratio-support.js";
+import { isRunningAcceptanceTest as Q } from "./utils/platform.js";
+import { video as X } from "./video.css-mistica.js";
+import { defaultBorderRadius as S } from "./image.css-mistica.js";
+import { getPrefixedDataAttributes as Y } from "./utils/dom.js";
+import D from "classnames";
+const K = {
     loading: {
         play: "playing",
         pause: "paused",
@@ -68,14 +68,15 @@ const Y = {
         play: "playing",
         reset: "loading"
     }
-}, q = (r, l)=>Y[r][l] || r, D = {
+}, _ = (i, u)=>K[i][u] || i, $ = {
     "1:1": 1,
     "16:9": 16 / 9,
     "4:3": 4 / 3
-}, K = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", te = /*#__PURE__*/ s.forwardRef((_param, c)=>{
-    var { src: r, poster: l, autoPlay: p = "when-loaded", muted: C = !0, loop: I = !0, preload: P = "none", loadingTimeout: y = 1e4, onLoad: F, onError: w, onPause: S, onPlay: N, aspectRatio: u = 0, dataAttributes: k } = _param, o = _object_without_properties(_param, [
+}, z = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", ne = /*#__PURE__*/ s.forwardRef((_param, h)=>{
+    var { src: i, poster: u, tracks: v, autoPlay: g = "when-loaded", muted: F = !0, loop: N = !0, preload: x = "none", loadingTimeout: R = 1e4, onLoad: L, onError: b, onPause: U, onPlay: j, aspectRatio: c = 0, dataAttributes: B } = _param, o = _object_without_properties(_param, [
         "src",
         "poster",
+        "tracks",
         "autoPlay",
         "muted",
         "loop",
@@ -88,146 +89,163 @@ const Y = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const [d, n] = s.useReducer(q, "loading"), t = s.useRef(null), v = s.useRef(null), h = s.useRef(null), A = o.width && o.height ? void 0 : typeof u == "number" ? u : D[u], m = s.useCallback(()=>{
-        d === "loading" && (n("fail"), w === null || w === void 0 ? void 0 : w());
+    const [d, n] = s.useReducer(_, "loading"), r = s.useRef(null), E = s.useRef(null), f = s.useRef(null), A = o.width && o.height ? void 0 : typeof c == "number" ? c : $[c], y = s.useCallback(()=>{
+        d === "loading" && (n("fail"), b === null || b === void 0 ? void 0 : b());
     }, [
-        w,
+        b,
         d
     ]);
     s.useEffect(()=>{
-        if (v.current !== r) {
-            var _t_current;
+        if (E.current !== i) {
+            var _r_current;
             let e;
-            return v.current = r, n("reset"), r ? (e = setTimeout(m, y), (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.load()) : n("fail"), ()=>{
+            return E.current = i, n("reset"), i ? (e = setTimeout(y, R), (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.load()) : n("fail"), ()=>{
                 clearTimeout(e);
             };
         }
     }, [
-        r,
-        y,
-        m
+        i,
+        R,
+        y
     ]);
-    const R = ()=>{
-        if (F === null || F === void 0 ? void 0 : F(), d === "stopped") return;
-        const e = t.current, i = p && !J();
-        n("finishLoad"), e && i && e.paused && e.play();
-    }, x = (Array.isArray(r) ? r : [
-        r
+    const T = ()=>{
+        if (L === null || L === void 0 ? void 0 : L(), d === "stopped") return;
+        const e = r.current, t = g && !Q();
+        n("finishLoad"), e && t && e.paused && e.play();
+    }, G = (Array.isArray(i) ? i : [
+        i
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), f = [
+        } : e), m = [
         "error",
         "loading",
         "loaded",
         "stopped"
-    ].includes(d), L = /* @__PURE__ */ a("video", {
-        ref: t,
+    ].includes(d), O = /* @__PURE__ */ P("video", {
+        ref: r,
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
-        muted: C,
-        loop: I,
-        className: X(O, E),
-        preload: P,
-        onError: m,
+        muted: F,
+        loop: N,
+        crossOrigin: (v === null || v === void 0 ? void 0 : v.length) ? "anonymous" : void 0,
+        className: D(X, S),
+        preload: x,
+        onError: y,
         onPause: ()=>{
-            S === null || S === void 0 ? void 0 : S(), n("pause");
+            U === null || U === void 0 ? void 0 : U(), n("pause");
         },
         onTimeUpdate: ()=>{
-            var _t_current;
-            d !== "playing" && ((_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.currentTime) !== 0 && (N === null || N === void 0 ? void 0 : N(), n("play"));
+            var _r_current;
+            d !== "playing" && ((_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.currentTime) !== 0 && (j === null || j === void 0 ? void 0 : j(), n("play"));
         },
         onCanPlay: ()=>{
-            p === "streaming" && R();
+            g === "streaming" && T();
         },
         onCanPlayThrough: ()=>{
-            p !== "streaming" && R();
+            g !== "streaming" && T();
         },
-        poster: K,
+        poster: z,
         style: {
-            visibility: f ? "hidden" : "visible",
-            position: f || A !== 0 ? "absolute" : "static",
+            visibility: m ? "hidden" : "visible",
+            position: m || A !== 0 ? "absolute" : "static",
             width: "100%",
             height: "100%"
         },
-        children: x.map((param, g)=>{
-            let { src: e, type: i } = param;
-            return /* @__PURE__ */ a("source", {
-                src: e,
-                type: i
-            }, g);
-        })
-    }), b = !!(A !== 0 || o.width && o.height), T = d === "error", U = s.useMemo(()=>l ? /* @__PURE__ */ a(B, {
-            aspectRatio: u,
+        children: [
+            G.map((param, a)=>{
+                let { src: e, type: t } = param;
+                return /* @__PURE__ */ l("source", {
+                    src: e,
+                    type: t
+                }, a);
+            }),
+            v === null || v === void 0 ? void 0 : v.map((param, p)=>{
+                let { src: e, kind: t, srcLang: a, label: w, default: I } = param;
+                return /* @__PURE__ */ l("track", {
+                    src: e,
+                    kind: t,
+                    srcLang: a,
+                    label: w,
+                    default: I
+                }, p);
+            })
+        ]
+    }), k = !!(A !== 0 || o.width && o.height), C = d === "error", V = s.useMemo(()=>u ? /* @__PURE__ */ l(q, {
+            aspectRatio: c,
             width: o.width,
             height: o.height,
-            src: l
-        }) : b ? /* @__PURE__ */ a("div", {
+            src: u
+        }) : k ? /* @__PURE__ */ l("div", {
             style: {
                 position: "absolute",
                 width: "100%",
                 height: "100%"
             },
-            children: /* @__PURE__ */ a(G, {
-                className: E,
-                withIcon: T
+            children: /* @__PURE__ */ l(J, {
+                className: S,
+                withIcon: C
             })
         }) : void 0, [
-        u,
+        c,
         o.height,
         o.width,
-        T,
-        l,
-        b
+        C,
+        u,
+        k
     ]);
-    return /* @__PURE__ */ j(V, {
+    return /* @__PURE__ */ P(M, {
         style: {
             position: "relative"
         },
         aspectRatio: A,
         width: o.width,
         height: o.height,
-        dataAttributes: Q(k, "Video"),
+        dataAttributes: Y(B, "Video"),
         children: [
-            /* @__PURE__ */ a("div", {
+            /* @__PURE__ */ l("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
                 ref: (e)=>{
-                    const i = e || null;
-                    i && (i.play = ()=>{
-                        var _t_current;
-                        return ((_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.play()) || Promise.resolve();
-                    }, i.pause = ()=>{
-                        var _t_current;
-                        return (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.pause();
-                    }, i.load = ()=>{
-                        var _h_current;
-                        ((_h_current = h.current) === null || _h_current === void 0 ? void 0 : _h_current.style) && (h.current.style.width = "100%", h.current.style.height = "100%"), setTimeout(()=>{
-                            var _t_current;
-                            n("reset"), (_t_current = t.current) === null || _t_current === void 0 ? void 0 : _t_current.load();
+                    const t = e || null;
+                    t && (t.play = ()=>{
+                        var _r_current;
+                        return ((_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.play()) || Promise.resolve();
+                    }, t.pause = ()=>{
+                        var _r_current;
+                        return (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.pause();
+                    }, t.load = ()=>{
+                        var _f_current;
+                        ((_f_current = f.current) === null || _f_current === void 0 ? void 0 : _f_current.style) && (f.current.style.width = "100%", f.current.style.height = "100%"), setTimeout(()=>{
+                            var _r_current;
+                            n("reset"), (_r_current = r.current) === null || _r_current === void 0 ? void 0 : _r_current.load();
                         }, 100);
-                    }, i.setCurrentTime = (g)=>{
-                        t.current && (t.current.currentTime = g);
-                    }, i.stop = ()=>{
-                        t.current && (t.current.pause(), t.current.currentTime = 0, n("stop"));
-                    }), typeof c == "function" ? c(i) : c && (c.current = i);
+                    }, t.setCurrentTime = (a)=>{
+                        r.current && (r.current.currentTime = a);
+                    }, t.stop = ()=>{
+                        r.current && (r.current.pause(), r.current.currentTime = 0, n("stop"));
+                    }, t.setTrackMode = (a, w)=>{
+                        var _r_current_querySelectorAll, _r_current;
+                        const p = (_r_current = r.current) === null || _r_current === void 0 ? void 0 : (_r_current_querySelectorAll = _r_current.querySelectorAll("track")) === null || _r_current_querySelectorAll === void 0 ? void 0 : _r_current_querySelectorAll[a];
+                        (p === null || p === void 0 ? void 0 : p.track) && (p.track.mode = w);
+                    }), typeof h == "function" ? h(t) : h && (h.current = t);
                 }
             }),
-            L,
-            /* @__PURE__ */ a("div", {
-                ref: h,
+            O,
+            /* @__PURE__ */ l("div", {
+                ref: f,
                 style: {
                     position: A !== 0 ? "absolute" : "static",
-                    width: f ? "100%" : 0,
-                    height: f ? "100%" : 0,
+                    width: m ? "100%" : 0,
+                    height: m ? "100%" : 0,
                     overflow: "hidden"
                 },
-                children: U
+                children: V
             })
         ]
     });
 });
-export { D as RATIO, te as default };
+export { $ as RATIO, ne as default };

package/dist-es/vivinho-loading-animation/vivinho-loading-animation.css-mistica.js

@@ -1,2 +1,2 @@
-/* empty css                                                     */ var a = "v16_64_1ezqdj90", r = "v16_64_1ezqdj91";
+/* empty css                                                     */ var a = "v16_65_1ezqdj90", r = "v16_65_1ezqdj91";
 export { a as container, r as waveFadeOut };

package/package.json

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

package/src/index.tsx

@@ -127,7 +127,7 @@ export {
 export {default as Image} from './image';
 export {default as Chip} from './chip';
 export {default as Video} from './video';
-export type {VideoElement} from './video';
+export type {VideoElement, VideoTrack} from './video';
 export {
     Carousel,
     CenteredCarousel,

package/src/navigation-bar.css.ts

@@ -312,7 +312,7 @@ export const navigationBarContentRightExpanded = style([
         flex: 1,
     }),
     {
-        paddingLeft: 136,
+        paddingLeft: 56,
     },
 ]);
 

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.64.0' as string;
+export const PACKAGE_VERSION = '16.65.0' as string;

package/src/video.tsx

@@ -72,6 +72,15 @@ type VideoSourceWithType = {
     type?: string; // video/webm, video/mp4...
 };
 
+export type VideoTrack = {
+    src: string;
+    kind: 'subtitles' | 'captions';
+    /** https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag */
+    srcLang: string;
+    label?: string;
+    default?: boolean;
+};
+
 export type VideoSource =
     | string
     | ReadonlyArray<string>
@@ -103,6 +112,8 @@ export type VideoProps = {
     onPause?: () => void;
     onLoad?: () => void;
     poster?: string;
+    /** text track elements for subtitles and captions */
+    tracks?: ReadonlyArray<VideoTrack>;
     children?: void;
     /** defaults to none */
     preload?: 'none' | 'metadata' | 'auto';
@@ -116,6 +127,12 @@ export interface VideoElement extends HTMLDivElement {
     /** Stops the video and shows the poster image (if available) */
     stop: () => void;
     setCurrentTime: (time: number) => void;
+    /**
+     * Sets the display mode of a track by its index.
+     * - 'showing': track is visible
+     * - 'disabled': track is inactive
+     */
+    setTrackMode: (index: number, mode: 'showing' | 'disabled') => void;
 }
 
 const Video = React.forwardRef<VideoElement, VideoProps>(
@@ -123,6 +140,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
         {
             src,
             poster,
+            tracks,
             autoPlay = 'when-loaded',
             muted = true,
             loop = true,
@@ -210,6 +228,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 disableRemotePlayback
                 muted={muted}
                 loop={loop}
+                crossOrigin={tracks?.length ? 'anonymous' : undefined}
                 className={classNames(styles.video, mediaStyles.defaultBorderRadius)}
                 preload={preload}
                 onError={handleError}
@@ -242,6 +261,16 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 {sources.map(({src, type}, index) => (
                     <source key={index} src={src} type={type} />
                 ))}
+                {tracks?.map(({src, kind, srcLang, label, default: isDefault}, index) => (
+                    <track
+                        key={index}
+                        src={src}
+                        kind={kind}
+                        srcLang={srcLang}
+                        label={label}
+                        default={isDefault}
+                    />
+                ))}
             </video>
         );
 
@@ -326,6 +355,13 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                                     dispatch('stop');
                                 }
                             };
+                            containerElement.setTrackMode = (index: number, mode: 'showing' | 'disabled') => {
+                                const trackElements = videoRef.current?.querySelectorAll('track');
+                                const trackElement = trackElements?.[index] as HTMLTrackElement | undefined;
+                                if (trackElement?.track) {
+                                    trackElement.track.mode = mode;
+                                }
+                            };
                         }
 
                         if (typeof ref === 'function') {