/** * External dependencies */ import { Text, AdminPage, AdminSectionHero, AdminSection, Container, Button, Col, useBreakpointMatch, ContextualUpgradeTrigger, } from '@automattic/jetpack-components'; import { useProductCheckoutWorkflow, useConnectionErrorNotice, ConnectionError, } from '@automattic/jetpack-connection'; import { FormFileUpload } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { useState } from 'react'; /** * Internal dependencies */ import { STORE_ID } from '../../../state'; import uid from '../../../utils/uid'; import { fileInputExtensions } from '../../../utils/video-extensions'; import useAnalyticsTracks from '../../hooks/use-analytics-tracks'; import { usePermission } from '../../hooks/use-permission'; import { usePlan } from '../../hooks/use-plan'; import useSelectVideoFiles from '../../hooks/use-select-video-files'; import useVideos, { useLocalVideos } from '../../hooks/use-videos'; import { NeedUserConnectionGlobalNotice } from '../global-notice'; import Logo from '../logo'; import PricingSection from '../pricing-section'; import { ConnectSiteSettingsSection as SettingsSection } from '../site-settings-section'; import { ConnectVideoStorageMeter } from '../video-storage-meter'; import VideoUploadArea from '../video-upload-area'; import { LocalLibrary, VideoPressLibrary } from './libraries'; import styles from './styles.module.scss'; const useDashboardVideos = () => { const { uploadVideo, uploadVideoFromLibrary } = useDispatch( STORE_ID ); const { items, uploading, uploadedVideoCount, isFetching, search, page } = useVideos(); const { items: localVideos, uploadedLocalVideoCount } = useLocalVideos(); const { hasVideoPressPurchase } = usePlan(); // Do not show uploading videos if not in the first page or searching let videos = page > 1 || Boolean( search ) ? items : [ ...uploading, ...items ]; const hasVideos = uploadedVideoCount > 0 || isFetching || uploading?.length > 0; const hasLocalVideos = uploadedLocalVideoCount > 0; const handleFilesUpload = ( files: File[] ) => { if ( hasVideoPressPurchase ) { files.forEach( file => { uploadVideo( file ); } ); } else if ( files.length > 0 ) { uploadVideo( files[ 0 ] ); } }; const handleLocalVideoUpload = file => { uploadVideoFromLibrary( file ); }; // Fill with empty videos if loading if ( isFetching ) { // Use generated ID to work with React Key videos = new Array( 6 ).fill( {} ).map( () => ( { id: uid() } ) ); } return { videos, localVideos, uploadedVideoCount, uploadedLocalVideoCount, hasVideos, hasLocalVideos, handleFilesUpload, handleLocalVideoUpload, loading: isFetching, uploading: uploading?.length > 0, hasVideoPressPurchase, }; }; const Admin = () => { const { videos, uploadedVideoCount, localVideos, uploadedLocalVideoCount, hasVideos, hasLocalVideos, handleFilesUpload, handleLocalVideoUpload, loading, uploading, hasVideoPressPurchase, } = useDashboardVideos(); const { canPerformAction, isRegistered, hasConnectedOwner, isUserConnected } = usePermission(); const { hasConnectionError } = useConnectionErrorNotice(); const [ showPricingSection, setShowPricingSection ] = useState( ! isRegistered ); const [ isSm ] = useBreakpointMatch( 'sm' ); const canUpload = ( hasVideoPressPurchase || ! hasVideos ) && canPerformAction; const { isDraggingOver, inputRef, handleFileInputChangeEvent, filterVideoFiles, } = useSelectVideoFiles( { canDrop: canUpload && ! loading, dropElement: document, onSelectFiles: handleFilesUpload, } ); const addNewLabel = __( 'Add new video', 'jetpack-videopress-pkg' ); const addFirstLabel = __( 'Add your first video', 'jetpack-videopress-pkg' ); const addVideoLabel = hasVideos ? addNewLabel : addFirstLabel; useAnalyticsTracks( { pageViewEventName: 'jetpack_videopress_admin_page_view' } ); return ( } >
{ __( 'Drop files to upload', 'jetpack-videopress-pkg' ) }
{ showPricingSection ? ( setShowPricingSection( true ) } /> ) : ( <>
{ hasConnectionError && ( ) } { ( ! hasConnectedOwner || ! isUserConnected ) && ( ) } { __( 'High quality, ad-free video', 'jetpack-videopress-pkg' ) } { hasVideoPressPurchase && ( ) } handleFilesUpload( filterVideoFiles( evt.currentTarget.files ) ) } accept={ fileInputExtensions } multiple={ hasVideoPressPurchase } render={ ( { openFileDialog } ) => ( ) } /> { ! hasVideoPressPurchase && } { hasVideos ? ( ) : ( { __( "Let's add your first video", 'jetpack-videopress-pkg' ) } ) } { hasLocalVideos && ( ) } ) } ); }; export default Admin; const UpgradeTrigger = ( { hasUsedVideo = false }: { hasUsedVideo: boolean } ) => { const { adminUrl, siteSuffix } = window.jetpackVideoPressInitialState; const { product, hasVideoPressPurchase, isFetchingPurchases } = usePlan(); const { run } = useProductCheckoutWorkflow( { siteSuffix, productSlug: product.productSlug, redirectUrl: adminUrl, isFetchingPurchases, } ); const { recordEventHandler } = useAnalyticsTracks( {} ); const onButtonClickHandler = recordEventHandler( 'jetpack_videopress_upgrade_trigger_link_click', run ); const description = hasUsedVideo ? __( 'You have used your free video upload', 'jetpack-videopress-pkg' ) : ''; const cta = __( 'Upgrade now to unlock unlimited videos, 1TB of storage, and more!', 'jetpack-videopress-pkg' ); if ( hasVideoPressPurchase || isFetchingPurchases ) { return null; } return ( ); };