@telefonica/mistica 10.25.0 → 10.28.0

package/dist-es/utils/common.js

@@ -16,3 +16,12 @@ export var combineRefs = function() {
         });
     };
 };
+export var getTextFromChildren = function(children) {
+    var text = '';
+    React.Children.forEach(children, function(child) {
+        if (typeof child === 'string') {
+            text += child;
+        }
+    });
+    return text;
+};

package/dist-es/utils/document-visibility.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTheme } from '../hooks';
+import { isAndroid } from './platform';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+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 _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+var isDocumentVisible = function() {
+    return typeof document !== 'undefined' && document.visibilityState === 'visible';
+};
+var DocumentVisibilityContext = /*#__PURE__*/ React.createContext(true);
+export var DocumentVisibilityProvider = function(param) {
+    var hidden = param.hidden, children = param.children;
+    var platformOverrides = useTheme().platformOverrides;
+    var ref = _slicedToArray(React.useState(!hidden), 2), visible = ref[0], setVisible = ref[1];
+    React.useEffect(function() {
+        var visibilitychangeCallback = function() {
+            setVisible(isDocumentVisible());
+        };
+        var focusCallback = function() {
+            setVisible(true);
+        };
+        var blurCallback = function() {
+            setVisible(false);
+        };
+        setVisible(isDocumentVisible());
+        document.addEventListener('visibilitychange', visibilitychangeCallback);
+        document.addEventListener('focus', focusCallback);
+        document.addEventListener('blur', blurCallback);
+        return function() {
+            document.removeEventListener('visibilitychange', visibilitychangeCallback);
+            document.removeEventListener('focus', focusCallback);
+            document.removeEventListener('blur', blurCallback);
+        };
+    }, []);
+    // Workaround for this bug: https://jira.tuenti.io/jira/browse/ACCOUNT-10938
+    // In Android, after ~10 minutes of inactivity, when a background webview receives focus (back navigation from another webview),
+    // visibility change event is not fired, this causes problems like the navigation bar not being updated
+    var isVisibleNow = isDocumentVisible();
+    if (isAndroid(platformOverrides) && isVisibleNow !== visible) {
+        setVisible(isVisibleNow);
+    }
+    return(/*#__PURE__*/ _jsx(DocumentVisibilityContext.Provider, {
+        value: visible,
+        children: children
+    }));
+};
+export var useDocumentVisibility = function() {
+    return React.useContext(DocumentVisibilityContext);
+};

package/dist-es/video.js

@@ -3,6 +3,35 @@ import * as React from 'react';
 import { useDisableBorderRadius } from './image';
 import { createUseStyles } from './jss';
 import { combineRefs } from './utils/common';
+import { getPrefixedDataAttributes } from './utils/dom';
+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 _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 _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -56,14 +85,15 @@ var useStyles = createUseStyles(function() {
 });
 /** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
 var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var src1 = _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, [
+    var src1 = _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, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
         "muted",
         "loop",
         "preload",
-        "aspectRatio"
+        "aspectRatio",
+        "dataAttributes"
     ]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -103,7 +133,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ _jsx("video", {
+    return(/*#__PURE__*/ _jsx("video", _objectSpread({
         ref: combineRefs(ref, videoRef),
         playsInline: true,
         disablePictureInPicture: true,
@@ -116,7 +146,8 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         className: classes.video,
         preload: preload,
         // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
-        poster: poster || TRANSPARENT_PIXEL,
+        poster: poster || TRANSPARENT_PIXEL
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
             /*#__PURE__*/ return _jsx("source", {
@@ -124,6 +155,6 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 type: type
             }, index);
         })
-    }));
+    })));
 });
 export default Video;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.25.0",
+    "version": "10.28.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -21,6 +21,7 @@
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
+        "compile": "node scripts/compile.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf node_modules/.cache",
         "ci": "yarn lint && yarn prettier-check && yarn ts-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
         "prepublishOnly": "node scripts/prepublish-only.js",
@@ -108,6 +109,7 @@
         "node-fetch": "^2.6.1",
         "playroom": "^0.27.9",
         "prettier": "^2.5.1",
+        "pretty-bytes": "^5.6.0",
         "prop-types": "^15.7.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",