Add PlaylistUploadEntry
This commit is contained in:
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<Frame margin="none" class="px-3 py-4 flex items-center gap-2">
|
||||
<div>
|
||||
<ListMusicIcon :size="40" v-if="hasLoaded" />
|
||||
<CassetteTape :size="40" v-if="hasProgress" />
|
||||
<FileQuestionMark :size="40" v-if="hasError" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<p class="font-medium">
|
||||
{{ title }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="hasLoaded">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ trackCount }} track(s)
|
||||
</p>
|
||||
<Dot />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ type }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-2" v-if="hasProgress">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ progress }}%
|
||||
</p>
|
||||
<UiProgress :modelValue="progress" />
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="hasError">
|
||||
<p class="text-sm text-destructive-foreground">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<UiButton variant="ghost">
|
||||
<EllipsisVertical :size="40" />
|
||||
</UiButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56" align="start">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
Profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Billing
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Keyboard shortcuts
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</Frame>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import Frame from '@/components/ui/frame/Frame.vue';
|
||||
import { CassetteTape, Dot, EllipsisVertical, FileQuestionMark, ListMusicIcon } from 'lucide-vue-next';
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
trackCount?: number
|
||||
type?: string
|
||||
progress?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
});
|
||||
|
||||
const hasLoaded = props.trackCount && props.type;
|
||||
const hasProgress = props.progress;
|
||||
const hasError = props.error;
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<Frame margin="none" class="px-3 py-4 flex items-center gap-2">
|
||||
<div>
|
||||
<Disc3 :size="40" v-if="hasLoaded" />
|
||||
<AudioWaveform :size="40" v-if="hasProgress" />
|
||||
<FileQuestionMark :size="40" v-if="hasError" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<p class="font-medium">
|
||||
{{ title }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="hasLoaded">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ size }}
|
||||
</p>
|
||||
<Dot />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ format }}
|
||||
</p>
|
||||
<Dot />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ type }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-2" v-if="hasProgress">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ progress }}%
|
||||
</p>
|
||||
<UiProgress :modelValue="progress" />
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="hasError">
|
||||
<p class="text-sm text-destructive-foreground">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<UiButton variant="ghost">
|
||||
<EllipsisVertical :size="40" />
|
||||
</UiButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56" align="start">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
Profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Billing
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
Keyboard shortcuts
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</Frame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import Frame from '@/components/ui/frame/Frame.vue';
|
||||
import { AudioWaveform, Disc3, Dot, EllipsisVertical, FileQuestionMark } from 'lucide-vue-next';
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
size?: string
|
||||
format?: string
|
||||
type?: string
|
||||
progress?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
});
|
||||
|
||||
const hasLoaded = props.size && props.format && props.type;
|
||||
const hasProgress = props.progress;
|
||||
const hasError = props.error;
|
||||
|
||||
</script>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<Frame margin="none" class="px-3 py-4 flex items-center gap-2">
|
||||
<div>
|
||||
<AudioWaveform :size="32" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row items-center gap-1">
|
||||
<p class="font-medium">
|
||||
{{ title }}
|
||||
</p>
|
||||
<UiButton variant="ghost" v-if="size">
|
||||
<Pen />
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="size && format">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ size }}
|
||||
</p>
|
||||
<Dot />
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ format }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-2" v-if="progress">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ progress }}%
|
||||
</p>
|
||||
<UiProgress :modelValue="progress" />
|
||||
</div>
|
||||
<div class="flex flex-row" v-if="error">
|
||||
<p class="text-sm text-destructive-foreground">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<UiButton variant="ghost">
|
||||
<EllipsisVertical :size="32" />
|
||||
</UiButton>
|
||||
</div>
|
||||
</Frame>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Frame from '@/components/ui/frame/Frame.vue'
|
||||
import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
size?: string
|
||||
format?: string
|
||||
progress?: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
})
|
||||
</script>
|
||||
@ -2,7 +2,8 @@
|
||||
import { Outline } from '@/components/ui/outline';
|
||||
import { SidebarTrigger } from '@/components/ui/sidebar';
|
||||
import { Download, Play } from 'lucide-vue-next';
|
||||
import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vue';
|
||||
import PlaylistUploadEntry from '~/components/internal/import/uploadentry/PlaylistUploadEntry.vue';
|
||||
import SingleUploadEntry from '~/components/internal/import/uploadentry/SingleUploadEntry.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -36,10 +37,12 @@ import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vu
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
|
||||
Uploaded files
|
||||
</h3>
|
||||
<div class="flex-row space-y-2">
|
||||
<UploadEntry title="Test" size="3.8 MB" format="mp4" />
|
||||
<UploadEntry title="Test" :progress="78" />
|
||||
<UploadEntry title="Test" error="Uploading failed, please check your internet" />
|
||||
<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="Test" :trackCount="3" type="youtube" />
|
||||
<PlaylistUploadEntry title="Test" :progress="73" type="youtube" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user