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

Media plugin for @atlaskit/editor-core

/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./GeneratedMediaReveal.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useState } from 'react';

/**
 * 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.
 */
export var GeneratedMediaReveal = function GeneratedMediaReveal(_ref) {
  var children = _ref.children,
    isEnabled = _ref.isEnabled,
    isReady = _ref.isReady,
    mediaKey = _ref.mediaKey;
  var _useState = useState('collapsed'),
    _useState2 = _slicedToArray(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_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 = useState(mediaKey),
    _useState6 = _slicedToArray(_useState5, 2),
    renderedMediaKey = _useState6[0],
    setRenderedMediaKey = _useState6[1];
  if (mediaKey !== renderedMediaKey) {
    setRenderedMediaKey(mediaKey);
    setState('collapsed');
    setTrigger(undefined);
  }
  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]);
  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.createElement(React.Fragment, null, children);
  }
  return /*#__PURE__*/React.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: ax([state === 'collapsed' && "_1e0c11p5 _2z0563bf", state === 'revealing' && "", state === 'revealing' && "_1e0c11p5 _2z05hkll _j7hq8gkt _5sag15uc _1pglindk _1o51eoah _1bumglyw"])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([state !== 'open' && "_1reo15vq _18m915vq _1tkeidpf"])
  }, children));
};