@micromag/screen-urbania-recommendation 0.3.373 → 0.3.379

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 +299 -97
  3. package/lib/index.js +296 -92
  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-visualButton:hover{-webkit-filter:saturate(1.1);filter:saturate(1.1)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover>.micromag-screen-urbania-recommendation-iconContainer{opacity:.8;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:50%;bottom:10px;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);display:-ms-flexbox;display:flex;height:30px;justify-content:center;left:10px;pointer-events:none;position:absolute;-webkit-transition:all .1s;-o-transition:all .1s;transition:all .1s;width:30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer.micromag-screen-urbania-recommendation-visualBottom{bottom:25px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-icon{height:14px;width:14px}.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, MuteIcon, FullscreenIcon, 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","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","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 _ref9, _ref10;
61
63
  var category = _ref.category,
62
64
  visual = _ref.visual,
63
65
  title = _ref.title,
@@ -84,8 +86,17 @@ 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
+ setMuted = _usePlaybackContext.setMuted,
93
+ setControls = _usePlaybackContext.setControls,
94
+ showControls = _usePlaybackContext.showControls,
95
+ hideControls = _usePlaybackContext.hideControls;
88
96
  var mediaRef = usePlaybackMediaRef(current);
97
+ var _useViewerInteraction = useViewerInteraction(),
98
+ enableInteraction = _useViewerInteraction.enableInteraction,
99
+ disableInteraction = _useViewerInteraction.disableInteraction;
89
100
  var _useScreenRenderConte = useScreenRenderContext(),
90
101
  isView = _useScreenRenderConte.isView,
91
102
  isPreview = _useScreenRenderConte.isPreview,
@@ -95,8 +106,12 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
95
106
  var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
96
107
  var _useState = useState(animateBackground),
97
108
  _useState2 = _slicedToArray(_useState, 2),
98
- animationStarted = _useState2[0],
99
- setAnimationStarted = _useState2[1];
109
+ backgroundAnimationStarted = _useState2[0],
110
+ setBackgroundAnimationStarted = _useState2[1];
111
+ var _useState3 = useState(false),
112
+ _useState4 = _slicedToArray(_useState3, 2),
113
+ didAnimate = _useState4[0],
114
+ setDidAnimate = _useState4[1];
100
115
  var _ref2 = visual || {},
101
116
  _ref2$image = _ref2.image,
102
117
  image = _ref2$image === void 0 ? null : _ref2$image,
@@ -104,9 +119,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
104
119
  visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
105
120
  var _ref3 = image || {},
106
121
  _ref3$type = _ref3.type,
107
- type = _ref3$type === void 0 ? null : _ref3$type;
122
+ type = _ref3$type === void 0 ? null : _ref3$type,
123
+ _ref3$metadata = _ref3.metadata,
124
+ videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
125
+ var _ref4 = videoMetadata || {},
126
+ _ref4$width = _ref4.width,
127
+ videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
128
+ _ref4$height = _ref4.height,
129
+ videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
108
130
  var hasVisual = image !== null;
109
131
  var isVideo = type === 'video';
132
+ var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
110
133
  var hasCategory = isTextFilled(category);
111
134
  var hasTitle = isTextFilled(title);
112
135
  var hasDate = isTextFilled(date);
@@ -115,6 +138,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
115
138
  var hasSponsor = isTextFilled(sponsor);
116
139
  var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
117
140
  var backgroundPlaying = current && (isView || isEdit);
141
+ var videoPlaying = current && (isView || isEdit) && playing;
118
142
  var mediaShouldLoad = current || active;
119
143
  var scrollingDisabled = !isView && !isEdit || !current;
120
144
  var hasHeader = isHeaderFilled(header);
@@ -125,33 +149,85 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
125
149
  openWebView: openWebView,
126
150
  isPreview: isPreview
127
151
  });
128
- var _useState3 = useState(false),
129
- _useState4 = _slicedToArray(_useState3, 2),
130
- scrolledBottom = _useState4[0],
131
- setScrolledBottom = _useState4[1];
152
+ var _useState5 = useState(false),
153
+ _useState6 = _slicedToArray(_useState5, 2),
154
+ scrolledBottom = _useState6[0],
155
+ setScrolledBottom = _useState6[1];
156
+ var _useResizeObserver = useResizeObserver(),
157
+ textContainerRef = _useResizeObserver.ref,
158
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
159
+ textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
160
+ var _ref5 = textContainerRect || {},
161
+ _ref5$width = _ref5.width,
162
+ textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
163
+ _ref5$height = _ref5.height,
164
+ textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
165
+ var _useResizeObserver2 = useResizeObserver(),
166
+ visualWrapperRef = _useResizeObserver2.ref;
167
+ // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
168
+ // visualWrapperRect || {};
132
169
 
