@micromag/screen-urbania-recommendation 0.3.377 → 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 +54 -53
  3. package/lib/index.js +53 -52
  4. package/package.json +14 -14
package/assets/css/styles.css CHANGED
@@ -1 +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)}}
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
@@ -6,7 +6,7 @@ import classNames from 'classnames';
6
6
  import PropTypes$1 from 'prop-types';
7
7
  import React, { useState, useMemo, useEffect, useCallback } from 'react';
8
8
  import { PropTypes } from '@micromag/core';
9
- import { Close, ScreenElement, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
9
+ import { Close, ScreenElement, PlaceholderImage, MuteIcon, FullscreenIcon, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
10
10
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext, useViewerContainer } from '@micromag/core/contexts';
11
11
  import { useTrackScreenEvent, useResizeObserver, useActivityDetector, useDebounce } from '@micromag/core/hooks';
12
12
  import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText } from '@micromag/core/utils';
@@ -21,7 +21,7 @@ import Scroll from '@micromag/element-scroll';
21
21
  import Text from '@micromag/element-text';
22
22
  import Visual from '@micromag/element-visual';
23
23
 
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"};
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"};
25
25
 
26
26
  var propTypes = {
27
27
  category: PropTypes.headingElement,
@@ -59,7 +59,7 @@ var defaultProps = {
59
59
  className: null
60
60
  };
61
61
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
62
- var _ref8, _ref9;
62
+ var _ref9, _ref10;
63
63
  var category = _ref.category,
64
64
  visual = _ref.visual,
65
65
  title = _ref.title,
@@ -89,6 +89,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
89
89
  playing = _usePlaybackContext.playing,
90
90
  setPlaying = _usePlaybackContext.setPlaying,
91
91
  muted = _usePlaybackContext.muted,
92
+ setMuted = _usePlaybackContext.setMuted,
92
93
  setControls = _usePlaybackContext.setControls,
93
94
  showControls = _usePlaybackContext.showControls,
94
95
  hideControls = _usePlaybackContext.hideControls;
@@ -118,9 +119,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
118
119
  visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
119
120
  var _ref3 = image || {},
120
121
  _ref3$type = _ref3.type,
121
- 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;
122
130
  var hasVisual = image !== null;
123
131
  var isVideo = type === 'video';
132
+ var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
124
133
  var hasCategory = isTextFilled(category);
125
134
  var hasTitle = isTextFilled(title);
126
135
  var hasDate = isTextFilled(date);
@@ -148,11 +157,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
148
157
  textContainerRef = _useResizeObserver.ref,
149
158
  _useResizeObserver$en = _useResizeObserver.entry.contentRect,
150
159
  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;
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;
156
165
  var _useResizeObserver2 = useResizeObserver(),
157
166
  visualWrapperRef = _useResizeObserver2.ref;
158
167
  // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
@@ -166,13 +175,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
166
175
  _useState10 = _slicedToArray(_useState9, 2),
167
176
  visualModalOpened = _useState10[0],
168
177
  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;
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;
176
186
  var finalBackgroundText = useMemo(function () {
177
187
  function distributeTextEqually(text) {
178
188
  var words = text !== null ? text.split(' ') : [];
@@ -216,8 +226,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
216
226
  }, [isView, current, setBackgroundAnimationStarted]);
217
227
 
218
228
  // scroll events
219
- var onScrolledBottom = useCallback(function (_ref7) {
220
- var initial = _ref7.initial;
229
+ var onScrolledBottom = useCallback(function (_ref8) {
230
+ var initial = _ref8.initial;
221
231
  if (initial) {
222
232
  trackScreenEvent('scroll', 'Screen');
223
233
  }
@@ -244,6 +254,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
244
254
  if (!visualModalOpened) {
245
255
  setVisualModalTransitioning(true);
246
256
  }
257
+ if (muted && isVideo) {
258
+ setMuted(false);
259
+ }
247
260
  }, [setVisualModalOpened]);
248
261
  var onCloseModal = useCallback(function () {
249
262
  if (visualModalTransitioning) {
@@ -310,7 +323,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
310
323
  }, [activityDetected, showControls, isVideo, hideControls]);
311
324
  useDebounce(toggleControlsVisibility, activityDetected, 1000);
312
325
  return /*#__PURE__*/React.createElement("div", {
313
- className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
326
+ className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
314
327
  "data-screen-ready": true
315
328
  }, /*#__PURE__*/React.createElement(Container, {
316
329
  width: width,
@@ -352,7 +365,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
352
365
  }, /*#__PURE__*/React.createElement(Close, {
353
366
  className: styles.closeIcon
354
367
  })) : 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)])
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)])
356
369
  }, /*#__PURE__*/React.createElement("div", {
357
370
  className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
358
371
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -369,32 +382,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
369
382
  }),
