@telefonica/mistica 10.17.0 → 10.18.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.18.0](https://github.com/Telefonica/mistica-web/compare/v10.17.0...v10.18.0) (2022-01-21)
+
+
+### Features
+
+* **Video:** Video component and Video support in Media Cards ([#391](https://github.com/Telefonica/mistica-web/issues/391)) ([a830a9b](https://github.com/Telefonica/mistica-web/commit/a830a9b2f364d9f17245aba02cfbbfee678a064b))
+
 # [10.17.0](https://github.com/Telefonica/mistica-web/compare/v10.16.0...v10.17.0) (2022-01-18)
 
 

package/dist/card.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import Tag from './tag';
 import { ButtonLink, ButtonPrimary } from './button';
+import Video from './video';
+import Image from './image';
 import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
 import type { TagProps } from './tag';
+import type { VideoProps } from './video';
+import type { ImageProps } from './image';
+/** @deprecated */
 declare type CardMedia = {
     src: string;
     aspectRatio: number;
@@ -18,7 +23,11 @@ declare type CardMedia = {
     height?: undefined;
 };
 declare type MediaCardProps = {
-    media: CardMedia;
+    media: CardMedia | (React.ReactElement<ImageProps, typeof Image> & {
+        src?: undefined;
+    }) | (React.ReactElement<VideoProps, typeof Video> & {
+        src?: undefined;
+    });
     headline?: string | React.ReactElement<TagProps, typeof Tag>;
     pretitle?: string;
     title?: string;

package/dist/card.js

@@ -13,6 +13,7 @@ var _text = require("./text");
 var _jss = require("./jss");
 var _boxed = require("./boxed");
 var _buttonGroup = _interopRequireDefault(require("./button-group"));
+var _image = require("./image");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -174,8 +175,10 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                typeof media.src === 'string' ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.media
+                }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_image.DisableBorderRadiusProvider, {
+                    children: media
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.content,

package/dist/card.js.flow

@@ -3,7 +3,13 @@
 import * as React from "react";
 import Tag from "./tag";
 import { ButtonLink, ButtonPrimary } from "./button";
+import Video from "./video";
+import Image from "./image";
 import type { DataAttributes } from "./utils/types";
+
+/**
+ * @deprecated
+ */
 declare type CardMedia =
   | {
   src: string,
@@ -15,7 +21,16 @@ declare type CardMedia =
 }
   | { src: string };
 declare type MediaCardProps = {
-  media: CardMedia,
+  media:
+    | CardMedia
+    | {
+        ...React.Element<typeof Image>,
+        ...{},
+      }
+    | {
+        ...React.Element<typeof Video>,
+        ...{},
+      },
   headline?: string | React.Element<typeof Tag>,
   pretitle?: string,
   title?: string,

package/dist/image.d.ts

@@ -1,14 +1,35 @@
 import * as React from 'react';
-declare type AspectRatio = '1:1' | '16:9' | '7:10';
-declare type Props = {
+export declare const useDisableBorderRadius: () => boolean;
+export declare const DisableBorderRadiusProvider: React.FC;
+export declare type AspectRatio = '1:1' | '16:9' | '7:10';
+export declare const RATIO: {
+    '1:1': number;
+    '16:9': number;
+    '7:10': number;
+};
+export declare type ImageProps = {
+    src: string;
+    url?: undefined;
+    /** defaults to 100% when no width and no height are given */
+    width?: number;
+    height?: number;
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    aspectRatio?: AspectRatio;
+    /** defaults to empty string */
+    alt?: string;
+    children?: void;
+};
+/** @deprecated */
+declare type DeprecatedImageProps = {
     url: string;
+    src?: undefined;
     width?: number;
     height?: number;
-    /** defaults to 1:1 */
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
     aspectRatio?: AspectRatio;
     /** defaults to empty string */
     alt?: string;
     children?: void;
 };
-declare const Image: React.FC<Props>;
+declare const Image: React.FC<ImageProps | DeprecatedImageProps>;
 export default Image;

package/dist/image.js

@@ -2,9 +2,33 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.default = exports.useDisableBorderRadius = exports.RATIO = exports.DisableBorderRadiusProvider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
     };
@@ -35,14 +59,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+var useDisableBorderRadius = function useDisableBorderRadius() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+exports.useDisableBorderRadius = useDisableBorderRadius;
+var DisableBorderRadiusProvider = function DisableBorderRadiusProvider(param) {
+    var children = param.children;
+    /*#__PURE__*/ return (0, _jsxRuntime).jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
+exports.DisableBorderRadiusProvider = DisableBorderRadiusProvider;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
         }
     };
 });
@@ -51,19 +98,29 @@ var RATIO = {
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
+exports.RATIO = RATIO;
 var Image = function Image(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
-        "url",
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt"
     ]);
-    var classes = useStyles();
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
         src: url,

package/dist/image.js.flow

@@ -1,13 +1,39 @@
 // @flow
 
 import * as React from "react";
-declare type AspectRatio = "1:1" | "16:9" | "7:10";
-declare type Props = {
+declare export var useDisableBorderRadius: () => boolean;
+declare export var DisableBorderRadiusProvider: React.ComponentType<{}>;
+export type AspectRatio = "1:1" | "16:9" | "7:10";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "7:10": number,
+};
+export type ImageProps = {
+ src: string,
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * defaults to empty string
+  */
+ alt?: string,
+};
+/**
+ * @deprecated
+ */
+declare type DeprecatedImageProps = {
  url: string,
  width?: number,
  height?: number,
  /**
-  * defaults to 1:1
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
   */
  aspectRatio?: AspectRatio,
  /**
@@ -15,5 +41,5 @@ declare type Props = {
   */
  alt?: string,
 };
-declare var Image: React.ComponentType<Props>;
+declare var Image: React.ComponentType<ImageProps | DeprecatedImageProps>;
 declare export default typeof Image;

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Video } from './video';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';

package/dist/index.js

@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
         return _image.default;
     }
 });