133
- // const [visualModalOpened, setVisualModalOpened] = useState(false);
170
+ var _useState7 = useState(false),
171
+ _useState8 = _slicedToArray(_useState7, 2),
172
+ visualModalTransitioning = _useState8[0],
173
+ setVisualModalTransitioning = _useState8[1];
174
+ var _useState9 = useState(false),
175
+ _useState10 = _slicedToArray(_useState9, 2),
176
+ visualModalOpened = _useState10[0],
177
+ setVisualModalOpened = _useState10[1];
178
+ var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
179
+ var _ref6 = background || {},
180
+ _ref6$text = _ref6.text,
181
+ backgroundText = _ref6$text === void 0 ? null : _ref6$text;
182
+ var _ref7 = backgroundText || {},
183
+ _ref7$body = _ref7.body,
184
+ backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
185
+ backgroundTextStyle = _ref7.textStyle;
186
+ var finalBackgroundText = useMemo(function () {
187
+ function distributeTextEqually(text) {
188
+ var words = text !== null ? text.split(' ') : [];
189
+ var numRows = 4;
190
+ if (words.length < numRows / 2) {
191
+ return Array(numRows).fill(text);
192
+ }
193
+ var halfNumWords = Math.ceil(words.length / 2);
194
+ var firstHalf = words.slice(0, halfNumWords).join(' ');
195
+ var secondHalf = words.slice(halfNumWords).join(' ');
196
+ return [firstHalf, secondHalf, firstHalf, secondHalf];
197
+ }
198
+ var textArray = distributeTextEqually(backgroundTextBody);
134
199
 
200
+ // @TODO: move container div here to avoid double map
201
+ var textElements = (textArray || []).map(function (line) {
202
+ return /*#__PURE__*/React.createElement("span", null, line);
203
+ });
204
+ return textElements;
205
+ }, [backgroundTextBody]);
206
+
207
+ // intro animation
135
208
  useEffect(function () {
136
209
  var id = null;
137
- if (animationStarted) {
210
+ if (backgroundAnimationStarted) {
138
211
  id = setTimeout(function () {
139
- setAnimationStarted(false);
140
- }, 1500);
212
+ setBackgroundAnimationStarted(false);
213
+ setDidAnimate(true);
214
+ }, 1600);
141
215
  }
142
216
  return function () {
143
217
  clearTimeout(id);
144
218
  };
145
- }, [animationStarted, animateBackground, setAnimationStarted]);
219
+ }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
146
220
  useEffect(function () {
147
- if (isView && current) {
148
- setAnimationStarted(true);
221
+ if (isView && !isStatic && current) {
222
+ setBackgroundAnimationStarted(true);
149
223
  } else {
150
- setAnimationStarted(false);
224
+ setBackgroundAnimationStarted(false);
151
225
  }
152
- }, [isView, current, setAnimationStarted]);
153
- var onScrolledBottom = useCallback(function (_ref4) {
154
- var initial = _ref4.initial;
226
+ }, [isView, current, setBackgroundAnimationStarted]);
227
+
228
+ // scroll events
229
+ var onScrolledBottom = useCallback(function (_ref8) {
230
+ var initial = _ref8.initial;
155
231
  if (initial) {
156
232
  trackScreenEvent('scroll', 'Screen');
157
233
  }
@@ -161,29 +237,138 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
161
237
  setScrolledBottom(false);
162
238
  }, [setScrolledBottom]);
163
239
 
164
- // Create elements
165
- var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
240
+ // modal
241
+ useEffect(function () {
242
+ var id = null;
243
+ if (visualModalTransitioning) {
244
+ id = setTimeout(function () {
245
+ setVisualModalTransitioning(false);
246
+ setVisualModalOpened(true);
247
+ }, 400);
248
+ }
249
+ return function () {
250
+ clearTimeout(id);
251
+ };
252
+ }, [visualModalTransitioning, setVisualModalTransitioning]);
253
+ var onClickVisual = useCallback(function () {
254
+ if (!visualModalOpened) {
255
+ setVisualModalTransitioning(true);
256
+ }
257
+ if (muted && isVideo) {
258
+ setMuted(false);
259
+ }
260
+ }, [setVisualModalOpened]);
261
+ var onCloseModal = useCallback(function () {
262
+ if (visualModalTransitioning) {
263
+ setVisualModalTransitioning(false);
264
+ }
265
+ setVisualModalOpened(false);
266
+ }, [setVisualModalOpened]);
267
+ useEffect(function () {
268
+ if (visualModalOpened) {
269
+ disableInteraction();
270
+ } else {
271
+ enableInteraction();
272
+ }
273
+ }, [visualModalOpened]);
274
+ useEffect(function () {
275
+ var keyup = function keyup(e) {
276
+ if (e.key === 'Escape') {
277
+ if (visualModalOpened) {
278
+ onCloseModal();
279
+ }
280
+ }
281
+ };
282
+ document.addEventListener('keyup', keyup);
283
+ return function () {
284
+ document.removeEventListener('keyup', keyup);
285
+ };
286
+ }, [visualModalOpened, onCloseModal]);
287
+
288
+ // Modal video
289
+
290
+ useEffect(function () {
291
+ if (current && !backgroundAnimationStarted) {
292
+ setPlaying(true);
293
+ }
294
+ }, [current, backgroundAnimationStarted]);
295
+ useEffect(function () {
296
+ if (!current) {
297
+ return function () {};
298
+ }
299
+ if (visualModalOpened && isVideo) {
300
+ setControls(true);
301
+ } else {
302
+ setControls(false);
303
+ }
304
+ return function () {
305
+ if (visualModalOpened) {
306
+ setControls(false);
307
+ }
308
+ };
309
+ }, [current, setControls, visualModalOpened, isVideo]);
310
+ var viewerContainer = useViewerContainer();
311
+ var _useActivityDetector = useActivityDetector({
312
+ element: viewerContainer,
313
+ disabled: !isView,
314
+ timeout: 2000
315
+ }),
316
+ activityDetected = _useActivityDetector.detected;
317
+ var toggleControlsVisibility = useCallback(function () {
318
+ if (activityDetected && isVideo && visualModalOpened) {
319
+ showControls();
320
+ } else {
321
+ hideControls();
322
+ }
323
+ }, [activityDetected, showControls, isVideo, hideControls]);
324
+ useDebounce(toggleControlsVisibility, activityDetected, 1000);
325
+ return /*#__PURE__*/React.createElement("div", {
326
+ className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
327
+ "data-screen-ready": true
328
+ }, /*#__PURE__*/React.createElement(Container, {
329
+ width: width,
330
+ height: height,
331
+ className: styles.content
332
+ }, /*#__PURE__*/React.createElement(Scroll, {
333
+ width: width,
334
+ height: height,
335
+ disabled: backgroundAnimationStarted || scrollingDisabled,
336
+ onScrolledBottom: onScrolledBottom,
337
+ onScrolledNotBottom: onScrolledNotBottom,
338
+ verticalAlign: "middle",
339
+ withShadow: !visualModalOpened,
340
+ withArrow: !visualModalOpened
341
+ }, /*#__PURE__*/React.createElement(Layout, {
342
+ className: styles.layout,
343
+ width: width
344
+ // height={height}
345
+ ,
346
+ style: !isPlaceholder ? {
347
+ padding: spacing,
348
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
349
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
350
+ minHeight: height // probably not the best
351
+ } : null
352
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
166
353
  key: "header",
167
354
  style: {
168
355
  paddingBottom: spacing
169
356
  },
170
357
  className: classNames([styles.headerContainer
171
- // { [styles.appear]: animationStarted },
358
+ // { [styles.appear]: backgroundAnimationStarted },
172
359
  ])
173
360
  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
174
361
  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)])
362
+ }) : null, visualModalOpened ? /*#__PURE__*/React.createElement(Button, {
363
+ className: styles.close,
364
+ onClick: onCloseModal
365
+ }, /*#__PURE__*/React.createElement(Close, {
366
+ className: styles.closeIcon
367
+ })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
368
+ className: classNames([styles.textCard, (_ref10 = {}, _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref10, styles.appear, backgroundAnimationStarted), _defineProperty(_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
177
369
  }, /*#__PURE__*/React.createElement("div", {
178
- className: styles.visualContainer
370
+ className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
179
371
  }, /*#__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
372
  key: "visual",
188
373
  placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
189
374
  className: styles.visualPlaceholder
@@ -197,31 +382,60 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
197
382
  }),
198
383
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
199
384
  isEmpty: !hasVisual
200
- }, hasVisual && !isVideo ?
201
- /*#__PURE__*/
202
- // <div className={styles.visualWrapper}>
203
- React.createElement(Visual, {
204
- imageClassName: styles.visual,
205
- media: image,
206
- width: "100%",
207
- resolution: resolution,
208
- active: active,
209
- shouldLoad: mediaShouldLoad
210
- }) :
211
- // </div>
212
- null, hasVisual && isVideo ? /*#__PURE__*/React.createElement(Visual, {
385
+ }, hasVisual ? /*#__PURE__*/React.createElement("div", {
386
+ ref: visualWrapperRef,
387
+ className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
388
+ style: visualModalTransitioning || visualModalOpened ? {
389
+ width: width,
390
+ height: height
391
+ } : {
392
+ width: textContainerWidth,
393
+ height: 'auto'
394
+ }
395
+ }, /*#__PURE__*/React.createElement(Button, {
396
+ className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
397
+ onClick: onClickVisual,
398
+ disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
399
+ style: {
400
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
401
+ }
402
+ }, isVideo ? /*#__PURE__*/React.createElement(Visual, {
213
403
  media: image,
214
- width: width * 0.9,
215
- height: 250,
404
+ mediaRef: mediaRef,
405
+ width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
406
+ ,
407
+ height: visualModalTransitioning || visualModalOpened ? height : 250,
216
408
  resolution: resolution,
217
409
  objectFit: {
218
- fit: 'cover'
410
+ fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
219
411
  },
220
412
  shouldLoad: mediaShouldLoad,
221
- muted: true,
413
+ muted: muted || !visualModalOpened,
222
414
  withoutVideo: isPreview,
223
- autoPlay: true
224
- }) : null)), /*#__PURE__*/React.createElement("div", {
415
+ playing: videoPlaying
416
+ }) : /*#__PURE__*/React.createElement(Visual, {
417
+ media: image,
418
+ width: visualModalOpened ? width : textContainerWidth,
419
+ resolution: resolution,
420
+ active: active,
421
+ shouldLoad: mediaShouldLoad
422
+ }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
423
+ className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, visualLayout === 'label-top')])
424
+ }, isVideo ? /*#__PURE__*/React.createElement(MuteIcon, {
425
+ color: "#000",
426
+ className: styles.icon
427
+ }) : /*#__PURE__*/React.createElement(FullscreenIcon, {
428
+ color: "#000",
429
+ className: styles.icon
430
+ })) : null)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
431
+ key: "sponsor",
432
+ placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
433
+ className: styles.sponsorPlaceholder
434
+ })
435
+ }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
436
+ className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
437
+ }, sponsor)) : null)), /*#__PURE__*/React.createElement("div", {
438
+ ref: textContainerRef,
225
439
  className: styles.text
226
440
  }, /*#__PURE__*/React.createElement(ScreenElement, {
227
441
  key: "category",
@@ -237,9 +451,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
237
451
  }),
238
452
  emptyClassName: styles.emptyCategory,
239
453
  isEmpty: !hasCategory
240
- }, hasCategory ? /*#__PURE__*/React.createElement(Heading, Object.assign({
454
+ }, hasCategory ? /*#__PURE__*/React.createElement("div", {
455
+ className: styles.categoryContainer,
456
+ style: {
457
+ width: textContainerHeight
458
+ }
459
+ }, /*#__PURE__*/React.createElement(Heading, Object.assign({
241
460
  className: styles.category
242
- }, category)) : null), /*#__PURE__*/React.createElement("div", {
461
+ }, category))) : null), /*#__PURE__*/React.createElement("div", {
243
462
  className: classNames([styles.textContent, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
244
463
  }, /*#__PURE__*/React.createElement(ScreenElement, {
245
464
  key: "title",
@@ -290,54 +509,37 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
290
509
  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
291
510
  key: "spacer-cta-bottom"
292
511
  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
293
- key: "call-to-action",
294
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
512
+ key: "footer",
513
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
295
514
  style: {
296
515
  paddingTop: spacing,
297
516
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
298
517
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
299
518
  }
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, {
519
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Background, {
330
520
  background: background,
331
521
  width: width,
332
522
  height: height,
333
523
  resolution: resolution,
334
- playing: backgroundPlaying,
335
- muted: muted,
524
+ playing: backgroundPlaying && !visualModalOpened,
525
+ muted: muted || visualModalOpened,
336
526
  shouldLoad: mediaShouldLoad,
337
- mediaRef: mediaRef,
338
527
  withoutVideo: isPreview,
339
528
  className: styles.background
340
- }) : null);
529
+ }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React.createElement(Container, {
530
+ width: width,
531
+ height: height,
532
+ className: styles.backgroundTextContainer
533
+ }, (finalBackgroundText || []).map(function (line, i) {
534
+ var _classNames;
535
+ return /*#__PURE__*/React.createElement("div", {
536
+ key: "background-text-".concat(line),
537
+ 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)),
538
+ style: _objectSpread({
539
+ animationDelay: "".concat(i * 100, "ms")
540
+ }, getStyleFromText(backgroundTextStyle))
541
+ }, line);
542
+ })) : null) : null);
341
543
  };
