@micromag/screen-urbania-article 0.3.250 → 0.3.251

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 +39 -73
  3. package/lib/index.js +36 -70
  4. package/package.json +15 -15
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-urbania-article-callToActionContainer,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-visual,.micromag-screen-urbania-article-content,.micromag-screen-urbania-article-empty,.micromag-screen-urbania-article-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-article-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-article-disabled.micromag-screen-urbania-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-hidden.micromag-screen-urbania-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-placeholder.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content{position:relative;padding:6px}.micromag-screen-urbania-article-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-articleContent{width:80%;height:35%;margin:5px auto;background-color:rgba(0,0,0,0);background-color:#2b2b2b}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-visual{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:80%;height:50%;margin:5px auto}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-bottom:70px;background-color:rgba(0,0,0,0)}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{margin-top:0}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-callToAction{position:absolute}.micromag-screen-urbania-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-emptyContainer{width:100%;height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-screen-urbania-article-emptyContainer.micromag-screen-urbania-article-small{padding-bottom:15%}.micromag-screen-urbania-article-empty{margin:0}.micromag-screen-urbania-article-background{z-index:1}.micromag-screen-urbania-article-content{z-index:2;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.micromag-screen-urbania-article-articleContent,.micromag-screen-urbania-article-content{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%}.micromag-screen-urbania-article-articleContent{z-index:3;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#222;text-align:center}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{padding:3px 20px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle{margin-bottom:10px;padding:30px 0 2px;border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{font-family:GarageGothic-Bold;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede p{margin:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors.micromag-screen-urbania-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{display:inline-block;width:100%;margin-top:auto;padding:2px 10px 4px;background-color:#ff0;color:#222;letter-spacing:.04em;line-height:.7}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors p,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-author{color:#5e79ff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-sponsors,.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-author{color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors .micromag-screen-urbania-article-author{color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities .micromag-screen-urbania-article-overTitle{color:#222}.micromag-screen-urbania-article-visual{z-index:2;height:100%}.micromag-screen-urbania-article-callToActionContainer{z-index:3}.micromag-screen-urbania-article-callToAction{position:absolute;z-index:10;right:0;bottom:0;left:0;padding-bottom:5px;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-icon{display:inline-block;margin-top:-3px;margin-right:3px;padding:1px}.micromag-screen-urbania-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-placeholder{display:block}.micromag-screen-urbania-article-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-visible{opacity:1}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-image{position:relative!important;width:100%!important;height:100%!important}.micromag-screen-urbania-article-isCurrent .micromag-screen-urbania-article-image{-webkit-animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-img{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:100%!important;-o-object-fit:cover;object-fit:cover}@-webkit-keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}
1
+ .micromag-screen-urbania-article-container .micromag-screen-urbania-article-empty,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-video,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-article-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-article-disabled.micromag-screen-urbania-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-hidden.micromag-screen-urbania-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-placeholder.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content{position:relative;padding:6px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-emptyContainer{width:100%;height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-emptyContainer.micromag-screen-urbania-article-small{padding-bottom:15%}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-empty{margin:0}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-inner{height:100%}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content{z-index:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#222;text-align:center}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-authors,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-overTitle,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-title{padding:3px 20px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-overTitle{margin-bottom:10px;padding:30px 0 2px;border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-title{font-family:GarageGothic-Bold;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-lede p{margin:0}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-authors.micromag-screen-urbania-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-sponsors{display:inline-block;width:100%;margin-top:auto;padding:2px 10px 4px;background-color:#ff0;color:#222;letter-spacing:.04em;line-height:.7}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-sponsors p,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content .micromag-screen-urbania-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-author{color:#5e79ff}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-sponsors,.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-author{color:#222}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-dehors .micromag-screen-urbania-article-author{color:#ffeada}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content.micromag-screen-urbania-article-universities .micromag-screen-urbania-article-overTitle{color:#222}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-callToAction{position:absolute;z-index:10;right:0;bottom:0;left:0;padding-bottom:5px;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-icon{display:inline-block;margin-top:-3px;margin-right:3px;padding:1px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-placeholder{display:block}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-videoContainer{position:absolute}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-bottom{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-visible{opacity:1}.micromag-screen-urbania-article-container .micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-withGradient{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-content{width:80%;height:35%;margin:5px auto;background-color:rgba(0,0,0,0);background-color:#2b2b2b}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-visual{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:80%;height:50%;margin:5px auto}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-visual{height:auto}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin-bottom:50px;background-color:rgba(0,0,0,0)}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-content .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-content .micromag-screen-urbania-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-content .micromag-screen-urbania-article-sponsors{margin-top:0}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-callToAction{position:absolute}.micromag-screen-urbania-article-visual{height:100%}.micromag-screen-urbania-article-image{position:relative!important;width:100%!important;height:100%!important}.micromag-screen-urbania-article-isCurrent .micromag-screen-urbania-article-image{-webkit-animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-img{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:100%!important;-o-object-fit:cover;object-fit:cover}@-webkit-keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}
package/es/index.js CHANGED
@@ -4,14 +4,14 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
5
5
  import { getJSON } from '@folklore/fetch';
6
6
  import PropTypes from 'prop-types';
7
- import React, { useMemo, useState, useCallback, useEffect } from 'react';
7
+ import React, { useMemo, useState, useEffect } from 'react';
8
8
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
9
9
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
10
10
  import classNames from 'classnames';
11
11
  import { PropTypes as PropTypes$1 } from '@micromag/core';
12
- import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, PlaceholderImage } from '@micromag/core/components';
12
+ import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, Transitions, PlaceholderImage } from '@micromag/core/components';
13
13
  import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
14
- import { useDimensionObserver, useDebounce } from '@micromag/core/hooks';
14
+ import { useDimensionObserver } from '@micromag/core/hooks';
15
15
  import Background from '@micromag/element-background';
16
16
  import CallToAction from '@micromag/element-call-to-action';
17
17
  import Container from '@micromag/element-container';
@@ -96,7 +96,7 @@ var WatchIcon = function WatchIcon(_ref) {
96
96
  WatchIcon.propTypes = propTypes$2;
97
97
  WatchIcon.defaultProps = defaultProps$2;
98
98
 
99
- var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","content":"micromag-screen-urbania-article-content","empty":"micromag-screen-urbania-article-empty","video":"micromag-screen-urbania-article-video","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","description":"micromag-screen-urbania-article-description","title":"micromag-screen-urbania-article-title","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","authors":"micromag-screen-urbania-article-authors","overTitle":"micromag-screen-urbania-article-overTitle","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
99
+ var styles = {"container":"micromag-screen-urbania-article-container","empty":"micromag-screen-urbania-article-empty","isVideo":"micromag-screen-urbania-article-isVideo","video":"micromag-screen-urbania-article-video","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","content":"micromag-screen-urbania-article-content","emptyContainer":"micromag-screen-urbania-article-emptyContainer","small":"micromag-screen-urbania-article-small","inner":"micromag-screen-urbania-article-inner","authors":"micromag-screen-urbania-article-authors","description":"micromag-screen-urbania-article-description","overTitle":"micromag-screen-urbania-article-overTitle","title":"micromag-screen-urbania-article-title","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsors":"micromag-screen-urbania-article-sponsors","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","callToAction":"micromag-screen-urbania-article-callToAction","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","videoContainer":"micromag-screen-urbania-article-videoContainer","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","visual":"micromag-screen-urbania-article-visual","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
100
100
 
101
101
  var propTypes$1 = {
102
102
  hasArticle: PropTypes.bool,
@@ -106,7 +106,7 @@ var propTypes$1 = {
106
106
  description: PropTypes$1.textElement,
107
107
  overTitle: PropTypes$1.headingElement,
108
108
  author: PropTypes$1.authorElement,
109
- sponsors: PropTypes.arrayOf(PropTypes.shape({})),
109
+ sponsor: PropTypes.arrayOf(PropTypes.shape({})),
110
110
  sponsorPrefix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
111
111
  sponsorColor: PropTypes$1.color,
112
112
  site: PropTypes.string,
@@ -126,7 +126,7 @@ var defaultProps$1 = {
126
126
  description: null,
127
127
  overTitle: null,
128
128
  author: null,
129
- sponsors: null,
129
+ sponsor: null,
130
130
  sponsorPrefix: null,
131
131
  sponsorColor: null,
132
132
  site: null,
@@ -140,7 +140,7 @@ var defaultProps$1 = {
140
140
  };
141
141
 
142
142
  var UrbaniaArticle = function UrbaniaArticle(_ref) {
143
- var _ref8;
143
+ var _ref7;
144
144
 
145
145
  var hasArticle = _ref.hasArticle,
146
146
  type = _ref.type,
@@ -149,7 +149,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
149
149
  description = _ref.description,
150
150
  overTitle = _ref.overTitle,
151
151
  author = _ref.author,
152
- sponsors = _ref.sponsors,
152
+ sponsor = _ref.sponsor,
153
153
  sponsorPrefix = _ref.sponsorPrefix,
154
154
  sponsorColor = _ref.sponsorColor,
155
155
  site = _ref.site,
@@ -157,6 +157,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
157
157
  callToAction = _ref.callToAction,
158
158
  current = _ref.current,
159
159
  active = _ref.active,
160
+ transitions = _ref.transitions,
160
161
  spacing = _ref.spacing,
161
162
  className = _ref.className;
162
163
 
@@ -178,16 +179,15 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
178
179
  backgroundColor = _ref2$color === void 0 ? null : _ref2$color;
179
180
 
180
181
  var _useViewerWebView = useViewerWebView(),
181
- openedWebView = _useViewerWebView.opened,
182
- openWebView = _useViewerWebView.open;
182
+ openWebView = _useViewerWebView.open,
183
+ openedWebView = _useViewerWebView.opened;
183
184
 
184
185
  var _useViewerContext = useViewerContext(),
185
186
  viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
186
187
 
187
188
  var _usePlaybackContext = usePlaybackContext(),
188
189
  muted = _usePlaybackContext.muted,
189
- playing = _usePlaybackContext.playing,
190
- setPlaying = _usePlaybackContext.setPlaying;
190
+ playing = _usePlaybackContext.playing;
191
191
 
192
192
  var mediaRef = usePlaybackMediaRef(current);
193
193
 
@@ -211,7 +211,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
211
211
 
212
212
  return {
213
213
  imageHeight: difference
214
- };
214
+ }; // const finalMaxContentHeight = height - defaultImageHeight;
215
+ // return { imageHeight: defaultImageHeight, maxContentHeight: finalMaxContentHeight };
215
216
  }, [contentTop, contentHeight, width, height]),
216
217
  _useMemo$minContentHe = _useMemo.minContentHeight,
217
218
  minContentHeight = _useMemo$minContentHe === void 0 ? null : _useMemo$minContentHe;
@@ -219,12 +220,12 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
219
220
  var isVideo = type === 'video';
220
221
  var hasOverTitle = isTextFilled(overTitle);
221
222
  var hasTitle = isTextFilled(title);
222
- var hasDescription = isTextFilled(description);
223
- var hasSponsor = (sponsors || []).length > 0 && isTextFilled(sponsors[0]);
223
+ var hasSponsor = isTextFilled(sponsor);
224
224
 
225
225
  var _ref4 = author || {},
226
226
  authorFullName = _ref4.name;
227
227
 
228
+ var hasDescription = isTextFilled(description);
228
229
  var hasAuthor = isTextFilled(authorFullName);
229
230
 
230
231
  var _ref5 = image || {},
@@ -232,36 +233,11 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
232
233
  url = _ref5$url === void 0 ? null : _ref5$url;
233
234
 
234
235
  var hasImage = url !== null;
236
+ var backgroundPlaying = current && !openedWebView && (isView || isEdit);
235
237
  var mediaShouldLoad = current || active;
236
- var hasCallToAction = callToAction !== null && callToAction.active === true; // const backgroundPlaying = current && (isView || isEdit);
237
-
238
- var _useState = useState(false),
239
- _useState2 = _slicedToArray(_useState, 2),
240
- backgroundPlaying = _useState2[0],
241
- setBackgroundPlaying = _useState2[1];
242
-
243
- var playIfCurrent = useCallback(function () {
244
- if (current && !openedWebView && !playing) {
245
- setPlaying(true);
246
- } else {
247
- setPlaying(false);
248
- }
249
- }, [current, openedWebView, playing, setPlaying]); // TODO: link playIfCurrent and backgroundPlaying
250
-
251
- useEffect(function () {
252
- if (!current) {
253
- setBackgroundPlaying(false);
254
- } else if (current && (isView || isEdit)) {
255
- setBackgroundPlaying(!openedWebView);
256
- }
257
- }, [current, isView, isEdit, openedWebView, setBackgroundPlaying]);
258
- useDebounce(playIfCurrent, current, 500);
259
-
260
- var _ref6 = background || {},
261
- _ref6$video = _ref6.video,
262
- backgroundVideo = _ref6$video === void 0 ? null : _ref6$video;
263
-
264
- var hasVideoBackground = backgroundVideo !== null;
238
+ var transitionPlaying = current;
239
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
240
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
265
241
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
266
242
  key: "overTitle",
267
243
  placeholder: /*#__PURE__*/React.createElement(PlaceholderSubtitle, {
@@ -354,26 +330,18 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
354
330
  }, hasSponsor ? /*#__PURE__*/React.createElement("div", {
355
331
  className: styles.sponsors,
356
332
  style: _objectSpread({}, getStyleFromColor(sponsorColor))
357
- }, sponsors.map(function () {
358
- var sponsor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
359
- var _sponsor$body = sponsor.body,
360
- body = _sponsor$body === void 0 ? '' : _sponsor$body;
361
- return /*#__PURE__*/React.createElement(React.Fragment, {
362
- key: body
363
- }, sponsorPrefix !== null ? /*#__PURE__*/React.createElement("span", {
364
- className: styles.sponsor
365
- }, sponsorPrefix) : null, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Heading, Object.assign({
366
- className: styles.sponsor,
367
- size: "6"
368
- }, sponsor)));
369
- })) : null)].filter(function (it) {
333
+ }, sponsorPrefix !== null ? /*#__PURE__*/React.createElement("span", {
334
+ className: styles.sponsor
335
+ }, sponsorPrefix) : null, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Heading, Object.assign({
336
+ className: styles.sponsor,
337
+ size: "6"
338
+ }, sponsor))) : null)].filter(function (it) {
370
339
  return it !== null;
371
340
  });
