@micromag/screen-urbania-article 0.3.744 → 0.3.745

package/es/index.js

@@ -9,7 +9,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor, isValidUrl } from '@micromag/core/utils';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
-import { ScreenElement, Empty, PlaceholderSubtitle, PlaceholderTitle, PlaceholderImage, PlaceholderText, Close, Spinner } from '@micromag/core/components';
+import { ScreenElement, Empty, PlaceholderSubtitle, PlaceholderTitle, PlaceholderImage, PlaceholderText } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, useViewerInteraction, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver, useResizeObserver } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
@@ -24,7 +24,6 @@ import { useSpring, easings, animated } from '@react-spring/web';
 import { useGesture } from '@use-gesture/react';
 import isString from 'lodash/isString';
 import queryString from 'query-string';
-import Button from '@micromag/element-button';
 import Layout from '@micromag/element-layout';
 
 var propTypes$4 = {
@@ -582,7 +581,8 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
       authorName = _ref11$name === void 0 ? null : _ref11$name,
       _ref11$image = _ref11.image,
       authorImage = _ref11$image === void 0 ? null : _ref11$image;
-    var finalArticleAuthor = _objectSpread(_objectSpread({}, authorName !== null ? {
+    var hasCreditAuthorName = authorName !== null && authorName !== '';
+    var finalArticleAuthor = _objectSpread(_objectSpread({}, hasCreditAuthorName ? {
       name: {
         body: "<p>".concat(authorName, "</p>")
       }
@@ -608,6 +608,7 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
     var hasTitle = isTextFilled(title);
     var hasOverTitle = isTextFilled(overTitle);
     var hasSponsorProps = isTextFilled(sponsorLabel);
+    var hasAuthorProps = author !== null && author.name !== null && isTextFilled(author.name);
     var sponsorPrefix = !hasSponsorProps && defaultSponsor !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "+TPjd4",
       defaultMessage: [{
@@ -624,7 +625,7 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
       overTitle: hasOverTitle ? overTitle : _objectSpread(_objectSpread({}, overTitle), {}, {
         body: 'En vedette'
       }),
-      author: _objectSpread(_objectSpread({}, finalArticleAuthor), author),
+      author: _objectSpread(_objectSpread({}, finalArticleAuthor), hasAuthorProps ? author : null),
       sponsors: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread(_objectSpread({}, sponsorLabel), {}, {
         body: "<strong>".concat(defaultSponsor, "</strong>")
       })] : [sponsorLabel],
@@ -855,7 +856,7 @@ var definition = {
   }]
 };
 
-var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","close":"micromag-screen-urbania-article-urbania-base-article-card-close","dragHandle":"micromag-screen-urbania-article-urbania-base-article-card-dragHandle","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","cardContainer":"micromag-screen-urbania-article-urbania-base-article-card-cardContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","card":"micromag-screen-urbania-article-urbania-base-article-card-card","callToAction":"micromag-screen-urbania-article-urbania-base-article-card-callToAction","arrow":"micromag-screen-urbania-article-urbania-base-article-card-arrow","ctaText":"micromag-screen-urbania-article-urbania-base-article-card-ctaText","cardInner":"micromag-screen-urbania-article-urbania-base-article-card-cardInner","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","articlePreview":"micromag-screen-urbania-article-urbania-base-article-card-articlePreview","articlePreviewInner":"micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner","articleTitle":"micromag-screen-urbania-article-urbania-base-article-card-articleTitle","spinnerContainer":"micromag-screen-urbania-article-urbania-base-article-card-spinnerContainer","spinner":"micromag-screen-urbania-article-urbania-base-article-card-spinner","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","articleOpened":"micromag-screen-urbania-article-urbania-base-article-card-articleOpened"};
+var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","dragHandle":"micromag-screen-urbania-article-urbania-base-article-card-dragHandle","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","cardContainer":"micromag-screen-urbania-article-urbania-base-article-card-cardContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","card":"micromag-screen-urbania-article-urbania-base-article-card-card","callToAction":"micromag-screen-urbania-article-urbania-base-article-card-callToAction","arrow":"micromag-screen-urbania-article-urbania-base-article-card-arrow","ctaText":"micromag-screen-urbania-article-urbania-base-article-card-ctaText","cardInner":"micromag-screen-urbania-article-urbania-base-article-card-cardInner","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","articlePreview":"micromag-screen-urbania-article-urbania-base-article-card-articlePreview","articlePreviewInner":"micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner","articleTitle":"micromag-screen-urbania-article-urbania-base-article-card-articleTitle","header":"micromag-screen-urbania-article-urbania-base-article-card-header"};
 
 var propTypes = {
   hasArticle: PropTypes.bool,
@@ -923,7 +924,9 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var _useViewerWebView = useViewerWebView(),
     openWebView = _useViewerWebView.open,
     _useViewerWebView$ope = _useViewerWebView.opened,
-    webviewOpened = _useViewerWebView$ope === void 0 ? false : _useViewerWebView$ope;
+    webviewOpened = _useViewerWebView$ope === void 0 ? false : _useViewerWebView$ope,
+    _useViewerWebView$clo = _useViewerWebView.close,
+    closeWebView = _useViewerWebView$clo === void 0 ? null : _useViewerWebView$clo;
   var _useViewerContext = useViewerContext(),
     viewerTopHeight = _useViewerContext.topHeight,
     viewerBottomHeight = _useViewerContext.bottomHeight;
@@ -956,42 +959,14 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       _ref: 'micromag'
     }, currentQueryString))) : url;
   }, [hasUrl, url]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    articleOpened = _useState2[0],
-    setArticleOpened = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    iframeEnabled = _useState4[0],
-    setIframeEnabled = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    iframeMounted = _useState6[0],
-    setIframeMounted = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    iframeLoaded = _useState8[0],
-    setIframeLoaded = _useState8[1];
   var mediaShouldLoad = current || preload;
-  var backgroundPlaying = current && (isView || isEdit) && !articleOpened;
-  var mediaRef = usePlaybackMediaRef(current && !articleOpened);
-
-  // @TODO: collapsed card the height of articlePreview
-  // const articlePreviewRef = useRef();
-  // const previewCurrent = articlePreviewRef.current || null;
-
-  // const articlePreviewHeight = useMemo(() => {
-  //     if (previewCurrent !== null) {
-  //         const { height: previewHeight = 0 } = previewCurrent.getBoundingClientRect();
-  //         return previewHeight !== 0 ? previewHeight : 0;
-  //     }
-  //     return 0;
-  // }, [previewCurrent, height]);
+  var backgroundPlaying = current && (isView || isEdit);
+  var mediaRef = usePlaybackMediaRef(current && !webviewOpened);
 
   // card animations
-  var withCardAnimation = !isPlaceholder && !isPreview && !isStatic && !iframeMounted;
+  var withCardAnimation = !isPlaceholder && !isPreview && !isStatic;
   var slideInDelay = withCardAnimation && isBackgroundVideo && backgroundPlaying;
-  var withCardBounce = withCardAnimation && current && !articleOpened;
+  var withCardBounce = withCardAnimation && current && !webviewOpened;
   useEffect(function () {
     if (!current) {
       return function () {};
@@ -999,54 +974,38 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     setControlsTheme({
       seekBarOnly: true
     });
-    if (isBackgroundVideo && !articleOpened) {
+    if (isBackgroundVideo && !webviewOpened) {
       setControls(true);
     } else {
       setControls(false);
     }
     return function () {
-      if (isBackgroundVideo && !articleOpened) {
+      if (isBackgroundVideo && !webviewOpened) {
         setControls(false);
       }
     };
-  }, [current, setControls, isBackgroundVideo, articleOpened, setControls, setControlsTheme]);
+  }, [current, setControls, isBackgroundVideo, webviewOpened, setControls, setControlsTheme]);
   var toggleCard = useCallback(function () {
-    var newOpened = !articleOpened;
+    var newOpened = !webviewOpened;
     if (newOpened) {
       openWebView(finalUrl);
+      disableInteraction();
+    } else {
+      enableInteraction();
     }
-
-    // if (newOpened) {
-    //     disableInteraction();
-    // } else {
-    //     enableInteraction();
-    // }
-
-    // setIframeMounted(true);
-  }, [articleOpened, setIframeMounted, disableInteraction, enableInteraction, openWebView, finalUrl]);
-  useEffect(function () {
-    if (!iframeMounted || iframeLoaded) {
-      return function () {};
-    }
-    var timeout = setTimeout(function () {
-      setIframeLoaded(true);
-    }, 2000);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [iframeMounted, iframeLoaded]);
+  }, [webviewOpened, disableInteraction, enableInteraction, openWebView, finalUrl]);
   var bindGesture = useGesture({
     onDrag: function onDrag(_ref4) {
       var _ref4$movement = _slicedToArray(_ref4.movement, 2),
         my = _ref4$movement[1];
-      if (!articleOpened && my < 0 || articleOpened && my > 0) {
+      if (!webviewOpened && my < 0 || webviewOpened && my > 0) {
         toggleCard();
       }
     },
     onWheel: function onWheel(_ref5) {
       var _ref5$movement = _slicedToArray(_ref5.movement, 2),
         my = _ref5$movement[1];
-      if (!articleOpened && my > 0 || articleOpened && my < 0) {
+      if (!webviewOpened && my > 0 || webviewOpened && my < 0) {
         toggleCard();
       }
     }
@@ -1061,7 +1020,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   });
   var _useResizeObserver = useResizeObserver({
-      disabled: !articleOpened
+      disabled: !webviewOpened
     }),
     articlePreviewRef = _useResizeObserver.ref,
     _useResizeObserver$en = _useResizeObserver.entry.contentRect,
@@ -1069,11 +1028,11 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var _ref6 = articlePreviewContentRect || {},
     _ref6$height = _ref6.height,
     articlePreviewHeight = _ref6$height === void 0 ? 0 : _ref6$height;
+
+  // Think about this
   var minimumVisibility = 20;
   var y = 100;
-  if (current && articleOpened) {
-    y = 0;
-  } else if (current || isPreview) {
+  if (current) {
     y = 100 - Math.max(articlePreviewHeight / height * 100, minimumVisibility);
   }
   var springStyle = useSpring({
@@ -1083,14 +1042,6 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     to: {
       y: y
     },
-    onStart: function onStart() {
-      setIframeEnabled(false);
-    },
-    onResolve: function onResolve() {
-      if (articleOpened) {
-        setIframeEnabled(true);
-      }
-    },
     delay: slideInDelay ? 1500 : 0,
     config: {
       easing: easings.easeInOutSine,
@@ -1098,12 +1049,10 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   });
   useEffect(function () {
-    if (!current) {
-      setArticleOpened(false);
-      setIframeMounted(false);
-      setIframeLoaded(false);
+    if (!current && closeWebView !== null) {
+      closeWebView();
     }
-  }, [current]);
+  }, [current, closeWebView]);
   var onPlayError = useCallback(function () {
     if (isView && playing && current && isBackgroundVideo) {
       setPlaying(false);
@@ -1111,7 +1060,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   }, [isView, current, playing, isBackgroundVideo, setPlaying, setControlsSuggestPlay]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.articleOpened, articleOpened), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": isStatic || isCapture
   }, /*#__PURE__*/React.createElement(Background, {
     className: styles.background,
@@ -1185,7 +1134,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     type: "button",
     onClick: toggleCard,
     className: styles.dragHandle,
-    tabIndex: !current || articleOpened ? -1 : 0,
+    tabIndex: !current ? -1 : 0,
     "aria-label": intl.formatMessage({
       id: "IoMJgw",
       defaultMessage: [{
@@ -1193,7 +1142,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
         "value": "Toggle article"
       }]
     }),
-    "aria-pressed": articleOpened
+    "aria-pressed": webviewOpened
   }, current ? bindGesture() : null)), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)])
   }, hasCta ? /*#__PURE__*/React.createElement("div", {
@@ -1203,14 +1152,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     className: styles.arrow
   }), /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.ctaText
