48 lines
1.1 KiB
TypeScript
Raw Normal View History

2022-09-03 23:32:20 +02:00
import { ref } from 'vue';
import { NProgress } from 'naive-ui';
import filesize from 'filesize';
import { Music, Video, Image } from '@vicons/carbon';
2022-09-03 23:32:20 +02:00
import type { DialogApiInjection } from 'naive-ui/es/dialog/src/DialogProvider';
export default function createBlobDialog(
2022-09-03 23:32:20 +02:00
dialog: DialogApiInjection,
audio: boolean,
2022-09-03 23:32:20 +02:00
video: boolean
) {
const progress = ref(0);
const total = ref(1);
const percentage = ref(0);
const dia = dialog.create({
title:
'Loading ' + (video ? 'video' : audio ? 'audio' : 'image') + '...',
2022-09-03 23:32:20 +02:00
closable: false,
closeOnEsc: false,
maskClosable: false,
icon: () => (video ? <Video /> : audio ? <Music /> : <Image />),
2022-09-03 23:32:20 +02:00
content: () => (
<NProgress
type="line"
percentage={percentage.value}
height={20}
status="info"
showIndicator={false}
/>
),
action: () => (
<div>
{filesize(progress.value, {
base: 2,
standard: 'jedec'
})}
/
{filesize(total.value, {
base: 2,
standard: 'jedec'
})}
- {Math.floor(percentage.value * 1000) / 1000}%
</div>
)
});
return { progress, total, percentage, dia };
}