372
341
  return /*#__PURE__*/React.createElement("div", {
373
- className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.isCurrent, current), _defineProperty(_ref8, styles.isVideo, isVideo), _defineProperty(_ref8, styles.hasVideoBackground, hasVideoBackground), _defineProperty(_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
342
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.isCurrent, current), _defineProperty(_ref7, styles.isVideo, isVideo), _defineProperty(_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
374
343
  "data-screen-ready": isStatic || isCapture
375
344
  }, /*#__PURE__*/React.createElement(Background, {
376
- className: styles.background,
377
345
  background: background,
378
346
  width: width,
379
347
  height: height,
@@ -381,14 +349,13 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
381
349
  playing: backgroundPlaying,
382
350
  muted: muted,
383
351
  shouldLoad: mediaShouldLoad,
384
- mediaRef: mediaRef,
385
- withoutVideo: isPreview
352
+ mediaRef: mediaRef
386
353
  }), /*#__PURE__*/React.createElement(Container, {
387
- className: styles.content,
354
+ className: styles.inner,
388
355
  width: width,
389
356
  height: height
390
357
  }, /*#__PURE__*/React.createElement("div", {
391
- className: classNames([styles.articleContent, _defineProperty({}, styles["".concat(site)], site !== null)]),
358
+ className: classNames([styles.content, _defineProperty({}, styles["".concat(site)], site !== null)]),
392
359
  style: _objectSpread({
393
360
  paddingTop: spacing,
394
361
  minHeight: minContentHeight
@@ -396,6 +363,10 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
396
363
  ref: contentRef
397
364
  }, items), /*#__PURE__*/React.createElement("div", {
398
365
  className: styles.visual
366
+ }, /*#__PURE__*/React.createElement(Transitions, {
367
+ playing: transitionPlaying,
368
+ transitions: transitions,
369
+ disabled: transitionDisabled || true
399
370
  }, /*#__PURE__*/React.createElement(ScreenElement, {
400
371
  key: "image",
401
372
  placeholder: /*#__PURE__*/React.createElement(PlaceholderImage, {
@@ -424,9 +395,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
424
395
  fit: 'cover'
425
396
  },
426
397
  shouldLoad: mediaShouldLoad,
427
- withoutVideo: isPreview,
428
398
  playing: backgroundPlaying && playing
429
- }) : null, hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/React.createElement(Visual, {
399
+ }) : null, hasImage && isVideo ? /*#__PURE__*/React.createElement(Visual, {
430
400
  className: styles.video,
431
401
  media: image,
432
402
  width: width,
@@ -438,12 +408,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
438
408
  shouldLoad: mediaShouldLoad,
439
409
  playing: backgroundPlaying && playing,
440
410
  muted: muted,
441
- withoutVideo: isPreview,
442
- mediaRef: mediaRef,
443
- autoPlay: true
444
- }) : null)), /*#__PURE__*/React.createElement("div", {
445
- className: styles.callToActionContainer
446
- }, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
411
+ mediaRef: mediaRef
412
+ }) : null), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
447
413
  style: {
448
414
  paddingTop: spacing,
449
415
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
@@ -462,7 +428,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
462
428
  className: styles.icon
463
429
  }) : null,
464
430
  openWebView: openWebView
465
- }))) : null)));
431
+ }))) : null))));
466
432
  };
