@micromag/screen-urbania-recommendation 0.3.372 → 0.3.377

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +291 -90
  3. package/lib/index.js +288 -85
  4. package/package.json +14 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{padding:10px;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-headerContainer.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-callToAction.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;animation:micromag-screen-urbania-recommendation-appear 1s ease-in-out;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{left:0;top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);width:20%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{padding:14px 8px 14px 0;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}66%{opacity:0}to{opacity:1}}
1
+ .micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText{color:#f28d77;font-family:Agrandir,sans-serif;font-size:100px;font-style:italic;font-weight:900;height:100%;line-height:.9;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);white-space:nowrap;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-didAnimate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromBottom{-webkit-animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(100%) rotate(180deg);-ms-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromTop{-webkit-animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);-ms-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{height:20%;left:10px;padding:10px;position:absolute;top:calc(100% - 24px);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close{color:#000;position:absolute;right:10px;top:10px;z-index:3}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:0 auto;-webkit-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;-o-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard .micromag-screen-urbania-recommendation-visualContainer{border-top-left-radius:10px;border-top-right-radius:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:0;border-top-right-radius:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-modalOpened{height:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer.micromag-screen-urbania-recommendation-modalOpened{border-radius:0;overflow:auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background-color:rgba(34,34,34,0);height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper.micromag-screen-urbania-recommendation-modalOpened{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);display:-ms-flexbox;display:flex;justify-content:center;left:50%;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);-o-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);z-index:2}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-transitioning{-webkit-transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);-o-transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56),-webkit-transform .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryContainer{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;top:100%;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{margin-left:auto;padding:14px 8px 14px 0;position:relative;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}
package/es/index.js CHANGED
@@ -1,15 +1,17 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
+ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
2
3
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
5
  import classNames from 'classnames';
5
6
  import PropTypes$1 from 'prop-types';
6
- import React, { useState, useEffect, useCallback } from 'react';
7
+ import React, { useState, useMemo, useEffect, useCallback } from 'react';
7
8
  import { PropTypes } from '@micromag/core';
8
- import { ScreenElement, PlaceholderText, PlaceholderImage, PlaceholderTitle } from '@micromag/core/components';
9
- import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
- import { useTrackScreenEvent } from '@micromag/core/hooks';
11
- import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
9
+ import { Close, ScreenElement, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
10
+ import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext, useViewerContainer } from '@micromag/core/contexts';
11
+ import { useTrackScreenEvent, useResizeObserver, useActivityDetector, useDebounce } from '@micromag/core/hooks';
12
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText } from '@micromag/core/utils';
12
13
  import Background from '@micromag/element-background';
14
+ import Button from '@micromag/element-button';
13
15
  import Container from '@micromag/element-container';
14
16
  import Footer from '@micromag/element-footer';
15
17
  import Header from '@micromag/element-header';
@@ -19,7 +21,7 @@ import Scroll from '@micromag/element-scroll';
19
21
  import Text from '@micromag/element-text';
20
22
  import Visual from '@micromag/element-visual';
21
23
 
22
- var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","headerContainer":"micromag-screen-urbania-recommendation-headerContainer","appear":"micromag-screen-urbania-recommendation-appear","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
24
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
23
25
 
24
26
  var propTypes = {
25
27
  category: PropTypes.headingElement,
@@ -57,7 +59,7 @@ var defaultProps = {
57
59
  className: null
58
60
  };
59
61
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
60
- var _ref5, _ref9;
62
+ var _ref8, _ref9;
61
63
  var category = _ref.category,
62
64
  visual = _ref.visual,
63
65
  title = _ref.title,
@@ -84,8 +86,16 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
84
86
  var _useViewerWebView = useViewerWebView(),
85
87
  openWebView = _useViewerWebView.open;
86
88
  var _usePlaybackContext = usePlaybackContext(),
87
- muted = _usePlaybackContext.muted;
89
+ playing = _usePlaybackContext.playing,
90
+ setPlaying = _usePlaybackContext.setPlaying,
91
+ muted = _usePlaybackContext.muted,
92
+ setControls = _usePlaybackContext.setControls,
93
+ showControls = _usePlaybackContext.showControls,
94
+ hideControls = _usePlaybackContext.hideControls;
88
95
  var mediaRef = usePlaybackMediaRef(current);
96
+ var _useViewerInteraction = useViewerInteraction(),
97
+ enableInteraction = _useViewerInteraction.enableInteraction,
98
+ disableInteraction = _useViewerInteraction.disableInteraction;
89
99
  var _useScreenRenderConte = useScreenRenderContext(),
90
100
  isView = _useScreenRenderConte.isView,
91
101
  isPreview = _useScreenRenderConte.isPreview,
@@ -95,8 +105,12 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
95
105
  var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
96
106
  var _useState = useState(animateBackground),
97
107
  _useState2 = _slicedToArray(_useState, 2),
98
- animationStarted = _useState2[0],
99
- setAnimationStarted = _useState2[1];
108
+ backgroundAnimationStarted = _useState2[0],
109
+ setBackgroundAnimationStarted = _useState2[1];
110
+ var _useState3 = useState(false),
111
+ _useState4 = _slicedToArray(_useState3, 2),
112
+ didAnimate = _useState4[0],
113
+ setDidAnimate = _useState4[1];
100
114
  var _ref2 = visual || {},
101
115
  _ref2$image = _ref2.image,
102
116
  image = _ref2$image === void 0 ? null : _ref2$image,
@@ -115,6 +129,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
115
129
  var hasSponsor = isTextFilled(sponsor);
116
130
  var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
117
131
  var backgroundPlaying = current && (isView || isEdit);
132
+ var videoPlaying = current && (isView || isEdit) && playing;
118
133
  var mediaShouldLoad = current || active;
119
134
  var scrollingDisabled = !isView && !isEdit || !current;
120
135
  var hasHeader = isHeaderFilled(header);
@@ -125,33 +140,84 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
125
140
  openWebView: openWebView,
126
141
  isPreview: isPreview
127
142
  });
