@telefonica/mistica 12.6.0 → 12.8.0

package/dist-es/utils/aspect-ratio-support.js

@@ -6,6 +6,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -33,6 +46,21 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -47,6 +75,7 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../hooks";
+import { createUseStyles } from "../jss";
 var AspectRatioSupport = /*#__PURE__*/ React.createContext(true);
 export var AspectRatioSupportProvider = function(param) {
     var children = param.children;
@@ -70,3 +99,86 @@ export var AspectRatioSupportProvider = function(param) {
 export var useSupportsAspectRatio = function() {
     return React.useContext(AspectRatioSupport);
 };
+var useAspectRatioStyles = createUseStyles(function() {
+    return {
+        container: {
+            "@supports (aspect-ratio: 1 / 1)": {
+                aspectRatio: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
+                }
+            },
+            "$wrapper &": {
+                position: function(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
+                width: "100%",
+                height: "100%",
+                top: 0,
+                left: 0
+            }
+        },
+        wrapper: {
+            overflow: "hidden",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            position: "relative",
+            paddingTop: function(param) {
+                var aspectRatio = param.aspectRatio, width = param.width;
+                if (!aspectRatio) {
+                    return 0;
+                }
+                if (width && typeof width === "string" && width.endsWith("%")) {
+                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
+                }
+                return "".concat(100 / aspectRatio, "%");
+            }
+        }
+    };
+});
+export var AspectRatioElement = function(props) {
+    var supportsAspectRatio = useSupportsAspectRatio();
+    // if width or height are numeric, we can calculate the other with the ratio without css.
+    // if aspect ratio is 0, we use the original image proportions
+    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && props.aspectRatio !== 0;
+    var classes = useAspectRatioStyles({
+        aspectRatio: withCssAspectRatio ? props.aspectRatio : undefined,
+        width: props.width
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (typeof props.width === "number") {
+        height = props.aspectRatio !== 0 ? props.width / props.aspectRatio : undefined;
+    } else if (typeof props.height === "number") {
+        width = props.aspectRatio !== 0 ? props.height * props.aspectRatio : undefined;
+    } else {
+        width = props.width || "100%";
+    }
+    var needsWrapper = withCssAspectRatio && !supportsAspectRatio;
+    var _as;
+    var container = /*#__PURE__*/ React.createElement((_as = props.as) !== null && _as !== void 0 ? _as : "div", {
+        className: props.className ? "".concat(props.className, " ").concat(classes.container) : classes.container,
+        style: _objectSpread({}, needsWrapper ? _objectSpread({}, props.style, {
+            width: "100%"
+        }) : _objectSpread({}, props.style, {
+            width: width,
+            height: height
+        }))
+    }, props.children);
+    if (needsWrapper) {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                width: width,
+                height: height
+            },
+            className: classes.wrapper,
+            children: container
+        });
+    } else {
+        return container;
+    }
+};

package/dist-es/video.js

@@ -57,7 +57,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useDisableBorderRadius } from "./image";
 import { createUseStyles } from "./jss";
-import { useSupportsAspectRatio } from "./utils/aspect-ratio-support";
+import { AspectRatioElement } from "./utils/aspect-ratio-support";
 import { combineRefs } from "./utils/common";
 import { getPrefixedDataAttributes } from "./utils/dom";
 import { isRunningAcceptanceTest, isSafari } from "./utils/platform";
@@ -70,45 +70,13 @@ export var RATIO = {
 var useStyles = createUseStyles(function() {
     return {
         video: {
+            width: "100%",
+            height: "100%",
             background: "transparent",
             display: "block",
             objectFit: "cover",
             maxWidth: "100%",
-            maxHeight: "100%",
-            "@supports (aspect-ratio: 1 / 1)": {
-                aspectRatio: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : "unset";
-                }
-            },
-            "$wrapper &": {
-                borderRadius: 0,
-                position: function(param) {
-                    var aspectRatio = param.aspectRatio;
-                    return(// when aspectRatio is 0, we want the video to use the original aspect ratio
-                    aspectRatio ? "absolute" : "static");
-                },
-                width: "100%",
-                height: "100%",
-                top: 0,
-                left: 0
-            }
-        },
-        wrapper: {
-            overflow: "hidden",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            position: "relative",
-            paddingTop: function(param) {
-                var aspectRatio = param.aspectRatio, width = param.width;
-                if (!aspectRatio) {
-                    return 0;
-                }
-                if (width && typeof width === "string" && width.endsWith("%")) {
-                    return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
-                }
-                return "".concat(100 / aspectRatio, "%");
-            }
+            maxHeight: "100%"
         }
     };
 });
@@ -124,16 +92,9 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "aspectRatio",
         "dataAttributes"
     ]);
-    var supportsAspectRatio = useSupportsAspectRatio();
     var noBorderRadius = useDisableBorderRadius();
     var ratio = typeof aspectRatio === "number" ? aspectRatio : RATIO[aspectRatio];
-    // if width or height are numeric, we can calculate the other with the ratio without css
-    // if aspect ratio is 0, we use the original video proportions
-    var withCssAspectRatio = typeof props.width !== "number" && typeof props.height !== "number" && ratio !== 0;
-    var classes = useStyles({
-        aspectRatio: withCssAspectRatio ? ratio : undefined,
-        width: props.width
-    });
+    var classes = useStyles();
     var videoRef = React.useRef(null);
     React.useEffect(function() {
         var video = videoRef.current;
@@ -155,23 +116,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             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 (typeof props.width === "number") {
-        height = ratio ? props.width / ratio : undefined;
-    } else if (typeof props.height === "number") {
-        width = ratio ? props.height * ratio : undefined;
-    } else {
-        width = props.width || "100%";
-    }
-    /**
-         * 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 = isSafari() || withCssAspectRatio && !supportsAspectRatio;
     var video1 = /*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
@@ -179,13 +123,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         disableRemotePlayback: true,
         autoPlay: autoPlay,
         muted: muted,
-        loop: loop
-    }, needsWrapper ? {
-        width: "100%"
-    } : {
-        width: width,
-        height: height
-    }, {
+        loop: loop,
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
@@ -203,22 +141,24 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             }, index);
         })
     }));
-    if (needsWrapper) {
-        return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx(AspectRatioElement, {
+        aspectRatio: ratio,
+        width: props.width,
+        height: props.height,
+        children: isSafari() ? /*#__PURE__*/ _jsx("div", {
             style: {
-                width: width,
-                height: height,
-                // adding the poster as background image avoids the flicker in Safari
-                backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
+                width: "100%",
+                height: "100%",
+                /**
+                             * 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
+                             */ backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
-                backgroundPosition: "50% 50%",
-                borderRadius: noBorderRadius ? 0 : 8
+                backgroundPosition: "50% 50%"
             },
-            className: classes.wrapper,
             children: video1
-        });
-    } else {
-        return video1;
-    }
+        }) : video1
+    });
 });
 export default Video;

package/package.json

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