/** * External dependencies */ import { Button, useBreakpointMatch, Text } from '@automattic/jetpack-components'; import { __ } from '@wordpress/i18n'; import { Icon, cloudUpload } from '@wordpress/icons'; import classnames from 'classnames'; /** * Internal dependencies */ import { fileInputExtensions } from '../../../utils/video-extensions'; import { usePlan } from '../../hooks/use-plan'; import useSelectVideoFiles from '../../hooks/use-select-video-files'; import styles from './style.module.scss'; import { VideoUploadAreaProps } from './types'; /** * Types */ import type { ReactNode } from 'react'; /** * Video Upload Area component * * @param {VideoUploadAreaProps} props - Component props. * @returns {ReactNode} - VideoUploadArea react component. */ const VideoUploadArea = ( { className, onSelectFiles }: VideoUploadAreaProps ) => { const [ isSm ] = useBreakpointMatch( 'sm' ); const { inputRef, handleFileInputChangeEvent } = useSelectVideoFiles( { onSelectFiles } ); const { hasVideoPressPurchase } = usePlan(); const handleClickEvent = () => { inputRef.current.click(); }; return (
{ __( 'Drag and drop your video here', 'jetpack-videopress-pkg' ) }
); }; export default VideoUploadArea;