342
544
  UrbaniaRecommendation.propTypes = propTypes;
343
545
  UrbaniaRecommendation.defaultProps = defaultProps;
@@ -462,7 +664,7 @@ var definition = [{
462
664
  })
463
665
  }, {
464
666
  name: 'background',
465
- type: 'background',
667
+ type: 'background-recommendation',
466
668
  label: defineMessage({
467
669
  id: "+MPZRu",
468
670
  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","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","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 _ref9, _ref10;
82
86
  var category = _ref.category,
83
87
  visual = _ref.visual,
84
88
  title = _ref.title,
@@ -105,8 +109,17 @@ 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
+ setMuted = _usePlaybackContext.setMuted,
116
+ setControls = _usePlaybackContext.setControls,
117
+ showControls = _usePlaybackContext.showControls,
118
+ hideControls = _usePlaybackContext.hideControls;
109
119
  var mediaRef = contexts.usePlaybackMediaRef(current);
120
+ var _useViewerInteraction = contexts.useViewerInteraction(),
121
+ enableInteraction = _useViewerInteraction.enableInteraction,
122
+ disableInteraction = _useViewerInteraction.disableInteraction;
110
123
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
111
124
  isView = _useScreenRenderConte.isView,
112
125
  isPreview = _useScreenRenderConte.isPreview,
@@ -116,8 +129,12 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
116
129
  var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
117
130
  var _useState = React.useState(animateBackground),
118
131
  _useState2 = _slicedToArray__default["default"](_useState, 2),
119
- animationStarted = _useState2[0],
120
- setAnimationStarted = _useState2[1];
132
+ backgroundAnimationStarted = _useState2[0],
133
+ setBackgroundAnimationStarted = _useState2[1];
134
+ var _useState3 = React.useState(false),
135
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
136
+ didAnimate = _useState4[0],
137
+ setDidAnimate = _useState4[1];
121
138
  var _ref2 = visual || {},
122
139
  _ref2$image = _ref2.image,
123
140
  image = _ref2$image === void 0 ? null : _ref2$image,
@@ -125,9 +142,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
125
142
  visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
126
143
  var _ref3 = image || {},
127
144
  _ref3$type = _ref3.type,
128
- type = _ref3$type === void 0 ? null : _ref3$type;
145
+ type = _ref3$type === void 0 ? null : _ref3$type,
146
+ _ref3$metadata = _ref3.metadata,
147
+ videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
148
+ var _ref4 = videoMetadata || {},
149
+ _ref4$width = _ref4.width,
150
+ videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
151
+ _ref4$height = _ref4.height,
152
+ videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
129
153
  var hasVisual = image !== null;
130
154
  var isVideo = type === 'video';
155
+ var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
131
156
  var hasCategory = utils.isTextFilled(category);
132
157
  var hasTitle = utils.isTextFilled(title);
133
158
  var hasDate = utils.isTextFilled(date);
@@ -136,6 +161,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
136
161
  var hasSponsor = utils.isTextFilled(sponsor);
137
162
  var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
138
163
  var backgroundPlaying = current && (isView || isEdit);
164
+ var videoPlaying = current && (isView || isEdit) && playing;
139
165
  var mediaShouldLoad = current || active;
140
166
  var scrollingDisabled = !isView && !isEdit || !current;
141
167
  var hasHeader = utils.isHeaderFilled(header);
@@ -146,33 +172,85 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
146
172
  openWebView: openWebView,
147
173
  isPreview: isPreview
148
174
  });
149
- var _useState3 = React.useState(false),
150
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
151
- scrolledBottom = _useState4[0],
152
- setScrolledBottom = _useState4[1];
175
+ var _useState5 = React.useState(false),
176
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
177
+ scrolledBottom = _useState6[0],
178
+ setScrolledBottom = _useState6[1];
179
+ var _useResizeObserver = hooks.useResizeObserver(),
180
+ textContainerRef = _useResizeObserver.ref,
181
+ _useResizeObserver$en = _useResizeObserver.entry.contentRect,
182
+ textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
183
+ var _ref5 = textContainerRect || {},
184
+ _ref5$width = _ref5.width,
185
+ textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
186
+ _ref5$height = _ref5.height,
187
+ textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
188
+ var _useResizeObserver2 = hooks.useResizeObserver(),
189
+ visualWrapperRef = _useResizeObserver2.ref;
190
+ // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
191
+ // visualWrapperRect || {};
153
192
 
154
- // const [visualModalOpened, setVisualModalOpened] = useState(false);
193
+ var _useState7 = React.useState(false),
194
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
195
+ visualModalTransitioning = _useState8[0],
196
+ setVisualModalTransitioning = _useState8[1];
197
+ var _useState9 = React.useState(false),
198
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
199
+ visualModalOpened = _useState10[0],
200
+ setVisualModalOpened = _useState10[1];
201
+ var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
202
+ var _ref6 = background || {},
203
+ _ref6$text = _ref6.text,
204
+ backgroundText = _ref6$text === void 0 ? null : _ref6$text;
205
+ var _ref7 = backgroundText || {},
206
+ _ref7$body = _ref7.body,
207
+ backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
208
+ backgroundTextStyle = _ref7.textStyle;
209
+ var finalBackgroundText = React.useMemo(function () {
210
+ function distributeTextEqually(text) {
211
+ var words = text !== null ? text.split(' ') : [];
212
+ var numRows = 4;
213
+ if (words.length < numRows / 2) {
214
+ return Array(numRows).fill(text);
215
+ }
216
+ var halfNumWords = Math.ceil(words.length / 2);
217
+ var firstHalf = words.slice(0, halfNumWords).join(' ');
218
+ var secondHalf = words.slice(halfNumWords).join(' ');
219
+ return [firstHalf, secondHalf, firstHalf, secondHalf];
220
+ }
221
+ var textArray = distributeTextEqually(backgroundTextBody);
155
222
 
223
+ // @TODO: move container div here to avoid double map
224
+ var textElements = (textArray || []).map(function (line) {
225
+ return /*#__PURE__*/React__default["default"].createElement("span", null, line);
226
+ });
227
+ return textElements;
228
+ }, [backgroundTextBody]);
229
+
230
+ // intro animation
156
231
  React.useEffect(function () {
157
232
  var id = null;
158
- if (animationStarted) {
233
+ if (backgroundAnimationStarted) {
159
234
  id = setTimeout(function () {
160
- setAnimationStarted(false);
161
- }, 1500);
235
+ setBackgroundAnimationStarted(false);
236
+ setDidAnimate(true);
237
+ }, 1600);
162
238
  }
163
239
  return function () {
164
240
  clearTimeout(id);
165
241
  };
166
- }, [animationStarted, animateBackground, setAnimationStarted]);
242
+ }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
167
243
  React.useEffect(function () {
168
- if (isView && current) {
169
- setAnimationStarted(true);
244
+ if (isView && !isStatic && current) {
245
+ setBackgroundAnimationStarted(true);
170
246
  } else {
171
- setAnimationStarted(false);
247
+ setBackgroundAnimationStarted(false);
172
248
  }
173
- }, [isView, current, setAnimationStarted]);
174
- var onScrolledBottom = React.useCallback(function (_ref4) {
175
- var initial = _ref4.initial;
249
+ }, [isView, current, setBackgroundAnimationStarted]);
250
+
251
+ // scroll events
252
+ var onScrolledBottom = React.useCallback(function (_ref8) {
253
+ var initial = _ref8.initial;
176
254
  if (initial) {
177
255
  trackScreenEvent('scroll', 'Screen');
178
256
  }
@@ -182,29 +260,138 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
182
260
  setScrolledBottom(false);
183
261
  }, [setScrolledBottom]);
184
262
 
185
- // Create elements
186
- var items = [!isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
263
+ // modal
264
+ React.useEffect(function () {
265
+ var id = null;
266
+ if (visualModalTransitioning) {
267
+ id = setTimeout(function () {
268
+ setVisualModalTransitioning(false);
269
+ setVisualModalOpened(true);
270
+ }, 400);
271
+ }
272
+ return function () {
273
+ clearTimeout(id);
274
+ };
275
+ }, [visualModalTransitioning, setVisualModalTransitioning]);
276
+ var onClickVisual = React.useCallback(function () {
277
+ if (!visualModalOpened) {
278
+ setVisualModalTransitioning(true);
279
+ }
280
+ if (muted && isVideo) {
281
+ setMuted(false);
282
+ }
283
+ }, [setVisualModalOpened]);
284
+ var onCloseModal = React.useCallback(function () {
285
+ if (visualModalTransitioning) {
286
+ setVisualModalTransitioning(false);
287
+ }
288
+ setVisualModalOpened(false);
289
+ }, [setVisualModalOpened]);
290
+ React.useEffect(function () {
291
+ if (visualModalOpened) {
292
+ disableInteraction();
293
+ } else {
294
+ enableInteraction();
295
+ }
296
+ }, [visualModalOpened]);
297
+ React.useEffect(function () {
298
+ var keyup = function keyup(e) {
299
+ if (e.key === 'Escape') {
300
+ if (visualModalOpened) {
301
+ onCloseModal();
302
+ }
303
+ }
304
+ };
305
+ document.addEventListener('keyup', keyup);
306
+ return function () {
307
+ document.removeEventListener('keyup', keyup);
308
+ };
309
+ }, [visualModalOpened, onCloseModal]);
310
+
311
+ // Modal video
312
+
313
+ React.useEffect(function () {
314
+ if (current && !backgroundAnimationStarted) {
315
+ setPlaying(true);
316
+ }
317
+ }, [current, backgroundAnimationStarted]);
318
+ React.useEffect(function () {
319
+ if (!current) {
320
+ return function () {};
321
+ }
322
+ if (visualModalOpened && isVideo) {
323
+ setControls(true);
324
+ } else {
325
+ setControls(false);
326
+ }
327
+ return function () {
328
+ if (visualModalOpened) {
329
+ setControls(false);
330
+ }
331
+ };
332
+ }, [current, setControls, visualModalOpened, isVideo]);
333
+ var viewerContainer = contexts.useViewerContainer();
334
+ var _useActivityDetector = hooks.useActivityDetector({
335
+ element: viewerContainer,
336
+ disabled: !isView,
337
+ timeout: 2000
338
+ }),
339
+ activityDetected = _useActivityDetector.detected;
340
+ var toggleControlsVisibility = React.useCallback(function () {
341
+ if (activityDetected && isVideo && visualModalOpened) {
342
+ showControls();
343
+ } else {
344
+ hideControls();
345
+ }
346
+ }, [activityDetected, showControls, isVideo, hideControls]);
347
+ hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
348
+ return /*#__PURE__*/React__default["default"].createElement("div", {
349
+ className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
350
+ "data-screen-ready": true
351
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
352
+ width: width,
353
+ height: height,
354
+ className: styles.content
355
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
356
+ width: width,
357
+ height: height,
358
+ disabled: backgroundAnimationStarted || scrollingDisabled,
359
+ onScrolledBottom: onScrolledBottom,
360
+ onScrolledNotBottom: onScrolledNotBottom,
361
+ verticalAlign: "middle",
362
+ withShadow: !visualModalOpened,
363
+ withArrow: !visualModalOpened
364
+ }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
365
+ className: styles.layout,
366
+ width: width
367
+ // height={height}
368
+ ,
369
+ style: !isPlaceholder ? {
370
+ padding: spacing,
371
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
372
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
373
+ minHeight: height // probably not the best
374
+ } : null
375
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
187
376
  key: "header",
188
377
  style: {
189
378
  paddingBottom: spacing
190
379
  },
191
380
  className: classNames__default["default"]([styles.headerContainer
192
- // { [styles.appear]: animationStarted },
381
+ // { [styles.appear]: backgroundAnimationStarted },
193
382
  ])
194
383
  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
195
384
  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)])
