import React, { useState, useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; import { Button, Input, Message } from 'semantic-ui-react'; import cx from 'classnames'; import Icon from '@plone/volto/components/theme/Icon/Icon'; import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal'; import VideoSidebar from '@plone/volto/components/manage/Blocks/Video/VideoSidebar'; import clearSVG from '@plone/volto/icons/clear.svg'; import aheadSVG from '@plone/volto/icons/ahead.svg'; import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg'; import Body from '@plone/volto/components/manage/Blocks/Video/Body'; import { withBlockExtensions } from '@plone/volto/helpers/Extensions'; import config from '@plone/volto/registry'; import Image from '@plone/volto/components/theme/Image/Image'; const messages = defineMessages({ VideoFormDescription: { id: 'Specify a youtube video or playlist url', defaultMessage: 'Specify a youtube video or playlist url', }, VideoBlockInputPlaceholder: { id: 'Type a Video (YouTube, Vimeo or mp4) URL', defaultMessage: 'Type a Video (YouTube, Vimeo or mp4) URL', }, allowedURLs: { id: '{sources} or mp4 URL allowed', defaultMessage: '{sources} or mp4 URL allowed', }, }); const Edit = (props) => { const { data, block, onChangeBlock, selected } = props; const intl = useIntl(); const [url, setUrl] = useState(''); const onChangeUrl = ({ target }) => { setUrl(target.value); }; const onSubmitUrl = useCallback(() => { onChangeBlock(block, { ...data, url: url, }); }, [onChangeBlock, block, data, url]); const resetSubmitUrl = () => { setUrl(''); }; const onKeyDownVariantMenuForm = useCallback( (e) => { if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); onSubmitUrl(); } else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); // TODO: Do something on ESC key } }, [onSubmitUrl], ); const peertubeInstances = config.blocks.blocksConfig.video.allowedPeertubeInstances; const placeholder = useMemo( () => data.placeholder || intl.formatMessage(messages.VideoBlockInputPlaceholder, { instances: peertubeInstances.join(', '), }), // eslint-disable-next-line react-hooks/exhaustive-deps [intl, data], ); return (
{data.url ? ( ) : (

{intl.formatMessage(messages.allowedURLs, { sources: peertubeInstances.length > 0 ? `Youtube, Vimeo, Peertube (${peertubeInstances.join(', ')}) instance` : 'Youtube, Vimeo', })}

e.stopPropagation()} /> {url && ( )}
)}
); }; Edit.propTypes = { selected: PropTypes.bool.isRequired, block: PropTypes.string.isRequired, index: PropTypes.number.isRequired, data: PropTypes.objectOf(PropTypes.any).isRequired, onChangeBlock: PropTypes.func.isRequired, onSelectBlock: PropTypes.func.isRequired, onDeleteBlock: PropTypes.func.isRequired, onFocusPreviousBlock: PropTypes.func.isRequired, onFocusNextBlock: PropTypes.func.isRequired, handleKeyDown: PropTypes.func.isRequired, }; export default withBlockExtensions(Edit);