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