@wordpress/block-library/build-module/video/edit.js

Block library for the WordPress editor.

// packages/block-library/src/video/edit.js
import clsx from "clsx";
import { isBlobURL } from "@wordpress/blob";
import {
  Disabled,
  Spinner,
  Placeholder,
  __experimentalToolsPanel as ToolsPanel
} from "@wordpress/components";
import {
  BlockControls,
  BlockIcon,
  InspectorControls,
  MediaPlaceholder,
  MediaReplaceFlow,
  useBlockProps,
  useBlockEditingMode
} from "@wordpress/block-editor";
import { useRef, useEffect, useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useDispatch } from "@wordpress/data";
import { video as icon } from "@wordpress/icons";
import { store as noticesStore } from "@wordpress/notices";
import { createUpgradedEmbedBlock } from "../embed/util";
import {
  useUploadMediaFromBlobURL,
  useToolsPanelDropdownMenuProps
} from "../utils/hooks";
import VideoCommonSettings from "./edit-common-settings";
import TracksEditor from "./tracks-editor";
import Tracks from "./tracks";
import { Caption } from "../utils/caption";
import PosterImage from "../utils/poster-image";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var ALLOWED_MEDIA_TYPES = ["video"];
function VideoEdit({
  isSelected: isSingleSelected,
  attributes,
  className,
  setAttributes,
  insertBlocksAfter,
  onReplace
}) {
  const videoPlayer = useRef();
  const { id, controls, poster, src, tracks } = attributes;
  const [temporaryURL, setTemporaryURL] = useState(attributes.blob);
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const blockEditingMode = useBlockEditingMode();
  const hasNonContentControls = blockEditingMode === "default";
  useUploadMediaFromBlobURL({
    url: temporaryURL,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    onChange: onSelectVideo,
    onError: onUploadError
  });
  useEffect(() => {
    if (videoPlayer.current) {
      videoPlayer.current.load();
    }
  }, [poster]);
  function onSelectVideo(media) {
    if (!media || !media.url) {
      setAttributes({
        src: void 0,
        id: void 0,
        poster: void 0,
        caption: void 0,
        blob: void 0
      });
      setTemporaryURL();
      return;
    }
    if (isBlobURL(media.url)) {
      setTemporaryURL(media.url);
      return;
    }
    setAttributes({
      blob: void 0,
      src: media.url,
      id: media.id,
      poster: media.image?.src !== media.icon ? media.image?.src : void 0,
      caption: media.caption
    });
    setTemporaryURL();
  }
  function onSelectURL(newSrc) {
    if (newSrc !== src) {
      const embedBlock = createUpgradedEmbedBlock({
        attributes: { url: newSrc }
      });
      if (void 0 !== embedBlock && onReplace) {
        onReplace(embedBlock);
        return;
      }
      setAttributes({
        blob: void 0,
        src: newSrc,
        id: void 0,
        poster: void 0
      });
      setTemporaryURL();
    }
  }
  const { createErrorNotice } = useDispatch(noticesStore);
  function onUploadError(message) {
    createErrorNotice(message, { type: "snackbar" });
  }
  const placeholder = (content) => {
    return /* @__PURE__ */ jsx(
      Placeholder,
      {
        className: "block-editor-media-placeholder",
        withIllustration: !isSingleSelected,
        icon,
        label: __("Video"),
        instructions: __(
          "Drag and drop a video, upload, or choose from your library."
        ),
        children: content
      }
    );
  };
  const classes = clsx(className, {
    "is-transient": !!temporaryURL
  });
  const blockProps = useBlockProps({
    className: classes
  });
  if (!src && !temporaryURL) {
    return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
      MediaPlaceholder,
      {
        icon: /* @__PURE__ */ jsx(BlockIcon, { icon }),
        onSelect: onSelectVideo,
        onSelectURL,
        accept: "video/*",
        allowedTypes: ALLOWED_MEDIA_TYPES,
        value: attributes,
        onError: onUploadError,
        placeholder
      }
    ) });
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    isSingleSelected && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(
        TracksEditor,
        {
          tracks,
          onChange: (newTracks) => {
            setAttributes({ tracks: newTracks });
          }
        }
      ) }),
      /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
        MediaReplaceFlow,
        {
          mediaId: id,
          mediaURL: src,
          allowedTypes: ALLOWED_MEDIA_TYPES,
          accept: "video/*",
          onSelect: onSelectVideo,
          onSelectURL,
          onError: onUploadError,
          onReset: () => onSelectVideo(void 0)
        }
      ) })
    ] }),
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            autoplay: false,
            controls: true,
            loop: false,
            muted: false,
            playsInline: false,
            preload: "metadata",
            poster: void 0
          });
        },
        dropdownMenuProps,
        children: [
          /* @__PURE__ */ jsx(
            VideoCommonSettings,
            {
              setAttributes,
              attributes
            }
          ),
          /* @__PURE__ */ jsx(
            PosterImage,
            {
              poster,
              onChange: (posterImage) => setAttributes({
                poster: posterImage?.url
              })
            }
          )
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs("figure", { ...blockProps, children: [
      /* @__PURE__ */ jsx(Disabled, { isDisabled: !isSingleSelected, children: /* @__PURE__ */ jsx(
        "video",
        {
          controls,
          poster,
          src: src || temporaryURL,
          ref: videoPlayer,
          children: /* @__PURE__ */ jsx(Tracks, { tracks })
        }
      ) }),
      !!temporaryURL && /* @__PURE__ */ jsx(Spinner, {}),
      /* @__PURE__ */ jsx(
        Caption,
        {
          attributes,
          setAttributes,
          isSelected: isSingleSelected,
          insertBlocksAfter,
          label: __("Video caption text"),
          showToolbarButton: isSingleSelected && hasNonContentControls
        }
      )
    ] })
  ] });
}
var edit_default = VideoEdit;
export {
  edit_default as default
};
//# sourceMappingURL=edit.js.map