@telefonica/mistica 11.10.1 → 11.11.1

package/dist/highlighted-card.js

@@ -9,12 +9,10 @@ var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _box = _interopRequireDefault(require("./box"));
 var _touchable = _interopRequireDefault(require("./touchable"));
-var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
-var _color = require("./utils/color");
 var _hooks = require("./hooks");
 var _text = require("./text");
-var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _boxed = require("./boxed");
+var _maybeDismissable = _interopRequireWildcard(require("./maybe-dismissable"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,35 +115,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minWidth: 100,
             height: "inherit"
         },
-        dismissableContainer: {
-            position: "relative",
-            display: "flex",
-            flexShrink: 0,
-            width: function width(param) {
-                var width2 = param.width;
-                return width2 || "100%";
-            }
-        },
-        dismissableButton: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 48,
-            height: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-        },
-        dismissableCircleContainer: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 24,
-            height: 24,
-            margin: "0 0 8px 8px",
-            borderRadius: "50%",
-            backgroundColor: (0, _color).applyAlpha(theme.colors.background, 0.7)
-        },
         textContainer: (_obj = {
             paddingLeft: 16,
             paddingTop: 24,
@@ -165,43 +134,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: "flex",
             flexShrink: 0,
             width: function width(param) {
-                var width3 = param.width;
-                return width3 || "100%";
+                var width2 = param.width;
+                return width2 || "100%";
             }
         }
     };
 });
-var Dismissable = function Dismissable(param) {
-    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function onClose() {} : _onClose;
-    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var classes = useStyles({
-        isInverse: isInverse,
-        width: width
-    });
-    var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
-        className: classes.dismissableContainer,
-        children: [
-            children,
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                className: classes.dismissableButton,
-                onPress: onClose,
-                "aria-label": texts.closeButtonLabel,
-                style: {
-                    display: "flex",
-                    width: 48,
-                    height: 48
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.dismissableCircleContainer,
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
-                        color: colors.neutralHigh
-                    })
-                })
-            })
-        ]
-    });
-};
 var Content = function Content(props) {
     var title = props.title, description = props.description, imageUrl = props.imageUrl, imageFit = props.imageFit;
     var isInverseOutside = (0, _themeVariantContext).useIsInverseVariant();
@@ -213,18 +151,24 @@ var Content = function Content(props) {
         width: props.width
     });
     var theme = (0, _hooks).useTheme();
+    var isDismissable = (0, _maybeDismissable).useIsDismissable();
     var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs(_boxed.Boxed, {
         isInverse: isInverse,
         className: classes.container,
+        dataAttributes: props.dataAttributes,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 // don't create another region when the Content is inside a Dismissable wrapper
-                role: props["aria-label"] ? "region" : undefined,
+                role: !isDismissable ? "region" : undefined,
                 className: classes.textContainer,
-                "aria-label": props["aria-label"],
+                // aria-label is already in Dismisable wrapper
+                "aria-label": !isDismissable ? props["aria-label"] : undefined,
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                        as: "h1",
                         regular: true,
+                        wordBreak: true,
+                        truncate: props.titleLinesMax,
                         children: title
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -232,6 +176,9 @@ var Content = function Content(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
                             regular: true,
                             color: theme.colors.textSecondary,
+                            wordBreak: true,
+                            truncate: props.descriptionLinesMax,
+                            as: "p",
                             children: description
                         })
                     }),
@@ -294,14 +241,14 @@ var HighlightedCard = function HighlightedCard(_param) {
         "aria-label"
     ]);
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : props.title;
-    return props.onClose ? /*#__PURE__*/ (0, _jsxRuntime).jsx(Dismissable, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
         onClose: props.onClose,
         "aria-label": label,
         width: props.width,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props))
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
-        "aria-label": label
-    }));
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
+            "aria-label": label
+        }))
+    });
 };
 var _default = HighlightedCard;
 exports.default = _default;

package/dist/highlighted-card.js.flow

