@wordpress/block-library/build/audio/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _blob = require("@wordpress/blob");

var _components = require("@wordpress/components");

var _blockEditor = require("@wordpress/block-editor");

var _i18n = require("@wordpress/i18n");

var _data = require("@wordpress/data");

var _icons = require("@wordpress/icons");

var _blocks = require("@wordpress/blocks");

var _notices = require("@wordpress/notices");

var _util = require("../embed/util");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ALLOWED_MEDIA_TYPES = ['audio'];

function AudioEdit(_ref) {
  let {
    attributes,
    className,
    setAttributes,
    onReplace,
    isSelected,
    insertBlocksAfter
  } = _ref;
  const {
    id,
    autoplay,
    caption,
    loop,
    preload,
    src
  } = attributes;
  const isTemporaryAudio = !id && (0, _blob.isBlobURL)(src);
  const mediaUpload = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    return getSettings().mediaUpload;
  }, []);
  (0, _element.useEffect)(() => {
    if (!id && (0, _blob.isBlobURL)(src)) {
      const file = (0, _blob.getBlobByURL)(src);

      if (file) {
        mediaUpload({
          filesList: [file],
          onFileChange: _ref2 => {
            let [media] = _ref2;
            return onSelectAudio(media);
          },
          onError: e => onUploadError(e),
          allowedTypes: ALLOWED_MEDIA_TYPES
        });
      }
    }
  }, []);

  function toggleAttribute(attribute) {
    return newValue => {
      setAttributes({
        [attribute]: newValue
      });
    };
  }

  function onSelectURL(newSrc) {
    // Set the block's src from the edit component's state, and switch off
    // the editing UI.
    if (newSrc !== src) {
      // Check if there's an embed block that handles this URL.
      const embedBlock = (0, _util.createUpgradedEmbedBlock)({
        attributes: {
          url: newSrc
        }
      });

      if (undefined !== embedBlock && onReplace) {
        onReplace(embedBlock);
        return;
      }

      setAttributes({
        src: newSrc,
        id: undefined
      });
    }
  }

  const {
    createErrorNotice
  } = (0, _data.useDispatch)(_notices.store);

  function onUploadError(message) {
    createErrorNotice(message, {
      type: 'snackbar'
    });
  }

  function getAutoplayHelp(checked) {
    return checked ? (0, _i18n.__)('Autoplay may cause usability issues for some users.') : null;
  }

  function onSelectAudio(media) {
    if (!media || !media.url) {
      // In this case there was an error and we should continue in the editing state
      // previous attributes should be removed because they may be temporary blob urls.
      setAttributes({
        src: undefined,
        id: undefined
      });
      return;
    } // Sets the block's attribute and updates the edit component from the
    // selected media, then switches off the editing UI.


    setAttributes({
      src: media.url,
      id: media.id
    });
  }

  const classes = (0, _classnames.default)(className, {
    'is-transient': isTemporaryAudio
  });
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: classes
  });

  if (!src) {
    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
      icon: (0, _element.createElement)(_blockEditor.BlockIcon, {
        icon: _icons.audio
      }),
      onSelect: onSelectAudio,
      onSelectURL: onSelectURL,
      accept: "audio/*",
      allowedTypes: ALLOWED_MEDIA_TYPES,
      value: attributes,
      onError: onUploadError
    }));
  }

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, {
    group: "other"
  }, (0, _element.createElement)(_blockEditor.MediaReplaceFlow, {
    mediaId: id,
    mediaURL: src,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    accept: "audio/*",
    onSelect: onSelectAudio,
    onSelectURL: onSelectURL,
    onError: onUploadError
  })), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Settings')
  }, (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Autoplay'),
    onChange: toggleAttribute('autoplay'),
    checked: autoplay,
    help: getAutoplayHelp
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Loop'),
    onChange: toggleAttribute('loop'),
    checked: loop
  }), (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n._x)('Preload', 'noun; Audio block parameter'),
    value: preload || '' // `undefined` is required for the preload attribute to be unset.
    ,
    onChange: value => setAttributes({
      preload: value || undefined
    }),
    options: [{
      value: '',
      label: (0, _i18n.__)('Browser default')
    }, {
      value: 'auto',
      label: (0, _i18n.__)('Auto')
    }, {
      value: 'metadata',
      label: (0, _i18n.__)('Metadata')
    }, {
      value: 'none',
      label: (0, _i18n._x)('None', 'Preload value')
    }]
  }))), (0, _element.createElement)("figure", blockProps, (0, _element.createElement)(_components.Disabled, {
    isDisabled: !isSelected
  }, (0, _element.createElement)("audio", {
    controls: "controls",
    src: src
  })), isTemporaryAudio && (0, _element.createElement)(_components.Spinner, null), (!_blockEditor.RichText.isEmpty(caption) || isSelected) && (0, _element.createElement)(_blockEditor.RichText, {
    tagName: "figcaption",
    className: (0, _blockEditor.__experimentalGetElementClassName)('caption'),
    "aria-label": (0, _i18n.__)('Audio caption text'),
    placeholder: (0, _i18n.__)('Add caption'),
    value: caption,
    onChange: value => setAttributes({
      caption: value
    }),
    inlineToolbar: true,
    __unstableOnSplitAtEnd: () => insertBlocksAfter((0, _blocks.createBlock)((0, _blocks.getDefaultBlockName)()))
  })));
}

var _default = AudioEdit;
exports.default = _default;
//# sourceMappingURL=edit.js.map