import { ProgressCircle } from '#/components/ProgressCircle';
import { Text } from '#/components/Text';
import CircleCheckIcon from '#/icons/central/CircleCheck_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import { colors } from '#/styles/colors';
import type { VideoState } from './state/video';
import * as styles from './VideoUploadToolbar.css';
export function VideoUploadToolbar({ state }: { state: VideoState }) {
let text = '';
const isGif = state.asset?.mimeType === 'image/gif';
switch (state.status) {
case 'uploading': {
text = isGif ? m['view.composer.gif.uploading']() : m['view.composer.video.uploading']();
break;
}
case 'processing': {
text = isGif ? m['view.composer.gif.processing']() : m['view.composer.video.processing']();
break;
}
case 'error': {
text = m['common.error.heading']();
break;
}
case 'done': {
text = isGif ? m['view.composer.gif.uploaded']() : m['view.composer.video.uploaded']();
break;
}
}
return (
<div className={styles.toolbar}>
{state.status === 'done' ? (
<CircleCheckIcon className={styles.doneIcon} />
) : (
<ProgressCircle
color={state.status === 'error' ? colors.negative_500 : colors.primary_500}
// distinguish failure from stalled progress
progress={state.status === 'error' ? 1 : state.progress}
size={20}
trackColor={colors.borderContrastLow}
/>
)}
<Text weight="medium" size="md_sub">
{text}
</Text>
</div>
);
}