@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 _clsx = _interopRequireDefault(require("clsx"));
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 _notices = require("@wordpress/notices");
var _element = require("@wordpress/element");
var _util = require("../embed/util");
var _hooks = require("../utils/hooks");
var _caption = require("../utils/caption");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const ALLOWED_MEDIA_TYPES = ['audio'];
function AudioEdit({
  attributes,
  className,
  setAttributes,
  onReplace,
  isSelected: isSingleSelected,
  insertBlocksAfter
}) {
  const {
    id,
    autoplay,
    loop,
    preload,
    src
  } = attributes;
  const [temporaryURL, setTemporaryURL] = (0, _element.useState)(attributes.blob);
  (0, _hooks.useUploadMediaFromBlobURL)({
    url: temporaryURL,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    onChange: onSelectAudio,
    onError: onUploadError
  });
  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,
        blob: undefined
      });
      setTemporaryURL();
    }
  }
  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,
        caption: undefined,
        blob: undefined
      });
      setTemporaryURL();
      return;
    }
    if ((0, _blob.isBlobURL)(media.url)) {
      setTemporaryURL(media.url);
      return;
    }

    // Sets the block's attribute and updates the edit component from the
    // selected media, then switches off the editing UI.
    setAttributes({
      blob: undefined,
      src: media.url,
      id: media.id,
      caption: media.caption
    });
    setTemporaryURL();
  }
  const classes = (0, _clsx.default)(className, {
    'is-transient': !!temporaryURL
  });
  const blockProps = (0, _blockEditor.useBlockProps)({
    className: classes
  });
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  if (!src && !temporaryURL) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...blockProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
          icon: _icons.audio
        }),
        onSelect: onSelectAudio,
        onSelectURL: onSelectURL,
        accept: "audio/*",
        allowedTypes: ALLOWED_MEDIA_TYPES,
        value: attributes,
        onError: onUploadError
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [isSingleSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      group: "other",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
        mediaId: id,
        mediaURL: src,
        allowedTypes: ALLOWED_MEDIA_TYPES,
        accept: "audio/*",
        onSelect: onSelectAudio,
        onSelectURL: onSelectURL,
        onError: onUploadError,
        onReset: () => onSelectAudio(undefined)
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
        label: (0, _i18n.__)('Settings'),
        resetAll: () => {
          setAttributes({
            autoplay: false,
            loop: false,
            preload: undefined
          });
        },
        dropdownMenuProps: dropdownMenuProps,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          label: (0, _i18n.__)('Autoplay'),
          isShownByDefault: true,
          hasValue: () => !!autoplay,
          onDeselect: () => setAttributes({
            autoplay: false
          }),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Autoplay'),
            onChange: toggleAttribute('autoplay'),
            checked: !!autoplay,
            help: getAutoplayHelp
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          label: (0, _i18n.__)('Loop'),
          isShownByDefault: true,
          hasValue: () => !!loop,
          onDeselect: () => setAttributes({
            loop: false
          }),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Loop'),
            onChange: toggleAttribute('loop'),
            checked: !!loop
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          label: (0, _i18n.__)('Preload'),
          isShownByDefault: true,
          hasValue: () => !!preload,
          onDeselect: () => setAttributes({
            preload: undefined
          }),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            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')
            }]
          })
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
      ...blockProps,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, {
        isDisabled: !isSingleSelected,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("audio", {
          controls: "controls",
          src: src !== null && src !== void 0 ? src : temporaryURL
        })
      }), !!temporaryURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_caption.Caption, {
        attributes: attributes,
        setAttributes: setAttributes,
        isSelected: isSingleSelected,
        insertBlocksAfter: insertBlocksAfter,
        label: (0, _i18n.__)('Audio caption text'),
        showToolbarButton: isSingleSelected
      })]
    })]
  });
}
var _default = exports.default = AudioEdit;
//# sourceMappingURL=edit.js.map