@micromag/screen-video-360 0.3.147 → 0.3.152

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-360-container .micromag-screen-video-360-canvas,.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton,.micromag-screen-video-360-container .micromag-screen-video-360-content,.micromag-screen-video-360-container .micromag-screen-video-360-placeholder,.micromag-screen-video-360-container .micromag-screen-video-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-360-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-360-disabled.micromag-screen-video-360-container{overflow:hidden;pointer-events:none}.micromag-screen-video-360-hidden.micromag-screen-video-360-container{display:none;visibility:hidden}.micromag-screen-video-360-placeholder.micromag-screen-video-360-container .micromag-screen-video-360-content{position:relative;padding:6px}.micromag-screen-video-360-container .micromag-screen-video-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;height:100%;margin:0}.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-video-360-container .micromag-screen-video-360-videoContainer{position:absolute}.micromag-screen-video-360-container .micromag-screen-video-360-video{visibility:hidden}.micromag-screen-video-360-container .micromag-screen-video-360-video video{height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-mediaControls{padding:10px 20px 20px}.micromag-screen-video-360-container .micromag-screen-video-360-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-video-360-container.micromag-screen-video-360-showVideo .micromag-screen-video-360-video{visibility:visible}
+.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-video-360-container .micromag-screen-video-360-canvas,.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton,.micromag-screen-video-360-container .micromag-screen-video-360-content,.micromag-screen-video-360-container .micromag-screen-video-360-placeholder,.micromag-screen-video-360-container .micromag-screen-video-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-360-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-360-disabled.micromag-screen-video-360-container{overflow:hidden;pointer-events:none}.micromag-screen-video-360-hidden.micromag-screen-video-360-container{display:none;visibility:hidden}.micromag-screen-video-360-placeholder.micromag-screen-video-360-container .micromag-screen-video-360-content{position:relative;padding:6px}.micromag-screen-video-360-container .micromag-screen-video-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;height:100%;margin:0}.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-video-360-container .micromag-screen-video-360-videoContainer{position:absolute}.micromag-screen-video-360-container .micromag-screen-video-360-video{visibility:hidden}.micromag-screen-video-360-container .micromag-screen-video-360-video video{height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-mediaControls{padding:10px 20px 20px}.micromag-screen-video-360-container .micromag-screen-video-360-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-bottom{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:padding .2s ease-out,-webkit-transform .2s ease-out;transition:padding .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out;transition:transform .2s ease-out,padding .2s ease-out,-webkit-transform .2s ease-out}.micromag-screen-video-360-container .micromag-screen-video-360-bottom>*{margin-bottom:10px}.micromag-screen-video-360-container .micromag-screen-video-360-bottom>:last-child{margin-bottom:0}.micromag-screen-video-360-container.micromag-screen-video-360-showVideo .micromag-screen-video-360-video{visibility:visible}

package/es/index.js

@@ -9,20 +9,17 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import 'whatwg-fetch';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useTrackScreenMedia, useAnimationFrame } from '@micromag/core/hooks';
+import { useViewerInteraction, useViewerNavigation, useViewerContext, useScreenSize, useScreenRenderContext, useViewerWebView, usePlaybackContext } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useTrackScreenMedia, useActivityDetector, useAnimationFrame } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
 import ClosedCaptions from '@micromag/element-closed-captions';
 import Container from '@micromag/element-container';
 import Image from '@micromag/element-image';
-import MediaControls from '@micromag/element-media-controls';
 import Video from '@micromag/element-video';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Video as Video$1, Container as Container$1 } from '@micromag/transforms/apple-news';
 
-var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottomContent":"micromag-screen-video-360-bottomContent","showVideo":"micromag-screen-video-360-showVideo"};
-
 /**
  * Locale loader
  */
@@ -80,6 +77,8 @@ var useThree = function useThree() {
   return loadedPackage;
 };
 
