@wordpress/block-library
Version:
Block library for the WordPress editor.
166 lines • 4.89 kB
JavaScript
/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { ToggleControl, SelectControl, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { useMemo, useCallback, Platform } from '@wordpress/element';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const options = [{
value: 'auto',
label: __('Auto')
}, {
value: 'metadata',
label: __('Metadata')
}, {
value: 'none',
label: _x('None', 'Preload value')
}];
const 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 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 = 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
/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */,
label: __('Play inline'),
onChange: toggleFactory.playsInline,
checked: !!playsInline,
help: __('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: options,
hideCancelButton: true
})
})]
});
};
export default VideoSettings;
//# sourceMappingURL=edit-common-settings.js.map