385
+ }) : null, visualModalOpened ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
386
+ className: styles.close,
387
+ onClick: onCloseModal
388
+ }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
389
+ className: styles.closeIcon
390
+ })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
391
+ className: classNames__default["default"]([styles.textCard, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref10, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
198
392
  }, /*#__PURE__*/React__default["default"].createElement("div", {
199
- className: styles.visualContainer
393
+ className: classNames__default["default"]([styles.visualContainer, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
200
394
  }, /*#__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
395
  key: "visual",
209
396
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
210
397
  className: styles.visualPlaceholder
@@ -218,31 +405,60 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
218
405
  }),
219
406
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
220
407
  isEmpty: !hasVisual
221
- }, hasVisual && !isVideo ?
222
- /*#__PURE__*/
223
- // <div className={styles.visualWrapper}>
224
- React__default["default"].createElement(Visual__default["default"], {
225
- imageClassName: styles.visual,
226
- media: image,
227
- width: "100%",
228
- resolution: resolution,
229
- active: active,
230
- shouldLoad: mediaShouldLoad
231
- }) :
232
- // </div>
233
- null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
408
+ }, hasVisual ? /*#__PURE__*/React__default["default"].createElement("div", {
409
+ ref: visualWrapperRef,
410
+ className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
411
+ style: visualModalTransitioning || visualModalOpened ? {
412
+ width: width,
413
+ height: height
414
+ } : {
415
+ width: textContainerWidth,
416
+ height: 'auto'
417
+ }
418
+ }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
419
+ className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
420
+ onClick: onClickVisual,
421
+ disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
422
+ style: {
423
+ transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
424
+ }
425
+ }, isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
234
426
  media: image,
235
- width: width * 0.9,
236
- height: 250,
427
+ mediaRef: mediaRef,
428
+ width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
429
+ ,
430
+ height: visualModalTransitioning || visualModalOpened ? height : 250,
237
431
  resolution: resolution,
238
432
  objectFit: {
239
- fit: 'cover'
433
+ fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
240
434
  },
241
435
  shouldLoad: mediaShouldLoad,
242
- muted: true,
436
+ muted: muted || !visualModalOpened,
243
437
  withoutVideo: isPreview,
244
- autoPlay: true
245
- }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
438
+ playing: videoPlaying
439
+ }) : /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
440
+ media: image,
441
+ width: visualModalOpened ? width : textContainerWidth,
442
+ resolution: resolution,
443
+ active: active,
444
+ shouldLoad: mediaShouldLoad
445
+ }), visualModalClosed ? /*#__PURE__*/React__default["default"].createElement("div", {
446
+ className: classNames__default["default"]([styles.iconContainer, _defineProperty__default["default"]({}, styles.visualBottom, visualLayout === 'label-top')])
447
+ }, isVideo ? /*#__PURE__*/React__default["default"].createElement(components.MuteIcon, {
448
+ color: "#000",
449
+ className: styles.icon
450
+ }) : /*#__PURE__*/React__default["default"].createElement(components.FullscreenIcon, {
451
+ color: "#000",
452
+ className: styles.icon
453
+ })) : null)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
454
+ key: "sponsor",
455
+ placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
456
+ className: styles.sponsorPlaceholder
457
+ })
458
+ }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
459
+ className: classNames__default["default"]([styles.sponsor, _defineProperty__default["default"]({}, styles.hasVisual, hasVisual)])
460
+ }, sponsor)) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
461
+ ref: textContainerRef,
246
462
  className: styles.text