128
- var _useState3 = useState(false),
129
- _useState4 = _slicedToArray(_useState3, 2),
130
- scrolledBottom = _useState4[0],
131
- setScrolledBottom = _useState4[1];
143
+ var _useState5 = useState(false),
144
+ _useState6 = _slicedToArray(_useState5, 2),
145
+ scrolledBottom = _useState6[0],
146
+ setScrolledBottom = _useState6[1];
147
+ var _useResizeObserver = useResizeObserver(),
148
+ textContainerRef = _useResizeObserver.ref,
149
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
150
+ textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
151
+ var _ref4 = textContainerRect || {},
152
+ _ref4$width = _ref4.width,
153
+ textContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width,
154
+ _ref4$height = _ref4.height,
155
+ textContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
156
+ var _useResizeObserver2 = useResizeObserver(),
157
+ visualWrapperRef = _useResizeObserver2.ref;
158
+ // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
159
+ // visualWrapperRect || {};
160
+
161
+ var _useState7 = useState(false),
162
+ _useState8 = _slicedToArray(_useState7, 2),
163
+ visualModalTransitioning = _useState8[0],
164
+ setVisualModalTransitioning = _useState8[1];
165
+ var _useState9 = useState(false),
166
+ _useState10 = _slicedToArray(_useState9, 2),
167
+ visualModalOpened = _useState10[0],
168
+ setVisualModalOpened = _useState10[1];
169
+ var _ref5 = background || {},
170
+ _ref5$text = _ref5.text,
171
+ backgroundText = _ref5$text === void 0 ? null : _ref5$text;
172
+ var _ref6 = backgroundText || {},
173
+ _ref6$body = _ref6.body,
174
+ backgroundTextBody = _ref6$body === void 0 ? null : _ref6$body,
175
+ backgroundTextStyle = _ref6.textStyle;
176
+ var finalBackgroundText = useMemo(function () {
177
+ function distributeTextEqually(text) {
178
+ var words = text !== null ? text.split(' ') : [];
179
+ var numRows = 4;
180
+ if (words.length < numRows / 2) {
181
+ return Array(numRows).fill(text);
182
+ }
183
+ var halfNumWords = Math.ceil(words.length / 2);
184
+ var firstHalf = words.slice(0, halfNumWords).join(' ');
185
+ var secondHalf = words.slice(halfNumWords).join(' ');
186
+ return [firstHalf, secondHalf, firstHalf, secondHalf];
187
+ }
188
+ var textArray = distributeTextEqually(backgroundTextBody);
132
189
 
133
- // const [visualModalOpened, setVisualModalOpened] = useState(false);
190
+ // @TODO: move container div here to avoid double map
191
+ var textElements = (textArray || []).map(function (line) {
192
+ return /*#__PURE__*/React.createElement("span", null, line);
193
+ });
194
+ return textElements;
195
+ }, [backgroundTextBody]);
134
196
 
