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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

const options = [{
  value: 'auto',
  label: (0, _i18n.__)('Auto')
}, {
  value: 'metadata',
  label: (0, _i18n.__)('Metadata')
}, {
  value: 'none',
  label: (0, _i18n._x)('None', 'Preload value')
}];
const VideoSettings = ({
  setAttributes,
  attributes
}) => {
  const {
    autoplay,
    controls,
    loop,
    muted,
    playsInline,
    preload
  } = attributes;
  const autoPlayHelpText = (0, _i18n.__)('Autoplay may cause usability issues for some users.');
  const getAutoplayHelp = _element.Platform.select({
    web: (0, _element.useCallback)(checked => {
      return checked ? autoPlayHelpText : null;
    }, []),
    native: autoPlayHelpText
  });
  const toggleFactory = (0, _element.useMemo)(() => {
    const toggleAttribute = attribute => {
      return newValue => {
        setAttributes({
          [attribute]: newValue,
          // Set muted when autoplay changes
          ...(attribute === 'autoplay' && {
            muted: newValue
          })
        });
      };
    };
    return {
      autoplay: toggleAttribute('autoplay'),
      loop: toggleAttribute('loop'),
      muted: toggleAttribute('muted'),
      controls: toggleAttribute('controls'),
      playsInline: toggleAttribute('playsInline')
    };
  }, []);
  const onChangePreload = (0, _element.useCallback)(value => {
    setAttributes({
      preload: value
    });
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Autoplay'),
      isShownByDefault: true,
      hasValue: () => !!autoplay,
      onDeselect: () => {
        setAttributes({
          autoplay: false,
          muted: false
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Autoplay'),
        onChange: toggleFactory.autoplay,
        checked: !!autoplay,
        help: getAutoplayHelp
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Loop'),
      isShownByDefault: true,
      hasValue: () => !!loop,
      onDeselect: () => {
        setAttributes({
          loop: false
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Loop'),
        onChange: toggleFactory.loop,
        checked: !!loop
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Muted'),
      isShownByDefault: true,
      hasValue: () => !!muted,
      onDeselect: () => {
        setAttributes({
          muted: false
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Muted'),
        onChange: toggleFactory.muted,
        checked: !!muted,
        disabled: autoplay,
        help: autoplay ? (0, _i18n.__)('Muted because of Autoplay.') : null
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Playback controls'),
      isShownByDefault: true,
      hasValue: () => !controls,
      onDeselect: () => {
        setAttributes({
          controls: true
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Playback controls'),
        onChange: toggleFactory.controls,
        checked: !!controls
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Play inline'),
      isShownByDefault: true,
      hasValue: () => !!playsInline,
      onDeselect: () => {
        setAttributes({
          playsInline: false
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
        __nextHasNoMarginBottom: true
        /* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */,
        label: (0, _i18n.__)('Play inline'),
        onChange: toggleFactory.playsInline,
        checked: !!playsInline,
        help: (0, _i18n.__)('When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.')
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      label: (0, _i18n.__)('Preload'),
      isShownByDefault: true,
      hasValue: () => preload !== 'metadata',
      onDeselect: () => {
        setAttributes({
          preload: 'metadata'
        });
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Preload'),
        value: preload,
        onChange: onChangePreload,
        options: options,
        hideCancelButton: true
      })
    })]
  });
};
var _default = exports.default = VideoSettings;
//# sourceMappingURL=edit-common-settings.js.map