@micromag/screen-audio 0.2.286

package/assets/css/styles.css

@@ -0,0 +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 0}.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:relative}.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

@@ -0,0 +1,360 @@
+import { FormattedMessage, defineMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { isIos } from '@micromag/core/utils';
+import { useScreenSize, useScreenRenderContext, useViewer } from '@micromag/core/contexts';
+import { useTrackScreenMedia, useLongPress } from '@micromag/core/hooks';
+import { ScreenElement, Transitions } from '@micromag/core/components';
+import Audio from '@micromag/element-audio';
+import ClosedCaptions from '@micromag/element-closed-captions';
+import MediaControls from '@micromag/element-media-controls';
+import Background from '@micromag/element-background';
+import Container from '@micromag/element-container';
+import Layout, { Spacer } from '@micromag/element-layout';
+import CallToAction from '@micromag/element-call-to-action';
+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 propTypes = {
+  layout: PropTypes.oneOf(['middle']),
+  audio: PropTypes$1.audioElement,
+  spacing: PropTypes.number,
+  background: PropTypes$1.backgroundElement,
+  callToAction: PropTypes$1.callToAction,
+  current: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  className: PropTypes.string
+};
+var defaultProps = {
+  layout: 'middle',
+  audio: null,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  className: null
+};
+
+var AudioScreen = function AudioScreen(_ref) {
+  var _ref7;
+
+  _ref.layout;
+      var audio = _ref.audio,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      className = _ref.className;
+  var trackScreenMedia = useTrackScreenMedia('audio');
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isPreview = _useScreenRenderConte.isPreview,
+      isView = _useScreenRenderConte.isView,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var _useViewer = useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState = useState(isStatic || isPlaceholder),
+      _useState2 = _slicedToArray(_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var transitionPlaying = current && ready;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  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;
+
+  var _ref3 = audioMedia || {},
+      _ref3$url = _ref3.url,
+      audioUrl = _ref3$url === void 0 ? null : _ref3$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;
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      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]);
+  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) {
+    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 onVolumeChanged = useCallback(function (isMuted) {
+    setMuted(isMuted);
+    trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
+  }, [trackScreenMedia, audio]);
+  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 elements = [/*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer-top"
+  }), /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "audio",
+    placeholder: "audio",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "MYZwSA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    emptyClassName: styles.empty,
+    isEmpty: !hasAudioUrl
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudio, {
+    ref: apiRef,
+    waveFake: isIOS || isPreview,
+    waveProps: isPreview ? {
+      sampleWidth: 10,
+      sampleMargin: 5,
+      minSampleHeight: 5
+    } : null,
+    className: styles.audio,
+    onReady: onAudioReady,
+    onPlay: onPlay,
+    onPause: onPause,
+    onTimeUpdate: onTimeUpdate,
+    onProgressStep: onProgressStep,
+    onDurationChanged: onDurationChanged,
+    onSeeked: onSeeked,
+    onVolumeChanged: onVolumeChanged
+  })))), /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer-middle"
+  }), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+    key: "controls",
+    className: styles.bottomContent
+  }, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React.createElement(ClosedCaptions, {
+    className: styles.closedCaptions,
+    media: closedCaptions,
+    currentTime: currentTime
+  }) : null, hasAudioUrl ? /*#__PURE__*/React.createElement(MediaControls, {
+    className: styles.mediaControls,
+    withPlayPause: withPlayPause,
+    playing: playing,
+    muted: muted,
+    onTogglePlay: togglePlay,
+    onToggleMute: onToggleMute
+  }) : null) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: -spacing,
+      marginTop: 0
+    },
+    key: "call-to-action"
+  }, /*#__PURE__*/React.createElement(CallToAction, {
+    callToAction: callToAction,
+    animationDisabled: isPreview
+  })) : null].filter(function (el) {
+    return el !== null;
+  });
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    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, Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(Layout, {
+    fullscreen: true,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, elements)));
+};
+
+AudioScreen.propTypes = propTypes;
+AudioScreen.defaultProps = defaultProps;
+var AudioScreen$1 = /*#__PURE__*/React.memo(AudioScreen);
+
+var transform = function transform(newStory, _ref) {
+  var audio = _ref.audio;
+
+  var _ref2 = audio || {},
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media;
+
+  var _Audio = Audio$1(newStory, media),
+      titleStory = _Audio.story,
+      titleComponent = _Audio.component;
+
+  console.log(media);
+
+  var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
+      containerStory = _Container.story,
+      containerComponent = _Container.component;
+
+  return _objectSpread(_objectSpread({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'audio',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      "id": "+9akmg",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Audio and Video"
+      }]
+    }),
+    order: 5
+  },
+  title: defineMessage({
+    "id": "bhEaUt",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Audio"
+    }]
+  }),
+  component: AudioScreen$1,
+  layouts: ['middle'],
+  transforms: transforms,
+  fields: [{
+    name: 'audio',
+    type: 'audio-element',
+    theme: {
+      color: 'primary'
+    },
+    defaultValue: {
+      autoPlay: true
+    },
+    label: defineMessage({
+      "id": "169xnt",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+export default definition;
+export { AudioScreen$1 as AudioScreen };

package/lib/index.js

@@ -0,0 +1,381 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('classnames');
+var core = require('@micromag/core');
+var utils = require('@micromag/core/utils');
+var contexts = require('@micromag/core/contexts');
+var hooks = require('@micromag/core/hooks');
+var components = require('@micromag/core/components');
+var Audio = require('@micromag/element-audio');
+var ClosedCaptions = require('@micromag/element-closed-captions');
+var MediaControls = require('@micromag/element-media-controls');
+var Background = require('@micromag/element-background');
+var Container = require('@micromag/element-container');
+var Layout = require('@micromag/element-layout');
+var CallToAction = require('@micromag/element-call-to-action');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var appleNews = require('@micromag/transforms/apple-news');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var Audio__default = /*#__PURE__*/_interopDefaultLegacy(Audio);
+var ClosedCaptions__default = /*#__PURE__*/_interopDefaultLegacy(ClosedCaptions);
+var MediaControls__default = /*#__PURE__*/_interopDefaultLegacy(MediaControls);
+var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
+var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
+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 propTypes = {
+  layout: PropTypes__default['default'].oneOf(['middle']),
+  audio: core.PropTypes.audioElement,
+  spacing: PropTypes__default['default'].number,
+  background: core.PropTypes.backgroundElement,
+  callToAction: core.PropTypes.callToAction,
+  current: PropTypes__default['default'].bool,
+  transitions: core.PropTypes.transitions,
+  className: PropTypes__default['default'].string
+};
+var defaultProps = {
+  layout: 'middle',
+  audio: null,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  className: null
+};
+
+var AudioScreen = function AudioScreen(_ref) {
+  var _ref7;
+
+  _ref.layout;
+      var audio = _ref.audio,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      className = _ref.className;
+  var trackScreenMedia = hooks.useTrackScreenMedia('audio');
+
+  var _useScreenSize = contexts.useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isPreview = _useScreenRenderConte.isPreview,
+      isView = _useScreenRenderConte.isView,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var _useViewer = contexts.useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState = React.useState(isStatic || isPlaceholder),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var transitionPlaying = current && ready;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  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;
+
+  var _ref3 = audioMedia || {},
+      _ref3$url = _ref3.url,
+      audioUrl = _ref3$url === void 0 ? null : _ref3$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;
+
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      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]);
+  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) {
+    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 onVolumeChanged = React.useCallback(function (isMuted) {
+    setMuted(isMuted);
+    trackScreenMedia(audio, isMuted ? 'mute' : 'unmute');
+  }, [trackScreenMedia, audio]);
+  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 elements = [/*#__PURE__*/React__default['default'].createElement(Layout.Spacer, {
+    key: "spacer-top"
+  }), /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+    key: "audio",
+    placeholder: "audio",
+    emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+      id: "MYZwSA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    emptyClassName: styles.empty,
+    isEmpty: !hasAudioUrl
+  }, /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React__default['default'].createElement(Audio__default['default'], Object.assign({}, finalAudio, {
+    ref: apiRef,
+    waveFake: isIOS || isPreview,
+    waveProps: isPreview ? {
+      sampleWidth: 10,
+      sampleMargin: 5,
+      minSampleHeight: 5
+    } : null,
+    className: styles.audio,
+    onReady: onAudioReady,
+    onPlay: onPlay,
+    onPause: onPause,
+    onTimeUpdate: onTimeUpdate,
+    onProgressStep: onProgressStep,
+    onDurationChanged: onDurationChanged,
+    onSeeked: onSeeked,
+    onVolumeChanged: onVolumeChanged
+  })))), /*#__PURE__*/React__default['default'].createElement(Layout.Spacer, {
+    key: "spacer-middle"
+  }), !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement("div", {
+    key: "controls",
+    className: styles.bottomContent
+  }, hasClosedCaptions && !isPreview && !isCapture && !isStatic ? /*#__PURE__*/React__default['default'].createElement(ClosedCaptions__default['default'], {
+    className: styles.closedCaptions,
+    media: closedCaptions,
+    currentTime: currentTime
+  }) : null, hasAudioUrl ? /*#__PURE__*/React__default['default'].createElement(MediaControls__default['default'], {
+    className: styles.mediaControls,
+    withPlayPause: withPlayPause,
+    playing: playing,
+    muted: muted,
+    onTogglePlay: togglePlay,
+    onToggleMute: onToggleMute
+  }) : null) : null, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      margin: -spacing,
+      marginTop: 0
+    },
+    key: "call-to-action"
+  }, /*#__PURE__*/React__default['default'].createElement(CallToAction__default['default'], {
+    callToAction: callToAction,
+    animationDisabled: isPreview
+  })) : null].filter(function (el) {
+    return el !== null;
+  });
+  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+    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'], Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React__default['default'].createElement(Container__default['default'], {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default['default'].createElement(Layout__default['default'], {
+    fullscreen: true,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, elements)));
+};
+
+AudioScreen.propTypes = propTypes;
+AudioScreen.defaultProps = defaultProps;
+var AudioScreen$1 = /*#__PURE__*/React__default['default'].memo(AudioScreen);
+
+var transform = function transform(newStory, _ref) {
+  var audio = _ref.audio;
+
+  var _ref2 = audio || {},
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media;
+
+  var _Audio = appleNews.Audio(newStory, media),
+      titleStory = _Audio.story,
+      titleComponent = _Audio.component;
+
+  console.log(media);
+
+  var _Container = appleNews.Container(titleStory, _toConsumableArray__default['default'](titleComponent ? [titleComponent] : [])),
+      containerStory = _Container.story,
+      containerComponent = _Container.component;
+
+  return _objectSpread__default['default'](_objectSpread__default['default']({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray__default['default'](newStory.components || []), _toConsumableArray__default['default'](containerComponent ? [containerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'audio',
+  type: 'screen',
+  group: {
+    label: reactIntl.defineMessage({
+      "id": "+9akmg",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Audio and Video"
+      }]
+    }),
+    order: 5
+  },
+  title: reactIntl.defineMessage({
+    "id": "bhEaUt",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Audio"
+    }]
+  }),
+  component: AudioScreen$1,
+  layouts: ['middle'],
+  transforms: transforms,
+  fields: [{
+    name: 'audio',
+    type: 'audio-element',
+    theme: {
+      color: 'primary'
+    },
+    defaultValue: {
+      autoPlay: true
+    },
+    label: reactIntl.defineMessage({
+      "id": "169xnt",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: reactIntl.defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+exports.AudioScreen = AudioScreen$1;
+exports.default = definition;

package/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "@micromag/screen-audio",
+    "version": "0.2.286",
+    "description": "",
+    "keywords": [
+        "javascript"
+    ],
+    "homepage": "https://github.com/urbania-media/micromag-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/urbania-media/micromag-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        },
+        {
+            "name": "Julien Carignan",
+            "email": "jc@folklore.email"
+        }
+    ],
+    "license": "ISC",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "files": [
+        "lib",
+        "es",
+        "assets"
+    ],
+    "scripts": {
+        "prepare": "../../scripts/prepare-package.sh"
+    },
+    "devDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@micromag/core": "^0.2.286",
+        "@micromag/element-audio": "^0.2.286",
+        "@micromag/element-background": "^0.2.286",
+        "@micromag/element-call-to-action": "^0.2.286",
+        "@micromag/element-closed-captions": "^0.2.286",
+        "@micromag/element-container": "^0.2.286",
+        "@micromag/element-layout": "^0.2.286",
+        "@micromag/element-media-controls": "^0.2.286",
+        "@micromag/transforms": "^0.2.286",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.20",
+        "prop-types": "^15.7.2",
+        "react-intl": "^5.12.1",
+        "uuid": "^8.3.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "380a52b4b3f57dc2535014af6241032f09055d40"
+}