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

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { __, _x } from '@wordpress/i18n';
import { ToggleControl, SelectControl } from '@wordpress/components';
import { useMemo, useCallback, Platform } from '@wordpress/element';
const options = [{
  value: 'auto',
  label: __('Auto')
}, {
  value: 'metadata',
  label: __('Metadata')
}, {
  value: 'none',
  label: _x('None', 'Preload value')
}];

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

    return {
      autoplay: toggleAttribute('autoplay'),
      loop: toggleAttribute('loop'),
      muted: toggleAttribute('muted'),
      controls: toggleAttribute('controls'),
      playsInline: toggleAttribute('playsInline')
    };
  }, []);
  const onChangePreload = useCallback(value => {
    setAttributes({
      preload: value
    });
  }, []);
  return createElement(Fragment, null, createElement(ToggleControl, {
    label: __('Autoplay'),
    onChange: toggleFactory.autoplay,
    checked: autoplay,
    help: getAutoplayHelp
  }), createElement(ToggleControl, {
    label: __('Loop'),
    onChange: toggleFactory.loop,
    checked: loop
  }), createElement(ToggleControl, {
    label: __('Muted'),
    onChange: toggleFactory.muted,
    checked: muted
  }), createElement(ToggleControl, {
    label: __('Playback controls'),
    onChange: toggleFactory.controls,
    checked: controls
  }), createElement(ToggleControl, {
    label: __('Play inline'),
    onChange: toggleFactory.playsInline,
    checked: playsInline
  }), createElement(SelectControl, {
    label: __('Preload'),
    value: preload,
    onChange: onChangePreload,
    options: options,
    hideCancelButton: true
  }));
};

export default VideoSettings;
//# sourceMappingURL=edit-common-settings.js.map