467
433
 
468
434
  UrbaniaArticle.propTypes = propTypes$1;
@@ -611,7 +577,7 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
611
577
  body: 'En vedette'
612
578
  }),
613
579
  author: _objectSpread(_objectSpread({}, finalArticleAuthor), author),
614
- sponsors: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread(_objectSpread({}, sponsor), {}, {
580
+ sponsor: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread(_objectSpread({}, sponsor), {}, {
615
581
  body: "<strong>".concat(defaultSponsor, "</strong>")
616
582
  })] : [sponsor],
617
583
  sponsorPrefix: sponsorPrefix,
package/lib/index.js CHANGED
@@ -117,7 +117,7 @@ var WatchIcon = function WatchIcon(_ref) {
117
117
  WatchIcon.propTypes = propTypes$2;
118
118
  WatchIcon.defaultProps = defaultProps$2;
119
119
 
120
- var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","content":"micromag-screen-urbania-article-content","empty":"micromag-screen-urbania-article-empty","video":"micromag-screen-urbania-article-video","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","description":"micromag-screen-urbania-article-description","title":"micromag-screen-urbania-article-title","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","authors":"micromag-screen-urbania-article-authors","overTitle":"micromag-screen-urbania-article-overTitle","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
120
+ var styles = {"container":"micromag-screen-urbania-article-container","empty":"micromag-screen-urbania-article-empty","isVideo":"micromag-screen-urbania-article-isVideo","video":"micromag-screen-urbania-article-video","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","content":"micromag-screen-urbania-article-content","emptyContainer":"micromag-screen-urbania-article-emptyContainer","small":"micromag-screen-urbania-article-small","inner":"micromag-screen-urbania-article-inner","authors":"micromag-screen-urbania-article-authors","description":"micromag-screen-urbania-article-description","overTitle":"micromag-screen-urbania-article-overTitle","title":"micromag-screen-urbania-article-title","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsors":"micromag-screen-urbania-article-sponsors","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","callToAction":"micromag-screen-urbania-article-callToAction","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","videoContainer":"micromag-screen-urbania-article-videoContainer","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","visual":"micromag-screen-urbania-article-visual","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
121
121
 
122
122
  var propTypes$1 = {
123
123
  hasArticle: PropTypes__default["default"].bool,
@@ -127,7 +127,7 @@ var propTypes$1 = {
127
127
  description: core.PropTypes.textElement,
128
128
  overTitle: core.PropTypes.headingElement,
129
129
  author: core.PropTypes.authorElement,
130
- sponsors: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({})),
130
+ sponsor: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({})),
131
131
  sponsorPrefix: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
132
132
  sponsorColor: core.PropTypes.color,
133
133
  site: PropTypes__default["default"].string,
@@ -147,7 +147,7 @@ var defaultProps$1 = {
147
147
  description: null,
148
148
  overTitle: null,
149
149
  author: null,
150
- sponsors: null,
150
+ sponsor: null,
151
151
  sponsorPrefix: null,
152
152
  sponsorColor: null,
153
153
  site: null,
@@ -161,7 +161,7 @@ var defaultProps$1 = {
161
161
  };
162
162
 
163
163
  var UrbaniaArticle = function UrbaniaArticle(_ref) {
164
- var _ref8;
164
+ var _ref7;
165
165
 
166
166
  var hasArticle = _ref.hasArticle,
167
167
  type = _ref.type,
@@ -170,7 +170,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
170
170
  description = _ref.description,
171
171
  overTitle = _ref.overTitle,
172
172
  author = _ref.author,
173
- sponsors = _ref.sponsors,
173
+ sponsor = _ref.sponsor,
174
174
  sponsorPrefix = _ref.sponsorPrefix,
175
175
  sponsorColor = _ref.sponsorColor,
176
176
  site = _ref.site,
@@ -178,6 +178,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
178
178
  callToAction = _ref.callToAction,
179
179
  current = _ref.current,
180
180
  active = _ref.active,
181
+ transitions = _ref.transitions,
181
182
  spacing = _ref.spacing,
182
183
  className = _ref.className;
183
184
 
@@ -199,16 +200,15 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
199
200
  backgroundColor = _ref2$color === void 0 ? null : _ref2$color;
200
201
 
201
202
  var _useViewerWebView = contexts.useViewerWebView(),
202
- openedWebView = _useViewerWebView.opened,
203
- openWebView = _useViewerWebView.open;
203
+ openWebView = _useViewerWebView.open,
204
+ openedWebView = _useViewerWebView.opened;
204
205
 
205
206
  var _useViewerContext = contexts.useViewerContext(),
206
207
  viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
207
208
 
208
209
  var _usePlaybackContext = contexts.usePlaybackContext(),
209
210
  muted = _usePlaybackContext.muted,
210
- playing = _usePlaybackContext.playing,
211
- setPlaying = _usePlaybackContext.setPlaying;
211
+ playing = _usePlaybackContext.playing;
212
212
 
213
213
  var mediaRef = contexts.usePlaybackMediaRef(current);
214
214
 
@@ -232,7 +232,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
232
232
 
233
233
  return {
234
234
  imageHeight: difference
235
- };
235
+ }; // const finalMaxContentHeight = height - defaultImageHeight;
236
+ // return { imageHeight: defaultImageHeight, maxContentHeight: finalMaxContentHeight };
236
237
  }, [contentTop, contentHeight, width, height]),
237
238
  _useMemo$minContentHe = _useMemo.minContentHeight,
238
239
  minContentHeight = _useMemo$minContentHe === void 0 ? null : _useMemo$minContentHe;
@@ -240,12 +241,12 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
240
241
  var isVideo = type === 'video';
241
242
  var hasOverTitle = utils.isTextFilled(overTitle);
242
243
  var hasTitle = utils.isTextFilled(title);
243
- var hasDescription = utils.isTextFilled(description);
244
- var hasSponsor = (sponsors || []).length > 0 && utils.isTextFilled(sponsors[0]);
244
+ var hasSponsor = utils.isTextFilled(sponsor);
245
245
 
246
246
  var _ref4 = author || {},
247
247
  authorFullName = _ref4.name;
248
248
 
249
+ var hasDescription = utils.isTextFilled(description);
249
250
  var hasAuthor = utils.isTextFilled(authorFullName);
250
251
 
251
252
  var _ref5 = image || {},
@@ -253,36 +254,11 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
253
254
  url = _ref5$url === void 0 ? null : _ref5$url;
254
255
 
255
256
  var hasImage = url !== null;
257
+ var backgroundPlaying = current && !openedWebView && (isView || isEdit);
256
258
  var mediaShouldLoad = current || active;
257
- var hasCallToAction = callToAction !== null && callToAction.active === true; // const backgroundPlaying = current && (isView || isEdit);
258
-
259
- var _useState = React.useState(false),
260
- _useState2 = _slicedToArray__default["default"](_useState, 2),
261
- backgroundPlaying = _useState2[0],
262
- setBackgroundPlaying = _useState2[1];
263
-
264
- var playIfCurrent = React.useCallback(function () {
265
- if (current && !openedWebView && !playing) {
266
- setPlaying(true);
267
- } else {
268
- setPlaying(false);
269
- }
270
- }, [current, openedWebView, playing, setPlaying]); // TODO: link playIfCurrent and backgroundPlaying
271
-
272
- React.useEffect(function () {
273
- if (!current) {
274
- setBackgroundPlaying(false);
275
- } else if (current && (isView || isEdit)) {
276
- setBackgroundPlaying(!openedWebView);
277
- }
278
- }, [current, isView, isEdit, openedWebView, setBackgroundPlaying]);
279
- hooks.useDebounce(playIfCurrent, current, 500);
280
-
281
- var _ref6 = background || {},
282
- _ref6$video = _ref6.video,
283
- backgroundVideo = _ref6$video === void 0 ? null : _ref6$video;
284
-
285
- var hasVideoBackground = backgroundVideo !== null;
259
+ var transitionPlaying = current;
260
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
261
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
286
262
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
287
263
  key: "overTitle",
288
264
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderSubtitle, {
@@ -375,26 +351,18 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
375
351
  }, hasSponsor ? /*#__PURE__*/React__default["default"].createElement("div", {
376
352
  className: styles.sponsors,
377
353
  style: _objectSpread__default["default"]({}, utils.getStyleFromColor(sponsorColor))
378
- }, sponsors.map(function () {
379
- var sponsor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
380
- var _sponsor$body = sponsor.body,
381
- body = _sponsor$body === void 0 ? '' : _sponsor$body;
382
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
383
- key: body
384
- }, sponsorPrefix !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
385
- className: styles.sponsor
386
- }, sponsorPrefix) : null, /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
387
- className: styles.sponsor,
388
- size: "6"
389
- }, sponsor)));
390
- })) : null)].filter(function (it) {
354
+ }, sponsorPrefix !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
355
+ className: styles.sponsor
356
+ }, sponsorPrefix) : null, /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
357
+ className: styles.sponsor,
358
+ size: "6"
359
+ }, sponsor))) : null)].filter(function (it) {
391
360
  return it !== null;
392
361
  });