197
+ // intro animation
135
198
  useEffect(function () {
136
199
  var id = null;
137
- if (animationStarted) {
200
+ if (backgroundAnimationStarted) {
138
201
  id = setTimeout(function () {
139
- setAnimationStarted(false);
140
- }, 1500);
202
+ setBackgroundAnimationStarted(false);
203
+ setDidAnimate(true);
204
+ }, 1600);
141
205
  }
142
206
  return function () {
143
207
  clearTimeout(id);
144
208
  };
145
- }, [animationStarted, animateBackground, setAnimationStarted]);
209
+ }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
146
210
  useEffect(function () {
147
- if (isView && current) {
148
- setAnimationStarted(true);
211
+ if (isView && !isStatic && current) {
212
+ setBackgroundAnimationStarted(true);
149
213
  } else {
150
- setAnimationStarted(false);
214
+ setBackgroundAnimationStarted(false);
151
215
  }
152
- }, [isView, current, setAnimationStarted]);
153
- var onScrolledBottom = useCallback(function (_ref4) {
154
- var initial = _ref4.initial;
216
+ }, [isView, current, setBackgroundAnimationStarted]);
217
+
218
+ // scroll events
219
+ var onScrolledBottom = useCallback(function (_ref7) {
220
+ var initial = _ref7.initial;
155
221
  if (initial) {
156
222
  trackScreenEvent('scroll', 'Screen');
157
223
  }
@@ -161,29 +227,135 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
161
227
  setScrolledBottom(false);
162
228
  }, [setScrolledBottom]);
163
229
 
164
- // Create elements
165
- var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
230
+ // modal
231
+ useEffect(function () {
232
+ var id = null;
233
+ if (visualModalTransitioning) {
234
+ id = setTimeout(function () {
235
+ setVisualModalTransitioning(false);
236
+ setVisualModalOpened(true);
237
+ }, 400);
238
+ }
239
+ return function () {
240
+ clearTimeout(id);
241
+ };
242
+ }, [visualModalTransitioning, setVisualModalTransitioning]);
243
+ var onClickVisual = useCallback(function () {
244
+ if (!visualModalOpened) {
245
+ setVisualModalTransitioning(true);
246
+ }
247
+ }, [setVisualModalOpened]);
248
+ var onCloseModal = useCallback(function () {
249
+ if (visualModalTransitioning) {
250
+ setVisualModalTransitioning(false);
251
+ }
252
+ setVisualModalOpened(false);
253
+ }, [setVisualModalOpened]);
254
+ useEffect(function () {
255
+ if (visualModalOpened) {
256
+ disableInteraction();
257
+ } else {
258
+ enableInteraction();
259
+ }
260
+ }, [visualModalOpened]);
261
+ useEffect(function () {
262
+ var keyup = function keyup(e) {
263
+ if (e.key === 'Escape') {
264
+ if (visualModalOpened) {
265
+ onCloseModal();
266
+ }
267
+ }
268
+ };
269
+ document.addEventListener('keyup', keyup);
270
+ return function () {
271
+ document.removeEventListener('keyup', keyup);
272
+ };
273
+ }, [visualModalOpened, onCloseModal]);
274
+
275
+ // Modal video
276
+
277
+ useEffect(function () {
278
+ if (current && !backgroundAnimationStarted) {
279
+ setPlaying(true);
280
+ }
281
+ }, [current, backgroundAnimationStarted]);
282
+ useEffect(function () {
283
+ if (!current) {
284
+ return function () {};
285
+ }
286
+ if (visualModalOpened && isVideo) {
287
+ setControls(true);
288
+ } else {
289
+ setControls(false);
290
+ }
291
+ return function () {
292
+ if (visualModalOpened) {
293
+ setControls(false);
294
+ }
295
+ };
296
+ }, [current, setControls, visualModalOpened, isVideo]);
297
+ var viewerContainer = useViewerContainer();
298
+ var _useActivityDetector = useActivityDetector({
299
+ element: viewerContainer,
300
+ disabled: !isView,
301
+ timeout: 2000
302
+ }),
303
+ activityDetected = _useActivityDetector.detected;
304
+ var toggleControlsVisibility = useCallback(function () {
305
+ if (activityDetected && isVideo && visualModalOpened) {
306
+ showControls();
307
+ } else {
308
+ hideControls();
309
+ }
310
+ }, [activityDetected, showControls, isVideo, hideControls]);
311
+ useDebounce(toggleControlsVisibility, activityDetected, 1000);
312
+ return /*#__PURE__*/React.createElement("div", {
313
+ className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
314
+ "data-screen-ready": true
315
+ }, /*#__PURE__*/React.createElement(Container, {
316
+ width: width,
317
+ height: height,
318
+ className: styles.content
319
+ }, /*#__PURE__*/React.createElement(Scroll, {
320
+ width: width,
321
+ height: height,
322
+ disabled: backgroundAnimationStarted || scrollingDisabled,
323
+ onScrolledBottom: onScrolledBottom,
324
+ onScrolledNotBottom: onScrolledNotBottom,
325
+ verticalAlign: "middle",
326
+ withShadow: !visualModalOpened,
327
+ withArrow: !visualModalOpened
328
+ }, /*#__PURE__*/React.createElement(Layout, {
329
+ className: styles.layout,
330
+ width: width
331
+ // height={height}
332
+ ,
333
+ style: !isPlaceholder ? {
334
+ padding: spacing,
335
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
336
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
337
+ minHeight: height // probably not the best
338
+ } : null
339
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
166
340
  key: "header",
167
341
  style: {
168
342
  paddingBottom: spacing
169
343
  },
170
344
  className: classNames([styles.headerContainer
171
- // { [styles.appear]: animationStarted },
345
+ // { [styles.appear]: backgroundAnimationStarted },
172
346
  ])
173
347
  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
174
348
  key: "spacer-cta-top"
175
- }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
176
- className: classNames([styles.textCard, (_ref5 = {}, _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref5, styles.appear, animationStarted), _ref5)])
349
+ }) : null, visualModalOpened ? /*#__PURE__*/React.createElement(Button, {
350
+ className: styles.close,
351
+ onClick: onCloseModal
352
+ }, /*#__PURE__*/React.createElement(Close, {
353
+ className: styles.closeIcon
354
+ })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
355
+ className: classNames([styles.textCard, (_ref9 = {}, _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref9, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref9, styles.appear, backgroundAnimationStarted), _defineProperty(_ref9, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref9, styles.hidden, !current), _ref9)])
177
356
  }, /*#__PURE__*/React.createElement("div", {
178
- className: styles.visualContainer
357
+ className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
179
358
  }, /*#__PURE__*/React.createElement(ScreenElement, {
180
- key: "sponsor",
181
- placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
182
- className: styles.sponsorPlaceholder
183
- })
184
- }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
185
- className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
186
- }, sponsor)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
187
359
  key: "visual",
188
360
  placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
189
361
  className: styles.visualPlaceholder
@@ -197,31 +369,72 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
197
369
  }),
198
370
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
199
371
  isEmpty: !hasVisual
