/** * 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 (
(
); }; 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 (
{ infoText }
); }; 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;