247
463
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
248
464
  key: "category",
@@ -258,9 +474,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
258
474
  }),
259
475
  emptyClassName: styles.emptyCategory,
260
476
  isEmpty: !hasCategory
261
- }, hasCategory ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
477
+ }, hasCategory ? /*#__PURE__*/React__default["default"].createElement("div", {
478
+ className: styles.categoryContainer,
479
+ style: {
480
+ width: textContainerHeight
481
+ }
482
+ }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
262
483
  className: styles.category
263
- }, category)) : null), /*#__PURE__*/React__default["default"].createElement("div", {
484
+ }, category))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
264
485
  className: classNames__default["default"]([styles.textContent, _defineProperty__default["default"]({}, styles.isPlaceholder, isPlaceholder)])
265
486
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
266
487
  key: "title",
@@ -311,54 +532,37 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
311
532
  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
312
533
  key: "spacer-cta-bottom"
313
534
  }) : 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)]),
535
+ key: "footer",
536
+ className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
316
537
  style: {
317
538
  paddingTop: spacing,
318
539
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
319
540
  paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
320
541
  }
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"], {
542
+ }, /*#__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
543
  background: background,
352
544
  width: width,
353
545
  height: height,
354
546
  resolution: resolution,
355
- playing: backgroundPlaying,
356
- muted: muted,
547
+ playing: backgroundPlaying && !visualModalOpened,
548
+ muted: muted || visualModalOpened,
357
549
  shouldLoad: mediaShouldLoad,
358
- mediaRef: mediaRef,
359
550
  withoutVideo: isPreview,
360
551
  className: styles.background
361
- }) : null);
552
+ }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
553
+ width: width,
554
+ height: height,
555
+ className: styles.backgroundTextContainer
556
+ }, (finalBackgroundText || []).map(function (line, i) {
557
+ var _classNames;
558
+ return /*#__PURE__*/React__default["default"].createElement("div", {
559
+ key: "background-text-".concat(line),
560
+ 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)),
561
+ style: _objectSpread__default["default"]({
562
+ animationDelay: "".concat(i * 100, "ms")
563
+ }, utils.getStyleFromText(backgroundTextStyle))
564
+ }, line);
565
+ })) : null) : null);
362
566
  };
