/**
* 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 (