@atlaskit/editor-plugin-media/dist/cjs/ui/GeneratedMediaReveal.js

Media plugin for @atlaskit/editor-core

/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GeneratedMediaReveal = void 0;
require("./GeneratedMediaReveal.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * Only `collapsed` and `revealing` size and clip the content. `open` drops back to plain
 * block layout, so the reveal leaves nothing behind for selection outlines, resize handles
 * or badges to collide with.
 */

/** Which path opened the node. Surfaced as a data attribute for debugging. */

// A `0fr -> 1fr` grid row opens out to the content's natural height without anyone having to
// measure it, which matters because the card's height comes from an aspect-ratio padding
// further down the tree.
var openRow = null;
var collapsedStyles = null;
var revealStyles = null;
var clippedStyles = null;

/**
 * Fail-safe, not a normal path: opens the node even if the preview never reports itself
 * rendered, so a failed or hanging image still ends up visible rather than staying collapsed.
 * Also covers lazy loading, where a card collapsed to zero height may never satisfy the
 * IntersectionObserver that triggers its fetch.
 *
 * Deliberately generous, because opening early is worse than opening late — the space then
 * reveals the card's own loading treatment instead of the image, and an AI-generated image has
 * to be generated, uploaded, processed and fetched first. `data-media-reveal-trigger` shows
 * which path fired; `timeout` in normal use means the readiness signal is broken.
 */
var READY_TIMEOUT_MS = 30000;

// Backstop for reduced motion and browsers that don't interpolate grid-template-rows, where no
// animationend fires. Must stay comfortably longer than the reveal, or it cuts it off part way.
var REVEAL_TIMEOUT_MS = 1000;
/**
 * Opens the document out to make room for a media node once its preview is ready, rather than
 * having the node snap into place at full height. For AI-generated media in the Create with
 * Rovo preview, where images are inserted after the surrounding content has streamed in:
 * holding the node closed until the preview has rendered means the space opens exactly once,
 * with the image already fading in, so there is no placeholder to look at in between.
 */
var GeneratedMediaReveal = exports.GeneratedMediaReveal = function GeneratedMediaReveal(_ref) {
  var children = _ref.children,
    isEnabled = _ref.isEnabled,
    isReady = _ref.isReady,
    mediaKey = _ref.mediaKey;
  var _useState = (0, _react.useState)('collapsed'),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var _useState3 = (0, _react.useState)(),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    trigger = _useState4[0],
    setTrigger = _useState4[1];

  // Reset during render rather than remounting on a `key`, which would also remount the card
  // below and restart its fetch. The reveal's effect only runs while `collapsed`, so without
  // this a replacement would appear at once, having inherited the previous file's `open`.
  var _useState5 = (0, _react.useState)(mediaKey),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    renderedMediaKey = _useState6[0],
    setRenderedMediaKey = _useState6[1];
  if (mediaKey !== renderedMediaKey) {
    setRenderedMediaKey(mediaKey);
    setState('collapsed');
    setTrigger(undefined);
  }
  (0, _react.useEffect)(function () {
    if (!isEnabled || state !== 'collapsed') {
      return;
    }
    if (isReady) {
      setTrigger('ready');
      setState('revealing');
      return;
    }
    var timer = setTimeout(function () {
      setTrigger('timeout');
      setState('revealing');
    }, READY_TIMEOUT_MS);
    return function () {
      return clearTimeout(timer);
    };
  }, [isEnabled, isReady, state]);
  (0, _react.useEffect)(function () {
    if (state !== 'revealing') {
      return;
    }
    var timer = setTimeout(function () {
      return setState('open');
    }, REVEAL_TIMEOUT_MS);
    return function () {
      return clearTimeout(timer);
    };
  }, [state]);
  if (!isEnabled) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-media-reveal": state,
    "data-media-reveal-trigger": trigger,
    onAnimationEnd: function onAnimationEnd(event) {
      // The media card runs animations of its own, which bubble through here.
      if (event.target === event.currentTarget) {
        setState('open');
      }
    },
    className: (0, _runtime.ax)([state === 'collapsed' && "_1e0c11p5 _2z0563bf", state === 'revealing' && "", state === 'revealing' && "_1e0c11p5 _2z05hkll _j7hq8gkt _5sag15uc _1pglindk _1o51eoah _1bumglyw"])
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([state !== 'open' && "_1reo15vq _18m915vq _1tkeidpf"])
  }, children));
};