+Object.defineProperty(exports, "Video", {
+    enumerable: true,
+    get: function() {
+        return _video.default;
+    }
+});
 Object.defineProperty(exports, "Form", {
     enumerable: true,
     get: function() {
@@ -8298,6 +8304,7 @@ var _callout = _interopRequireDefault(require("./callout"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
+var _video = _interopRequireDefault(require("./video"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));
 var _textField = _interopRequireDefault(require("./text-field"));

package/dist/index.js.flow

@@ -98,6 +98,7 @@ declare export {
   NavigationBarLogo,
 } from "./navigation-bar";
 declare export { default as Image } from "./image";
+declare export { default as Video } from "./video";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";
 declare export { default as TextField } from "./text-field";

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.17.0';
+var PACKAGE_VERSION = '10.18.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/video.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export declare type AspectRatio = '1:1' | '16:9' | '12:5';
+export declare const RATIO: {
+    '1:1': number;
+    '16:9': number;
+    '12:5': number;
+};
+declare type VideoSource = {
+    src: string;
+    type?: string;
+};
+export declare type VideoProps = {
+    /** defaults to 100% when no width and no height are given */
+    width?: number;
+    height?: number;
+    /** defaults to 1:1, if both width and height are given, aspectRatio is ignored */
+    aspectRatio?: AspectRatio;
+    /** accepts multiple sources */
+    src: string | Array<string> | VideoSource | Array<VideoSource>;
+    /** defaults to true */
+    loop?: boolean;
+    /** defaults to true */
+    muted?: boolean;
+    /** defaults to true */
+    autoPlay?: boolean;
+    poster?: string;
+    children?: void;
+    /** defaults to none */
+    preload?: 'none' | 'metadata' | 'auto';
+};
+declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
+export default Video;

package/dist/video.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.RATIO = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _image = require("./image");
+var _jss = require("./jss");
+var _common = require("./utils/common");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+exports.RATIO = RATIO;
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? 'none' : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, props = _objectWithoutProperties(_param, [
+        "src",
+        "poster",
+        "autoPlay",
+        "muted",
+        "loop",
+        "preload",
+        "aspectRatio"
+    ]);
+    var noBorderRadius = (0, _image).useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", {
+        ref: (0, _common).combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return (0, _jsxRuntime).jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+var _default = Video;
+exports.default = _default;

package/dist/video.js.flow

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from "react";
+export type AspectRatio = "1:1" | "16:9" | "12:5";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "12:5": number,
+};
+declare type VideoSource = {
+  src: string,
+  type?: string,
+};
+export type VideoProps = {
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * accepts multiple sources
+  */
+ src: string | Array<string> | VideoSource | Array<VideoSource>,
+ /**
+  * defaults to true
+  */
+ loop?: boolean,
+ /**
+  * defaults to true
+  */
+ muted?: boolean,
+ /**
+  * defaults to true
+  */
+ autoPlay?: boolean,
+ poster?: string,
+ /**
+  * defaults to none
+  */
+ preload?: "none" | "metadata" | "auto",
+};
+declare var Video: React.ComponentType<{
+  ...VideoProps,
+  ref?: React.Ref<HTMLVideoElement>,
+}>;
+declare export default typeof Video;

package/dist-es/card.js

@@ -8,6 +8,7 @@ import { Text1, Text2, Text4 } from './text';
 import { createUseStyles } from './jss';
 import { Boxed } from './boxed';
 import ButtonGroup from './button-group';
+import { DisableBorderRadiusProvider } from './image';
 var useCardContentStyles = createUseStyles(function() {
     return {
         actions: {
@@ -141,8 +142,10 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                /*#__PURE__*/ _jsx("div", {
+                typeof media.src === 'string' ? /*#__PURE__*/ _jsx("div", {
                     className: classes.media
+                }) : /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
+                    children: media
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.content,

package/dist-es/image.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { createUseStyles } from './jss';
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
@@ -30,31 +31,62 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+export var useDisableBorderRadius = function() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+export var DisableBorderRadiusProvider = function(param) {
+    var children = param.children;
+    /*#__PURE__*/ return _jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
 var useStyles = createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 'unset';
+            }
         }
     };
 });
-var RATIO = {
+export var RATIO = {
     '1:1': 1,
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
 var Image = function(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["url", "aspectRatio", "alt"]);
-    var classes = useStyles();
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, ["aspectRatio", "alt"]);
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ _jsx("img", {
         src: url,

package/dist-es/index.js

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';
 export { default as Select } from './select';

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.17.0';
+export var PACKAGE_VERSION = '10.18.0';

package/dist-es/video.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useDisableBorderRadius } from './image';
+import { createUseStyles } from './jss';
+import { combineRefs } from './utils/common';
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+export var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+var useStyles = createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function(param) {
+                var aspectRatio = param.aspectRatio;
+                return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? 'none' : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, props = _objectWithoutProperties(_param, ["src", "poster", "autoPlay", "muted", "loop", "preload", "aspectRatio"]);
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ _jsx("video", {
+        ref: combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return _jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+export default Video;

package/package.json

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