@wordpress/components/build/focal-point-picker/media.js

UI components for WordPress.

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _focalPointPickerStyle = require("./styles/focal-point-picker-style");

var _utils = require("./utils");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function Media({
  alt,
  autoPlay,
  src,
  onLoad = _lodash.noop,
  mediaRef,
  // Exposing muted prop for test rendering purposes
  // https://github.com/testing-library/react-testing-library/issues/470
  muted = true,
  ...props
}) {
  if (!src) {
    return (0, _element.createElement)(MediaPlaceholderElement, {
      className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder",
      onLoad: onLoad,
      mediaRef: mediaRef
    });
  }

  const isVideo = (0, _utils.isVideoType)(src);
  return isVideo ? (0, _element.createElement)("video", (0, _extends2.default)({}, props, {
    autoPlay: autoPlay,
    className: "components-focal-point-picker__media components-focal-point-picker__media--video",
    loop: true,
    muted: muted,
    onLoadedData: onLoad,
    ref: mediaRef,
    src: src
  })) : (0, _element.createElement)("img", (0, _extends2.default)({}, props, {
    alt: alt,
    className: "components-focal-point-picker__media components-focal-point-picker__media--image",
    onLoad: onLoad,
    ref: mediaRef,
    src: src
  }));
}

function MediaPlaceholderElement({
  mediaRef,
  onLoad = _lodash.noop,
  ...props
}) {
  const onLoadRef = (0, _element.useRef)(onLoad);
  /**
   * This async callback mimics the onLoad (img) / onLoadedData (video) callback
   * for media elements. It is used in the main <FocalPointPicker /> component
   * to calculate the dimensions + boundaries for positioning.
   */

  (0, _element.useLayoutEffect)(() => {
    window.requestAnimationFrame(() => {
      onLoadRef.current();
    });
  }, []);
  return (0, _element.createElement)(_focalPointPickerStyle.MediaPlaceholder, (0, _extends2.default)({
    ref: mediaRef
  }, props));
}
//# sourceMappingURL=media.js.map