video
This commit is contained in:
@@ -73,6 +73,7 @@ const navItems = computed(() => {
|
||||
{ path: '/', icon: '🏠', tooltip: 'Home' },
|
||||
{ path: '/projects', icon: '📂', tooltip: 'Projects' },
|
||||
{ path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
|
||||
{ path: '/video', icon: '🎬', tooltip: 'Video Generation' },
|
||||
{ path: '/albums', icon: '🖼️', tooltip: 'Library' },
|
||||
{ path: '/characters', icon: '👥', tooltip: 'Characters' },
|
||||
{ path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
|
||||
|
||||
@@ -57,6 +57,11 @@ const router = createRouter({
|
||||
name: 'flexible',
|
||||
component: () => import('../views/FlexibleGenerationView.vue')
|
||||
},
|
||||
{
|
||||
path: '/video',
|
||||
name: 'video',
|
||||
component: () => import('../views/VideoGenerationView.vue')
|
||||
},
|
||||
{
|
||||
path: '/albums',
|
||||
name: 'albums',
|
||||
|
||||
@@ -66,5 +66,18 @@ export const aiService = {
|
||||
linked_assets: linkedAssets
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
|
||||
// Run video generation task
|
||||
async runVideoGeneration(payload) {
|
||||
const response = await api.post('/generations/video/_run', payload)
|
||||
return response.data
|
||||
},
|
||||
|
||||
// Get video generations history
|
||||
async getVideoGenerations(limit, offset) {
|
||||
const params = { limit, offset, gen_type: 'Video' }
|
||||
const response = await api.get('/generations', { params })
|
||||
return response.data
|
||||
}
|
||||
}
|
||||
|
||||
982
src/views/VideoGenerationView.vue
Normal file
982
src/views/VideoGenerationView.vue
Normal file
@@ -0,0 +1,982 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { dataService } from '../services/dataService'
|
||||
import { aiService } from '../services/aiService'
|
||||
import Button from 'primevue/button'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import Slider from 'primevue/slider'
|
||||
import Skeleton from 'primevue/skeleton'
|
||||
import { useAlbumStore } from '../stores/albums'
|
||||
|
||||
const router = useRouter()
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
const albumStore = useAlbumStore()
|
||||
|
||||
// --- State ---
|
||||
const prompt = ref('')
|
||||
const negativePrompt = ref('')
|
||||
const startImage = ref(null)
|
||||
const tailImage = ref(null)
|
||||
const selectedCharacter = ref(null)
|
||||
const useProfileImage = ref(true)
|
||||
const duration = ref(5)
|
||||
const mode = ref('std')
|
||||
const modelName = ref('kling-v2-6')
|
||||
const cfgScale = ref(50) // 0-100 mapped to 0.0-1.0
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref('')
|
||||
const isTelegramIdSaved = ref(false)
|
||||
|
||||
const characters = ref([])
|
||||
const historyGenerations = ref([])
|
||||
const historyTotal = ref(0)
|
||||
const historyRows = ref(50)
|
||||
|
||||
const isSettingsVisible = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const activeOverlayId = ref(null)
|
||||
|
||||
// Asset Picker State
|
||||
const isAssetPickerVisible = ref(false)
|
||||
const assetPickerTarget = ref('start') // 'start' or 'tail'
|
||||
const assetPickerTab = ref('all')
|
||||
const modalAssets = ref([])
|
||||
const isModalLoading = ref(false)
|
||||
|
||||
// Album Picker State
|
||||
const isAlbumPickerVisible = ref(false)
|
||||
const generationToAdd = ref(null)
|
||||
const selectedAlbumForAdd = ref(null)
|
||||
|
||||
// Video Preview
|
||||
const isVideoPreviewVisible = ref(false)
|
||||
const previewVideo = ref(null)
|
||||
|
||||
// Options
|
||||
const modelOptions = ref([
|
||||
{ key: 'kling-v2-1', value: 'Kling v2.1' },
|
||||
{ key: 'kling-v2', value: 'Kling v2' },
|
||||
{ key: 'kling-v1-6', value: 'Kling v1.6' },
|
||||
{ key: 'kling-v2-6', value: 'Kling v2.6' }
|
||||
])
|
||||
|
||||
// --- Persistence ---
|
||||
const STORAGE_KEY = 'video_gen_settings'
|
||||
|
||||
const saveSettings = () => {
|
||||
const settings = {
|
||||
prompt: prompt.value,
|
||||
negativePrompt: negativePrompt.value,
|
||||
startImageId: startImage.value?.id,
|
||||
tailImageId: tailImage.value?.id,
|
||||
selectedCharacterId: selectedCharacter.value?.id,
|
||||
useProfileImage: useProfileImage.value,
|
||||
duration: duration.value,
|
||||
mode: mode.value,
|
||||
modelName: modelName.value,
|
||||
cfgScale: cfgScale.value,
|
||||
sendToTelegram: sendToTelegram.value,
|
||||
telegramId: telegramId.value
|
||||
}
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
|
||||
|
||||
if (telegramId.value) {
|
||||
localStorage.setItem('telegram_id', telegramId.value)
|
||||
isTelegramIdSaved.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const restoreSettings = () => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
try {
|
||||
const settings = JSON.parse(stored)
|
||||
prompt.value = settings.prompt || ''
|
||||
negativePrompt.value = settings.negativePrompt || ''
|
||||
if (settings.duration) duration.value = settings.duration
|
||||
if (settings.mode) mode.value = settings.mode
|
||||
if (settings.modelName) modelName.value = settings.modelName
|
||||
if (settings.cfgScale !== undefined) cfgScale.value = settings.cfgScale
|
||||
sendToTelegram.value = settings.sendToTelegram || false
|
||||
telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
|
||||
if (telegramId.value) isTelegramIdSaved.value = true
|
||||
if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
|
||||
return settings
|
||||
} catch (e) {
|
||||
console.error('Failed to parse settings', e)
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// Watchers for auto-save
|
||||
watch([prompt, negativePrompt, startImage, tailImage, selectedCharacter, useProfileImage, duration, mode, modelName, cfgScale, sendToTelegram, telegramId], () => {
|
||||
saveSettings()
|
||||
}, { deep: true })
|
||||
|
||||
// --- Data Loading ---
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [charsRes, historyRes] = await Promise.all([
|
||||
dataService.getCharacters(),
|
||||
aiService.getVideoGenerations(historyRows.value, 0)
|
||||
])
|
||||
|
||||
characters.value = charsRes || []
|
||||
|
||||
if (historyRes && historyRes.generations) {
|
||||
historyGenerations.value = historyRes.generations
|
||||
historyTotal.value = historyRes.total_count || 0
|
||||
|
||||
// Resume polling for unfinished generations
|
||||
const threeMinutesAgo = Date.now() - 3 * 60 * 1000
|
||||
historyGenerations.value.forEach(gen => {
|
||||
const status = gen.status ? gen.status.toLowerCase() : ''
|
||||
const isActive = ['processing', 'starting', 'running'].includes(status)
|
||||
|
||||
let isRecent = true
|
||||
if (gen.created_at) {
|
||||
let timeStr = gen.created_at
|
||||
if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
|
||||
timeStr += 'Z'
|
||||
}
|
||||
const createdTime = new Date(timeStr).getTime()
|
||||
if (!isNaN(createdTime)) {
|
||||
isRecent = createdTime > threeMinutesAgo
|
||||
}
|
||||
}
|
||||
|
||||
if (isActive && isRecent) {
|
||||
pollGeneration(gen.id)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
|
||||
historyTotal.value = historyGenerations.value.length
|
||||
}
|
||||
|
||||
// Restore complex objects from IDs
|
||||
const savedSettings = restoreSettings()
|
||||
if (savedSettings) {
|
||||
if (savedSettings.selectedCharacterId) {
|
||||
selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
|
||||
}
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to load data', e)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshHistory = async () => {
|
||||
try {
|
||||
const response = await aiService.getVideoGenerations(historyRows.value, 0)
|
||||
if (response && response.generations) {
|
||||
const newGenerations = []
|
||||
for (const gen of response.generations) {
|
||||
const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
|
||||
if (existingIndex !== -1) {
|
||||
const existing = historyGenerations.value[existingIndex]
|
||||
if (!['processing', 'starting', 'running'].includes(existing.status)) {
|
||||
Object.assign(existing, gen)
|
||||
}
|
||||
} else {
|
||||
newGenerations.push(gen)
|
||||
}
|
||||
}
|
||||
if (newGenerations.length > 0) {
|
||||
historyGenerations.value = [...newGenerations, ...historyGenerations.value]
|
||||
}
|
||||
historyTotal.value = response.total_count || historyTotal.value
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to refresh history', e)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Generation ---
|
||||
const handleGenerate = async () => {
|
||||
if (!startImage.value) {
|
||||
alert('Please select a start image')
|
||||
return
|
||||
}
|
||||
|
||||
if (sendToTelegram.value && !telegramId.value) {
|
||||
alert('Please enter your Telegram ID')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
image_asset_id: startImage.value.id,
|
||||
prompt: prompt.value || '',
|
||||
negative_prompt: negativePrompt.value || undefined,
|
||||
duration: duration.value,
|
||||
mode: mode.value,
|
||||
model_name: modelName.value,
|
||||
cfg_scale: cfgScale.value / 100,
|
||||
linked_character_id: selectedCharacter.value?.id || undefined,
|
||||
tail_image_asset_id: tailImage.value?.id || undefined,
|
||||
telegram_id: sendToTelegram.value ? telegramId.value : undefined,
|
||||
use_profile_image: selectedCharacter.value ? useProfileImage.value : false
|
||||
}
|
||||
|
||||
const response = await aiService.runVideoGeneration(payload)
|
||||
|
||||
if (response && response.id) {
|
||||
const newGen = {
|
||||
id: response.id,
|
||||
prompt: prompt.value,
|
||||
status: 'starting',
|
||||
gen_type: 'Video',
|
||||
created_at: new Date().toISOString(),
|
||||
}
|
||||
|
||||
historyGenerations.value.unshift(newGen)
|
||||
historyTotal.value++
|
||||
pollGeneration(response.id)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Generation failed', e)
|
||||
alert(e.response?.data?.detail || e.message || 'Video generation failed to start')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pollGeneration = async (id) => {
|
||||
let completed = false
|
||||
let attempts = 0
|
||||
const genIndex = historyGenerations.value.findIndex(g => g.id === id)
|
||||
if (genIndex === -1) return
|
||||
|
||||
const gen = historyGenerations.value[genIndex]
|
||||
|
||||
while (!completed) {
|
||||
try {
|
||||
const response = await aiService.getGenerationStatus(id)
|
||||
Object.assign(gen, response)
|
||||
|
||||
if (response.status === 'done' || response.status === 'failed') {
|
||||
completed = true
|
||||
} else {
|
||||
await new Promise(resolve => setTimeout(resolve, 3000))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Polling failed for ${id}`, e)
|
||||
attempts++
|
||||
if (attempts > 3) {
|
||||
completed = true
|
||||
gen.status = 'failed'
|
||||
gen.failed_reason = 'Polling connection lost'
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 5000))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Infinite Scroll ---
|
||||
const isHistoryLoading = ref(false)
|
||||
const infiniteScrollTrigger = ref(null)
|
||||
let observer = null
|
||||
|
||||
const setupInfiniteScroll = () => {
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
|
||||
loadMoreHistory()
|
||||
}
|
||||
}, {
|
||||
root: null,
|
||||
rootMargin: '100px',
|
||||
threshold: 0.1
|
||||
})
|
||||
|
||||
if (infiniteScrollTrigger.value) {
|
||||
observer.observe(infiniteScrollTrigger.value)
|
||||
}
|
||||
}
|
||||
|
||||
const loadMoreHistory = async () => {
|
||||
if (isHistoryLoading.value) return
|
||||
isHistoryLoading.value = true
|
||||
|
||||
try {
|
||||
const nextOffset = historyGenerations.value.length
|
||||
const response = await aiService.getVideoGenerations(historyRows.value, nextOffset)
|
||||
|
||||
if (response && response.generations) {
|
||||
const newGenerations = response.generations.filter(gen =>
|
||||
!historyGenerations.value.some(existing => existing.id === gen.id)
|
||||
)
|
||||
historyGenerations.value.push(...newGenerations)
|
||||
historyTotal.value = response.total_count || historyTotal.value
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load more history', e)
|
||||
} finally {
|
||||
isHistoryLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Initial Load ---
|
||||
onMounted(() => {
|
||||
loadData().then(() => {
|
||||
setTimeout(setupInfiniteScroll, 500)
|
||||
})
|
||||
isSettingsVisible.value = true
|
||||
})
|
||||
|
||||
// Video Preview
|
||||
const openVideoPreview = (url) => {
|
||||
previewVideo.value = { url }
|
||||
isVideoPreviewVisible.value = true
|
||||
}
|
||||
|
||||
const reusePrompt = (gen) => {
|
||||
if (gen.prompt) {
|
||||
prompt.value = gen.prompt
|
||||
isSettingsVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const deleteGeneration = async (gen) => {
|
||||
if (!gen) return
|
||||
try {
|
||||
historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
|
||||
historyTotal.value--
|
||||
await dataService.deleteGeneration(gen.id)
|
||||
} catch (e) {
|
||||
console.error('Failed to delete generation', e)
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMobileOverlay = (id) => {
|
||||
if (activeOverlayId.value === id) {
|
||||
activeOverlayId.value = null
|
||||
} else {
|
||||
activeOverlayId.value = id
|
||||
}
|
||||
}
|
||||
|
||||
// --- Asset Picker Logic ---
|
||||
const loadModalAssets = async () => {
|
||||
isModalLoading.value = true
|
||||
try {
|
||||
const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
|
||||
const response = await dataService.getAssets(100, 0, typeParam)
|
||||
|
||||
if (response && response.assets) {
|
||||
modalAssets.value = response.assets
|
||||
} else {
|
||||
modalAssets.value = Array.isArray(response) ? response : []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load modal assets', e)
|
||||
modalAssets.value = []
|
||||
} finally {
|
||||
isModalLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const openAssetPicker = (target) => {
|
||||
assetPickerTarget.value = target
|
||||
isAssetPickerVisible.value = true
|
||||
loadModalAssets()
|
||||
}
|
||||
|
||||
const selectAssetFromPicker = (asset) => {
|
||||
if (assetPickerTarget.value === 'start') {
|
||||
startImage.value = asset
|
||||
} else {
|
||||
tailImage.value = asset
|
||||
}
|
||||
isAssetPickerVisible.value = false
|
||||
}
|
||||
|
||||
const removeStartImage = () => {
|
||||
startImage.value = null
|
||||
}
|
||||
|
||||
const removeTailImage = () => {
|
||||
tailImage.value = null
|
||||
}
|
||||
|
||||
watch(assetPickerTab, () => {
|
||||
if (isAssetPickerVisible.value) {
|
||||
loadModalAssets()
|
||||
}
|
||||
})
|
||||
|
||||
// --- Asset Upload in Picker ---
|
||||
const assetPickerFileInput = ref(null)
|
||||
|
||||
const triggerAssetPickerUpload = () => {
|
||||
assetPickerFileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleAssetPickerUpload = async (event) => {
|
||||
const target = event.target
|
||||
if (target.files && target.files[0]) {
|
||||
const file = target.files[0]
|
||||
try {
|
||||
isModalLoading.value = true
|
||||
await dataService.uploadAsset(file)
|
||||
assetPickerTab.value = 'uploaded'
|
||||
loadModalAssets()
|
||||
} catch (e) {
|
||||
console.error('Failed to upload asset', e)
|
||||
} finally {
|
||||
isModalLoading.value = false
|
||||
target.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Album Picker Logic ---
|
||||
const openAlbumPicker = (gen) => {
|
||||
generationToAdd.value = gen
|
||||
isAlbumPickerVisible.value = true
|
||||
albumStore.fetchAlbums()
|
||||
}
|
||||
|
||||
const confirmAddToAlbum = async () => {
|
||||
if (!generationToAdd.value || !selectedAlbumForAdd.value) return
|
||||
try {
|
||||
await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
|
||||
isAlbumPickerVisible.value = false
|
||||
selectedAlbumForAdd.value = null
|
||||
generationToAdd.value = null
|
||||
} catch (e) {
|
||||
console.error('Failed to add to album', e)
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to determine if a generation result is a video
|
||||
const isVideoResult = (gen) => {
|
||||
return gen.gen_type === 'Video' || gen.gen_type === 'video'
|
||||
}
|
||||
|
||||
const getResultUrl = (gen) => {
|
||||
if (gen.result_list && gen.result_list.length > 0) {
|
||||
return API_URL + '/assets/' + gen.result_list[0]
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const getResultThumbnailUrl = (gen) => {
|
||||
if (gen.result_list && gen.result_list.length > 0) {
|
||||
return API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'
|
||||
}
|
||||
return null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full font-sans">
|
||||
<main class="flex-1 relative flex flex-col h-full overflow-hidden">
|
||||
<header
|
||||
class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<h1
|
||||
class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent m-0">
|
||||
🎬 Video Studio</h1>
|
||||
|
||||
<span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button icon="pi pi-refresh" @click="refreshHistory" rounded text
|
||||
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
|
||||
<Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
|
||||
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-4"
|
||||
:class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
|
||||
<div v-if="historyGenerations.length > 0"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
|
||||
<div v-for="gen in historyGenerations" :key="gen.id"
|
||||
class="aspect-video relative group overflow-hidden rounded-xl bg-slate-800 transition-all duration-300 border border-white/5 hover:border-white/10"
|
||||
@click="toggleMobileOverlay(gen.id)">
|
||||
|
||||
<!-- Video Thumbnail / Player -->
|
||||
<template v-if="gen.result_list && gen.result_list.length > 0">
|
||||
<video :src="getResultUrl(gen)" :poster="getResultThumbnailUrl(gen)"
|
||||
class="w-full h-full object-cover cursor-pointer" muted preload="metadata"
|
||||
@mouseenter="$event.target.play()"
|
||||
@mouseleave="$event.target.pause(); $event.target.currentTime = 0"
|
||||
@click.stop="openVideoPreview(getResultUrl(gen))" />
|
||||
<!-- Play icon overlay -->
|
||||
<div
|
||||
class="absolute top-2 left-2 w-7 h-7 bg-black/50 rounded-full flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity">
|
||||
<i class="pi pi-play text-white text-[10px] ml-0.5"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else-if="gen.status === 'failed'"
|
||||
class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
|
||||
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
|
||||
<span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
|
||||
<span v-if="gen.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
|
||||
v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
|
||||
class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-cyan-500/20 group">
|
||||
<!-- Shimmer Background -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-tr from-cyan-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
|
||||
</div>
|
||||
<!-- Moving Highlight -->
|
||||
<div
|
||||
class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
|
||||
</div>
|
||||
|
||||
<i class="pi pi-spin pi-spinner text-cyan-500 text-xl mb-2 relative z-10"></i>
|
||||
<span class="text-[10px] text-cyan-300/70 relative z-10 capitalize">{{ gen.status
|
||||
}}...</span>
|
||||
<span v-if="gen.progress"
|
||||
class="text-[9px] text-cyan-400/60 font-mono mt-1 relative z-10">{{
|
||||
gen.progress }}%</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
|
||||
<i class="pi pi-video text-4xl opacity-20"></i>
|
||||
</div>
|
||||
|
||||
<!-- Overlay Actions -->
|
||||
<div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
|
||||
:class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
|
||||
|
||||
<div
|
||||
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
|
||||
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(gen)" />
|
||||
|
||||
<div class="flex flex-col items-center gap-0.5 pointer-events-none">
|
||||
<span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
|
||||
gen.cost }} $</span>
|
||||
<span v-if="gen.execution_time_seconds"
|
||||
class="text-[8px] text-slate-500 font-mono">{{
|
||||
gen.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1">
|
||||
<Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="openAlbumPicker(gen)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Centered Play Button -->
|
||||
<div v-if="gen.result_list && gen.result_list.length > 0"
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
|
||||
<Button icon="pi pi-play" rounded text
|
||||
class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
|
||||
@click.stop="openVideoPreview(getResultUrl(gen))" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
|
||||
<div class="flex gap-1 mb-1">
|
||||
<Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(gen)" />
|
||||
</div>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isSubmitting && historyGenerations.length === 0"
|
||||
class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
|
||||
<i class="pi pi-video text-6xl mb-4"></i>
|
||||
<p class="text-xl">Your videos will appear here</p>
|
||||
</div>
|
||||
|
||||
<!-- Infinite Scroll Sentinel -->
|
||||
<div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
|
||||
<i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
|
||||
<span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
|
||||
class="text-slate-600 text-xs">
|
||||
All items loaded
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Panel -->
|
||||
<div v-if="isSettingsVisible"
|
||||
class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
|
||||
|
||||
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
|
||||
<div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Left Column: Prompt + Image Inputs -->
|
||||
<div class="flex-1 flex flex-col gap-4">
|
||||
<!-- Prompt -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt
|
||||
<span class="text-slate-600 font-normal normal-case">(motion/scene description)</span>
|
||||
</label>
|
||||
<Textarea v-model="prompt" rows="2" autoResize
|
||||
placeholder="Describe the motion or animation you want..."
|
||||
class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner" />
|
||||
</div>
|
||||
|
||||
<!-- Negative Prompt -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Negative Prompt
|
||||
<span class="text-slate-600 font-normal normal-case">(optional)</span>
|
||||
</label>
|
||||
<Textarea v-model="negativePrompt" rows="1" autoResize
|
||||
placeholder="What to avoid in the video..."
|
||||
class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner text-sm" />
|
||||
</div>
|
||||
|
||||
<!-- Image Inputs -->
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<!-- Start Image (Required) -->
|
||||
<div class="flex-1 flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
|
||||
Start Image <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<div v-if="startImage"
|
||||
class="relative group rounded-xl overflow-hidden border-2 border-cyan-500/30 bg-slate-800 aspect-video">
|
||||
<img :src="API_URL + startImage.url + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" />
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<Button icon="pi pi-times" rounded
|
||||
class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
|
||||
@click="removeStartImage" />
|
||||
</div>
|
||||
<span
|
||||
class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
|
||||
{{ startImage.name || 'Start' }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else @click="openAssetPicker('start')"
|
||||
class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-cyan-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
|
||||
<i class="pi pi-image text-2xl text-slate-500"></i>
|
||||
<span class="text-xs text-slate-400">Select start frame</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tail Image (Optional) -->
|
||||
<div class="flex-1 flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
|
||||
Tail Image <span class="text-slate-600 font-normal normal-case">(optional)</span>
|
||||
</label>
|
||||
<div v-if="tailImage"
|
||||
class="relative group rounded-xl overflow-hidden border-2 border-violet-500/30 bg-slate-800 aspect-video">
|
||||
<img :src="API_URL + tailImage.url + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" />
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<Button icon="pi pi-times" rounded
|
||||
class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
|
||||
@click="removeTailImage" />
|
||||
</div>
|
||||
<span
|
||||
class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
|
||||
{{ tailImage.name || 'Tail' }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else @click="openAssetPicker('tail')"
|
||||
class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-violet-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
|
||||
<i class="pi pi-image text-2xl text-slate-500"></i>
|
||||
<span class="text-xs text-slate-400">Select end frame</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Character -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
|
||||
<span class="text-slate-600 font-normal normal-case">(optional)</span>
|
||||
</label>
|
||||
<Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
|
||||
placeholder="Select Character" filter showClear
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
|
||||
root: { class: '!bg-slate-800' },
|
||||
input: { class: '!text-white' },
|
||||
trigger: { class: '!text-slate-400' },
|
||||
panel: { class: '!bg-slate-800 !border-white/10' },
|
||||
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
|
||||
}">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value" class="flex items-center gap-2">
|
||||
<img v-if="slotProps.value.avatar_image"
|
||||
:src="API_URL + slotProps.value.avatar_image"
|
||||
class="w-6 h-6 rounded-full object-cover" />
|
||||
<span>{{ slotProps.value.name }}</span>
|
||||
</div>
|
||||
<span v-else>{{ slotProps.placeholder }}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img v-if="slotProps.option.avatar_image"
|
||||
:src="API_URL + slotProps.option.avatar_image"
|
||||
class="w-8 h-8 rounded-full object-cover" />
|
||||
<span>{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
||||
<div v-if="selectedCharacter"
|
||||
class="flex items-center gap-2 mt-1 px-1 animate-in fade-in slide-in-from-top-1">
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img-vid" />
|
||||
<label for="use-profile-img-vid"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
Photo</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Video Settings + Generate -->
|
||||
<div class="w-full lg:w-80 flex flex-col gap-4">
|
||||
<!-- Duration -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Duration</label>
|
||||
<div class="flex gap-2">
|
||||
<button @click="duration = 5"
|
||||
class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 5
|
||||
? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
|
||||
: 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
|
||||
5 sec
|
||||
</button>
|
||||
<button @click="duration = 10"
|
||||
class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 10
|
||||
? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
|
||||
: 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
|
||||
10 sec
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Mode</label>
|
||||
<div class="flex gap-2">
|
||||
<button @click="mode = 'std'"
|
||||
class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'std'
|
||||
? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
|
||||
: 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
|
||||
Standard
|
||||
</button>
|
||||
<button @click="mode = 'pro'"
|
||||
class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'pro'
|
||||
? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
|
||||
: 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
|
||||
Pro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Model</label>
|
||||
<Dropdown v-model="modelName" :options="modelOptions" optionLabel="value" optionValue="key"
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
|
||||
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
|
||||
</div>
|
||||
|
||||
<!-- CFG Scale -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">CFG
|
||||
Scale</label>
|
||||
<span class="text-xs text-cyan-400 font-mono">{{ (cfgScale / 100).toFixed(2) }}</span>
|
||||
</div>
|
||||
<Slider v-model="cfgScale" :min="0" :max="100" :step="5" class="!w-full" :pt="{
|
||||
root: { class: '!bg-slate-700' },
|
||||
range: { class: '!bg-gradient-to-r !from-cyan-500 !to-violet-500' },
|
||||
handle: { class: '!bg-white !border-2 !border-cyan-500' }
|
||||
}" />
|
||||
</div>
|
||||
|
||||
<!-- Telegram -->
|
||||
<div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-vid" />
|
||||
<label for="tg-check-vid" class="text-xs text-slate-300 cursor-pointer">Send to
|
||||
Telegram</label>
|
||||
</div>
|
||||
<div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
|
||||
<InputText v-model="telegramId" placeholder="Telegram ID"
|
||||
class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate Button -->
|
||||
<div class="mt-auto">
|
||||
<Button :label="isSubmitting ? 'Starting...' : '🎬 Generate Video'"
|
||||
:icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-play'" :loading="isSubmitting"
|
||||
@click="handleGenerate" :disabled="!startImage"
|
||||
class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-cyan-600 to-violet-500 !border-none !rounded-xl !shadow-lg !shadow-cyan-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:hover:!scale-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Floating Open Controls Button -->
|
||||
<transition name="fade">
|
||||
<div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
|
||||
<Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
|
||||
class="!bg-cyan-600 !border-none !shadow-xl !font-bold shadow-cyan-500/40 !px-6 !py-3" />
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Video Preview Dialog -->
|
||||
<Dialog v-model:visible="isVideoPreviewVisible" modal dismissableMask
|
||||
:style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
|
||||
:pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
|
||||
<div class="relative flex items-center justify-center" @click="isVideoPreviewVisible = false">
|
||||
<video v-if="previewVideo" :src="previewVideo.url" controls autoplay
|
||||
class="max-w-full max-h-[85vh] rounded-xl shadow-2xl" @click.stop />
|
||||
<Button icon="pi pi-times" @click="isVideoPreviewVisible = false" rounded text
|
||||
class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<!-- Asset Picker Dialog -->
|
||||
<Dialog v-model:visible="isAssetPickerVisible" modal
|
||||
:header="assetPickerTarget === 'start' ? 'Select Start Image' : 'Select Tail Image'"
|
||||
:style="{ width: '80vw', maxWidth: '900px' }"
|
||||
:pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
|
||||
<div class="flex flex-col h-[70vh]">
|
||||
<!-- Tabs -->
|
||||
<div class="flex border-b border-white/5 px-4 items-center">
|
||||
<button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
|
||||
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
|
||||
:class="assetPickerTab === tab ? 'border-cyan-500 text-cyan-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
|
||||
{{ tab }}
|
||||
</button>
|
||||
<!-- Upload Action -->
|
||||
<div class="ml-auto flex items-center">
|
||||
<input type="file" ref="assetPickerFileInput" @change="handleAssetPickerUpload" class="hidden"
|
||||
accept="image/*" />
|
||||
<Button icon="pi pi-upload" label="Upload" @click="triggerAssetPickerUpload"
|
||||
class="!text-xs !bg-cyan-600/20 !text-cyan-300 hover:!bg-cyan-600/40 !border-none !px-3 !py-1.5 !rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||||
<div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
|
||||
</div>
|
||||
<div v-else-if="modalAssets.length > 0"
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<div v-for="asset in modalAssets" :key="asset.id" @click="selectAssetFromPicker(asset)"
|
||||
class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group border-transparent hover:border-cyan-500/40">
|
||||
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
|
||||
<p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
|
||||
asset.id.substring(0, 4) : '') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
|
||||
<i class="pi pi-image text-4xl mb-2 opacity-50"></i>
|
||||
<p>No assets found</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<!-- Album Picker Dialog -->
|
||||
<Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
|
||||
:pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-if="albumStore.loading" class="flex justify-center p-4">
|
||||
<i class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
|
||||
</div>
|
||||
<div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
|
||||
No albums found. Create one first!
|
||||
</div>
|
||||
<Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
|
||||
placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
|
||||
root: { class: '!bg-slate-800' },
|
||||
input: { class: '!text-white' },
|
||||
trigger: { class: '!text-slate-400' },
|
||||
panel: { class: '!bg-slate-900 !border-white/10' },
|
||||
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
|
||||
}" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="Cancel" @click="isAlbumPickerVisible = false"
|
||||
class="!text-slate-300 hover:!bg-white/5" text />
|
||||
<Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
|
||||
class="!bg-cyan-600 !border-none hover:!bg-cyan-500" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user