/**
* External dependencies
*/
import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
import { Dropdown } from '@wordpress/components';
import { gmdateI18n } from '@wordpress/date';
import { __, sprintf } from '@wordpress/i18n';
import { Icon, edit, cloud, image, media, video } from '@wordpress/icons';
import classnames from 'classnames';
/**
* Internal dependencies
*/
import Placeholder from '../placeholder';
import ProgressBar from '../progress-bar';
import styles from './style.module.scss';
/**
* Types
*/
import { VideoThumbnailDropdownProps, VideoThumbnailProps } from './types';
import type React from 'react';
export const VideoThumbnailDropdownButtons = ( {
onUseDefaultThumbnail,
onSelectFromVideo,
onUploadImage,
onClose,
isUpdatingPoster = false,
} ) => {
return (
<>
{ /* TODO: Implement use default and remove disabled class */ }
>
);
};
export const VideoThumbnailDropdown = ( {
onUseDefaultThumbnail,
onSelectFromVideo,
onUploadImage,
}: VideoThumbnailDropdownProps ) => {
return (
(
) }
renderContent={ ( { onClose } ) => (
) }
/>
);
};
const UploadingThumbnail = ( {
uploadProgress = 0,
isRow = false,
}: {
uploadProgress: number;
isRow?: boolean;
} ) => {
const completingTextFull = __( 'Completing upload', 'jetpack-videopress-pkg' );
const completingTextCompact = __( 'Completing', 'jetpack-videopress-pkg' );
const completingText = isRow ? completingTextCompact : completingTextFull;
const uploadPercentage = `${ Math.floor( uploadProgress * 100 ) }%`;
const uploadingText = sprintf(
/* translators: placeholder is the upload percentage */
__( 'Uploading %s', 'jetpack-videopress-pkg' ),
uploadPercentage
);
const infoText = uploadProgress === 1 ? completingText : uploadingText;
return (
);
};
const ProcessingThumbnail = ( { isRow = false }: { isRow?: boolean } ) => (
{ __( 'Processing', 'jetpack-videopress-pkg' ) }
);
/**
* React component to display video thumbnail.
*
* @param {VideoThumbnailProps} props - Component props.
* @returns {React.ReactNode} - VideoThumbnail react component.
*/
const VideoThumbnail = ( {
className,
thumbnail: defaultThumbnail,
duration,
editable,
blankIconSize = 96,
loading = false,
uploading = false,
processing = false,
onUseDefaultThumbnail,
onSelectFromVideo,
onUploadImage,
uploadProgress,
isRow = false,
}: VideoThumbnailProps ) => {
const [ isSmall ] = useBreakpointMatch( 'sm' );
// Mapping thumbnail (Ordered by priority)
let thumbnail = defaultThumbnail;
thumbnail = loading ? : thumbnail;
thumbnail = uploading ? (
) : (
thumbnail
);
thumbnail = processing ? : thumbnail;
thumbnail =
typeof thumbnail === 'string' && thumbnail !== '' ? (
) : (
thumbnail
);
/** If the thumbnail is not set, use the placeholder with an icon */
thumbnail = thumbnail ? (
thumbnail
) : (
);
return (
{ Boolean( thumbnail ) && editable && (
) }
{ Number.isFinite( duration ) && (
{ duration >= 3600 * 1000
? gmdateI18n( 'H:i:s', new Date( duration ) )
: gmdateI18n( 'i:s', new Date( duration ) ) }
) }
{ thumbnail }
);
};
export default VideoThumbnail;