@micromag/screen-audio 0.3.541 → 0.3.547

package/es/index.js

@@ -294,7 +294,6 @@ var AudioScreen = function AudioScreen(_ref) {
 };
 AudioScreen.propTypes = propTypes;
 AudioScreen.defaultProps = defaultProps;
-var AudioScreen$1 = AudioScreen;
 
 // import * as transforms from './transforms/index';
 
@@ -318,7 +317,7 @@ var definition = {
       "value": "Audio"
     }]
   }),
-  component: AudioScreen$1,
+  component: AudioScreen,
   layouts: ['middle'],
   // transforms,
   fields: [{
@@ -386,4 +385,4 @@ var definition = {
   }]
 };
 
-export { AudioScreen$1 as AudioScreen, definition as default };
+export { AudioScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-audio",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,15 +60,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-audio": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-closed-captions": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-audio": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-closed-captions": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -80,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,394 +0,0 @@
-'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 classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Audio = require('@micromag/element-audio');
-var Background = require('@micromag/element-background');
-var ClosedCaptions = require('@micromag/element-closed-captions');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Layout = require('@micromag/element-layout');
-
-var styles = {"container":"micromag-screen-audio-container","background":"micromag-screen-audio-background","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']),
-  audio: core.PropTypes.audioElement,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  mediaRef: PropTypes.func,
-  showWave: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'middle',
-  audio: null,
-  spacing: 20,
-  background: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  mediaRef: null,
-  showWave: true,
-  className: null
-};
-var AudioScreen = function AudioScreen(_ref) {
-  _ref.layout;
-    var audio = _ref.audio,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    current = _ref.current,
-    active = _ref.active,
-    customMediaRef = _ref.mediaRef,
-    showWave = _ref.showWave,
-    className = _ref.className;
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isPreview = _useScreenRenderConte.isPreview,
-    isView = _useScreenRenderConte.isView,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var trackScreenMedia = hooks.useTrackScreenMedia('audio');
-  var _useState = React.useState(isStatic || isPlaceholder),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  // const transitionPlaying = current && ready;
-  // const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  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$captions = _ref2.captions,
-    captions = _ref2$captions === void 0 ? null : _ref2$captions,
-    _ref2$withWave = _ref2.withWave,
-    withWave = _ref2$withWave === void 0 ? false : _ref2$withWave,
-    _ref2$withControls = _ref2.withControls,
-    withControls = _ref2$withControls === void 0 ? false : _ref2$withControls,
-    _ref2$withSeekBar = _ref2.withSeekBar,
-    withSeekBar = _ref2$withSeekBar === void 0 ? false : _ref2$withSeekBar,
-    _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 hasAudioUrl = audioUrl !== null;
-  var finalAudio = hasAudio ? _objectSpread(_objectSpread({}, audio), {}, {
-    autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-  }) : null;
-  var hasClosedCaptions = closedCaptions !== null || captions !== null;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  React.useEffect(function () {
-    if (!current) {
-      return function () {};
-    }
-    if (withControls || withSeekBar) {
-      setControls(true);
-      setControlsTheme({
-        seekBarOnly: withSeekBar,
-        color: color,
-        progressColor: progressColor
-      });
-    } else {
-      setControls(false);
-    }
-    return function () {
-      if (withControls || withSeekBar) {
-        setControls(false);
-      }
-    };
-  }, [current, withControls, withSeekBar, 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(_useState3, 2),
-    currentTime = _useState4[0],
-    setCurrentTime = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[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 (_ref4) {
-    var _ref4$timeStamp = _ref4.timeStamp,
-      timeStamp = _ref4$timeStamp === void 0 ? 0 : _ref4$timeStamp;
-    setCurrentTime(timeStamp);
-  }, [setCurrentTime, setDuration, duration]);
-  var onProgressStep = React.useCallback(function (step) {
-    trackScreenMedia(audio, "progress_".concat(Math.round(step * 100, 10), "%"));
-  }, [trackScreenMedia, audio]);
-  var onDurationChange = React.useCallback(function (dur) {
-    setDuration(dur);
-  }, [setDuration]);
-  var onPlay = React.useCallback(function (_ref5) {
-    var initial = _ref5.initial;
-    trackScreenMedia(audio, initial ? 'play' : 'resume');
-  }, [trackScreenMedia, audio]);
-  var onPause = React.useCallback(function (_ref6) {
-    var midway = _ref6.midway;
-    trackScreenMedia(audio, midway ? 'pause' : 'ended');
-  }, [trackScreenMedia, audio]);
-  var onEnded = React.useCallback(function () {
-    if (current) {
-      setPlaying(false);
-    }
-  }, [current, setPlaying]);
-  var onSeeked = React.useCallback(function (time) {
-    if (time > 0) {
-      trackScreenMedia(audio, 'seek');
-    }
-  }, [trackScreenMedia, audio]);
-  var onPlayError = React.useCallback(function () {
-    if (isView && playing && current && hasAudio && autoPlay) {
-      setPlaying(false);
-      setControlsSuggestPlay(true);
-    }
-  }, [isView, current, playing, hasAudio, autoPlay, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.placeholder, isPlaceholder), styles.isPreview, isPreview)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    fullscreen: true,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing)
-    } : null
-  }, hasHeader ? /*#__PURE__*/React.createElement(Header, header) : /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-top"
-  }), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "audio",
-    placeholder: "audio",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "MYZwSA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio"
-      }]
-    }),
-    emptyClassName: styles.empty,
-    isEmpty: !hasAudioUrl
-  }, /*#__PURE__*/React.createElement(Audio, Object.assign({}, finalAudio, {
-    mediaRef: mediaRef,
-    waveFake: isIOS || isPreview,
-    waveProps: isPreview ? {
-      sampleWidth: 10,
-      sampleMargin: 5,
-      minSampleHeight: 5,
-      backgroundColor: color,
-      progressColor: progressColor
-    } : {
-      backgroundColor: color,
-      progressColor: progressColor
-    },
-    paused: !current || !playing,
-    muted: muted,
-    className: styles.audio,
-    onReady: onAudioReady,
-    onPlay: onPlay,
-    onPause: onPause,
-    onTimeUpdate: onTimeUpdate,
-    onProgressStep: onProgressStep,
-    onDurationChange: onDurationChange,
-    onSeeked: onSeeked,
-    onEnded: onEnded,
-    onPlayError: onPlayError,
-    withWave: showWave && withWave
-  }))), /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-middle"
-  }), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    key: "bottom",
-    className: styles.bottom,
-    style: {
-      transform: current && !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, Object.assign({
-    className: styles.closedCaptions,
-    media: closedCaptions
-  }, captions, {
-    currentTime: currentTime
-  })) : null, hasFooter ? /*#__PURE__*/React.createElement(Footer, Object.assign({}, footerProps, {
-    className: styles.callToAction
-  })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-AudioScreen.propTypes = propTypes;
-AudioScreen.defaultProps = defaultProps;
-var AudioScreen$1 = AudioScreen;
-
-// import * as transforms from './transforms/index';
-
-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,
-  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: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-};
-
-exports.AudioScreen = AudioScreen$1;
-exports.default = definition;