@@ -2,19 +2,25 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { RendersNullableElement, TrackingEvent } from "./utils/types";
+import type {
+  DataAttributes,
+  RendersNullableElement,
+  TrackingEvent,
+} from "./utils/types";
 import type { NullableButtonElement } from "./button";
 declare type CommonProps = {
   title: string,
+  titleLinesMax?: number,
   description: string,
+  descriptionLinesMax?: number,
   imageUrl?: string,
   imageFit?: "fit" | "fill",
-  backgroundImageUrl?: string,
   onClose?: () => void,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isInverse?: boolean,
   "aria-label"?: string,
   width?: string | number,
+  dataAttributes?: DataAttributes,
 };
 declare type BasicProps = { ...$Exact<CommonProps> };
 declare type ButtonProps = {

package/dist/index.d.ts

@@ -49,7 +49,7 @@ export { default as Inline } from './inline';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { default as ProgressBar } from './progress-bar';
-export { MediaCard, DataCard } from './card';
+export { MediaCard, DataCard, SnapCard } from './card';
 export { default as Divider } from './divider';
 export { default as Menu } from './menu';
 export { default as EmptyState } from './empty-state';

package/dist/index.js

@@ -488,6 +488,12 @@ Object.defineProperty(exports, "DataCard", {
         return _card.DataCard;
     }
 });
+Object.defineProperty(exports, "SnapCard", {
+    enumerable: true,
+    get: function() {
+        return _card.SnapCard;
+    }
+});
 Object.defineProperty(exports, "Divider", {
     enumerable: true,
     get: function() {

package/dist/index.js.flow

@@ -85,7 +85,7 @@ declare export { default as Inline } from "./inline";
 declare export { default as HighlightedCard } from "./highlighted-card";
 declare export { default as Stepper } from "./stepper";
 declare export { default as ProgressBar } from "./progress-bar";
-declare export { MediaCard, DataCard } from "./card";
+declare export { MediaCard, DataCard, SnapCard } from "./card";
 declare export { default as Divider } from "./divider";
 declare export { default as Menu } from "./menu";
 declare export { default as EmptyState } from "./empty-state";

package/dist/maybe-dismissable.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const useIsDismissable: () => boolean;
+declare type MaybeDismissableProps = {
+    children: React.ReactNode;
+    onClose?: () => void;
+    width?: string | number;
+    'aria-label'?: string;
+};
+declare const MaybeDismissable: ({ children, width, onClose, "aria-label": ariaLabel, }: MaybeDismissableProps) => JSX.Element;
+export default MaybeDismissable;

package/dist/maybe-dismissable.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.useIsDismissable = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _jss = require("./jss");
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
+var _hooks = require("./hooks");
+var _iconButton = _interopRequireDefault(require("./icon-button"));
+var _themeVariantContext = require("./theme-variant-context");
+var _color = require("./utils/color");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+    }
+}
+var DismissableContext = /*#__PURE__*/ React.createContext(false);
+var useIsDismissable = function useIsDismissable() {
+    return React.useContext(DismissableContext);
+};
+exports.useIsDismissable = useIsDismissable;
+var useStyles = (0, _jss).createUseStyles(function(theme) {
+    return {
+        dismissableContainer: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            width: function width(param) {
+                var width1 = param.width;
+                return width1 || "100%";
+            }
+        },
+        dismissableButton: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 48,
+            height: 48,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        dismissableCircleContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            margin: "0 0 8px 8px",
+            borderRadius: "50%",
+            backgroundColor: (0, _color).applyAlpha(theme.colors.background, 0.7)
+        }
+    };
+});
+var MaybeDismissable = function MaybeDismissable(param) {
+    var children = param.children, width = param.width, onClose = param.onClose, ariaLabel = param["aria-label"];
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var classes = useStyles({
+        isInverse: isInverse,
+        width: width
+    });
+    var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
+    if (!onClose) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+        className: classes.dismissableContainer,
+        "aria-label": ariaLabel,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(DismissableContext.Provider, {
+                value: true,
+                children: children
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+                className: classes.dismissableButton,
+                onPress: onClose,
+                "aria-label": texts.closeButtonLabel,
+                style: {
+                    display: "flex",
+                    width: 48,
+                    height: 48
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.dismissableCircleContainer,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                        color: colors.neutralHigh
+                    })
+                })
+            })
+        ]
+    });
+};
+var _default = MaybeDismissable;
+exports.default = _default;

