@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 _element = require("@wordpress/element");

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

/**
 * 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 = _ref => {
  let {
    setAttributes,
    attributes
  } = _ref;
  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
        });
      };
    };

    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 (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Autoplay'),
    onChange: toggleFactory.autoplay,
    checked: autoplay,
    help: getAutoplayHelp
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Loop'),
    onChange: toggleFactory.loop,
    checked: loop
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Muted'),
    onChange: toggleFactory.muted,
    checked: muted
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Playback controls'),
    onChange: toggleFactory.controls,
    checked: controls
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Play inline'),
    onChange: toggleFactory.playsInline,
    checked: playsInline
  }), (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n.__)('Preload'),
    value: preload,
    onChange: onChangePreload,
    options: options,
    hideCancelButton: true
  }));
};

var _default = VideoSettings;
exports.default = _default;
//# sourceMappingURL=edit-common-settings.js.map