-  }, callToAction))) : null, /*#__PURE__*/React.createElement(Button, {
-    className: styles.close,
-    disabled: !current || !articleOpened,
-    onClick: toggleCard
-  }, /*#__PURE__*/React.createElement(Close, {
-    color: "#000",
-    className: styles.closeIcon
-  })), /*#__PURE__*/React.createElement("div", {
+  }, callToAction))) : null, /*#__PURE__*/React.createElement("div", {
     className: styles.articlePreview,
     ref: articlePreviewRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -1225,13 +1167,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     withoutBackground: true,
     author: author,
     shouldLoad: mediaShouldLoad
-  }) : null)), iframeMounted && !iframeLoaded ? /*#__PURE__*/React.createElement("div", {
-    className: styles.spinnerContainer
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    className: styles.spinner
-  })) : null, !iframeEnabled && iframeMounted ? /*#__PURE__*/React.createElement("div", {
-    className: styles.iframeBlocker
-  }) : null)) : null))));
+  }) : null)))) : null))));
 };
 UrbaniaArticleCard.defaultProps = defaultProps;
 UrbaniaArticleCard.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.744",
+    "version": "0.3.745",
     "private": false,
     "description": "",
     "keywords": [
@@ -90,5 +90,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "44104ef3b161bec4ad6d4e7fc41723df053513a0"
+    "gitHead": "6b12b65d4e32b0e3ab33586373176589a6d7d27e"
 }