370
383
  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
371
384
  isEmpty: !hasVisual
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,
391
- imageClassName: styles.visual,
392
- media: image,
393
- width: visualModalOpened ? width : textContainerWidth,
394
- resolution: resolution,
395
- active: active,
396
- shouldLoad: mediaShouldLoad
397
- }))) : null, hasVisual && isVideo ? /*#__PURE__*/React.createElement("div", {
385
+ }, hasVisual ? /*#__PURE__*/React.createElement("div", {
398
386
  ref: visualWrapperRef,
399
387
  className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
400
388
  style: visualModalTransitioning || visualModalOpened ? {
@@ -407,26 +395,39 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
407
395
  }, /*#__PURE__*/React.createElement(Button, {
408
396
  className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
409
397
  onClick: onClickVisual,
410
- disabled: backgroundAnimationStarted || visualModalOpened,
398
+ disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
411
399
  style: {
412
400
  transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
413
401
  }
414
- }, /*#__PURE__*/React.createElement(Visual, {
415
- videoClassName: styles.videoVisual,
402
+ }, isVideo ? /*#__PURE__*/React.createElement(Visual, {
416
403
  media: image,
417
404
  mediaRef: mediaRef,
418
- width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
405
+ width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
419
406
  ,
420
- height: visualModalOpened ? height : 250,
407
+ height: visualModalTransitioning || visualModalOpened ? height : 250,
421
408
  resolution: resolution,
422
409
  objectFit: {
423
- fit: 'cover'
410
+ fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
424
411
  },
425
412
  shouldLoad: mediaShouldLoad,
426
413
  muted: muted || !visualModalOpened,
427
414
  withoutVideo: isPreview,
428
415
  playing: videoPlaying
429
- }))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
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, {
430
431
  key: "sponsor",
431
432
  placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
432
433
  className: styles.sponsorPlaceholder
package/lib/index.js CHANGED
@@ -44,7 +44,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
44
44
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
45
45
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
46
46
 
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"};
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"};
48
48
 
49
49
  var propTypes = {
50
50
  category: core.PropTypes.headingElement,
@@ -82,7 +82,7 @@ var defaultProps = {
82
82
  className: null
83
83
  };
84
84
  var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
85
- var _ref8, _ref9;
85
+ var _ref9, _ref10;
86
86
  var category = _ref.category,
87
87
  visual = _ref.visual,
88
88
  title = _ref.title,
@@ -112,6 +112,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
112
112
  playing = _usePlaybackContext.playing,
113
113
  setPlaying = _usePlaybackContext.setPlaying,
114
114
  muted = _usePlaybackContext.muted,
115
+ setMuted = _usePlaybackContext.setMuted,
115
116
  setControls = _usePlaybackContext.setControls,
116
117
  showControls = _usePlaybackContext.showControls,
117
118
  hideControls = _usePlaybackContext.hideControls;
@@ -141,9 +142,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
141
142
  visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
142
143
  var _ref3 = image || {},
143
144
  _ref3$type = _ref3.type,
144
- 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;
145
153
  var hasVisual = image !== null;
146
154
  var isVideo = type === 'video';
155
+ var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
147
156
  var hasCategory = utils.isTextFilled(category);
148
157
  var hasTitle = utils.isTextFilled(title);
149
158
  var hasDate = utils.isTextFilled(date);
@@ -171,11 +180,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
171
180
  textContainerRef = _useResizeObserver.ref,
172
181
  _useResizeObserver$en = _useResizeObserver.entry.contentRect,
173
182
  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;
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;
179
188
  var _useResizeObserver2 = hooks.useResizeObserver(),
180
189
  visualWrapperRef = _useResizeObserver2.ref;
181
190
  // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
@@ -189,13 +198,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
189
198
  _useState10 = _slicedToArray__default["default"](_useState9, 2),
190
199
  visualModalOpened = _useState10[0],
191
200
  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;
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;
199
209
  var finalBackgroundText = React.useMemo(function () {
200
210
  function distributeTextEqually(text) {
201
211
  var words = text !== null ? text.split(' ') : [];
@@ -239,8 +249,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
239
249
  }, [isView, current, setBackgroundAnimationStarted]);
240
250
 
241
251
  // scroll events
242
- var onScrolledBottom = React.useCallback(function (_ref7) {
243
- var initial = _ref7.initial;
252
+ var onScrolledBottom = React.useCallback(function (_ref8) {
253
+ var initial = _ref8.initial;
244
254
  if (initial) {
245
255
  trackScreenEvent('scroll', 'Screen');
246
256
  }
@@ -267,6 +277,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
267
277
  if (!visualModalOpened) {
268
278
  setVisualModalTransitioning(true);
269
279
  }
280
+ if (muted && isVideo) {
281
+ setMuted(false);
282
+ }
270
283
  }, [setVisualModalOpened]);
271
284
  var onCloseModal = React.useCallback(function () {
272
285
  if (visualModalTransitioning) {
@@ -333,7 +346,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
333
346
  }, [activityDetected, showControls, isVideo, hideControls]);
334
347
  hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
335
348
  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)]),
349
+ className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
337
350
  "data-screen-ready": true
338
351
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
339
352
  width: width,
@@ -375,7 +388,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
375
388
  }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
376
389
  className: styles.closeIcon
377
390
  })) : 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)])
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)])
379
392
  }, /*#__PURE__*/React__default["default"].createElement("div", {
380
393
  className: classNames__default["default"]([styles.visualContainer, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
381
394
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -392,32 +405,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
392
405
  }),
393
406
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
394
407
  isEmpty: !hasVisual
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,
414
- imageClassName: styles.visual,
415
- media: image,
416
- width: visualModalOpened ? width : textContainerWidth,
417
- resolution: resolution,
418
- active: active,
419
- shouldLoad: mediaShouldLoad
420
- }))) : null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
408
+ }, hasVisual ? /*#__PURE__*/React__default["default"].createElement("div", {
421
409
  ref: visualWrapperRef,
422
410
  className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
423
411
  style: visualModalTransitioning || visualModalOpened ? {
@@ -430,26 +418,39 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
430
418
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
431
419
  className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
432
420
  onClick: onClickVisual,
433
- disabled: backgroundAnimationStarted || visualModalOpened,
421
+ disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
434
422
  style: {
435
423
  transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
436
424
  }
437
- }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
438
- videoClassName: styles.videoVisual,
425
+ }, isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
439
426
  media: image,
440
427
  mediaRef: mediaRef,
441
- width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
428
+ width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
442
429
  ,
443
- height: visualModalOpened ? height : 250,
430
+ height: visualModalTransitioning || visualModalOpened ? height : 250,
444
431
  resolution: resolution,
445
432
  objectFit: {
446
- fit: 'cover'
433
+ fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
447
434
  },
448
435
  shouldLoad: mediaShouldLoad,
449
436
  muted: muted || !visualModalOpened,
450
437
  withoutVideo: isPreview,
451
438
  playing: videoPlaying
452
- }))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
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, {
453
454
  key: "sponsor",
454
455
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
455
456
  className: styles.sponsorPlaceholder
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-recommendation",
3
- "version": "0.3.377",
3
+ "version": "0.3.379",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,18 +49,18 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
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",
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",
64
64
  "classnames": "^2.2.6",
65
65
  "lodash": "^4.17.21",
66
66
  "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
70
70
  "publishConfig": {
71
71
  "access": "public"
72
72
  },
73
- "gitHead": "80f2c43eabcb9c8e23e71704751c4ad4066e4d3a"
73
+ "gitHead": "74875407db738009dda84849ce467adfd4508e4e"
74
74
  }