/** * External dependencies */ import { Text, Button, AdminPage, AdminSection, Container, Col, useBreakpointMatch, } from '@automattic/jetpack-components'; import { __ } from '@wordpress/i18n'; import { Icon, chevronRightSmall, arrowLeft } from '@wordpress/icons'; import classnames from 'classnames'; import { useEffect } from 'react'; import { useHistory, Prompt } from 'react-router-dom'; /** * Internal dependencies */ import { Link } from 'react-router-dom'; import { VideoPlayer } from '../../../components/video-frame-selector'; import { usePermission } from '../../hooks/use-permission'; import useUnloadPrevent from '../../hooks/use-unload-prevent'; import Input from '../input'; import Logo from '../logo'; import Placeholder from '../placeholder'; import VideoDetails from '../video-details'; import VideoThumbnail from '../video-thumbnail'; import VideoThumbnailSelectorModal from '../video-thumbnail-selector-modal'; import styles from './style.module.scss'; import useEditDetails from './use-edit-details'; const noop = () => { // noop }; const Header = ( { saveDisabled = true, saveLoading = false, onSaveChanges, }: { saveDisabled?: boolean; saveLoading?: boolean; onSaveChanges: () => void; } ) => { const [ isSm ] = useBreakpointMatch( 'sm' ); const history = useHistory(); return (
{ ! isSm && } { __( 'Edit video details', 'jetpack-videopress-pkg' ) }
); }; const GoBackLink = () => { const history = useHistory(); return (
history.push( '/' ) }> { __( 'Go back', 'jetpack-videopress-pkg' ) }
); }; const Infos = ( { title, onChangeTitle, description, onChangeDescription, caption, onChangeCaption, loading, }: { title: string; onChangeTitle: ( value: string ) => void; description: string; onChangeDescription: ( value: string ) => void; caption: string; onChangeCaption: ( value: string ) => void; loading: boolean; } ) => { return ( <> { loading ? ( ) : ( ) } { loading ? ( ) : ( ) } { loading ? ( ) : ( ) } ); }; const EditVideoDetails = () => { const { // Video Data duration, posterImage, filename, uploadDate, url, title, description, caption, // Playback Token isFetchingPlaybackToken, // Page State/Actions hasChanges, updating, updated, isFetching, handleSaveChanges, // Metadata setTitle, setDescription, setCaption, processing, // Poster Image useVideoAsThumbnail, selectedTime, handleConfirmFrame, handleCloseSelectFrame, handleOpenSelectFrame, handleVideoFrameSelected, frameSelectorIsOpen, selectPosterImageFromLibrary, posterImageSource, libraryAttachment, } = useEditDetails(); const { canPerformAction } = usePermission(); const unsavedChangesMessage = __( 'There are unsaved changes. Are you sure you want to exit?', 'jetpack-videopress-pkg' ); useUnloadPrevent( { shouldPrevent: hasChanges && ! updated && canPerformAction, message: unsavedChangesMessage, } ); const history = useHistory(); useEffect( () => { if ( updated === true ) { history.push( '/' ); } }, [ updated ] ); if ( ! canPerformAction ) { history.push( '/' ); } let thumbnail: string | JSX.Element = posterImage; if ( posterImageSource === 'video' && useVideoAsThumbnail ) { thumbnail = ; } else if ( posterImageSource === 'upload' ) { thumbnail = libraryAttachment.url; } const isFetchingData = isFetching || isFetchingPlaybackToken; return ( <> { frameSelectorIsOpen && ( ) }
} > : thumbnail } duration={ duration } editable processing={ processing } onSelectFromVideo={ handleOpenSelectFrame } onUploadImage={ selectPosterImageFromLibrary } /> ); }; export default EditVideoDetails;