363
567
  UrbaniaRecommendation.propTypes = propTypes;
364
568
  UrbaniaRecommendation.defaultProps = defaultProps;
@@ -483,7 +687,7 @@ var definition = [{
483
687
  })
484
688
  }, {
485
689
  name: 'background',
486
- type: 'background',
690
+ type: 'background-recommendation',
487
691
  label: reactIntl.defineMessage({
488
692
  id: "+MPZRu",
489
693
  defaultMessage: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.3.373",
3
+ "version": "0.3.379",
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.373",
53
- "@micromag/element-background": "^0.3.373",
54
- "@micromag/element-container": "^0.3.373",
55
- "@micromag/element-footer": "^0.3.373",
56
- "@micromag/element-header": "^0.3.373",
57
- "@micromag/element-heading": "^0.3.373",
58
- "@micromag/element-layout": "^0.3.373",
59
- "@micromag/element-scroll": "^0.3.373",
60
- "@micromag/element-text": "^0.3.373",
61
- "@micromag/element-visual": "^0.3.373",
62
- "@micromag/transforms": "^0.3.373",
52
+ "@micromag/core": "^0.3.379",
53
+ "@micromag/element-background": "^0.3.379",
54
+ "@micromag/element-button": "^0.3.379",
55
+ "@micromag/element-container": "^0.3.379",
56
+ "@micromag/element-footer": "^0.3.379",
57
+ "@micromag/element-header": "^0.3.379",
58
+ "@micromag/element-heading": "^0.3.379",
59
+ "@micromag/element-layout": "^0.3.379",
60
+ "@micromag/element-scroll": "^0.3.379",
61
+ "@micromag/element-text": "^0.3.379",
62
+ "@micromag/element-visual": "^0.3.379",
63
+ "@micromag/transforms": "^0.3.379",
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": "072c8a8e64514933e9d13e4ad99778c2cbcc6968"
73
+ "gitHead": "74875407db738009dda84849ce467adfd4508e4e"
73
74
  }