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

Block library for the WordPress editor.

// packages/block-library/src/video/edit-common-settings.js
import { __, _x } from "@wordpress/i18n";
import {
  ToggleControl,
  SelectControl,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useMemo, useCallback, Platform } from "@wordpress/element";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var options = [
  { value: "auto", label: __("Auto") },
  { value: "metadata", label: __("Metadata") },
  { value: "none", label: _x("None", "Preload value") }
];
var VideoSettings = ({ setAttributes, attributes }) => {
  const { autoplay, controls, loop, muted, playsInline, preload } = attributes;
  const autoPlayHelpText = __(
    "Autoplay may cause usability issues for some users."
  );
  const getAutoplayHelp = Platform.select({
    web: useCallback((checked) => {
      return checked ? autoPlayHelpText : null;
    }, []),
    native: autoPlayHelpText
  });
  const toggleFactory = useMemo(() => {
    const toggleAttribute = (attribute) => {
      return (newValue) => {
        setAttributes({
          [attribute]: newValue,
          // Set muted and playsInLine when autoplay changes
          // playsInline is set to true when autoplay is true to support iOS devices
          ...attribute === "autoplay" && {
            muted: newValue,
            playsInline: newValue
          }
        });
      };
    };
    return {
      autoplay: toggleAttribute("autoplay"),
      loop: toggleAttribute("loop"),
      muted: toggleAttribute("muted"),
      controls: toggleAttribute("controls"),
      playsInline: toggleAttribute("playsInline")
    };
  }, []);
  const onChangePreload = useCallback((value) => {
    setAttributes({ preload: value });
  }, []);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Autoplay"),
        isShownByDefault: true,
        hasValue: () => !!autoplay,
        onDeselect: () => {
          setAttributes({ autoplay: false, muted: false });
        },
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Autoplay"),
            onChange: toggleFactory.autoplay,
            checked: !!autoplay,
            help: getAutoplayHelp
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Loop"),
        isShownByDefault: true,
        hasValue: () => !!loop,
        onDeselect: () => {
          setAttributes({ loop: false });
        },
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Loop"),
            onChange: toggleFactory.loop,
            checked: !!loop
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Muted"),
        isShownByDefault: true,
        hasValue: () => !!muted,
        onDeselect: () => {
          setAttributes({ muted: false });
        },
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Muted"),
            onChange: toggleFactory.muted,
            checked: !!muted,
            disabled: autoplay,
            help: autoplay ? __("Muted because of Autoplay.") : null
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Playback controls"),
        isShownByDefault: true,
        hasValue: () => !controls,
        onDeselect: () => {
          setAttributes({ controls: true });
        },
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Playback controls"),
            onChange: toggleFactory.controls,
            checked: !!controls
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Play inline"),
        isShownByDefault: true,
        hasValue: () => !!playsInline,
        onDeselect: () => {
          setAttributes({ playsInline: false });
        },
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Play inline"),
            onChange: toggleFactory.playsInline,
            checked: !!playsInline,
            disabled: autoplay,
            help: autoplay ? __("Play inline enabled because of Autoplay.") : __(
              "When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player."
            )
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Preload"),
        isShownByDefault: true,
        hasValue: () => preload !== "metadata",
        onDeselect: () => {
          setAttributes({ preload: "metadata" });
        },
        children: /* @__PURE__ */ jsx(
          SelectControl,
          {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: __("Preload"),
            value: preload,
            onChange: onChangePreload,
            options,
            hideCancelButton: true
          }
        )
      }
    )
  ] });
};
var edit_common_settings_default = VideoSettings;
export {
  edit_common_settings_default as default
};
//# sourceMappingURL=edit-common-settings.js.map