65 lines
3.0 KiB
Vue
65 lines
3.0 KiB
Vue
<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';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1">
|
|
<NuxtLayout name="default">
|
|
<template #header>
|
|
<Outline side="bottom" padding="dense" class="w-full">
|
|
<div class="flex gap-8 w-full items-center">
|
|
<SidebarTrigger :size="5" />
|
|
<h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
|
|
Import tracks
|
|
</h2>
|
|
</div>
|
|
</Outline>
|
|
</template>
|
|
<div class="w-full flex flex-col p-8">
|
|
<Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
|
|
<Download />
|
|
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
|
|
Drag and drop your audio files
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
or
|
|
</p>
|
|
<Button variant="destructive">
|
|
<Play />
|
|
From Youtube
|
|
</Button>
|
|
</Outline>
|
|
<div>
|
|
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
|
|
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'
|
|
}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|