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

Format imports, partial implementation of import upload entries

Browse Source
This commit is contained in:
bivashy
2026-01-06 02:37:03 +05:00
parent 16d284fe68
commit c29c12feec
17 changed files with 607 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/pages/edit.vue
View File

@ -1,12 +1,8 @@
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { InputWithIcon } from '@/components/ui/input'
import { Outline } from '@/components/ui/outline'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import { Search } from 'lucide-vue-next'
import { VueDraggableNext } from 'vue-draggable-next'
import MusicCard from '~/components/internal/musiccard/MusicCard.vue'
import MusicCard from '@/components/internal/musiccard/MusicCard.vue'
import type { TrackResponse } from '~/composeables/api/models'
import { bulkReorder, getGetPlaylistTracksQueryKey, useGetPlaylistTracks } from '~/composeables/api/track-controller/track-controller'
import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store'

5
app/pages/export.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
import Frame from '@/components/ui/frame/Frame.vue';
import Outline from '@/components/ui/outline/Outline.vue';
</script>
<template>

29
app/pages/import.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
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 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>
@ -28,10 +28,10 @@ import SingleUploadEntry from '~/components/internal/import/uploadentry/SingleUp
<p class="text-sm text-muted-foreground">
or
</p>
<UiButton variant="destructive">
<Button variant="destructive">
<Play />
From Youtube
</UiButton>
</Button>
</Outline>
<div>
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
@ -41,8 +41,21 @@ import SingleUploadEntry from '~/components/internal/import/uploadentry/SingleUp
<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="Test" :trackCount="3" type="youtube" />
<PlaylistUploadEntry title="Test" :progress="73" type="youtube" />
<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>

22
app/pages/modify.vue
View File

@ -1,7 +1,16 @@
<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
import Frame from '@/components/ui/frame/Frame.vue';
import { ref } from 'vue'
import Dropzone from '~/components/ui/dropzone/Dropzone.vue'
const files = ref<File[]>([])
const handleDrop = (acceptedFiles: File[], event: DragEvent) => {
console.log('Files dropped:', acceptedFiles)
}
const handleError = (error: Error) => {
console.error('Dropzone error:', error.message)
}
</script>
<template>
@ -18,9 +27,10 @@ import Frame from '@/components/ui/frame/Frame.vue';
</Outline>
</template>
<div class="w-full">
<Frame>
Hello
</Frame>
<Dropzone :src="files" :accept="{
'image/*': ['.png', '.jpg', '.jpeg', '.gif']
}" :max-size="5 * 1024 * 1024" :min-size="1024" :max-files="3" @drop="handleDrop" @error="handleError"
class="w-full max-w-md" />
</div>
</NuxtLayout>
</div>

6
app/pages/settings.vue
View File

@ -1,9 +1,3 @@
<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
import Frame from '@/components/ui/frame/Frame.vue';
</script>
<template>
<div class="flex-1">
<NuxtLayout name="default">

27
app/pages/test.vue
View File

@ -1,27 +0,0 @@
<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import Frame from '@/components/ui/frame/Frame.vue';
definePageMeta({
layout: false,
})
</script>
<template>
<NuxtLayout name="clear">
<template #header>
<Outline side="bottom" padding="dense" class="w-full">
<div class="flex gap-8 w-full items-center">
<h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
Tracks
</h2>
</div>
</Outline>
</template>
<div class="w-full">
<Frame>
Hello
</Frame>
</div>
</NuxtLayout>
</template>