mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement "import history" in import page

Browse Source
This commit is contained in:
bivashy
2026-01-08 03:57:00 +05:00
parent c29c12feec
commit 9984bb804a
26 changed files with 591 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
app/pages/import.vue
View File

@ -1,9 +1,62 @@
<script setup lang="ts">
import { Download, Play } from 'lucide-vue-next';
import PlaylistUploadEntry from '@/components/internal/import/uploadentry/PlaylistUploadEntry.vue';
import SingleUploadEntry from '@/components/internal/import/uploadentry/SingleUploadEntry.vue';
import Outline from '@/components/ui/outline/Outline.vue';
import SidebarTrigger from '@/components/ui/sidebar/SidebarTrigger.vue';
import Empty from '@/components/ui/empty/Empty.vue';
import UploadEntry from '@/components/internal/import/uploadentry/UploadEntry.vue';
import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
import { Download, MegaphoneOff, Play } from 'lucide-vue-next';
import type { EventSourceListener } from '~/composeables/api/event-source';
import type { StreamProgress200Item } from '~/composeables/api/models';
import { streamProgress } from '~/composeables/api/progress-sse-controller/progress-sse-controller';
import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store';
const currentPlaylistStore = useCurrentPlaylistStore();
const progressEntries = ref<Map<string, StreamProgress200Item>>(new Map());
let listener: EventSourceListener<StreamProgress200Item> | null = null;
const unwatch = watch(() => currentPlaylistStore.id, (newId, oldId) => {
if (newId !== -1 && newId !== oldId) {
listenImports();
} else if (newId === -1) {
stopImports();
}
}, { immediate: true });
const updateEntryFromProgress = (data: StreamProgress200Item) => {
if (!data.trackSourceId)
return;
progressEntries.value = new Map(progressEntries.value);
progressEntries.value.set(data.id!.toString(), data);
}
async function listenImports() {
if (listener) {
listener.close();
}
streamProgress(currentPlaylistStore.id).then(listener => {
listener.handle(data => {
updateEntryFromProgress(data);
})
}).catch(err => {
console.error(err);
})
}
function stopImports() {
if (listener) {
listener.close();
listener = null;
}
}
onUnmounted(() => {
stopImports();
unwatch();
});
</script>
<template>
@ -38,24 +91,19 @@ import SidebarTrigger from '@/components/ui/sidebar/SidebarTrigger.vue';
Uploaded files
</h3>
<div class="space-y-2">
<SingleUploadEntry title="Test" size="3.8 MB" format="mp4" type="file" />
<SingleUploadEntry title="Test" :progress="78" />
<SingleUploadEntry title="Test" error="Uploading failed, please check your internet" />
<PlaylistUploadEntry title="My Playlist" :trackCount="10" type="YouTube" :progress="75"
:playlistProgressData="{
playlistId: 1,
trackSourceId: 2,
userId: 3,
timestamp: 123456,
ytdlnStdout: `[youtube] Extracting URL: https://www.youtube.com/playlist?list=PL1234567890
[youtube:playlist] PL1234567890: Downloading 10 videos
[download] Destination: My Playlist [PL1234567890].mp3
[ExtractAudio] Destination: My Playlist [PL1234567890].mp3
[info] Download completed: My Playlist [PL1234567890].mp3
[info] 10 files downloaded successfully`,
overallProgress: 34,
status: 'LOADING'
}" />
<UploadEntry v-for="entry in Array.from(progressEntries.values())" :key="entry.id"
:entry="entry" />
<Empty class="border border-dashed" v-if="progressEntries.size === 0">
<EmptyHeader>
<EmptyMedia variant="icon">
<MegaphoneOff />
</EmptyMedia>
<EmptyTitle>No imports found</EmptyTitle>
<EmptyDescription>
Upload any track to see their progress.
</EmptyDescription>
</EmptyHeader>
</Empty>
</div>
</div>
</div>