package/dist/maybe-dismissable.js.flow

@@ -0,0 +1,12 @@
+// @flow
+
+import * as React from "react";
+declare export var useIsDismissable: () => boolean;
+declare type MaybeDismissableProps = {
+  children: React.Node,
+  onClose?: () => void,
+  width?: string | number,
+  "aria-label"?: string,
+};
+declare var MaybeDismissable: (x: MaybeDismissableProps) => React.Node;
+declare export default typeof MaybeDismissable;

package/dist/package-version.js

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

package/dist/select.js

@@ -232,7 +232,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: "6px 16px",
+            padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {

package/dist/text.js

@@ -120,7 +120,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "@supports not (overflow-wrap: anywhere)": {
                 wordBreak: function wordBreak(param) {
                     var wordBreak1 = param.wordBreak;
-                    return wordBreak1 ? "break-all" : "normal";
+                    return wordBreak1 ? "break-all" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -148,7 +148,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
                 }
             },
-            display: "box",
+            display: "-webkit-box",
             boxOrient: "vertical",
             overflow: "hidden"
         }

package/dist/theme.d.ts

@@ -3,6 +3,7 @@ import type { RegionCode } from './utils/region-code';
 import type { Locale } from './utils/locale';
 import type { Skin, Colors, SkinName } from './skins/types';
 import type { TrackingEvent } from './utils/types';
+import type { MediaQueries } from './utils/media-queries';
 export declare type ThemeTexts = typeof TEXTS_ES;
 declare const TEXTS_ES: {
     expirationDatePlaceholder: string;
@@ -124,16 +125,7 @@ export declare type Theme = {
     dimensions: {
         headerMobileHeight: number;
     };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        largeDesktop: string;
-        tabletOrBigger: string;
-        tabletOrSmaller: string;
-        desktopOrBigger: string;
-        supportsHover: string;
-    };
+    mq: MediaQueries;
     colors: Colors;
     Link: LinkComponent;
     isDarkMode: boolean;

package/dist/theme.js.flow

@@ -5,6 +5,7 @@ import type { RegionCode } from "./utils/region-code";
 import type { Locale } from "./utils/locale";
 import type { Skin, Colors, SkinName } from "./skins/types";
 import type { TrackingEvent } from "./utils/types";
+import type { MediaQueries } from "./utils/media-queries";
 export type ThemeTexts = typeof TEXTS_ES;
 declare var TEXTS_ES: {
   expirationDatePlaceholder: string,
@@ -128,16 +129,7 @@ export type Theme = {
   dimensions: {
     headerMobileHeight: number,
   },
-  mq: {
-    mobile: string,
-    tablet: string,
-    desktop: string,
-    largeDesktop: string,
-    tabletOrBigger: string,
-    tabletOrSmaller: string,
-    desktopOrBigger: string,
-    supportsHover: string,
-  },
+  mq: MediaQueries,
   colors: Colors,
   Link: LinkComponent,
   isDarkMode: boolean,

package/dist/utils/media-queries.d.ts

@@ -1,9 +1,4 @@
-export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
-    tabletMinWidth: number;
-    desktopMinWidth: number;
-    largeDesktopMinWidth: number;
-    desktopOrTabletMinHeight: number;
-}) => {
+export declare type MediaQueries = Readonly<{
     mobile: string;
     tablet: string;
     desktop: string;
@@ -12,4 +7,11 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrSmaller: string;
     desktopOrBigger: string;
     supportsHover: string;
-};
+    touchableOnly: string;
+}>;
+export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
+    tabletMinWidth: number;
+    desktopMinWidth: number;
+    largeDesktopMinWidth: number;
+    desktopOrTabletMinHeight: number;
+}) => MediaQueries;

package/dist/utils/media-queries.js

@@ -17,7 +17,11 @@ var createMediaQueries = function createMediaQueries(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };
 exports.createMediaQueries = createMediaQueries;

package/dist/utils/media-queries.js.flow

@@ -1,11 +1,6 @@
 // @flow
 
