@wordpress/block-library/build/utils/poster-image.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 _blockEditor = require("@wordpress/block-editor");
var _notices = require("@wordpress/notices");
var _components = require("@wordpress/components");
var _blob = require("@wordpress/blob");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = ['image'];
function PosterImage({
  poster,
  onChange
}) {
  const posterButtonRef = (0, _element.useRef)();
  const [isLoading, setIsLoading] = (0, _element.useState)(false);
  const descriptionId = (0, _compose.useInstanceId)(PosterImage, 'block-library-poster-image-description');
  const {
    getSettings
  } = (0, _data.useSelect)(_blockEditor.store);
  const {
    createErrorNotice
  } = (0, _data.useDispatch)(_notices.store);
  const onDropFiles = filesList => {
    getSettings().mediaUpload({
      allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
      filesList,
      onFileChange: ([image]) => {
        if ((0, _blob.isBlobURL)(image?.url)) {
          setIsLoading(true);
          return;
        }
        if (image) {
          onChange(image);
        }
        setIsLoading(false);
      },
      onError: message => {
        createErrorNotice(message, {
          id: 'poster-image-upload-notice',
          type: 'snackbar'
        });
        setIsLoading(false);
      },
      multiple: false
    });
  };
  const getPosterButtonContent = () => {
    if (!poster && isLoading) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {});
    }
    return !poster ? (0, _i18n.__)('Set poster image') : (0, _i18n.__)('Replace');
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Poster image'),
      isShownByDefault: true,
      hasValue: () => !!poster,
      onDeselect: () => onChange(undefined),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
        children: (0, _i18n.__)('Poster image')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
        title: (0, _i18n.__)('Select poster image'),
        onSelect: onChange,
        allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
        render: ({
          open
        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "block-library-poster-image__container",
          children: [poster && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
            __next40pxDefaultSize: true,
            onClick: open,
            "aria-haspopup": "dialog",
            "aria-label": (0, _i18n.__)('Edit or replace the poster image.'),
            className: "block-library-poster-image__preview",
            disabled: isLoading,
            accessibleWhenDisabled: true,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
              src: poster,
              alt: (0, _i18n.__)('Poster image preview'),
              className: "block-library-poster-image__preview-image"
            }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
            className: (0, _clsx.default)('block-library-poster-image__actions', {
              'block-library-poster-image__actions-select': !poster
            }),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
              __next40pxDefaultSize: true,
              onClick: open,
              ref: posterButtonRef,
              className: "block-library-poster-image__action",
              "aria-describedby": descriptionId,
              "aria-haspopup": "dialog",
              variant: !poster ? 'secondary' : undefined,
              disabled: isLoading,
              accessibleWhenDisabled: true,
              children: getPosterButtonContent()
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              id: descriptionId,
              hidden: true,
              children: poster ? (0, _i18n.sprintf)(/* translators: %s: poster image URL. */
              (0, _i18n.__)('The current poster image url is %s.'), poster) : (0, _i18n.__)('There is no poster image currently selected.')
            }), !!poster && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
              __next40pxDefaultSize: true,
              onClick: () => {
                onChange(undefined);

                // Move focus back to the Media Upload button.
                posterButtonRef.current.focus();
              },
              className: "block-library-poster-image__action",
              disabled: isLoading,
              accessibleWhenDisabled: true,
              children: (0, _i18n.__)('Remove')
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropZone, {
            onFilesDrop: onDropFiles
          })]
        })
      })]
    })
  });
}
var _default = exports.default = PosterImage;
//# sourceMappingURL=poster-image.js.map