+var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottom":"micromag-screen-video-360-bottom","showVideo":"micromag-screen-video-360-showVideo"};
+
 var propTypes = {
   layout: PropTypes.oneOf(['full']),
   video: PropTypes$1.videoElement,
@@ -88,12 +87,9 @@ var propTypes = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
-  onPrevious: PropTypes.func,
-  onNext: PropTypes.func,
   type: PropTypes.string,
   spacing: PropTypes.number,
-  enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func,
+  mediaRef: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -104,17 +100,14 @@ var defaultProps = {
   current: true,
   active: true,
   transitions: null,
-  onPrevious: null,
-  onNext: null,
   type: null,
   spacing: 20,
-  enableInteraction: null,
-  disableInteraction: null,
+  mediaRef: null,
   className: null
 };
 
 var Video360Screen = function Video360Screen(_ref) {
-  var _ref12;
+  var _ref11;
 
   _ref.layout;
       var video = _ref.video,
@@ -123,17 +116,26 @@ var Video360Screen = function Video360Screen(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
       type = _ref.type,
       spacing = _ref.spacing,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
+      customMediaRef = _ref.mediaRef,
       className = _ref.className;
   var THREE = useThree();
   var trackScreenEvent = useTrackScreenEvent(type);
   var trackScreenMedia = useTrackScreenMedia('video_360');
 
+  var _useViewerInteraction = useViewerInteraction(),
+      enableInteraction = _useViewerInteraction.enableInteraction,
+      disableInteraction = _useViewerInteraction.disableInteraction;
+
+  var _useViewerNavigation = useViewerNavigation(),
+      gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
+      gotoNextScreen = _useViewerNavigation.gotoNextScreen;
+
+  var _useViewerContext = useViewerContext(),
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
@@ -148,17 +150,102 @@ var Video360Screen = function Video360Screen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
+
+  var _ref2 = video || {},
+      _ref2$media = _ref2.media,
+      videoMedia = _ref2$media === void 0 ? null : _ref2$media,
+      _ref2$closedCaptions = _ref2.closedCaptions,
+      closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
+      _ref2$withSeekBar = _ref2.withSeekBar,
+      withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
+      _ref2$withControls = _ref2.withControls,
+      withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
+      _ref2$autoPlay = _ref2.autoPlay,
+      autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? null : _ref2$color,
+      _ref2$progressColor = _ref2.progressColor,
+      progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
+
   var videoContainerRef = useRef();
-  var apiRef = useRef();
 
-  var _ref2 = apiRef.current || {},
-      togglePlay = _ref2.togglePlay,
-      toggleMute = _ref2.toggleMute,
-      seek = _ref2.seek,
-      play = _ref2.play,
-      pause = _ref2.pause;
+  var _usePlaybackContext = usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      muted = _usePlaybackContext.muted,
+      setControls = _usePlaybackContext.setControls,
+      setControlsTheme = _usePlaybackContext.setControlsTheme,
+      setMedia = _usePlaybackContext.setMedia,
+      setPlaying = _usePlaybackContext.setPlaying,
+      showControls = _usePlaybackContext.showControls,
+      hideControls = _usePlaybackContext.hideControls;
+
+  var mediaRef = useRef(null);
+  useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+
+    if (withControls || withSeekBar) {
+      setControls(true);
+      setControlsTheme({
+        seekBarOnly: withSeekBar && !withControls,
+        color: color,
+        progressColor: progressColor
+      });
+    } else {
+      setControls(false);
+    }
+
+    return function () {
+      if (withControls || withSeekBar) {
+        setControls(false);
+      }
+    };
+  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
+  useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+
+    setMedia(mediaRef.current);
+    return function () {
+      setMedia(null);
+    };
+  }, [current]);
+  useEffect(function () {
+    if (customMediaRef !== null) {
+      customMediaRef(mediaRef.current);
+    }
+  }, [mediaRef.current]);
+  useEffect(function () {
+    if (current && autoPlay && !playing) {
+      setPlaying(true);
+    }
+  }, [current, autoPlay]);
+
+  var _useActivityDetector = useActivityDetector({
+    disabled: !current || !isView,
+    timeout: 2000
+  }),
+      activityDetectorRef = _useActivityDetector.ref,
+      activityDetected = _useActivityDetector.detected;
+
+  useEffect(function () {
+    if (!current) {
+      return;
+    }
+
+    if (activityDetected) {
+      showControls();
+    } else {
+      hideControls();
+    }
+  }, [activityDetected, showControls, hideControls]);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -170,78 +257,45 @@ var Video360Screen = function Video360Screen(_ref) {
       duration = _useState4[0],
       setDuration = _useState4[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      playing = _useState6[0],
-      setPlaying = _useState6[1];
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      muted = _useState8[0],
-      setMuted = _useState8[1];
-
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
   }, [setDuration, duration]);
   var onProgressStep = useCallback(function (step) {
     trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
   }, [trackScreenMedia, video]);
-  var onDurationChanged = useCallback(function (dur) {
+  var onDurationChange = useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
   var onPlay = useCallback(function (_ref3) {
     var initial = _ref3.initial;
-    setPlaying(true);
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
   var onPause = useCallback(function (_ref4) {
     var midway = _ref4.midway;
-    setPlaying(false);
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
-  var onVolumeChanged = useCallback(function (isMuted) {
-    setMuted(isMuted);
-    trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
-  }, [trackScreenMedia, video]);
   var onSeeked = useCallback(function (time) {
     if (time > 0) {
       trackScreenMedia(video, 'seek');
     }
   }, [trackScreenMedia, video]);
-  var onToggleMute = useCallback(function () {
-    if (muted && !playing) {
-      play();
-    }
-
-    toggleMute();
-  }, [muted, toggleMute]);
-  useEffect(function () {
-    if (!current && playing) {
-      pause();
-    }
-  }, [playing, current]); // ------------------------------------
+  var onEnded = useCallback(function () {
+    setPlaying(false);
+  }, [setPlaying]); // ------------------------------------
 
   var hasVideo = video !== null;
 
-  var _useState9 = useState(!hasVideo),
-      _useState10 = _slicedToArray(_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1];
+  var _useState5 = useState(!hasVideo),
+      _useState6 = _slicedToArray(_useState5, 2),
+      ready = _useState6[0],
+      setReady = _useState6[1];
 
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
 
-  var _ref5 = video || {},
-      _ref5$media = _ref5.media,
-      videoMedia = _ref5$media === void 0 ? null : _ref5$media,
-      _ref5$closedCaptions = _ref5.closedCaptions,
-      closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
-      _ref5$withSeekBar = _ref5.withSeekBar,
-      withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
-      _ref5$withControls = _ref5.withControls,
-      withControls = _ref5$withControls === void 0 ? false : _ref5$withControls,
-      _ref5$autoPlay = _ref5.autoPlay,
-      autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay;
+  var _ref5 = callToAction || {},
+      _ref5$active = _ref5.active,
+      hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
 
   var finalVideo = hasVideo ? _objectSpread(_objectSpread({}, video), {}, {
     autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -265,10 +319,10 @@ var Video360Screen = function Video360Screen(_ref) {
 
   var hasThumbnail = thumbnailUrl !== null;
 
-  var _useState11 = useState(!hasThumbnail),
-      _useState12 = _slicedToArray(_useState11, 2),
-      posterReady = _useState12[0],
-      setPosterReady = _useState12[1];
+  var _useState7 = useState(!hasThumbnail),
+      _useState8 = _slicedToArray(_useState7, 2),
+      posterReady = _useState8[0],
+      setPosterReady = _useState8[1];
 
   var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
 
@@ -337,13 +391,9 @@ var Video360Screen = function Video360Screen(_ref) {
       var geometry = new SphereBufferGeometry(500, 60, 40);
       geometry.scale(-1, 1, 1);
 
-      var _ref8 = apiRef.current || {},
-          _ref8$mediaRef = _ref8.mediaRef,
-          videoMediaRef = _ref8$mediaRef === void 0 ? null : _ref8$mediaRef;
-
-      var _ref9 = videoMediaRef || {},
-          _ref9$current = _ref9.current,
-          videoElement = _ref9$current === void 0 ? null : _ref9$current;
+      var _ref8 = mediaRef || {},
+          _ref8$current = _ref8.current,
+          videoElement = _ref8$current === void 0 ? null : _ref8$current;
 
       var videoTexture = new VideoTexture(videoElement);
       var videoMaterial = new MeshBasicMaterial({
@@ -385,38 +435,37 @@ var Video360Screen = function Video360Screen(_ref) {
     pointerDownX.current = e.clientX;
     pointerDownY.current = e.clientY;
     pointerLon.current = lon.current;
-    pointerLat.current = lat.current;
-
-    if (togglePlayTimeout.current !== null) {
-      clearTimeout(togglePlayTimeout.current);
-    }
-
-    togglePlayTimeout.current = setTimeout(function () {
-      togglePlay();
-      togglePlayTimeout.current = null;
-    }, 300);
-  }, [togglePlay]);
+    pointerLat.current = lat.current; // if (togglePlayTimeout.current !== null) {
+    //     clearTimeout(togglePlayTimeout.current);
+    // }
+    // togglePlayTimeout.current = setTimeout(() => {
+    //     togglePlay();
+    //     togglePlayTimeout.current = null;
+    // }, 300);
+  }, [
+    /* togglePlay */
+  ]);
   var pixelsMoved = useRef(0);
   var lastPointerClient = useRef(null);
   var pixelsMovedTracked = useRef(false);
   var onPointerMove = useCallback(function (e) {
     if (pointerDown.current) {
-      var _ref10 = e || {},
-          _ref10$clientX = _ref10.clientX,
-          clientX = _ref10$clientX === void 0 ? null : _ref10$clientX,
-          _ref10$clientY = _ref10.clientY,
-          clientY = _ref10$clientY === void 0 ? null : _ref10$clientY;
+      var _ref9 = e || {},
+          _ref9$clientX = _ref9.clientX,
+          clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
+          _ref9$clientY = _ref9.clientY,
+          clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
 
       var downDeltaX = pointerDownX.current - clientX;
       var downDeltaY = pointerDownY.current - clientY;
       lon.current = downDeltaX * 0.2 + pointerLon.current;
       lat.current = downDeltaY * 0.2 + pointerLat.current;
 
-      var _ref11 = lastPointerClient.current || {},
-          _ref11$x = _ref11.x,
-          lastX = _ref11$x === void 0 ? clientX : _ref11$x,
-          _ref11$y = _ref11.y,
-          lastY = _ref11$y === void 0 ? clientY : _ref11$y;
+      var _ref10 = lastPointerClient.current || {},
+          _ref10$x = _ref10.x,
+          lastX = _ref10$x === void 0 ? clientX : _ref10$x,
+          _ref10$y = _ref10.y,
+          lastY = _ref10$y === void 0 ? clientY : _ref10$y;
 
       var deltaX = Math.abs(lastX - clientX) || 0;
       var deltaY = Math.abs(lastY - clientY) || 0;
@@ -460,11 +509,11 @@ var Video360Screen = function Video360Screen(_ref) {
         var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
 
         if (hasTappedLeft) {
-          if (onPrevious !== null) {
-            onPrevious();
+          if (gotoPreviousScreen !== null) {
+            gotoPreviousScreen();
           }
-        } else if (onNext !== null) {
-          onNext();
+        } else if (gotoNextScreen !== null) {
+          gotoNextScreen();
         }
       }
 
@@ -475,8 +524,7 @@ var Video360Screen = function Video360Screen(_ref) {
     }
 
     pointerDown.current = false;
-  }, [onPrevious, onNext, landscape]);
-  var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
+  }, [gotoPreviousScreen, gotoNextScreen, landscape]); // Building elements ------------------
 
   var items = [/*#__PURE__*/React.createElement(ScreenElement, {
     key: "video",
@@ -532,7 +580,14 @@ var Video360Screen = function Video360Screen(_ref) {
     resolution: resolution
   })))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
     key: "bottom-content",
-    className: styles.bottomContent
+    className: styles.bottom,
+    style: {
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingBottom: spacing / 2,
+      paddingTop: 0
+    }
   }, /*#__PURE__*/React.createElement(Transitions, {
     playing: transitionPlaying,
     transitions: transitions,
@@ -541,35 +596,17 @@ var Video360Screen = function Video360Screen(_ref) {
     className: styles.closedCaptions,
     media: closedCaptions,
     currentTime: currentTime
-  }) : null, withVideoSphere ? /*#__PURE__*/React.createElement(MediaControls, {
-    className: styles.mediaControls,
-    withSeekBar: withSeekBar,
-    withControls: withControls,
-    playing: playing,
-    muted: muted,
-    currentTime: currentTime,
-    duration: duration,
-    onTogglePlay: togglePlay,
-    onToggleMute: onToggleMute,
-    onSeek: seek,
-    focusable: current && isView
-  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: -spacing / 2
-    }
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    callToAction: callToAction,
+  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
+    className: styles.callToAction,
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
     enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
+    disableInteraction: disableInteraction,
+    openWebView: openWebView
   })) : null)) : null];
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref12 = {}, _defineProperty(_ref12, className, className !== null), _defineProperty(_ref12, styles.showVideo, isPreview || isStatic || isCapture), _ref12)]),
+    className: classNames([styles.container, (_ref11 = {}, _defineProperty(_ref11, className, className !== null), _defineProperty(_ref11, styles.showVideo, isPreview || isStatic || isCapture), _ref11)]),
+    ref: activityDetectorRef,
     "data-screen-ready": (isStatic || isCapture) && posterReady || ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
@@ -591,17 +628,19 @@ var Video360Screen = function Video360Screen(_ref) {
       top: resizedVideoTop
     }
   }, /*#__PURE__*/React.createElement(Video, Object.assign({}, finalVideo, {
-    ref: apiRef,
+    mediaRef: mediaRef,
     className: styles.video,
+    paused: !current || !playing,
+    muted: muted,
     withoutCors: true,
     onReady: onVideoReady,
     onPlay: onPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
+    onDurationChange: onDurationChange,
     onSeeked: onSeeked,
-    onVolumeChanged: onVolumeChanged,
+    onEnded: onEnded,
     onPosterLoaded: onPosterLoaded,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad

package/lib/index.js

@@ -20,7 +20,6 @@ var CallToAction = require('@micromag/element-call-to-action');
 var ClosedCaptions = require('@micromag/element-closed-captions');
 var Container = require('@micromag/element-container');
 var Image = require('@micromag/element-image');
-var MediaControls = require('@micromag/element-media-controls');
 var Video = require('@micromag/element-video');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
@@ -56,12 +55,9 @@ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
-var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
-var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottomContent":"micromag-screen-video-360-bottomContent","showVideo":"micromag-screen-video-360-showVideo"};
-
 /**
  * Locale loader
  */
@@ -119,6 +115,8 @@ var useThree = function useThree() {
   return loadedPackage;
 };
 
+var styles = {"container":"micromag-screen-video-360-container","canvasButton":"micromag-screen-video-360-canvasButton","canvas":"micromag-screen-video-360-canvas","content":"micromag-screen-video-360-content","placeholder":"micromag-screen-video-360-placeholder","video":"micromag-screen-video-360-video","disabled":"micromag-screen-video-360-disabled","hidden":"micromag-screen-video-360-hidden","empty":"micromag-screen-video-360-empty","videoContainer":"micromag-screen-video-360-videoContainer","mediaControls":"micromag-screen-video-360-mediaControls","bottom":"micromag-screen-video-360-bottom","showVideo":"micromag-screen-video-360-showVideo"};
+
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['full']),
   video: core.PropTypes.videoElement,
@@ -127,12 +125,9 @@ var propTypes = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
-  onPrevious: PropTypes__default["default"].func,
-  onNext: PropTypes__default["default"].func,
   type: PropTypes__default["default"].string,
   spacing: PropTypes__default["default"].number,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
+  mediaRef: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -143,17 +138,14 @@ var defaultProps = {
   current: true,
   active: true,
   transitions: null,
-  onPrevious: null,
-  onNext: null,
   type: null,
   spacing: 20,
-  enableInteraction: null,
-  disableInteraction: null,
+  mediaRef: null,
   className: null
 };
 
 var Video360Screen = function Video360Screen(_ref) {
-  var _ref12;
+  var _ref11;
 
   _ref.layout;
       var video = _ref.video,
@@ -162,17 +154,26 @@ var Video360Screen = function Video360Screen(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
       type = _ref.type,
       spacing = _ref.spacing,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
+      customMediaRef = _ref.mediaRef,
       className = _ref.className;
   var THREE = useThree();
   var trackScreenEvent = hooks.useTrackScreenEvent(type);
   var trackScreenMedia = hooks.useTrackScreenMedia('video_360');
 
+  var _useViewerInteraction = contexts.useViewerInteraction(),
+      enableInteraction = _useViewerInteraction.enableInteraction,
+      disableInteraction = _useViewerInteraction.disableInteraction;
+
+  var _useViewerNavigation = contexts.useViewerNavigation(),
+      gotoPreviousScreen = _useViewerNavigation.gotoPreviousScreen,
+      gotoNextScreen = _useViewerNavigation.gotoNextScreen;
+
+  var _useViewerContext = contexts.useViewerContext(),
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
@@ -187,17 +188,102 @@ var Video360Screen = function Video360Screen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerWebView = contexts.useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active;
+
+  var _ref2 = video || {},
+      _ref2$media = _ref2.media,
+      videoMedia = _ref2$media === void 0 ? null : _ref2$media,
+      _ref2$closedCaptions = _ref2.closedCaptions,
+      closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
+      _ref2$withSeekBar = _ref2.withSeekBar,
+      withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
+      _ref2$withControls = _ref2.withControls,
+      withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
+      _ref2$autoPlay = _ref2.autoPlay,
+      autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? null : _ref2$color,
+      _ref2$progressColor = _ref2.progressColor,
+      progressColor = _ref2$progressColor === void 0 ? null : _ref2$progressColor;
+
   var videoContainerRef = React.useRef();
-  var apiRef = React.useRef();
 
-  var _ref2 = apiRef.current || {},
-      togglePlay = _ref2.togglePlay,
-      toggleMute = _ref2.toggleMute,
-      seek = _ref2.seek,
-      play = _ref2.play,
-      pause = _ref2.pause;
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      muted = _usePlaybackContext.muted,
+      setControls = _usePlaybackContext.setControls,
+      setControlsTheme = _usePlaybackContext.setControlsTheme,
+      setMedia = _usePlaybackContext.setMedia,
+      setPlaying = _usePlaybackContext.setPlaying,
+      showControls = _usePlaybackContext.showControls,
+      hideControls = _usePlaybackContext.hideControls;
+
+  var mediaRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+
+    if (withControls || withSeekBar) {
+      setControls(true);
+      setControlsTheme({
+        seekBarOnly: withSeekBar && !withControls,
+        color: color,
+        progressColor: progressColor
+      });
+    } else {
+      setControls(false);
+    }
+
+    return function () {
+      if (withControls || withSeekBar) {
+        setControls(false);
+      }
+    };
+  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
+  React.useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+
+    setMedia(mediaRef.current);
+    return function () {
+      setMedia(null);
+    };
+  }, [current]);
+  React.useEffect(function () {
+    if (customMediaRef !== null) {
+      customMediaRef(mediaRef.current);
+    }
+  }, [mediaRef.current]);
+  React.useEffect(function () {
+    if (current && autoPlay && !playing) {
+      setPlaying(true);
+    }
+  }, [current, autoPlay]);
+
+  var _useActivityDetector = hooks.useActivityDetector({
+    disabled: !current || !isView,
+    timeout: 2000
+  }),
+      activityDetectorRef = _useActivityDetector.ref,
+      activityDetected = _useActivityDetector.detected;
+
+  React.useEffect(function () {
+    if (!current) {
+      return;
+    }
+
+    if (activityDetected) {
+      showControls();
+    } else {
+      hideControls();
+    }
+  }, [activityDetected, showControls, hideControls]);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -209,78 +295,45 @@ var Video360Screen = function Video360Screen(_ref) {
       duration = _useState4[0],
       setDuration = _useState4[1];
 
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      playing = _useState6[0],
-      setPlaying = _useState6[1];
-
-  var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      muted = _useState8[0],
-      setMuted = _useState8[1];
-
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
   }, [setDuration, duration]);
   var onProgressStep = React.useCallback(function (step) {
     trackScreenMedia(video, "progress_".concat(Math.round(step * 100, 10), "%"));
   }, [trackScreenMedia, video]);
-  var onDurationChanged = React.useCallback(function (dur) {
+  var onDurationChange = React.useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
   var onPlay = React.useCallback(function (_ref3) {
     var initial = _ref3.initial;
-    setPlaying(true);
     trackScreenMedia(video, initial ? 'play' : 'resume');
   }, [trackScreenMedia, video]);
   var onPause = React.useCallback(function (_ref4) {
     var midway = _ref4.midway;
-    setPlaying(false);
     trackScreenMedia(video, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, video]);
-  var onVolumeChanged = React.useCallback(function (isMuted) {
-    setMuted(isMuted);
-    trackScreenMedia(video, isMuted ? 'mute' : 'unmute');
-  }, [trackScreenMedia, video]);
   var onSeeked = React.useCallback(function (time) {
     if (time > 0) {
       trackScreenMedia(video, 'seek');
     }
   }, [trackScreenMedia, video]);
-  var onToggleMute = React.useCallback(function () {
-    if (muted && !playing) {
-      play();
-    }
-
-    toggleMute();
-  }, [muted, toggleMute]);
-  React.useEffect(function () {
-    if (!current && playing) {
-      pause();
-    }
-  }, [playing, current]); // ------------------------------------
+  var onEnded = React.useCallback(function () {
+    setPlaying(false);
+  }, [setPlaying]); // ------------------------------------
 
   var hasVideo = video !== null;
 
-  var _useState9 = React.useState(!hasVideo),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1];
+  var _useState5 = React.useState(!hasVideo),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      ready = _useState6[0],
+      setReady = _useState6[1];
 
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
 
-  var _ref5 = video || {},
-      _ref5$media = _ref5.media,
-      videoMedia = _ref5$media === void 0 ? null : _ref5$media,
-      _ref5$closedCaptions = _ref5.closedCaptions,
-      closedCaptions = _ref5$closedCaptions === void 0 ? null : _ref5$closedCaptions,
-      _ref5$withSeekBar = _ref5.withSeekBar,
-      withSeekBar = _ref5$withSeekBar === void 0 ? false : _ref5$withSeekBar,
-      _ref5$withControls = _ref5.withControls,
-      withControls = _ref5$withControls === void 0 ? false : _ref5$withControls,
-      _ref5$autoPlay = _ref5.autoPlay,
-      autoPlay = _ref5$autoPlay === void 0 ? true : _ref5$autoPlay;
+  var _ref5 = callToAction || {},
+      _ref5$active = _ref5.active,
+      hasCallToAction = _ref5$active === void 0 ? false : _ref5$active;
 
   var finalVideo = hasVideo ? _objectSpread__default["default"](_objectSpread__default["default"]({}, video), {}, {
     autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
@@ -304,10 +357,10 @@ var Video360Screen = function Video360Screen(_ref) {
 
   var hasThumbnail = thumbnailUrl !== null;
 
-  var _useState11 = React.useState(!hasThumbnail),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      posterReady = _useState12[0],
-      setPosterReady = _useState12[1];
+  var _useState7 = React.useState(!hasThumbnail),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      posterReady = _useState8[0],
+      setPosterReady = _useState8[1];
 
   var withVideoSphere = hasVideoUrl && (isView || isEdit) && !isCapture && !isStatic;
 
@@ -376,13 +429,9 @@ var Video360Screen = function Video360Screen(_ref) {
       var geometry = new SphereBufferGeometry(500, 60, 40);
       geometry.scale(-1, 1, 1);
 
-      var _ref8 = apiRef.current || {},
-          _ref8$mediaRef = _ref8.mediaRef,
-          videoMediaRef = _ref8$mediaRef === void 0 ? null : _ref8$mediaRef;
-
-      var _ref9 = videoMediaRef || {},
-          _ref9$current = _ref9.current,
-          videoElement = _ref9$current === void 0 ? null : _ref9$current;
+      var _ref8 = mediaRef || {},
+          _ref8$current = _ref8.current,
+          videoElement = _ref8$current === void 0 ? null : _ref8$current;
 
       var videoTexture = new VideoTexture(videoElement);
       var videoMaterial = new MeshBasicMaterial({
@@ -424,38 +473,37 @@ var Video360Screen = function Video360Screen(_ref) {
     pointerDownX.current = e.clientX;
     pointerDownY.current = e.clientY;
     pointerLon.current = lon.current;
-    pointerLat.current = lat.current;
-
-    if (togglePlayTimeout.current !== null) {
-      clearTimeout(togglePlayTimeout.current);
-    }
-
-    togglePlayTimeout.current = setTimeout(function () {
-      togglePlay();
-      togglePlayTimeout.current = null;
-    }, 300);
-  }, [togglePlay]);
+    pointerLat.current = lat.current; // if (togglePlayTimeout.current !== null) {
+    //     clearTimeout(togglePlayTimeout.current);
+    // }
+    // togglePlayTimeout.current = setTimeout(() => {
+    //     togglePlay();
+    //     togglePlayTimeout.current = null;
+    // }, 300);
+  }, [
+    /* togglePlay */
+  ]);
   var pixelsMoved = React.useRef(0);
   var lastPointerClient = React.useRef(null);
   var pixelsMovedTracked = React.useRef(false);
   var onPointerMove = React.useCallback(function (e) {
     if (pointerDown.current) {
-      var _ref10 = e || {},
-          _ref10$clientX = _ref10.clientX,
-          clientX = _ref10$clientX === void 0 ? null : _ref10$clientX,
-          _ref10$clientY = _ref10.clientY,
-          clientY = _ref10$clientY === void 0 ? null : _ref10$clientY;
+      var _ref9 = e || {},
+          _ref9$clientX = _ref9.clientX,
+          clientX = _ref9$clientX === void 0 ? null : _ref9$clientX,
+          _ref9$clientY = _ref9.clientY,
+          clientY = _ref9$clientY === void 0 ? null : _ref9$clientY;
 
       var downDeltaX = pointerDownX.current - clientX;
       var downDeltaY = pointerDownY.current - clientY;
       lon.current = downDeltaX * 0.2 + pointerLon.current;
       lat.current = downDeltaY * 0.2 + pointerLat.current;
 
-      var _ref11 = lastPointerClient.current || {},
-          _ref11$x = _ref11.x,
-          lastX = _ref11$x === void 0 ? clientX : _ref11$x,
-          _ref11$y = _ref11.y,
-          lastY = _ref11$y === void 0 ? clientY : _ref11$y;
+      var _ref10 = lastPointerClient.current || {},
+          _ref10$x = _ref10.x,
+          lastX = _ref10$x === void 0 ? clientX : _ref10$x,
+          _ref10$y = _ref10.y,
+          lastY = _ref10$y === void 0 ? clientY : _ref10$y;
 
       var deltaX = Math.abs(lastX - clientX) || 0;
       var deltaY = Math.abs(lastY - clientY) || 0;
@@ -499,11 +547,11 @@ var Video360Screen = function Video360Screen(_ref) {
         var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
 
         if (hasTappedLeft) {
-          if (onPrevious !== null) {
-            onPrevious();
+          if (gotoPreviousScreen !== null) {
+            gotoPreviousScreen();
           }
-        } else if (onNext !== null) {
-          onNext();
+        } else if (gotoNextScreen !== null) {
+          gotoNextScreen();
         }
       }
 
@@ -514,8 +562,7 @@ var Video360Screen = function Video360Screen(_ref) {
     }
 
     pointerDown.current = false;
-  }, [onPrevious, onNext, landscape]);
-  var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
+  }, [gotoPreviousScreen, gotoNextScreen, landscape]); // Building elements ------------------
 
   var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "video",
@@ -571,7 +618,14 @@ var Video360Screen = function Video360Screen(_ref) {
     resolution: resolution
   })))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     key: "bottom-content",
-    className: styles.bottomContent
+    className: styles.bottom,
+    style: {
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingBottom: spacing / 2,
+      paddingTop: 0
+    }
   }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
     playing: transitionPlaying,
     transitions: transitions,
@@ -580,35 +634,17 @@ var Video360Screen = function Video360Screen(_ref) {
     className: styles.closedCaptions,
     media: closedCaptions,
     currentTime: currentTime
-  }) : null, withVideoSphere ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
-    className: styles.mediaControls,
-    withSeekBar: withSeekBar,
-    withControls: withControls,
-    playing: playing,
-    muted: muted,
-    currentTime: currentTime,
-    duration: duration,
-    onTogglePlay: togglePlay,
-    onToggleMute: onToggleMute,
-    onSeek: seek,
-    focusable: current && isView
-  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: -spacing / 2
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    callToAction: callToAction,
+  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
+    className: styles.callToAction,
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
     enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
+    disableInteraction: disableInteraction,
+    openWebView: openWebView
   })) : null)) : null];
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, className, className !== null), _defineProperty__default["default"](_ref12, styles.showVideo, isPreview || isStatic || isCapture), _ref12)]),
+    className: classNames__default["default"]([styles.container, (_ref11 = {}, _defineProperty__default["default"](_ref11, className, className !== null), _defineProperty__default["default"](_ref11, styles.showVideo, isPreview || isStatic || isCapture), _ref11)]),
+    ref: activityDetectorRef,
     "data-screen-ready": (isStatic || isCapture) && posterReady || ready
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
@@ -630,17 +666,19 @@ var Video360Screen = function Video360Screen(_ref) {
       top: resizedVideoTop
     }
   }, /*#__PURE__*/React__default["default"].createElement(Video__default["default"], Object.assign({}, finalVideo, {
-    ref: apiRef,
+    mediaRef: mediaRef,
     className: styles.video,
+    paused: !current || !playing,
+    muted: muted,
     withoutCors: true,
     onReady: onVideoReady,
     onPlay: onPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
+    onDurationChange: onDurationChange,
     onSeeked: onSeeked,
-    onVolumeChanged: onVolumeChanged,
+    onEnded: onEnded,
     onPosterLoaded: onPosterLoaded,
     focusable: current && isView,
     shouldLoad: mediaShouldLoad

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-video-360",
-    "version": "0.3.147",
+    "version": "0.3.152",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.147",
-        "@micromag/element-background": "^0.3.147",
-        "@micromag/element-call-to-action": "^0.3.147",
-        "@micromag/element-closed-captions": "^0.3.147",
-        "@micromag/element-container": "^0.3.147",
-        "@micromag/element-image": "^0.3.147",
-        "@micromag/element-media-controls": "^0.3.147",
-        "@micromag/element-video": "^0.3.147",
-        "@micromag/transforms": "^0.3.147",
+        "@micromag/core": "^0.3.152",
+        "@micromag/element-background": "^0.3.152",
+        "@micromag/element-call-to-action": "^0.3.152",
+        "@micromag/element-closed-captions": "^0.3.152",
+        "@micromag/element-container": "^0.3.152",
+        "@micromag/element-image": "^0.3.152",
+        "@micromag/element-media-controls": "^0.3.152",
+        "@micromag/element-video": "^0.3.152",
+        "@micromag/transforms": "^0.3.152",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "695a66acc54f4863dc44a98f0471e8233ca10aee"
+    "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
 }