-declare export var createMediaQueries: (x: {
-  tabletMinWidth: number,
-  desktopMinWidth: number,
-  largeDesktopMinWidth: number,
-  desktopOrTabletMinHeight: number,
-}) => {
+export type MediaQueries = $ReadOnly<{
   mobile: string,
   tablet: string,
   desktop: string,
@@ -14,4 +9,11 @@ declare export var createMediaQueries: (x: {
   tabletOrSmaller: string,
   desktopOrBigger: string,
   supportsHover: string,
-};
+  touchableOnly: string,
+}>;
+declare export var createMediaQueries: (x: {
+  tabletMinWidth: number,
+  desktopMinWidth: number,
+  largeDesktopMinWidth: number,
+  desktopOrTabletMinHeight: number,
+}) => MediaQueries;

package/dist/utils/platform.d.ts

@@ -3,8 +3,15 @@ export declare const isInsideNovumNativeApp: (platformOverrides?: Theme['platfor
 export declare const isRunningAcceptanceTest: (platformOverrides?: Theme['platformOverrides']) => boolean;
 export declare const isAndroid: (platformOverrides: Theme['platformOverrides']) => boolean;
 export declare const isIos: (platformOverrides: Theme['platformOverrides']) => boolean;
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */
+export declare const isSafari: () => boolean;
 export declare const isFirefox: (platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | undefined;
+    platform?: "desktop" | "ios" | "android" | undefined;
     insideNovumNativeApp?: boolean | undefined;
     userAgent?: string | undefined;
 } | undefined) => boolean;

package/dist/utils/platform.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.getPlatform = exports.getIosVersion = exports.isOldChrome = exports.isChrome = exports.isFirefox = exports.isIos = exports.isAndroid = exports.isRunningAcceptanceTest = exports.isInsideNovumNativeApp = void 0;
+exports.getPlatform = exports.getIosVersion = exports.isOldChrome = exports.isChrome = exports.isFirefox = exports.isSafari = exports.isIos = exports.isAndroid = exports.isRunningAcceptanceTest = exports.isInsideNovumNativeApp = void 0;
 var _webviewBridge = require("@tef-novum/webview-bridge");
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -91,6 +91,10 @@ var isIos = function isIos(platformOverrides) {
     return false;
 };
 exports.isIos = isIos;
+var isSafari = function isSafari() {
+    return navigator.vendor.includes("Apple");
+};
+exports.isSafari = isSafari;
 var isFirefox = function isFirefox(platformOverrides) {
     return !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
 };

package/dist/utils/platform.js.flow

@@ -13,9 +13,16 @@ declare export var isAndroid: (
 declare export var isIos: (
   platformOverrides: $PropertyType<Theme, "platformOverrides">
 ) => boolean;
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */
+declare export var isSafari: () => boolean;
 declare export var isFirefox: (
   platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | void,
+    platform?: "desktop" | "ios" | "android" | void,
     insideNovumNativeApp?: boolean | void,
     userAgent?: string | void,
   } | void

package/dist/video.js

@@ -10,6 +10,7 @@ var _jss = require("./jss");
 var _aspectRatioSupport = require("./utils/aspect-ratio-support");
 var _common = require("./utils/common");
 var _dom = require("./utils/dom");
+var _platform = require("./utils/platform");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -97,6 +98,7 @@ exports.RATIO = RATIO;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         video: {
+            background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
@@ -198,7 +200,11 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = props.width || "100%";
     }
-    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    /**
+         * In safari, when using a video with poster, the transition from pause to play does a flicker,
+         * To avoid this, in Safari browsers, instead of using the poster attribute, we use a
+         * wrapper with the poster as background image
+         */ var needsWrapper = (0, _platform).isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ (0, _jsxRuntime).jsx("video", _objectSpread({
         ref: (0, _common).combineRefs(ref, videoRef),
         playsInline: true,
@@ -207,14 +213,14 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         autoPlay: autoPlay,
         muted: muted,
         loop: loop
-    }, !needsWrapper ? {
+    }, needsWrapper ? {} : {
         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
+        poster: needsWrapper ? TRANSPARENT_PIXEL : poster || TRANSPARENT_PIXEL
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -228,7 +234,10 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             style: {
                 width: width,
-                height: height
+                height: height,
+                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                backgroundSize: "cover",
+                backgroundPosition: "50% 50%"
             },
             className: classes.wrapper,
             children: video1