@micromag/screen-urbania-article 0.3.743 → 0.3.745

package/es/index.js

@@ -5,11 +5,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { getJSON } from '@folklore/fetch';
 import PropTypes from 'prop-types';
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
+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 { PropTypes as PropTypes$1 } from '@micromag/core';
-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 = {
@@ -455,10 +454,22 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
 UrbaniaArticle.propTypes = propTypes$2;
 UrbaniaArticle.defaultProps = defaultProps$2;
 
-var _excluded = ["component", "theme", "url", "article"];
+var _excluded = ["component", "title", "articleType", "overTitle", "sponsorLabel", "author", "image", "header", "footer", "url", "article"];
 var propTypes$1 = {
   component: PropTypes.elementType,
-  theme: PropTypes.string,
+  // theme: PropTypes.string,
+  title: PropTypes$1.headingElement,
+  articleType: PropTypes.string,
+  overTitle: PropTypes.shape({
+    body: PropTypes.string
+  }),
+  sponsorLabel: PropTypes.shape({
+    body: PropTypes.string
+  }),
+  author: PropTypes$1.authorElement,
+  image: PropTypes$1.image,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
   url: PropTypes.string,
   article: PropTypes.shape({
     type: PropTypes.string
@@ -466,110 +477,112 @@ var propTypes$1 = {
 };
 var defaultProps$1 = {
   component: UrbaniaArticle,
-  theme: null,
+  // theme: null,
+  title: null,
+  articleType: null,
+  overTitle: null,
+  sponsorLabel: null,
+  author: null,
+  image: null,
+  header: null,
+  footer: null,
   url: null,
   article: null
 };
 var UrbaniaLoader = function UrbaniaLoader(_ref) {
-  var Component = _ref.component;
-    _ref.theme;
-    var url = _ref.url,
+  var Component = _ref.component,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$articleType = _ref.articleType,
+    articleType = _ref$articleType === void 0 ? null : _ref$articleType,
+    _ref$overTitle = _ref.overTitle,
+    overTitle = _ref$overTitle === void 0 ? null : _ref$overTitle,
+    _ref$sponsorLabel = _ref.sponsorLabel,
+    sponsorLabel = _ref$sponsorLabel === void 0 ? null : _ref$sponsorLabel,
+    _ref$author = _ref.author,
+    author = _ref$author === void 0 ? null : _ref$author,
+    _ref$image = _ref.image,
+    image = _ref$image === void 0 ? null : _ref$image,
+    _ref$header = _ref.header,
+    header = _ref$header === void 0 ? null : _ref$header,
+    _ref$footer = _ref.footer,
+    footer = _ref$footer === void 0 ? null : _ref$footer,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? null : _ref$url,
     initialArticle = _ref.article,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(initialArticle),
     _useState2 = _slicedToArray(_useState, 2),
     article = _useState2[0],
     setArticle = _useState2[1];
-  // const { isView } = useScreenRenderContext();
-
-  // const hostname = useMemo(() => {
-  //     const { hostname: urlHostname = null } =
-  //         url !== null && isValidUrl(url) ? new URL(url) : {};
-  //     return urlHostname;
-  // }, [url]);
-
-  var finalUrl = url !== null && isValidUrl(url) ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(ca|ƒr)\//, 'https://urbania.$2/') : url;
+  var finalUrl = url !== null && isValidUrl(url) ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(ca|ƒr)\//, 'https://urbania.$2/') : null;
   useEffect(function () {
-    if (finalUrl !== null && isValidUrl(finalUrl)) {
+    if (finalUrl !== null) {
       getJSON("https://api.urbania.ca/documents?uri=".concat(finalUrl), {
         mode: 'cors'
       }).then(function (art) {
+        console.log('art loaded', art);
         setArticle(art || null);
-      })["catch"](function () {
-        return setArticle(null);
+      })["catch"](function (e) {
+        console.log('art error', e);
+        setArticle(null);
       });
     }
-  }, [finalUrl, setArticle]);
+  }, [url, finalUrl, setArticle]);
   var values = useMemo(function () {
-    var _ref2 = props || {},
-      _ref2$articleType = _ref2.articleType,
-      articleType = _ref2$articleType === void 0 ? null : _ref2$articleType,
-      _ref2$title = _ref2.title,
-      title = _ref2$title === void 0 ? {} : _ref2$title,
-      _ref2$overTitle = _ref2.overTitle,
-      overTitle = _ref2$overTitle === void 0 ? {} : _ref2$overTitle,
-      _ref2$sponsorLabel = _ref2.sponsorLabel,
-      sponsorLabel = _ref2$sponsorLabel === void 0 ? {} : _ref2$sponsorLabel,
-      _ref2$author = _ref2.author,
-      author = _ref2$author === void 0 ? null : _ref2$author,
-      _ref2$image = _ref2.image,
-      image = _ref2$image === void 0 ? {} : _ref2$image,
-      _ref2$header = _ref2.header,
-      header = _ref2$header === void 0 ? {} : _ref2$header,
-      _ref2$footer = _ref2.footer,
-      footer = _ref2$footer === void 0 ? {} : _ref2$footer;
-    var _ref3 = image || {},
-      _ref3$url = _ref3.url,
-      imageUrl = _ref3$url === void 0 ? null : _ref3$url;
-    var _ref4 = footer || {},
-      _ref4$callToAction = _ref4.callToAction,
-      callToAction = _ref4$callToAction === void 0 ? null : _ref4$callToAction;
-    var _ref5 = callToAction || {},
-      _ref5$url = _ref5.url,
-      ctaUrl = _ref5$url === void 0 ? null : _ref5$url;
+    var _ref2 = image || {},
+      _ref2$url = _ref2.url,
+      imageUrl = _ref2$url === void 0 ? null : _ref2$url;
+    var _ref3 = footer || {},
+      _ref3$callToAction = _ref3.callToAction,
+      callToAction = _ref3$callToAction === void 0 ? null : _ref3$callToAction;
+    var _ref4 = callToAction || {},
+      _ref4$url = _ref4.url,
+      ctaUrl = _ref4$url === void 0 ? null : _ref4$url;
 
     // Straight from article
-    var _ref6 = article || {},
-      _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? null : _ref6$type,
-      _ref6$title = _ref6.title,
-      articleTitle = _ref6$title === void 0 ? null : _ref6$title,
-      _ref6$image = _ref6.image,
-      articleImage = _ref6$image === void 0 ? null : _ref6$image,
-      _ref6$metadata = _ref6.metadata,
-      metadata = _ref6$metadata === void 0 ? {} : _ref6$metadata;
+    var _ref5 = article || {},
+      _ref5$type = _ref5.type,
+      type = _ref5$type === void 0 ? null : _ref5$type,
+      _ref5$title = _ref5.title,
+      articleTitle = _ref5$title === void 0 ? null : _ref5$title,
+      _ref5$image = _ref5.image,
+      articleImage = _ref5$image === void 0 ? null : _ref5$image,
+      _ref5$metadata = _ref5.metadata,
+      metadata = _ref5$metadata === void 0 ? {} : _ref5$metadata;
     var hasArticle = article !== null;
-    var _ref7 = metadata || {},
-      _ref7$authors = _ref7.authors,
-      authors = _ref7$authors === void 0 ? [] : _ref7$authors,
-      _ref7$sponsors = _ref7.sponsors,
-      sponsors = _ref7$sponsors === void 0 ? [] : _ref7$sponsors,
-      _ref7$brands = _ref7.brands,
-      brands = _ref7$brands === void 0 ? [] : _ref7$brands;
-    var _ref8 = authors || [],
-      _ref9 = _slicedToArray(_ref8, 1),
-      _ref9$ = _ref9[0],
-      creditAuthor = _ref9$ === void 0 ? null : _ref9$;
-    var _ref0 = brands || [],
-      _ref1 = _slicedToArray(_ref0, 1),
-      _ref1$ = _ref1[0],
-      _ref1$2 = _ref1$ === void 0 ? {} : _ref1$,
-      _ref1$2$handle = _ref1$2.handle,
-      site = _ref1$2$handle === void 0 ? null : _ref1$2$handle;
-    var _ref10 = articleImage || {},
-      _ref10$sizes = _ref10.sizes,
-      sizes = _ref10$sizes === void 0 ? {} : _ref10$sizes;
-    var _ref11 = sizes || {},
-      _ref11$medium = _ref11.medium,
-      medium = _ref11$medium === void 0 ? {} : _ref11$medium,
-      _ref11$large = _ref11.large,
-      large = _ref11$large === void 0 ? {} : _ref11$large;
-    var _ref12 = creditAuthor || {},
-      _ref12$name = _ref12.name,
-      authorName = _ref12$name === void 0 ? null : _ref12$name,
-      _ref12$image = _ref12.image,
-      authorImage = _ref12$image === void 0 ? null : _ref12$image;
-    var finalArticleAuthor = _objectSpread(_objectSpread({}, authorName !== null ? {
+    var _ref6 = metadata || {},
+      _ref6$authors = _ref6.authors,
+      authors = _ref6$authors === void 0 ? [] : _ref6$authors,
+      _ref6$sponsors = _ref6.sponsors,
+      sponsors = _ref6$sponsors === void 0 ? [] : _ref6$sponsors,
+      _ref6$brands = _ref6.brands,
+      brands = _ref6$brands === void 0 ? [] : _ref6$brands;
+    var _ref7 = authors || [],
+      _ref8 = _slicedToArray(_ref7, 1),
+      _ref8$ = _ref8[0],
+      creditAuthor = _ref8$ === void 0 ? null : _ref8$;
+    var _ref9 = brands || [],
+      _ref0 = _slicedToArray(_ref9, 1),
+      _ref0$ = _ref0[0],
+      _ref0$2 = _ref0$ === void 0 ? {} : _ref0$,
+      _ref0$2$handle = _ref0$2.handle,
+      site = _ref0$2$handle === void 0 ? null : _ref0$2$handle;
+    var _ref1 = articleImage || {},
+      _ref1$sizes = _ref1.sizes,
+      sizes = _ref1$sizes === void 0 ? {} : _ref1$sizes;
+    var _ref10 = sizes || {},
+      _ref10$medium = _ref10.medium,
+      medium = _ref10$medium === void 0 ? {} : _ref10$medium,
+      _ref10$large = _ref10.large,
+      large = _ref10$large === void 0 ? {} : _ref10$large;
+    var _ref11 = creditAuthor || {},
+      _ref11$name = _ref11.name,
+      authorName = _ref11$name === void 0 ? null : _ref11$name,
+      _ref11$image = _ref11.image,
+      authorImage = _ref11$image === void 0 ? null : _ref11$image;
+    var hasCreditAuthorName = authorName !== null && authorName !== '';
+    var finalArticleAuthor = _objectSpread(_objectSpread({}, hasCreditAuthorName ? {
       name: {
         body: "<p>".concat(authorName, "</p>")
       }
@@ -581,11 +594,11 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
     var defaultType = articleType || type;
 
     // Sponsors
-    var defaultSponsor = (sponsors || []).length > 0 ? (sponsors || []).map(function (_ref13) {
-      var _ref13$organisation = _ref13.organisation,
-        _ref13$organisation2 = _ref13$organisation === void 0 ? {} : _ref13$organisation,
-        _ref13$organisation2$ = _ref13$organisation2.name,
-        name = _ref13$organisation2$ === void 0 ? null : _ref13$organisation2$;
+    var defaultSponsor = (sponsors || []).length > 0 ? (sponsors || []).map(function (_ref12) {
+      var _ref12$organisation = _ref12.organisation,
+        _ref12$organisation2 = _ref12$organisation === void 0 ? {} : _ref12$organisation,
+        _ref12$organisation2$ = _ref12$organisation2.name,
+        name = _ref12$organisation2$ === void 0 ? null : _ref12$organisation2$;
       return name;
     }).filter(function (name) {
       return name !== null;
@@ -595,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: [{
@@ -611,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],
@@ -643,9 +657,15 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
         })
       })
     };
-  }, [article, finalUrl, props]);
+  }, [article, url, title, finalUrl, props, articleType, overTitle, sponsorLabel, author, image, header, footer]);
+  var _ref13 = values || {},
+    _ref13$title = _ref13.title,
+    articleTitle = _ref13$title === void 0 ? null : _ref13$title;
+  var _ref14 = articleTitle || {},
+    _ref14$body = _ref14.body,
+    titleBody = _ref14$body === void 0 ? null : _ref14$body;
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, values, {
-    hasArticle: finalUrl !== null && article !== null
+    hasArticle: titleBody !== null
   }));
 };
 UrbaniaLoader.propTypes = propTypes$1;
@@ -836,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,
@@ -904,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;
@@ -937,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 () {};
@@ -980,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();
       }
     }
@@ -1042,7 +1020,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }
   });
   var _useResizeObserver = useResizeObserver({
-      disabled: !articleOpened
+      disabled: !webviewOpened
     }),
     articlePreviewRef = _useResizeObserver.ref,
     _useResizeObserver$en = _useResizeObserver.entry.contentRect,
@@ -1050,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({
@@ -1064,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,
@@ -1079,21 +1049,18 @@ 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);
       setControlsSuggestPlay(true);
     }
   }, [isView, current, playing, isBackgroundVideo, setPlaying, setControlsSuggestPlay]);
-  console.log('hasUrl, hasArticle', hasUrl, hasArticle);
   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,
@@ -1167,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: [{
@@ -1175,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", {
@@ -1185,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", {
@@ -1207,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.743",
+    "version": "0.3.745",
     "private": false,
     "description": "",
     "keywords": [
@@ -90,5 +90,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "d6e73828c6a6218357c64a49b56ff7a0e6be885b"
+    "gitHead": "6b12b65d4e32b0e3ab33586373176589a6d7d27e"
 }