Mr.Dat
00bbe0f503
- Updated Upload.vue to include cancelItem functionality in the upload queue. - Modified UploadQueue.vue to emit cancel events for individual items. - Enhanced UploadQueueItem.vue to display cancel button for ongoing uploads. - Added merge.ts for handling manifest creation and S3 operations for chunk uploads. - Introduced temp.html for testing multi-threaded chunk uploads with progress tracking. - Created AGENTS.md for comprehensive project documentation and guidelines.
56 lines
2.5 KiB
Vue
56 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import PageHeader from '@/components/dashboard/PageHeader.vue';
|
|
import UploadModeToggle from './components/UploadModeToggle.vue';
|
|
import InfoTip from './components/InfoTip.vue';
|
|
import UploadDropzone from './components/UploadDropzone.vue';
|
|
import RemoteUrlForm from './components/RemoteUrlForm.vue';
|
|
import BulkActions from './components/BulkActions.vue';
|
|
import UploadQueue from './components/UploadQueue.vue';
|
|
import { ref } from 'vue';
|
|
import { useUploadQueue } from '@/composables/useUploadQueue';
|
|
|
|
const mode = ref<'local' | 'remote'>('local');
|
|
|
|
const { addFiles, addRemoteUrls, items, removeItem, cancelItem, totalSize, completeCount, pendingCount, startQueue } = useUploadQueue();
|
|
|
|
const handlePublish = () => {
|
|
console.log('Publishing items...');
|
|
// TODO: Handle publish action
|
|
};
|
|
|
|
const handleFilesSelected = (files: FileList) => {
|
|
addFiles(files);
|
|
};
|
|
|
|
const handleRemoteUrls = (urls: string[]) => {
|
|
addRemoteUrls(urls);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1 flex items-stretch gap-4">
|
|
<div class="flex-1 overflow-y-auto">
|
|
<PageHeader title="Upload Videos" description="Choose your preferred method to upload videos." :breadcrumbs="[
|
|
{ label: 'Dashboard', to: '/' },
|
|
{ label: 'Upload Videos' }
|
|
]" />
|
|
<div class="flex flex-col max-w-4xl mx-auto gap-4">
|
|
<UploadModeToggle v-model="mode" />
|
|
<InfoTip />
|
|
<Transition enter-active-class="transition-all duration-300 ease-in-out"
|
|
enter-from-class="opacity-0 transform translate-y-4"
|
|
enter-to-class="opacity-100 transform translate-y-0"
|
|
leave-active-class="transition-all duration-200 ease-in-out"
|
|
leave-from-class="opacity-100 transform translate-y-0"
|
|
leave-to-class="opacity-0 transform -translate-y-4" mode="out-in">
|
|
<UploadDropzone v-if="mode === 'local'" @files-selected="handleFilesSelected" />
|
|
<RemoteUrlForm v-else @submit="handleRemoteUrls" />
|
|
</Transition>
|
|
<BulkActions :visible="false" :pending-count="0" />
|
|
</div>
|
|
</div>
|
|
<UploadQueue :items="items" :total-size="totalSize" :complete-count="completeCount"
|
|
:pending-count="pendingCount" @remove-item="removeItem" @cancel-item="cancelItem" @publish="handlePublish"
|
|
@start-queue="startQueue" />
|
|
</div>
|
|
</template> |