64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import {__, _x} from '@wordpress/i18n';
|
|
import {ToggleControl, SelectControl} from '@wordpress/components';
|
|
import {useMemo, useCallback, Platform} from '@wordpress/element';
|
|
|
|
const VideoSettings = ({setAttributes, attributes}) => {
|
|
const {autoplay, loop, muted, 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'),
|
|
preload: toggleAttribute('preload'),
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<ToggleControl
|
|
label={__('Autoplay')}
|
|
onChange={toggleFactory.autoplay}
|
|
checked={autoplay}
|
|
help={getAutoplayHelp}
|
|
/>
|
|
<ToggleControl
|
|
label={__('Loop')}
|
|
onChange={toggleFactory.loop}
|
|
checked={loop}
|
|
/>
|
|
<ToggleControl
|
|
label={__('Muted')}
|
|
onChange={toggleFactory.muted}
|
|
checked={muted}
|
|
/>
|
|
<ToggleControl
|
|
label={__('Preload')}
|
|
onChange={toggleFactory.preload}
|
|
checked={preload}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default VideoSettings;
|