200
- }, hasVisual && !isVideo ?
201
- /*#__PURE__*/
202
- // <div className={styles.visualWrapper}>
203
- React.createElement(Visual, {
372
+ }, hasVisual && !isVideo ? /*#__PURE__*/React.createElement("div", {
373
+ ref: visualWrapperRef,
374
+ className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
375
+ style: visualModalTransitioning || visualModalOpened ? {
376
+ width: width,
377
+ height: height
378
+ } : {
379
+ width: textContainerWidth,
380
+ height: 'auto'
381
+ }
382
+ }, /*#__PURE__*/React.createElement(Button, {
383
+ className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
384
+ onClick: onClickVisual,
385
+ disabled: backgroundAnimationStarted || visualModalOpened,
386
+ style: {
387
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
388
+ }
389
+ }, /*#__PURE__*/React.createElement(Visual, {
390
+ className: styles.visual,
204
391
  imageClassName: styles.visual,
205
392
  media: image,
206
- width: "100%",
393
+ width: visualModalOpened ? width : textContainerWidth,
207
394
  resolution: resolution,
208
395
  active: active,
209
396
  shouldLoad: mediaShouldLoad
210
- }) :
211
- // </div>
212
- null, hasVisual && isVideo ? /*#__PURE__*/React.createElement(Visual, {
397
+ }))) : null, hasVisual && isVideo ? /*#__PURE__*/React.createElement("div", {
398
+ ref: visualWrapperRef,
399
+ className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
400
+ style: visualModalTransitioning || visualModalOpened ? {
401
+ width: width,
402
+ height: height
403
+ } : {
404
+ width: textContainerWidth,
405
+ height: 'auto'
406
+ }
407
+ }, /*#__PURE__*/React.createElement(Button, {
408
+ className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
409
+ onClick: onClickVisual,
410
+ disabled: backgroundAnimationStarted || visualModalOpened,
411
+ style: {
412
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
413
+ }
414
+ }, /*#__PURE__*/React.createElement(Visual, {
415
+ videoClassName: styles.videoVisual,
213
416
  media: image,
214
- width: width * 0.9,
215
- height: 250,
417
+ mediaRef: mediaRef,
418
+ width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
419
+ ,
420
+ height: visualModalOpened ? height : 250,
216
421
  resolution: resolution,
217
422
  objectFit: {
218
423
  fit: 'cover'
219
424
  },
220
425
  shouldLoad: mediaShouldLoad,
221
- muted: true,
426
+ muted: muted || !visualModalOpened,
222
427
  withoutVideo: isPreview,
223
- autoPlay: true
224
- }) : null)), /*#__PURE__*/React.createElement("div", {
428
+ playing: videoPlaying
429
+ }))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
430
+ key: "sponsor",
431
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
432
+ className: styles.sponsorPlaceholder
433
+ })
434
+ }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
435
+ className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
436
+ }, sponsor)) : null)), /*#__PURE__*/React.createElement("div", {
437
+ ref: textContainerRef,
225
438
  className: styles.text
226
439
  }, /*#__PURE__*/React.createElement(ScreenElement, {
227
440
  key: "category",
@@ -237,9 +450,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
237
450
  }),
238
451
  emptyClassName: styles.emptyCategory,
239
452
  isEmpty: !hasCategory
240
- }, hasCategory ? /*#__PURE__*/React.createElement(Heading, Object.assign({
453
+ }, hasCategory ? /*#__PURE__*/React.createElement("div", {
454
+ className: styles.categoryContainer,
455
+ style: {
456
+ width: textContainerHeight
457
+ }
458
+ }, /*#__PURE__*/React.createElement(Heading, Object.assign({
241
459
  className: styles.category
242
- }, category)) : null), /*#__PURE__*/React.createElement("div", {
460
+ }, category))) : null), /*#__PURE__*/React.createElement("div", {
243
461
  className: classNames([styles.textContent, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
244
462
  }, /*#__PURE__*/React.createElement(ScreenElement, {
245
463
  key: "title",
@@ -290,54 +508,37 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
290
508
  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
291
509
  key: "spacer-cta-bottom"
292
510
  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
293
- key: "call-to-action",
294
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
511
+ key: "footer",
512
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
295
513
  style: {
296
514
  paddingTop: spacing,
297
515
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
298
516
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
299
517
  }
300
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null].filter(function (el) {
301
- return el !== null;
302
- });
303
- return /*#__PURE__*/React.createElement("div", {
304
- className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
305
- "data-screen-ready": true
306
- }, /*#__PURE__*/React.createElement(Container, {
307
- width: width,
308
- height: height,
309
- className: styles.content
310
- }, /*#__PURE__*/React.createElement(Scroll, {
311
- width: width,
312
- height: height,
313
- disabled: animationStarted || scrollingDisabled,
314
- onScrolledBottom: onScrolledBottom,
315
- onScrolledNotBottom: onScrolledNotBottom,
316
- verticalAlign: "middle",
317
- withShadow: true
318
- }, /*#__PURE__*/React.createElement(Layout, {
319
- className: styles.layout,
320
- width: width
321
- // height={height}
322
- ,
323
- style: !isPlaceholder ? {
324
- padding: spacing,
325
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
326
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
327
- minHeight: height // probably not the best
328
- } : null
329
- }, items))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
518
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Background, {
330
519
  background: background,
331
520
  width: width,
332
521
  height: height,
333
522
  resolution: resolution,
334
- playing: backgroundPlaying,
335
- muted: muted,
523
+ playing: backgroundPlaying && !visualModalOpened,
524
+ muted: muted || visualModalOpened,
336
525
  shouldLoad: mediaShouldLoad,
337
- mediaRef: mediaRef,
338
526
  withoutVideo: isPreview,
339
527
  className: styles.background
340
- }) : null);
528
+ }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React.createElement(Container, {
529
+ width: width,
530
+ height: height,
531
+ className: styles.backgroundTextContainer
532
+ }, (finalBackgroundText || []).map(function (line, i) {
533
+ var _classNames;
534
+ return /*#__PURE__*/React.createElement("div", {
535
+ key: "background-text-".concat(line),
536
+ className: classNames([styles.backgroundText], (_classNames = {}, _defineProperty(_classNames, styles.didAnimate, didAnimate), _defineProperty(_classNames, styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), _defineProperty(_classNames, styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0), _classNames)),
537
+ style: _objectSpread({
538
+ animationDelay: "".concat(i * 100, "ms")
539
+ }, getStyleFromText(backgroundTextStyle))
540
+ }, line);
541
+ })) : null) : null);
341
542
  };