393
362
  return /*#__PURE__*/React__default["default"].createElement("div", {
394
- className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.isCurrent, current), _defineProperty__default["default"](_ref8, styles.isVideo, isVideo), _defineProperty__default["default"](_ref8, styles.hasVideoBackground, hasVideoBackground), _defineProperty__default["default"](_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
363
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.isCurrent, current), _defineProperty__default["default"](_ref7, styles.isVideo, isVideo), _defineProperty__default["default"](_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
395
364
  "data-screen-ready": isStatic || isCapture
396
365
  }, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
397
- className: styles.background,
398
366
  background: background,
399
367
  width: width,
400
368
  height: height,
@@ -402,14 +370,13 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
402
370
  playing: backgroundPlaying,
403
371
  muted: muted,
404
372
  shouldLoad: mediaShouldLoad,
405
- mediaRef: mediaRef,
406
- withoutVideo: isPreview
373
+ mediaRef: mediaRef
407
374
  }), /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
408
- className: styles.content,
375
+ className: styles.inner,
409
376
  width: width,
410
377
  height: height
411
378
  }, /*#__PURE__*/React__default["default"].createElement("div", {
412
- className: classNames__default["default"]([styles.articleContent, _defineProperty__default["default"]({}, styles["".concat(site)], site !== null)]),
379
+ className: classNames__default["default"]([styles.content, _defineProperty__default["default"]({}, styles["".concat(site)], site !== null)]),
413
380
  style: _objectSpread__default["default"]({
414
381
  paddingTop: spacing,
415
382
  minHeight: minContentHeight
@@ -417,6 +384,10 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
417
384
  ref: contentRef
418
385
  }, items), /*#__PURE__*/React__default["default"].createElement("div", {
419
386
  className: styles.visual
387
+ }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
388
+ playing: transitionPlaying,
389
+ transitions: transitions,
390
+ disabled: transitionDisabled || true
420
391
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
421
392
  key: "image",
422
393
  placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
@@ -445,9 +416,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
445
416
  fit: 'cover'
446
417
  },
447
418
  shouldLoad: mediaShouldLoad,
448
- withoutVideo: isPreview,
449
419
  playing: backgroundPlaying && playing
450
- }) : null, hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
420
+ }) : null, hasImage && isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
451
421
  className: styles.video,
