@micromag/screen-audio 0.3.147 → 0.3.152

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-audio-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-audio-disabled.micromag-screen-audio-container{overflow:hidden;pointer-events:none}.micromag-screen-audio-hidden.micromag-screen-audio-container{display:none;visibility:hidden}.micromag-screen-audio-placeholder.micromag-screen-audio-container .micromag-screen-audio-content{position:relative;padding:6px}.micromag-screen-audio-container .micromag-screen-audio-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-audio-container .micromag-screen-audio-mediaControls{padding:10px 20px 20px}.micromag-screen-audio-container .micromag-screen-audio-audio{position:absolute;bottom:50%;left:0;width:100%;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-screen-audio-container .micromag-screen-audio-bottomContent{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-audio-container .micromag-screen-audio-empty{width:100%;height:100px;margin:0 auto}.micromag-screen-audio-container.micromag-screen-audio-isPreview{pointer-events:none}
+.micromag-screen-audio-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-audio-disabled.micromag-screen-audio-container{overflow:hidden;pointer-events:none}.micromag-screen-audio-hidden.micromag-screen-audio-container{display:none;visibility:hidden}.micromag-screen-audio-placeholder.micromag-screen-audio-container .micromag-screen-audio-content{position:relative;padding:6px}.micromag-screen-audio-container .micromag-screen-audio-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-audio-container .micromag-screen-audio-audio{position:absolute;bottom:50%;left:0;width:100%;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-screen-audio-container .micromag-screen-audio-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-audio-container .micromag-screen-audio-bottom>*{margin-bottom:10px}.micromag-screen-audio-container .micromag-screen-audio-bottom>:last-child{margin-bottom:0}.micromag-screen-audio-container .micromag-screen-audio-empty{width:100%;height:100px;margin:0 auto}.micromag-screen-audio-container.micromag-screen-audio-isPreview{pointer-events:none}

package/es/index.js

@@ -4,11 +4,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, Transitions } from '@micromag/core/components';
-import { useScreenSize, useScreenRenderContext, useViewer } from '@micromag/core/contexts';
-import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
+import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
+import { useTrackScreenMedia } from '@micromag/core/hooks';
 import { isIos } from '@micromag/core/utils';
 import Audio from '@micromag/element-audio';
 import Background from '@micromag/element-background';
@@ -16,11 +16,10 @@ import CallToAction from '@micromag/element-call-to-action';
 import ClosedCaptions from '@micromag/element-closed-captions';
 import Container from '@micromag/element-container';
 import Layout, { Spacer } from '@micromag/element-layout';
-import MediaControls from '@micromag/element-media-controls';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Audio as Audio$1, Container as Container$1 } from '@micromag/transforms/apple-news';
 
-var styles = {"container":"micromag-screen-audio-container","disabled":"micromag-screen-audio-disabled","hidden":"micromag-screen-audio-hidden","placeholder":"micromag-screen-audio-placeholder","content":"micromag-screen-audio-content","empty":"micromag-screen-audio-empty","mediaControls":"micromag-screen-audio-mediaControls","audio":"micromag-screen-audio-audio","bottomContent":"micromag-screen-audio-bottomContent","isPreview":"micromag-screen-audio-isPreview"};
+var styles = {"container":"micromag-screen-audio-container","disabled":"micromag-screen-audio-disabled","hidden":"micromag-screen-audio-hidden","placeholder":"micromag-screen-audio-placeholder","content":"micromag-screen-audio-content","empty":"micromag-screen-audio-empty","audio":"micromag-screen-audio-audio","bottom":"micromag-screen-audio-bottom","isPreview":"micromag-screen-audio-isPreview"};
 
 var propTypes = {
   layout: PropTypes.oneOf(['middle']),
@@ -31,10 +30,8 @@ var propTypes = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
-  getMediaRef: PropTypes.func,
+  mediaRef: PropTypes.func,
   showWave: PropTypes.bool,
-  enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -46,10 +43,8 @@ var defaultProps = {
   current: true,
   active: true,
   transitions: null,
-  getMediaRef: null,
+  mediaRef: null,
   showWave: false,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -64,17 +59,13 @@ var AudioScreen = function AudioScreen(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
-      getMediaRef = _ref.getMediaRef,
+      customMediaRef = _ref.mediaRef,
       showWave = _ref.showWave,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
-  var trackScreenMedia = useTrackScreenMedia('audio');
 
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
   var _useScreenRenderConte = useScreenRenderContext(),
@@ -85,10 +76,15 @@ var AudioScreen = function AudioScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var trackScreenMedia = useTrackScreenMedia('audio');
 
   var _useState = useState(isStatic || isPlaceholder),
       _useState2 = _slicedToArray(_useState, 2),
@@ -99,50 +95,75 @@ var AudioScreen = function AudioScreen(_ref) {
   var mediaShouldLoad = current || active;
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+
+  var _ref2 = callToAction || {},
+      _ref2$active = _ref2.active,
+      hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+
   var hasAudio = audio !== null;
 
-  var _ref2 = audio || {},
-      _ref2$media = _ref2.media,
-      audioMedia = _ref2$media === void 0 ? null : _ref2$media,
-      _ref2$autoPlay = _ref2.autoPlay,
-      autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-      _ref2$closedCaptions = _ref2.closedCaptions,
-      closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-      _ref2$withPlayPause = _ref2.withPlayPause,
-      withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
-      _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 _ref3 = audioMedia || {},
-      _ref3$url = _ref3.url,
-      audioUrl = _ref3$url === void 0 ? null : _ref3$url;
+  var _ref3 = audio || {},
+      _ref3$media = _ref3.media,
+      audioMedia = _ref3$media === void 0 ? null : _ref3$media,
+      _ref3$autoPlay = _ref3.autoPlay,
+      autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
+      _ref3$closedCaptions = _ref3.closedCaptions,
+      closedCaptions = _ref3$closedCaptions === void 0 ? null : _ref3$closedCaptions,
+      _ref3$withPlayPause = _ref3.withPlayPause,
+      withPlayPause = _ref3$withPlayPause === void 0 ? false : _ref3$withPlayPause,
+      _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? null : _ref3$color,
+      _ref3$progressColor = _ref3.progressColor,
+      progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
+
+  var _ref4 = audioMedia || {},
+      _ref4$url = _ref4.url,
+      audioUrl = _ref4$url === void 0 ? null : _ref4$url;
 
   var hasAudioUrl = audioUrl !== null;
   var finalAudio = hasAudio ? _objectSpread(_objectSpread({}, audio), {}, {
     autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
   }) : null;
   var hasClosedCaptions = closedCaptions !== null;
-  var onAudioReady = useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  var apiRef = useRef();
 
-  var _ref4 = apiRef.current || {},
-      togglePlay = _ref4.togglePlay,
-      toggleMute = _ref4.toggleMute,
-      play = _ref4.play,
-      pause = _ref4.pause,
-      seek = _ref4.seek,
-      _ref4$mediaRef = _ref4.mediaRef,
-      apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
+  var _usePlaybackContext = usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      muted = _usePlaybackContext.muted,
+      setControls = _usePlaybackContext.setControls,
+      setControlsTheme = _usePlaybackContext.setControlsTheme;
+      _usePlaybackContext.setMedia;
+      var setPlaying = _usePlaybackContext.setPlaying;
 
+  var mediaRef = usePlaybackMediaRef(current);
   useEffect(function () {
-    if (apiMediaRef !== null && getMediaRef !== null) {
-      getMediaRef(apiMediaRef.current);
+    if (!current) {
+      return function () {};
     }
-  }, [apiMediaRef, getMediaRef]);
+
+    if (withPlayPause) {
+      setControls(true);
+      setControlsTheme({
+        color: color,
+        progressColor: progressColor
+      });
+    } else {
+      setControls(false);
+    }
+
+    return function () {
+      if (withPlayPause) {
+        setControls(false);
+      }
+    };
+  }, [current, withPlayPause, setControls, color, progressColor]);
+  useEffect(function () {
+    if (customMediaRef !== null) {
+      customMediaRef(mediaRef.current);
+    }
+  }, [mediaRef.current]);
+  var onAudioReady = useCallback(function () {
+    setReady(true);
+  }, [setReady]);
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -154,82 +175,39 @@ var AudioScreen = function AudioScreen(_ref) {
       duration = _useState6[0],
       setDuration = _useState6[1];
 
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      muted = _useState10[0],
-      setMuted = _useState10[1];
-
   var isIOS = useMemo(function () {
     return isIos();
   }, [isIos]);
+  useEffect(function () {
+    if (current && autoPlay && !playing) {
+      setPlaying(true);
+    }
+  }, [current, autoPlay]);
   var onTimeUpdate = useCallback(function (time) {
     setCurrentTime(time);
   }, [setDuration, duration]);
   var onProgressStep = useCallback(function (step) {
     trackScreenMedia(audio, "progress_".concat(Math.round(step * 100, 10), "%"));
   }, [trackScreenMedia, audio]);
-  var onDurationChanged = useCallback(function (dur) {
+  var onDurationChange = useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
   var onPlay = useCallback(function (_ref5) {
     var initial = _ref5.initial;
-    setPlaying(true);
     trackScreenMedia(audio, initial ? 'play' : 'resume');
   }, [trackScreenMedia, audio]);
   var onPause = useCallback(function (_ref6) {
     var midway = _ref6.midway;
-    setPlaying(false);
     trackScreenMedia(audio, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, audio]);
-  var onSeek = useCallback(function (e) {
-    seek(e);
-    play();
-  }, [seek, play]);
-  var onVolumeChanged = useCallback(function (isMuted) {
-    setMuted(isMuted);
-    trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
-  }, [trackScreenMedia, audio]);
+  var onEnded = useCallback(function () {
+    setPlaying(false);
+  }, [setPlaying]);
   var onSeeked = useCallback(function (time) {
     if (time > 0) {
       trackScreenMedia(audio, 'seek');
     }
   }, [trackScreenMedia, audio]);
-  var onToggleMute = useCallback(function () {
-    if (muted && !playing) {
-      play();
-    }
-
-    toggleMute();
-  }, [muted, toggleMute]);
-  useEffect(function () {
-    if (!current && playing) {
-      pause();
-    }
-  }, [playing, current]);
-  var longPressBind = useLongPress({
-    onLongPress: togglePlay
-  });
-  var cta = !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: -spacing / 2
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    callToAction: callToAction,
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null;
   var elements = [/*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-top"
   }), /*#__PURE__*/React.createElement(ScreenElement, {
@@ -249,7 +227,7 @@ var AudioScreen = function AudioScreen(_ref) {
     playing: transitionPlaying,
     disabled: transitionDisabled
   }, /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudio, {
-    ref: apiRef,
+    mediaRef: mediaRef,
     waveFake: isIOS || isPreview,
     waveProps: isPreview ? {
       sampleWidth: 10,
@@ -261,44 +239,46 @@ var AudioScreen = function AudioScreen(_ref) {
       backgroundColor: color,
       progressColor: progressColor
     },
+    paused: !current || !playing,
+    muted: muted,
     className: styles.audio,
     onReady: onAudioReady,
     onPlay: onPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
+    onDurationChange: onDurationChange,
     onSeeked: onSeeked,
-    onVolumeChanged: onVolumeChanged,
-    showWave: showWave
+    onEnded: onEnded,
+    withWave: showWave
   })))), /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-middle"
   }), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    key: "controls",
-    className: styles.bottomContent
+    key: "bottom",
+    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
+    }
   }, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
     className: styles.closedCaptions,
     media: closedCaptions,
     currentTime: currentTime
-  }) : null, hasAudioUrl && (isView || isEdit) ? /*#__PURE__*/React.createElement(MediaControls, {
-    className: styles.mediaControls,
-    withControls: withPlayPause,
-    playing: playing,
-    muted: muted,
-    onTogglePlay: togglePlay,
-    onToggleMute: onToggleMute,
+  }) : null, hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
+    className: styles.callToAction,
+    animationDisabled: isPreview,
     focusable: current && isView,
-    withSeekBar: !showWave,
-    duration: duration,
-    currentTime: currentTime,
-    onSeek: onSeek
-  }) : null, cta) : null].filter(function (el) {
+    openWebView: openWebView
+  })) : null) : null].filter(function (el) {
     return el !== null;
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.placeholder, isPlaceholder), _defineProperty(_ref7, styles.isPreview, isPreview), _ref7)]),
     "data-screen-ready": ready