342
543
  UrbaniaRecommendation.propTypes = propTypes;
343
544
  UrbaniaRecommendation.defaultProps = defaultProps;
@@ -462,7 +663,7 @@ var definition = [{
462
663
  })
463
664
  }, {
464
665
  name: 'background',
465
- type: 'background',
666
+ type: 'background-recommendation',
466
667
  label: defineMessage({
467
668
  id: "+MPZRu",
468
669
  defaultMessage: [{
package/lib/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactIntl = require('react-intl');
6
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
7
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
9
  var classNames = require('classnames');
@@ -14,6 +15,7 @@ var contexts = require('@micromag/core/contexts');
14
15
  var hooks = require('@micromag/core/hooks');
15
16
  var utils = require('@micromag/core/utils');
16
17
  var Background = require('@micromag/element-background');
18
+ var Button = require('@micromag/element-button');
17
19
  var Container = require('@micromag/element-container');
18
20
  var Footer = require('@micromag/element-footer');
19
21
  var Header = require('@micromag/element-header');
@@ -25,12 +27,14 @@ var Visual = require('@micromag/element-visual');
25
27
 
26
28
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
27
29
 
30
+ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
28
31
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
29
32
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
30
33
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
31
34
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
32
35
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
33
36
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
37
+ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
34
38
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
35
39
  var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
36
40
  var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
@@ -40,7 +44,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
40
44
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
41
45
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
42
46
 
43
- var styles = {"container":"micromag-screen-urbania-recommendation-container","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","headerContainer":"micromag-screen-urbania-recommendation-headerContainer","appear":"micromag-screen-urbania-recommendation-appear","callToAction":"micromag-screen-urbania-recommendation-callToAction","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","text":"micromag-screen-urbania-recommendation-text","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
47
+ var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
44
48
 
45
49
  var propTypes = {
46
50
  category: core.PropTypes.headingElement,
@@ -78,7 +82,7 @@ var defaultProps = {
78
82
  className: null
79
83
  };
80
84
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
81
- var _ref5, _ref9;
85
+ var _ref8, _ref9;
82
86
  var category = _ref.category,
83
87
  visual = _ref.visual,
84
88
  title = _ref.title,
@@ -105,8 +109,16 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
105
109
  var _useViewerWebView = contexts.useViewerWebView(),
106
110
  openWebView = _useViewerWebView.open;
107
111
  var _usePlaybackContext = contexts.usePlaybackContext(),
108
- muted = _usePlaybackContext.muted;
112
+ playing = _usePlaybackContext.playing,
113
+ setPlaying = _usePlaybackContext.setPlaying,
114
+ muted = _usePlaybackContext.muted,
115
+ setControls = _usePlaybackContext.setControls,
116
+ showControls = _usePlaybackContext.showControls,
117
+ hideControls = _usePlaybackContext.hideControls;
109
118
  var mediaRef = contexts.usePlaybackMediaRef(current);
119
+ var _useViewerInteraction = contexts.useViewerInteraction(),
120
+ enableInteraction = _useViewerInteraction.enableInteraction,
121
+ disableInteraction = _useViewerInteraction.disableInteraction;
110
122
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
111
123
  isView = _useScreenRenderConte.isView,
112
124
  isPreview = _useScreenRenderConte.isPreview,
@@ -116,8 +128,12 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
116
128
  var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
117
129
  var _useState = React.useState(animateBackground),
118
130
  _useState2 = _slicedToArray__default["default"](_useState, 2),
119
- animationStarted = _useState2[0],
120
- setAnimationStarted = _useState2[1];
131
+ backgroundAnimationStarted = _useState2[0],
132
+ setBackgroundAnimationStarted = _useState2[1];
133
+ var _useState3 = React.useState(false),
134
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
135
+ didAnimate = _useState4[0],
136
+ setDidAnimate = _useState4[1];
121
137
  var _ref2 = visual || {},
122
138
  _ref2$image = _ref2.image,
123
139
  image = _ref2$image === void 0 ? null : _ref2$image,
@@ -136,6 +152,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
136
152
  var hasSponsor = utils.isTextFilled(sponsor);
137
153
  var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
138
154
  var backgroundPlaying = current && (isView || isEdit);
155
+ var videoPlaying = current && (isView || isEdit) && playing;
139
156
  var mediaShouldLoad = current || active;
140
157
  var scrollingDisabled = !isView && !isEdit || !current;
141
158
  var hasHeader = utils.isHeaderFilled(header);
@@ -146,33 +163,84 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
146
163
  openWebView: openWebView,
147
164
  isPreview: isPreview
148
165
  });
149
- var _useState3 = React.useState(false),
150
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
151
- scrolledBottom = _useState4[0],
152
- setScrolledBottom = _useState4[1];
166
+ var _useState5 = React.useState(false),
167
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
168
+ scrolledBottom = _useState6[0],
169
+ setScrolledBottom = _useState6[1];
170
+ var _useResizeObserver = hooks.useResizeObserver(),
171
+ textContainerRef = _useResizeObserver.ref,
172
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
173
+ textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
174
+ var _ref4 = textContainerRect || {},
175
+ _ref4$width = _ref4.width,
176
+ textContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width,
177
+ _ref4$height = _ref4.height,
178
+ textContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
179
+ var _useResizeObserver2 = hooks.useResizeObserver(),
180
+ visualWrapperRef = _useResizeObserver2.ref;
181
+ // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
182
+ // visualWrapperRect || {};
183
+
184
+ var _useState7 = React.useState(false),
185
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
186
+ visualModalTransitioning = _useState8[0],
187
+ setVisualModalTransitioning = _useState8[1];
188
+ var _useState9 = React.useState(false),
189
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
190
+ visualModalOpened = _useState10[0],
191
+ setVisualModalOpened = _useState10[1];
192
+ var _ref5 = background || {},
193
+ _ref5$text = _ref5.text,
194
+ backgroundText = _ref5$text === void 0 ? null : _ref5$text;
195
+ var _ref6 = backgroundText || {},
196
+ _ref6$body = _ref6.body,
197
+ backgroundTextBody = _ref6$body === void 0 ? null : _ref6$body,
198
+ backgroundTextStyle = _ref6.textStyle;
199
+ var finalBackgroundText = React.useMemo(function () {
200
+ function distributeTextEqually(text) {
201
+ var words = text !== null ? text.split(' ') : [];
202
+ var numRows = 4;
203
+ if (words.length < numRows / 2) {
204
+ return Array(numRows).fill(text);
205
+ }
206
+ var halfNumWords = Math.ceil(words.length / 2);
207
+ var firstHalf = words.slice(0, halfNumWords).join(' ');
208
+ var secondHalf = words.slice(halfNumWords).join(' ');
209
+ return [firstHalf, secondHalf, firstHalf, secondHalf];
210
+ }
211
+ var textArray = distributeTextEqually(backgroundTextBody);
153
212
 
154
- // const [visualModalOpened, setVisualModalOpened] = useState(false);
213
+ // @TODO: move container div here to avoid double map
214
+ var textElements = (textArray || []).map(function (line) {
215
+ return /*#__PURE__*/React__default["default"].createElement("span", null, line);
216
+ });
217
+ return textElements;
218
+ }, [backgroundTextBody]);
155
219
 
220
+ // intro animation
156
221
  React.useEffect(function () {
157
222
  var id = null;
158
- if (animationStarted) {
223
+ if (backgroundAnimationStarted) {
159
224
  id = setTimeout(function () {
160
- setAnimationStarted(false);
161
- }, 1500);
225
+ setBackgroundAnimationStarted(false);
226
+ setDidAnimate(true);
227
+ }, 1600);
162
228
  }
163
229
  return function () {
164
230
  clearTimeout(id);
165
231
  };
166
- }, [animationStarted, animateBackground, setAnimationStarted]);
232
+ }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
167
233
  React.useEffect(function () {
168
- if (isView && current) {
169
- setAnimationStarted(true);
234
+ if (isView && !isStatic && current) {
235
+ setBackgroundAnimationStarted(true);
170
236
  } else {
171
- setAnimationStarted(false);
237
+ setBackgroundAnimationStarted(false);
172
238
  }
173
- }, [isView, current, setAnimationStarted]);
174
- var onScrolledBottom = React.useCallback(function (_ref4) {
175
- var initial = _ref4.initial;
239
+ }, [isView, current, setBackgroundAnimationStarted]);
240
+
241
+ // scroll events
242
+ var onScrolledBottom = React.useCallback(function (_ref7) {
243
+ var initial = _ref7.initial;
176
244
  if (initial) {
177
245
  trackScreenEvent('scroll', 'Screen');
178
246
  }
@@ -182,29 +250,135 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
182
250
  setScrolledBottom(false);
183
251
  }, [setScrolledBottom]);
184
252
 
185
- // Create elements
186
- var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
253
+ // modal
254
+ React.useEffect(function () {
255
+ var id = null;
256
+ if (visualModalTransitioning) {
257
+ id = setTimeout(function () {
258
+ setVisualModalTransitioning(false);
259
+ setVisualModalOpened(true);
260
+ }, 400);
261
+ }
262
+ return function () {
263
+ clearTimeout(id);
264
+ };
265
+ }, [visualModalTransitioning, setVisualModalTransitioning]);
266
+ var onClickVisual = React.useCallback(function () {
267
+ if (!visualModalOpened) {
268
+ setVisualModalTransitioning(true);
269
+ }
270
+ }, [setVisualModalOpened]);
271
+ var onCloseModal = React.useCallback(function () {
272
+ if (visualModalTransitioning) {
273
+ setVisualModalTransitioning(false);
274
+ }
275
+ setVisualModalOpened(false);
276
+ }, [setVisualModalOpened]);
277
+ React.useEffect(function () {
278
+ if (visualModalOpened) {
279
+ disableInteraction();
280
+ } else {
281
+ enableInteraction();
282
+ }
283
+ }, [visualModalOpened]);
284
+ React.useEffect(function () {
285
+ var keyup = function keyup(e) {
286
+ if (e.key === 'Escape') {
287
+ if (visualModalOpened) {
288
+ onCloseModal();
289
+ }
290
+ }
291
+ };
292
+ document.addEventListener('keyup', keyup);
293
+ return function () {
294
+ document.removeEventListener('keyup', keyup);
295
+ };
296
+ }, [visualModalOpened, onCloseModal]);
297
+
298
+ // Modal video
299
+
300
+ React.useEffect(function () {
301
+ if (current && !backgroundAnimationStarted) {
302
+ setPlaying(true);
303
+ }
304
+ }, [current, backgroundAnimationStarted]);
305
+ React.useEffect(function () {
306
+ if (!current) {
307
+ return function () {};
308
+ }
309
+ if (visualModalOpened && isVideo) {
310
+ setControls(true);
311
+ } else {
312
+ setControls(false);
313
+ }
314
+ return function () {
315
+ if (visualModalOpened) {
316
+ setControls(false);
317
+ }
318
+ };
319
+ }, [current, setControls, visualModalOpened, isVideo]);
320
+ var viewerContainer = contexts.useViewerContainer();
321
+ var _useActivityDetector = hooks.useActivityDetector({
322
+ element: viewerContainer,
323
+ disabled: !isView,
324
+ timeout: 2000
325
+ }),
326
+ activityDetected = _useActivityDetector.detected;
327
+ var toggleControlsVisibility = React.useCallback(function () {
328
+ if (activityDetected && isVideo && visualModalOpened) {
329
+ showControls();
330
+ } else {
331
+ hideControls();
332
+ }
333
+ }, [activityDetected, showControls, isVideo, hideControls]);
334
+ hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
335
+ return /*#__PURE__*/React__default["default"].createElement("div", {
336
+ className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
337
+ "data-screen-ready": true
338
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
339
+ width: width,
340
+ height: height,
341
+ className: styles.content
342
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
343
+ width: width,
344
+ height: height,
345
+ disabled: backgroundAnimationStarted || scrollingDisabled,
346
+ onScrolledBottom: onScrolledBottom,
347
+ onScrolledNotBottom: onScrolledNotBottom,
348
+ verticalAlign: "middle",
349
+ withShadow: !visualModalOpened,
350
+ withArrow: !visualModalOpened
351
+ }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
352
+ className: styles.layout,
353
+ width: width
354
+ // height={height}
355
+ ,
356
+ style: !isPlaceholder ? {
357
+ padding: spacing,
358
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
359
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
360
+ minHeight: height // probably not the best
361
+ } : null
362
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
187
363
  key: "header",
188
364
  style: {
189
365
  paddingBottom: spacing
190
366
  },
191
367
  className: classNames__default["default"]([styles.headerContainer
192
- // { [styles.appear]: animationStarted },
368
+ // { [styles.appear]: backgroundAnimationStarted },
193
369
  ])
194
370
  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
195
371
  key: "spacer-cta-top"
196
- }) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
197
- className: classNames__default["default"]([styles.textCard, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref5, styles.appear, animationStarted), _ref5)])
372
+ }) : null, visualModalOpened ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
373
+ className: styles.close,
374
+ onClick: onCloseModal
375
+ }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
376
+ className: styles.closeIcon
377
+ })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
378
+ className: classNames__default["default"]([styles.textCard, (_ref9 = {}, _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref9, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref9, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref9, styles.hidden, !current), _ref9)])
198
379
  }, /*#__PURE__*/React__default["default"].createElement("div", {
199
- className: styles.visualContainer
380
+ className: classNames__default["default"]([styles.visualContainer, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
200
381
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
201
- key: "sponsor",
202
- placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
203
- className: styles.sponsorPlaceholder
204
- })
205
- }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
206
- className: classNames__default["default"]([styles.sponsor, _defineProperty__default["default"]({}, styles.hasVisual, hasVisual)])
207
- }, sponsor)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
208
382
  key: "visual",
