Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | /**
* External dependencies
*/
import { ProgressBar, Text } from '@automattic/jetpack-components';
import { siteHasFeature } from '@automattic/jetpack-script-data';
import { __, sprintf } from '@wordpress/i18n';
import clsx from 'clsx';
import { filesize } from 'filesize';
/**
* Internal dependencies
*/
import { useVideoPressSettings } from '../../hooks/use-videopress-settings';
import useVideos from '../../hooks/use-videos';
import { SITE_TYPE_ATOMIC } from '../site-settings-section/constants';
import styles from './style.module.scss';
/**
* Types
*/
import type { VideoStorageMeterProps } from './types';
import type { FC, ReactNode } from 'react';
/**
* Video Storage Meter component
*
* @param {VideoStorageMeterProps} props - Component props.
* @return {ReactNode} - VideoStorageMeter react component.
*/
const VideoStorageMeter: FC< VideoStorageMeterProps > = ( {
className,
progressBarClassName,
total,
used,
} ) => {
if ( ! total || used == null ) {
return null;
}
const progress = used / total;
const progressLabel = `${ ( progress * 100 ).toFixed() }%`;
const totalLabel = filesize( total, { base: 10 } );
return (
<div className={ clsx( className ) }>
<Text className={ clsx( styles[ 'percentage-description' ] ) }>
{ sprintf(
/* translators: %1$s is the storage percentage, from 0% to 100%, %2$s is the total storage. */
__( '%1$s of %2$s of cloud video storage', 'jetpack-videopress-pkg' ),
progressLabel,
totalLabel
) }
</Text>
<ProgressBar
className={ clsx( styles[ 'progress-bar' ], progressBarClassName ) }
progress={ progress }
></ProgressBar>
</div>
);
};
export const ConnectVideoStorageMeter = props => {
const { storageUsed, uploadedVideoCount } = useVideos();
const { settings } = useVideoPressSettings();
const { siteType } = settings;
const total = 1000 * 1000 * 1000 * 1000;
// Do not show storage meter if the site is an Atomic site.
if ( siteType === SITE_TYPE_ATOMIC ) {
return null;
}
// Do not show storage meter for unlimited storage plans.
if ( siteHasFeature( 'videopress-unlimited-storage' ) ) {
return null;
}
// Do not show storage meter if when no videos have been uploaded.
if ( ! uploadedVideoCount ) {
return null;
}
if ( ! storageUsed ) {
return <VideoStorageMeter { ...props } used={ 0 } total={ 1 } />;
}
return <VideoStorageMeter { ...props } used={ storageUsed } total={ total } />;
};
export default VideoStorageMeter;
|