452
422
  media: image,
453
423
  width: width,
@@ -459,12 +429,8 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
459
429
  shouldLoad: mediaShouldLoad,
460
430
  playing: backgroundPlaying && playing,
461
431
  muted: muted,
462
- withoutVideo: isPreview,
463
- mediaRef: mediaRef,
464
- autoPlay: true
465
- }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
466
- className: styles.callToActionContainer
467
- }, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
432
+ mediaRef: mediaRef
433
+ }) : null), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
468
434
  style: {
469
435
  paddingTop: spacing,
470
436
  paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
@@ -483,7 +449,7 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
483
449
  className: styles.icon
484
450
  }) : null,
485
451
  openWebView: openWebView
486
- }))) : null)));
452
+ }))) : null))));
487
453
  };
488
454
 
489
455
  UrbaniaArticle.propTypes = propTypes$1;
@@ -632,7 +598,7 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
632
598
  body: 'En vedette'
633
599
  }),
634
600
  author: _objectSpread__default["default"](_objectSpread__default["default"]({}, finalArticleAuthor), author),
635
- sponsors: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread__default["default"](_objectSpread__default["default"]({}, sponsor), {}, {
601
+ sponsor: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread__default["default"](_objectSpread__default["default"]({}, sponsor), {}, {
636
602
  body: "<strong>".concat(defaultSponsor, "</strong>")
637
603
  })] : [sponsor],
638
604
  sponsorPrefix: sponsorPrefix,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-article",
3
- "version": "0.3.250",
3
+ "version": "0.3.251",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -51,19 +51,19 @@
51
51
  "@babel/runtime": "^7.13.10",
52
52
  "@folklore/fetch": "^0.1.15",
53
53
  "@folklore/size": "^0.1.20",
54
- "@micromag/core": "^0.3.246",
55
- "@micromag/element-background": "^0.3.246",
56
- "@micromag/element-call-to-action": "^0.3.250",
57
- "@micromag/element-closed-captions": "^0.3.246",
58
- "@micromag/element-container": "^0.3.246",
59
- "@micromag/element-heading": "^0.3.246",
60
- "@micromag/element-image": "^0.3.246",
61
- "@micromag/element-media-controls": "^0.3.246",
62
- "@micromag/element-text": "^0.3.246",
63
- "@micromag/element-urbania-author": "^0.3.246",
64
- "@micromag/element-video": "^0.3.246",
65
- "@micromag/element-visual": "^0.3.246",
66
- "@micromag/transforms": "^0.3.246",
54
+ "@micromag/core": "^0.3.251",
55
+ "@micromag/element-background": "^0.3.251",
56
+ "@micromag/element-call-to-action": "^0.3.251",
57
+ "@micromag/element-closed-captions": "^0.3.251",
58
+ "@micromag/element-container": "^0.3.251",
59
+ "@micromag/element-heading": "^0.3.251",
60
+ "@micromag/element-image": "^0.3.251",
61
+ "@micromag/element-media-controls": "^0.3.251",
62
+ "@micromag/element-text": "^0.3.251",
63
+ "@micromag/element-urbania-author": "^0.3.251",
64
+ "@micromag/element-video": "^0.3.251",
65
+ "@micromag/element-visual": "^0.3.251",
66
+ "@micromag/transforms": "^0.3.251",
67
67
  "classnames": "^2.2.6",
68
68
  "lodash": "^4.17.21",
69
69
  "prop-types": "^15.7.2",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "f0c7716e6a78f4c0025594b668e669f0baf5286d"
76
+ "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
77
77
  }