209
383
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
210
384
  className: styles.visualPlaceholder
@@ -218,31 +392,72 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
218
392
  }),
219
393
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
220
394
  isEmpty: !hasVisual
221
- }, hasVisual && !isVideo ?
222
- /*#__PURE__*/
223
- // <div className={styles.visualWrapper}>
224
- React__default["default"].createElement(Visual__default["default"], {
395
+ }, hasVisual && !isVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
396
+ ref: visualWrapperRef,
397
+ className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
398
+ style: visualModalTransitioning || visualModalOpened ? {
399
+ width: width,
400
+ height: height
401
+ } : {
402
+ width: textContainerWidth,
403
+ height: 'auto'
404
+ }
405
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
406
+ className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
407
+ onClick: onClickVisual,
408
+ disabled: backgroundAnimationStarted || visualModalOpened,
409
+ style: {
410
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
411
+ }
412
+ }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
413
+ className: styles.visual,
225
414
  imageClassName: styles.visual,
226
415
  media: image,
227
- width: "100%",
416
+ width: visualModalOpened ? width : textContainerWidth,
228
417
  resolution: resolution,
229
418
  active: active,
230
419
  shouldLoad: mediaShouldLoad
231
- }) :
232
- // </div>
233
- null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
420
+ }))) : null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
421
+ ref: visualWrapperRef,
422
+ className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
423
+ style: visualModalTransitioning || visualModalOpened ? {
424
+ width: width,
425
+ height: height
426
+ } : {
427
+ width: textContainerWidth,
428
+ height: 'auto'
429
+ }
430
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
431
+ className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
432
+ onClick: onClickVisual,
433
+ disabled: backgroundAnimationStarted || visualModalOpened,
434
+ style: {
435
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
436
+ }
437
+ }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
438
+ videoClassName: styles.videoVisual,
234
439
  media: image,
