stream/stream.ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix color

Browse Source
This commit is contained in:
Mr.Dat
2026-01-26 16:26:58 +07:00
parent 820aa7a597
commit 6c4015f8c4
29 changed files with 867 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/upload/components/RemoteUrlForm.vue
View File

@@ -19,7 +19,7 @@ const handleSubmit = () => {
</script>
<template>
<div class="bg-white rounded-[2rem] shadow-soft p-10 border border-slate-100/50">
<div class="bg-gradient-to-tl from-slate-50 to-white rounded-[2rem] shadow-soft p-10 border border-gray-200">
<label class="block text-lg font-semibold text-slate-900 mb-4">Enter Video URL</label>
<div class="flex gap-4 items-start">

2
src/routes/upload/components/UploadModeToggle.vue
View File

@@ -30,7 +30,7 @@ const mode = computed({
</script>
<template>
<div class="inline-flex bg-slate-100 p-1 rounded-2xl relative z-0 w-fit">
<div class="inline-flex bg-slate-200 p-1 rounded-2xl relative z-0 w-fit">
<div
:class="cn(':uno: absolute left-1 top-1 h-[calc(100%-8px)] w-[calc(50%-4px)] bg-white rounded-xl shadow-sm transition-all duration-300 ease-out -z-10', mode === 'local' ? 'translate-x-0' : 'translate-x-full')">
</div>

22
src/routes/upload/components/UploadQueue.vue
View File

@@ -1,15 +1,18 @@
<script setup lang="ts">
import UploadQueueItem, { type QueueItem } from './UploadQueueItem.vue';
import UploadQueueItem from './UploadQueueItem.vue';
import type { QueueItem } from '@/composables/useUploadQueue';
defineProps<{
items?: QueueItem[];
totalSize?: string;
completeCount?: number;
pendingCount?: number;
}>();
const emit = defineEmits<{
removeItem: [id: string];
publish: [];
startQueue: [];
}>();
</script>
@@ -45,8 +48,7 @@ const emit = defineEmits<{
<p class="text-slate-400 font-medium">Empty queue!</p>
</div>
<UploadQueueItem v-for="item in items" :key="item.id" :item="item"
@remove="emit('removeItem', $event)" />
<UploadQueueItem v-for="item in items" :key="item.id" :item="item" @remove="emit('removeItem', $event)" />
</div>
<div class="p-6 border-t-2 border-white rounded-b-2xl shrink-0">
@@ -54,9 +56,21 @@ const emit = defineEmits<{
<span class="text-slate-500">Total size:</span>
<span class="text-slate-900">{{ totalSize || '0 MB' }}</span>
</div>
<button v-if="pendingCount && pendingCount > 0" @click="emit('startQueue')"
class="btn btn-primary w-full flex items-center justify-center gap-2 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
Start Upload ({{ pendingCount }})
</button>
<button @click="emit('publish')"
class="btn btn-outline-primary w-full flex items-center justify-center gap-2" id="btn-publish"
:disabled="!completeCount">
:disabled="!completeCount || (pendingCount ? pendingCount > 0 : false)">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />

74
src/routes/upload/components/UploadQueueItem.vue
View File

@@ -1,31 +1,46 @@
<script setup lang="ts">
export interface QueueItem {
id: string;
name: string;
type: 'local' | 'remote';
status: 'uploading' | 'processing' | 'fetching' | 'complete' | 'error';
progress?: number;
uploaded?: string;
total?: string;
speed?: string;
thumbnail?: string;
}
import type { QueueItem } from '@/composables/useUploadQueue';
import { cn } from '@/lib/utils';
import { computed } from 'vue';
defineProps<{
const props = defineProps<{
item: QueueItem;
minimal?: boolean;
}>();
const emit = defineEmits<{
remove: [id: string];
}>();
const statusLabel = computed(() => {
switch (props.item.status) {
case 'pending': return 'Pending';
case 'uploading': return 'Uploading...';
case 'processing': return 'Processing...';
case 'complete': return 'Completed';
case 'error': return 'Failed';
case 'fetching': return 'Fetching...';
default: return props.item.status;
}
});
const statusColor = computed(() => {
switch (props.item.status) {
case 'complete': return 'bg-green-500';
case 'error': return 'bg-red-500';
case 'pending': return 'bg-slate-400';
default: return 'bg-accent';
}
});
</script>
<template>
<!-- Local Upload Item -->
<div v-if="item.type === 'local'"
class="bg-white rounded-2xl p-5 shadow-soft border border-slate-100/50 relative group overflow-hidden transition-all hover:shadow-md">
<div class="flex gap-4 relative z-10">
<div class="w-20 h-16 bg-slate-800 rounded-xl shrink-0 relative overflow-hidden shadow-sm">
class="bg-white rounded-2xl p-5 shadow-soft border border-slate-100/50 relative group overflow-hidden transition-all"
:class="{ '!p-2 !border-0 !shadow-none !rounded-xl': minimal }">
<div :class="cn('flex gap-4 relative z-10', minimal && '!gap-2')">
<div v-if="!minimal" class="w-20 h-16 bg-slate-800 rounded-xl shrink-0 relative overflow-hidden shadow-sm">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10"></div>
<img v-if="item.thumbnail" :src="item.thumbnail" class="w-full h-full object-cover opacity-80" alt="">
<div class="absolute bottom-1 left-2 z-20">
@@ -54,8 +69,8 @@ const emit = defineEmits<{
<div>
<div class="flex justify-between text-xs text-slate-500 mb-1.5 font-medium">
<span class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
Uploading...
<span class="w-2 h-2 rounded-full animate-pulse" :class="statusColor"></span>
{{ statusLabel }}
</span>
<span class="text-accent font-bold">{{ item.progress || 0 }}%</span>
</div>
@@ -76,12 +91,15 @@ const emit = defineEmits<{
<!-- Remote Fetch Item -->
<div v-else
class="bg-[#F0F3FF] rounded-2xl p-5 shadow-soft border border-indigo-100/50 relative overflow-hidden group transition-all hover:shadow-md">
<div class="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#6366F1_1px,transparent_1px)] [background-size:16px_16px]">
class="bg-[#F0F3FF] rounded-2xl p-5 shadow-soft border border-indigo-100/50 relative overflow-hidden group transition-all hover:shadow-md"
:class="{ '!p-3 !bg-slate-50 !border-0 !shadow-none !rounded-xl': minimal }">
<div
class="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#6366F1_1px,transparent_1px)] [background-size:16px_16px]">
</div>
<div class="flex gap-4 relative z-10">
<div class="w-20 h-16 bg-indigo-100 rounded-xl shrink-0 flex items-center justify-center text-accent shadow-sm">
<div class="flex gap-4 relative z-10" :class="{ '!gap-3': minimal }">
<div v-if="!minimal"
class="w-20 h-16 bg-indigo-100 rounded-xl shrink-0 flex items-center justify-center text-accent shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 opacity-80" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 17H7A5 5 0 0 1 7 7h2" />
@@ -104,13 +122,21 @@ const emit = defineEmits<{
</div>
<div class="flex items-center gap-3 mt-3">
<div class="flex items-center gap-2 text-xs font-bold text-indigo-600 bg-white py-1.5 px-3 rounded-lg shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24"
<div
class="flex items-center gap-2 text-xs font-bold text-indigo-600 bg-white py-1.5 px-3 rounded-lg shadow-sm">
<svg v-if="item.status === 'fetching' || item.status === 'processing'"
xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Fetching from Google Drive...
<svg v-else-if="item.status === 'complete'" xmlns="http://www.w3.org/2000/svg"
class="w-3.5 h-3.5 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
{{ statusLabel }}
</div>
</div>
</div>