@wordpress/block-library/build/video/poster-image.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function PosterImage({
  poster,
  setAttributes,
  instanceId
}) {
  const posterImageButton = (0, _element.useRef)();
  const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = ['image'];
  const videoPosterDescription = `video-block__poster-image-description-${instanceId}`;
  function onSelectPoster(image) {
    setAttributes({
      poster: image.url
    });
  }
  function onRemovePoster() {
    setAttributes({
      poster: undefined
    });

    // Move focus back to the Media Upload button.
    posterImageButton.current.focus();
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
    label: (0, _i18n.__)('Poster image'),
    isShownByDefault: true,
    hasValue: () => !!poster,
    onDeselect: () => {
      setAttributes({
        poster: ''
      });
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "editor-video-poster-control",
        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: onSelectPoster,
          allowedTypes: VIDEO_POSTER_ALLOWED_MEDIA_TYPES,
          render: ({
            open
          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "primary",
            onClick: open,
            ref: posterImageButton,
            "aria-describedby": videoPosterDescription,
            children: !poster ? (0, _i18n.__)('Select') : (0, _i18n.__)('Replace')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          id: videoPosterDescription,
          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: onRemovePoster,
          variant: "tertiary",
          children: (0, _i18n.__)('Remove')
        })]
      })
    })
  });
}
var _default = exports.default = PosterImage;
//# sourceMappingURL=poster-image.js.map