235
- width: width * 0.9,
236
- height: 250,
440
+ mediaRef: mediaRef,
441
+ width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
442
+ ,
443
+ height: visualModalOpened ? height : 250,
237
444
  resolution: resolution,
238
445
  objectFit: {
239
446
  fit: 'cover'
240
447
  },
241
448
  shouldLoad: mediaShouldLoad,
242
- muted: true,
449
+ muted: muted || !visualModalOpened,
243
450
  withoutVideo: isPreview,
244
- autoPlay: true
245
- }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
451
+ playing: videoPlaying
452
+ }))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
453
+ key: "sponsor",
454
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
455
+ className: styles.sponsorPlaceholder
456
+ })
457
+ }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
458
+ className: classNames__default["default"]([styles.sponsor, _defineProperty__default["default"]({}, styles.hasVisual, hasVisual)])
459
+ }, sponsor)) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
460
+ ref: textContainerRef,
246
461
  className: styles.text
247
462
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
248
463
  key: "category",
@@ -258,9 +473,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
258
473
  }),
259
474
  emptyClassName: styles.emptyCategory,
260
475
  isEmpty: !hasCategory
261
- }, hasCategory ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
476
+ }, hasCategory ? /*#__PURE__*/React__default["default"].createElement("div", {
477
+ className: styles.categoryContainer,
478
+ style: {
479
+ width: textContainerHeight
480
+ }
481
+ }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
262
482
  className: styles.category
263
- }, category)) : null), /*#__PURE__*/React__default["default"].createElement("div", {
483
+ }, category))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
264
484
  className: classNames__default["default"]([styles.textContent, _defineProperty__default["default"]({}, styles.isPlaceholder, isPlaceholder)])