-  }, longPressBind), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -312,7 +292,7 @@ var AudioScreen = function AudioScreen(_ref) {
     fullscreen: true,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing
     } : null
   }, elements)));
 };

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 Layout = require('@micromag/element-layout');
-var MediaControls = require('@micromag/element-media-controls');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
 
@@ -38,10 +37,9 @@ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
-var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
-var styles = {"container":"micromag-screen-audio-container","disabled":"micromag-screen-audio-disabled","hidden":"micromag-screen-audio-hidden","placeholder":"micromag-screen-audio-placeholder","content":"micromag-screen-audio-content","empty":"micromag-screen-audio-empty","mediaControls":"micromag-screen-audio-mediaControls","audio":"micromag-screen-audio-audio","bottomContent":"micromag-screen-audio-bottomContent","isPreview":"micromag-screen-audio-isPreview"};
+var styles = {"container":"micromag-screen-audio-container","disabled":"micromag-screen-audio-disabled","hidden":"micromag-screen-audio-hidden","placeholder":"micromag-screen-audio-placeholder","content":"micromag-screen-audio-content","empty":"micromag-screen-audio-empty","audio":"micromag-screen-audio-audio","bottom":"micromag-screen-audio-bottom","isPreview":"micromag-screen-audio-isPreview"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf(['middle']),
@@ -52,10 +50,8 @@ var propTypes = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
-  getMediaRef: PropTypes__default["default"].func,
+  mediaRef: PropTypes__default["default"].func,
   showWave: PropTypes__default["default"].bool,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -67,10 +63,8 @@ var defaultProps = {
   current: true,
   active: true,
   transitions: null,
-  getMediaRef: null,
+  mediaRef: null,
   showWave: false,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -85,17 +79,13 @@ var AudioScreen = function AudioScreen(_ref) {
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
-      getMediaRef = _ref.getMediaRef,
+      customMediaRef = _ref.mediaRef,
       showWave = _ref.showWave,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
-  var trackScreenMedia = hooks.useTrackScreenMedia('audio');
 
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
@@ -106,10 +96,15 @@ var AudioScreen = function AudioScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
-  var _useViewer = contexts.useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = contexts.useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = contexts.useViewerWebView(),
+      openWebView = _useViewerWebView.open;
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var trackScreenMedia = hooks.useTrackScreenMedia('audio');
 
   var _useState = React.useState(isStatic || isPlaceholder),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -120,50 +115,75 @@ var AudioScreen = function AudioScreen(_ref) {
   var mediaShouldLoad = current || active;
   var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+
+  var _ref2 = callToAction || {},
+      _ref2$active = _ref2.active,
+      hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
+
   var hasAudio = audio !== null;
 
-  var _ref2 = audio || {},
-      _ref2$media = _ref2.media,
-      audioMedia = _ref2$media === void 0 ? null : _ref2$media,
-      _ref2$autoPlay = _ref2.autoPlay,
-      autoPlay = _ref2$autoPlay === void 0 ? true : _ref2$autoPlay,
-      _ref2$closedCaptions = _ref2.closedCaptions,
-      closedCaptions = _ref2$closedCaptions === void 0 ? null : _ref2$closedCaptions,
-      _ref2$withPlayPause = _ref2.withPlayPause,
-      withPlayPause = _ref2$withPlayPause === void 0 ? false : _ref2$withPlayPause,
-      _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 _ref3 = audioMedia || {},
-      _ref3$url = _ref3.url,
-      audioUrl = _ref3$url === void 0 ? null : _ref3$url;
+  var _ref3 = audio || {},
+      _ref3$media = _ref3.media,
+      audioMedia = _ref3$media === void 0 ? null : _ref3$media,
+      _ref3$autoPlay = _ref3.autoPlay,
+      autoPlay = _ref3$autoPlay === void 0 ? true : _ref3$autoPlay,
+      _ref3$closedCaptions = _ref3.closedCaptions,
+      closedCaptions = _ref3$closedCaptions === void 0 ? null : _ref3$closedCaptions,
+      _ref3$withPlayPause = _ref3.withPlayPause,
+      withPlayPause = _ref3$withPlayPause === void 0 ? false : _ref3$withPlayPause,
+      _ref3$color = _ref3.color,
+      color = _ref3$color === void 0 ? null : _ref3$color,
+      _ref3$progressColor = _ref3.progressColor,
+      progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
+
+  var _ref4 = audioMedia || {},
+      _ref4$url = _ref4.url,
+      audioUrl = _ref4$url === void 0 ? null : _ref4$url;
 
   var hasAudioUrl = audioUrl !== null;
   var finalAudio = hasAudio ? _objectSpread__default["default"](_objectSpread__default["default"]({}, audio), {}, {
     autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
   }) : null;
   var hasClosedCaptions = closedCaptions !== null;
-  var onAudioReady = React.useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  var apiRef = React.useRef();
 
-  var _ref4 = apiRef.current || {},
-      togglePlay = _ref4.togglePlay,
-      toggleMute = _ref4.toggleMute,
-      play = _ref4.play,
-      pause = _ref4.pause,
-      seek = _ref4.seek,
-      _ref4$mediaRef = _ref4.mediaRef,
-      apiMediaRef = _ref4$mediaRef === void 0 ? null : _ref4$mediaRef;
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      playing = _usePlaybackContext.playing,
+      muted = _usePlaybackContext.muted,
+      setControls = _usePlaybackContext.setControls,
+      setControlsTheme = _usePlaybackContext.setControlsTheme;
+      _usePlaybackContext.setMedia;
+      var setPlaying = _usePlaybackContext.setPlaying;
 
+  var mediaRef = contexts.usePlaybackMediaRef(current);
   React.useEffect(function () {
-    if (apiMediaRef !== null && getMediaRef !== null) {
-      getMediaRef(apiMediaRef.current);
+    if (!current) {
+      return function () {};
     }
-  }, [apiMediaRef, getMediaRef]);
+
+    if (withPlayPause) {
+      setControls(true);
+      setControlsTheme({
+        color: color,
+        progressColor: progressColor
+      });
+    } else {
+      setControls(false);
+    }
+
+    return function () {
+      if (withPlayPause) {
+        setControls(false);
+      }
+    };
+  }, [current, withPlayPause, setControls, color, progressColor]);
+  React.useEffect(function () {
+    if (customMediaRef !== null) {
+      customMediaRef(mediaRef.current);
+    }
+  }, [mediaRef.current]);
+  var onAudioReady = React.useCallback(function () {
+    setReady(true);
+  }, [setReady]);
 
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
@@ -175,82 +195,39 @@ var AudioScreen = function AudioScreen(_ref) {
       duration = _useState6[0],
       setDuration = _useState6[1];
 
-  var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
-
-  var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      muted = _useState10[0],
-      setMuted = _useState10[1];
-
   var isIOS = React.useMemo(function () {
     return utils.isIos();
   }, [utils.isIos]);
+  React.useEffect(function () {
+    if (current && autoPlay && !playing) {
+      setPlaying(true);
+    }
+  }, [current, autoPlay]);
   var onTimeUpdate = React.useCallback(function (time) {
     setCurrentTime(time);
   }, [setDuration, duration]);
   var onProgressStep = React.useCallback(function (step) {
     trackScreenMedia(audio, "progress_".concat(Math.round(step * 100, 10), "%"));
   }, [trackScreenMedia, audio]);
-  var onDurationChanged = React.useCallback(function (dur) {
+  var onDurationChange = React.useCallback(function (dur) {
     setDuration(dur);
   }, [setDuration]);
   var onPlay = React.useCallback(function (_ref5) {
     var initial = _ref5.initial;
-    setPlaying(true);
     trackScreenMedia(audio, initial ? 'play' : 'resume');
   }, [trackScreenMedia, audio]);
   var onPause = React.useCallback(function (_ref6) {
     var midway = _ref6.midway;
-    setPlaying(false);
     trackScreenMedia(audio, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, audio]);
-  var onSeek = React.useCallback(function (e) {
-    seek(e);
-    play();
-  }, [seek, play]);
-  var onVolumeChanged = React.useCallback(function (isMuted) {
-    setMuted(isMuted);
-    trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
-  }, [trackScreenMedia, audio]);
+  var onEnded = React.useCallback(function () {
+    setPlaying(false);
+  }, [setPlaying]);
   var onSeeked = React.useCallback(function (time) {
     if (time > 0) {
       trackScreenMedia(audio, 'seek');
     }
   }, [trackScreenMedia, audio]);
-  var onToggleMute = React.useCallback(function () {
-    if (muted && !playing) {
-      play();
-    }
-
-    toggleMute();
-  }, [muted, toggleMute]);
-  React.useEffect(function () {
-    if (!current && playing) {
-      pause();
-    }
-  }, [playing, current]);
-  var longPressBind = hooks.useLongPress({
-    onLongPress: togglePlay
-  });
-  var cta = !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: -spacing / 2
-    },
-    key: "call-to-action"
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    callToAction: callToAction,
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null;
   var elements = [/*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-top"
   }), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -270,7 +247,7 @@ var AudioScreen = function AudioScreen(_ref) {
     playing: transitionPlaying,
     disabled: transitionDisabled
   }, /*#__PURE__*/React__default["default"].createElement(Audio__default["default"], Object.assign({}, finalAudio, {
-    ref: apiRef,
+    mediaRef: mediaRef,
     waveFake: isIOS || isPreview,
     waveProps: isPreview ? {
       sampleWidth: 10,
@@ -282,44 +259,46 @@ var AudioScreen = function AudioScreen(_ref) {
       backgroundColor: color,
       progressColor: progressColor
     },
+    paused: !current || !playing,
+    muted: muted,
     className: styles.audio,
     onReady: onAudioReady,
     onPlay: onPlay,
     onPause: onPause,
     onTimeUpdate: onTimeUpdate,
     onProgressStep: onProgressStep,
-    onDurationChanged: onDurationChanged,
+    onDurationChange: onDurationChange,
     onSeeked: onSeeked,
-    onVolumeChanged: onVolumeChanged,
-    showWave: showWave
+    onEnded: onEnded,
+    withWave: showWave
   })))), /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
     key: "spacer-middle"
   }), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
-    key: "controls",
-    className: styles.bottomContent
+    key: "bottom",
+    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
+    }
   }, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React__default["default"].createElement(ClosedCaptions__default["default"], {
     className: styles.closedCaptions,
     media: closedCaptions,
     currentTime: currentTime
-  }) : null, hasAudioUrl && (isView || isEdit) ? /*#__PURE__*/React__default["default"].createElement(MediaControls__default["default"], {
-    className: styles.mediaControls,
-    withControls: withPlayPause,
-    playing: playing,
-    muted: muted,
-    onTogglePlay: togglePlay,
-    onToggleMute: onToggleMute,
+  }) : null, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
+    className: styles.callToAction,
+    animationDisabled: isPreview,
     focusable: current && isView,
-    withSeekBar: !showWave,
-    duration: duration,
-    currentTime: currentTime,
-    onSeek: onSeek
-  }) : null, cta) : null].filter(function (el) {
+    openWebView: openWebView
+  })) : null) : null].filter(function (el) {
     return el !== null;
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.placeholder, isPlaceholder), _defineProperty__default["default"](_ref7, styles.isPreview, isPreview), _ref7)]),
     "data-screen-ready": ready
-  }, longPressBind), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
     width: width,
     height: height,
@@ -333,7 +312,7 @@ var AudioScreen = function AudioScreen(_ref) {
     fullscreen: true,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing
     } : null
   }, elements)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-audio",
-    "version": "0.3.147",
+    "version": "0.3.152",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.147",
-        "@micromag/element-audio": "^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-layout": "^0.3.147",
-        "@micromag/element-media-controls": "^0.3.147",
-        "@micromag/transforms": "^0.3.147",
+        "@micromag/core": "^0.3.152",
+        "@micromag/element-audio": "^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-layout": "^0.3.152",
+        "@micromag/element-media-controls": "^0.3.152",
+        "@micromag/transforms": "^0.3.152",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "695a66acc54f4863dc44a98f0471e8233ca10aee"
+    "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
 }