2022-09-03 23:32:20 +02:00
|
|
|
import { ref } from 'vue';
|
|
|
|
import { NProgress } from 'naive-ui';
|
|
|
|
import filesize from 'filesize';
|
2022-09-04 00:11:11 +02:00
|
|
|
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';
|
|
|
|
|
2022-09-04 00:11:11 +02:00
|
|
|
export default function createBlobDialog(
|
2022-09-03 23:32:20 +02:00
|
|
|
dialog: DialogApiInjection,
|
2022-09-04 00:11:11 +02:00
|
|
|
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({
|
2022-09-04 00:11:11 +02:00
|
|
|
title:
|
|
|
|
'Loading ' + (video ? 'video' : audio ? 'audio' : 'image') + '...',
|
2022-09-03 23:32:20 +02:00
|
|
|
closable: false,
|
|
|
|
closeOnEsc: false,
|
|
|
|
maskClosable: false,
|
2022-09-04 00:11:11 +02:00
|
|
|
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 };
|
|
|
|
}
|