265
485
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
266
486
  key: "title",
@@ -311,54 +531,37 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
311
531
  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
312
532
  key: "spacer-cta-bottom"
313
533
  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
314
- key: "call-to-action",
315
- className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
534
+ key: "footer",
535
+ className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
316
536
  style: {
317
537
  paddingTop: spacing,
318
538
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
319
539
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
320
540
  }
321
- }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null].filter(function (el) {
322
- return el !== null;
323
- });
324
- return /*#__PURE__*/React__default["default"].createElement("div", {
325
- className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
326
- "data-screen-ready": true
327
- }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
328
- width: width,
329
- height: height,
330
- className: styles.content
331
- }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
332
- width: width,
333
- height: height,
334
- disabled: animationStarted || scrollingDisabled,
335
- onScrolledBottom: onScrolledBottom,
336
- onScrolledNotBottom: onScrolledNotBottom,
337
- verticalAlign: "middle",
338
- withShadow: true
339
- }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
340
- className: styles.layout,
341
- width: width
342
- // height={height}
343
- ,
344
- style: !isPlaceholder ? {
345
- padding: spacing,
346
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
347
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
348
- minHeight: height // probably not the best
349
- } : null
350
- }, items))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
541
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
351
542
  background: background,
352
543
  width: width,
353
544
  height: height,
354
545
  resolution: resolution,
355
- playing: backgroundPlaying,
356
- muted: muted,
546
+ playing: backgroundPlaying && !visualModalOpened,
547
+ muted: muted || visualModalOpened,
357
548
  shouldLoad: mediaShouldLoad,
358
- mediaRef: mediaRef,
359
549
  withoutVideo: isPreview,
360
550
  className: styles.background
361
- }) : null);
551
+ }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
552
+ width: width,
553
+ height: height,
554
+ className: styles.backgroundTextContainer
555
+ }, (finalBackgroundText || []).map(function (line, i) {
556
+ var _classNames;
557
+ return /*#__PURE__*/React__default["default"].createElement("div", {
558
+ key: "background-text-".concat(line),
559
+ className: classNames__default["default"]([styles.backgroundText], (_classNames = {}, _defineProperty__default["default"](_classNames, styles.didAnimate, didAnimate), _defineProperty__default["default"](_classNames, styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), _defineProperty__default["default"](_classNames, styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0), _classNames)),
560
+ style: _objectSpread__default["default"]({
561
+ animationDelay: "".concat(i * 100, "ms")
562
+ }, utils.getStyleFromText(backgroundTextStyle))
563
+ }, line);
564
+ })) : null) : null);
362
565
  };
363
566
  UrbaniaRecommendation.propTypes = propTypes;
364
567
  UrbaniaRecommendation.defaultProps = defaultProps;
@@ -483,7 +686,7 @@ var definition = [{
483
686
  })
484
687
  }, {
485
688
  name: 'background',
486
- type: 'background',
689
+ type: 'background-recommendation',
487
690
  label: reactIntl.defineMessage({
488
691
  id: "+MPZRu",
489
692
  defaultMessage: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.3.372",
3
+ "version": "0.3.377",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,17 +49,18 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.371",
53
- "@micromag/element-background": "^0.3.371",
54
- "@micromag/element-container": "^0.3.371",
55
- "@micromag/element-footer": "^0.3.371",
56
- "@micromag/element-header": "^0.3.371",
57
- "@micromag/element-heading": "^0.3.371",
58
- "@micromag/element-layout": "^0.3.371",
59
- "@micromag/element-scroll": "^0.3.371",
60
- "@micromag/element-text": "^0.3.371",
61
- "@micromag/element-visual": "^0.3.371",
62
- "@micromag/transforms": "^0.3.371",
52
+ "@micromag/core": "^0.3.377",
53
+ "@micromag/element-background": "^0.3.377",
54
+ "@micromag/element-button": "^0.3.377",
55
+ "@micromag/element-container": "^0.3.377",
56
+ "@micromag/element-footer": "^0.3.377",
57
+ "@micromag/element-header": "^0.3.377",
58
+ "@micromag/element-heading": "^0.3.377",
59
+ "@micromag/element-layout": "^0.3.377",
60
+ "@micromag/element-scroll": "^0.3.377",
61
+ "@micromag/element-text": "^0.3.377",
62
+ "@micromag/element-visual": "^0.3.377",
63
+ "@micromag/transforms": "^0.3.377",
63
64
  "classnames": "^2.2.6",
64
65
  "lodash": "^4.17.21",
65
66
  "prop-types": "^15.7.2",
@@ -69,5 +70,5 @@
69
70
  "publishConfig": {
70
71
  "access": "public"
71
72
  },
72
- "gitHead": "1c5fdf91f25d8b7d17f765fb18092ab2d23e0ce7"
73
+ "gitHead": "80f2c43eabcb9c8e23e71704751c4ad4066e4d3a"
73
74
  }