fix: qualify mobile Cloud viewer and companion downloads
This commit is contained in:
archipelago
Binary file not shown.
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"versionName": "0.5.32",
|
||||
"versionCode": 52
|
||||
"versionName": "0.5.34",
|
||||
"versionCode": 54
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import MediaLightbox from '../cloud/MediaLightbox.vue'
|
||||
import type { FileBrowserItem } from '../../api/filebrowser-client'
|
||||
const items = ['first.jpg', 'second.jpg', 'clip.mp4'].map(name => ({ name, path: '/' + name, isDir: false }) as FileBrowserItem)
|
||||
const mounted: ReturnType<typeof mount>[] = []
|
||||
async function viewer(extra = {}) {
|
||||
const w = mount(MediaLightbox, { props: { items, startIndex: 0, show: true, fetchBlobUrl: vi.fn(async (p: string) => 'blob:' + p), ...extra }, attachTo: document.body })
|
||||
mounted.push(w); await flushPromises(); return w
|
||||
}
|
||||
const button = (name: string) => document.querySelector(`[aria-label="${name}"]`) as HTMLButtonElement
|
||||
beforeEach(() => { URL.revokeObjectURL = vi.fn() })
|
||||
afterEach(() => { mounted.forEach(w => w.unmount()); mounted.length = 0; document.body.innerHTML = ''; vi.restoreAllMocks() })
|
||||
describe('mobile media viewer', () => {
|
||||
it('requests fullscreen on the whole viewer for photos and exits it', async () => {
|
||||
await viewer()
|
||||
const backdrop = document.querySelector('.lightbox-backdrop') as HTMLElement
|
||||
const request = vi.fn(async () => {})
|
||||
backdrop.requestFullscreen = request
|
||||
button('Fullscreen').click(); await flushPromises()
|
||||
expect(request).toHaveBeenCalledOnce()
|
||||
expect(button('Exit fullscreen')).toBeTruthy()
|
||||
Object.defineProperty(document, 'fullscreenElement', { configurable: true, value: backdrop })
|
||||
document.exitFullscreen = vi.fn(async () => {})
|
||||
button('Exit fullscreen').click(); await flushPromises()
|
||||
expect(document.exitFullscreen).toHaveBeenCalledOnce()
|
||||
Object.defineProperty(document, 'fullscreenElement', { configurable: true, value: null })
|
||||
})
|
||||
it('offers an exit when an embedded browser denies native fullscreen', async () => {
|
||||
await viewer()
|
||||
const backdrop = document.querySelector('.lightbox-backdrop') as HTMLElement
|
||||
backdrop.requestFullscreen = vi.fn(async () => { throw new Error('Denied') })
|
||||
button('Fullscreen').click(); await flushPromises()
|
||||
expect(backdrop.classList.contains('lightbox-expanded')).toBe(true)
|
||||
button('Exit fullscreen').click(); await flushPromises()
|
||||
expect(backdrop.classList.contains('lightbox-expanded')).toBe(false)
|
||||
})
|
||||
it('uses the Safari video fullscreen fallback', async () => {
|
||||
await viewer({ startIndex: 2 })
|
||||
const video = document.querySelector('video')! as HTMLVideoElement & { webkitEnterFullscreen: () => void }
|
||||
video.webkitEnterFullscreen = vi.fn()
|
||||
button('Fullscreen').click(); await flushPromises()
|
||||
expect(video.webkitEnterFullscreen).toHaveBeenCalledOnce()
|
||||
expect(video.hasAttribute('playsinline')).toBe(true)
|
||||
})
|
||||
it('shows decode errors instead of leaving a broken video and can retry', async () => {
|
||||
const streamUrl = vi.fn(async () => 'https://example.test/clip.mp4')
|
||||
await viewer({ startIndex: 2, streamUrl })
|
||||
document.querySelector('video')!.dispatchEvent(new Event('error')); await flushPromises()
|
||||
expect(document.querySelector('video')).toBeNull()
|
||||
expect(document.querySelector('[role="alert"]')?.textContent).toContain('Unable to load')
|
||||
;(document.querySelector('.lightbox-retry') as HTMLButtonElement).click(); await flushPromises()
|
||||
expect(streamUrl).toHaveBeenCalledTimes(2)
|
||||
expect(document.querySelector('video')).toBeTruthy()
|
||||
})
|
||||
it('ignores a late fetch from the previous photo and revokes its blob', async () => {
|
||||
let resolveFirst!: (url: string) => void
|
||||
const fetchBlobUrl = vi.fn((path: string) => path === '/first.jpg' ? new Promise<string>(resolve => { resolveFirst = resolve }) : Promise.resolve('blob:second'))
|
||||
await viewer({ fetchBlobUrl })
|
||||
button('Next file').click(); await flushPromises()
|
||||
resolveFirst('blob:stale'); await flushPromises()
|
||||
expect(document.querySelector('img')?.getAttribute('src')).toBe('blob:second')
|
||||
expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:stale')
|
||||
})
|
||||
it('restores focus and page scrolling after closing', async () => {
|
||||
const origin = document.createElement('button'); document.body.append(origin); origin.focus()
|
||||
document.body.style.overflow = 'auto'
|
||||
const w = await viewer()
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
w.unmount(); mounted.splice(mounted.indexOf(w), 1)
|
||||
expect(document.activeElement).toBe(origin)
|
||||
expect(document.body.style.overflow).toBe('auto')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<span class="file-actions" @click.stop @keydown.stop>
|
||||
<button ref="trigger" type="button" class="file-actions-trigger" :aria-label="`Actions for ${name}`"
|
||||
title="File actions" aria-haspopup="dialog" :aria-expanded="open" @click="toggle">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/>
|
||||
</svg>
|
||||
</button>
|
||||
<Teleport v-if="open" :to="portalTarget">
|
||||
<div class="file-actions-overlay" @click.self.stop="close" @keydown.stop="onKeydown">
|
||||
<section ref="panel" class="file-actions-panel" role="dialog" aria-modal="true" :aria-label="`File actions for ${name}`"
|
||||
:style="position" @click.stop>
|
||||
<p class="file-actions-name" :title="name">{{ name }}</p>
|
||||
<template v-if="!confirmDelete">
|
||||
<button v-if="canShare" type="button" @click="choose('share')">Share with peers</button>
|
||||
<a v-if="downloadHref" :href="downloadHref" :download="name" @click="close">Download</a>
|
||||
<button v-if="canDelete" type="button" class="file-actions-danger" @click="confirmDelete = true">Delete…</button>
|
||||
<button type="button" @click="close">Close menu</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="file-actions-warning">Permanently delete this file?</p>
|
||||
<button type="button" @click="confirmDelete = false">Keep file</button>
|
||||
<button type="button" class="file-actions-danger" @click="choose('delete')">Delete file</button>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</span>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch, onUnmounted } from 'vue'
|
||||
defineProps<{ name: string; downloadHref?: string; canShare?: boolean; canDelete?: boolean }>()
|
||||
const emit = defineEmits<{ share: []; delete: [] }>()
|
||||
const trigger = ref<HTMLButtonElement | null>(null)
|
||||
const panel = ref<HTMLElement | null>(null)
|
||||
const open = ref(false)
|
||||
const confirmDelete = ref(false)
|
||||
const portalTarget = ref<Element | string>('body')
|
||||
const position = ref<Record<string, string>>({})
|
||||
function close() { open.value = false; confirmDelete.value = false; trigger.value?.focus() }
|
||||
async function toggle() {
|
||||
if (open.value) { close(); return }
|
||||
portalTarget.value = document.fullscreenElement ?? 'body'
|
||||
const r = trigger.value!.getBoundingClientRect()
|
||||
const width = Math.min(248, window.innerWidth - 24)
|
||||
position.value = { width: `${width}px`, left: `${Math.max(12, Math.min(r.right - width, window.innerWidth - width - 12))}px`,
|
||||
...(r.top > window.innerHeight / 2 ? { bottom: `${window.innerHeight - r.top + 8}px` } : { top: `${r.bottom + 8}px` }) }
|
||||
open.value = true
|
||||
await nextTick()
|
||||
const height = panel.value?.getBoundingClientRect().height ?? 0
|
||||
const top = Math.max(12, Math.min(r.top > height + 20 ? r.top - height - 8 : r.bottom + 8, window.innerHeight - height - 12))
|
||||
position.value = { width: `${width}px`, left: position.value.left!, top: `${top}px` }
|
||||
panel.value?.querySelector<HTMLElement>('button, a')?.focus()
|
||||
}
|
||||
function choose(action: 'share' | 'delete') { close(); if (action === 'share') emit('share'); else emit('delete') }
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') { event.preventDefault(); close() }
|
||||
if (event.key !== 'Tab') return
|
||||
const controls = Array.from(panel.value?.querySelectorAll<HTMLElement>('button, a') ?? [])
|
||||
const current = controls.indexOf(document.activeElement as HTMLElement)
|
||||
event.preventDefault()
|
||||
controls[(current + (event.shiftKey ? -1 : 1) + controls.length) % controls.length]?.focus()
|
||||
}
|
||||
watch(confirmDelete, async () => { await nextTick(); panel.value?.querySelector<HTMLElement>('button, a')?.focus() })
|
||||
// A viewport change invalidates the anchor; dismiss rather than strand actions offscreen.
|
||||
watch(open, visible => {
|
||||
window[visible ? 'addEventListener' : 'removeEventListener']('resize', close)
|
||||
})
|
||||
onUnmounted(() => window.removeEventListener('resize', close))
|
||||
</script>
|
||||
<style scoped>
|
||||
.file-actions { display: inline-flex; flex: none; }
|
||||
.file-actions-trigger {
|
||||
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
|
||||
border-radius: 50%; color: #fff; background: rgba(16, 20, 24, .5);
|
||||
border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
|
||||
cursor: pointer; padding: 0; flex: none;
|
||||
}
|
||||
.file-actions-trigger:hover { background: rgba(50,55,60,.7); }
|
||||
.file-actions-trigger:focus-visible, .file-actions-panel :is(button,a):focus-visible { outline: 2px solid white; outline-offset: 2px; }
|
||||
.file-actions-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.12); }
|
||||
.file-actions-panel {
|
||||
position: fixed; padding: 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16);
|
||||
background: rgba(20,24,28,.94); color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,.4); max-height: calc(100dvh - 100px); overflow-y: auto;
|
||||
}
|
||||
.file-actions-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #bbb; padding: 8px 12px; }
|
||||
.file-actions-panel :is(button,a) { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border-radius: 8px; font-size: 14px; cursor: pointer; text-decoration: none; }
|
||||
.file-actions-panel :is(button,a):hover { background: rgba(255,255,255,.08); }
|
||||
.file-actions-panel .file-actions-danger { color: #ffaaa3; }
|
||||
.file-actions-warning { padding: 8px 12px; font-size: 14px; }
|
||||
</style>
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
@keydown.enter.self.prevent="handleClick"
|
||||
@keydown.space.self.prevent="handleClick"
|
||||
class="cloud-file-item group"
|
||||
data-controller-container
|
||||
data-controller-primary
|
||||
@@ -49,48 +52,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="cloud-file-item-actions" @click.stop>
|
||||
<button
|
||||
class="cloud-file-action-btn cloud-file-action-share"
|
||||
title="Share with peers"
|
||||
@click.stop="$emit('share', item.path, item.name, item.isDir)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
v-if="!item.isDir"
|
||||
:href="downloadHref"
|
||||
download
|
||||
class="cloud-file-action-btn"
|
||||
title="Download"
|
||||
@click.stop
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
v-if="!item.isDir"
|
||||
class="cloud-file-action-btn cloud-file-action-delete"
|
||||
title="Delete"
|
||||
@click.stop="$emit('delete', item.path)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<svg v-if="item.isDir" class="w-4 h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<FileActionsMenu class="cloud-card-menu" :name="item.name" :download-href="item.isDir ? undefined : downloadHref"
|
||||
can-share :can-delete="!item.isDir"
|
||||
@share="emit('share', item.path, item.name, item.isDir)" @delete="emit('delete', item.path)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import FileActionsMenu from './FileActionsMenu.vue'
|
||||
import type { FileBrowserItem } from '@/api/filebrowser-client'
|
||||
import { useCloudStore } from '@/stores/cloud'
|
||||
import { useFileType, formatSize, formatDate } from '@/composables/useFileType'
|
||||
@@ -135,3 +105,7 @@ function handleClick() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cloud-card-menu { margin-left: auto; flex: none; }
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
@keydown.enter.self.prevent="handleClick"
|
||||
@keydown.space.self.prevent="handleClick"
|
||||
class="cloud-grid-card group"
|
||||
data-controller-container
|
||||
tabindex="0"
|
||||
@@ -78,46 +81,16 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Actions overlay at top-left (visible on hover) -->
|
||||
<div class="cloud-grid-card-actions" @click.stop>
|
||||
<button
|
||||
class="cloud-file-action-btn cloud-file-action-share"
|
||||
title="Share with peers"
|
||||
@click.stop="emit('share', item.path, item.name, item.isDir)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||
</svg>
|
||||
</button>
|
||||
<a
|
||||
v-if="!item.isDir"
|
||||
:href="downloadHref"
|
||||
download
|
||||
class="cloud-file-action-btn"
|
||||
title="Download"
|
||||
@click.stop
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
v-if="!item.isDir"
|
||||
class="cloud-file-action-btn cloud-file-action-delete"
|
||||
title="Delete"
|
||||
@click.stop="emit('delete', item.path)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<FileActionsMenu class="cloud-card-menu" :name="item.name" :download-href="item.isDir ? undefined : downloadHref"
|
||||
can-share :can-delete="!item.isDir"
|
||||
@share="emit('share', item.path, item.name, item.isDir)" @delete="emit('delete', item.path)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import FileActionsMenu from './FileActionsMenu.vue'
|
||||
import type { FileBrowserItem } from '@/api/filebrowser-client'
|
||||
import { useCloudStore } from '@/stores/cloud'
|
||||
import { useFileType, formatSize, formatDate } from '@/composables/useFileType'
|
||||
@@ -178,3 +151,8 @@ function handleClick() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cloud-card-menu { position: absolute; bottom: 8px; right: 8px; z-index: 4; }
|
||||
.cloud-grid-card-info { padding-right: 60px; }
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
<div
|
||||
v-if="show"
|
||||
class="lightbox-backdrop"
|
||||
:class="{ 'lightbox-pip-handoff': pipHandoff }"
|
||||
:class="{ 'lightbox-pip-handoff': pipHandoff, 'lightbox-expanded': expanded }"
|
||||
role="dialog" aria-modal="true" aria-label="Media viewer"
|
||||
@click.self="close"
|
||||
@keydown="onKeydown"
|
||||
tabindex="0"
|
||||
@@ -12,17 +13,27 @@
|
||||
>
|
||||
<!-- Top bar -->
|
||||
<div class="lightbox-topbar">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span v-if="mediaItems.length > 1" class="text-sm text-white/50">
|
||||
<div class="lightbox-heading">
|
||||
<span v-if="mediaItems.length > 1" class="lightbox-count">
|
||||
{{ currentIndex + 1 }} / {{ mediaItems.length }}
|
||||
</span>
|
||||
<p class="text-sm text-white/80 truncate">{{ currentItem?.name }}</p>
|
||||
<p class="lightbox-title" :title="currentItem?.name">{{ currentItem?.name }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<FileActionsMenu v-if="currentItem && (fileActions || downloadUrl)" :name="currentItem.name"
|
||||
:download-href="downloadUrl?.(currentItem.path)" :can-share="fileActions" :can-delete="fileActions"
|
||||
@share="emit('share', currentItem!); close()" @delete="emit('delete', currentItem!); close()" />
|
||||
<div class="lightbox-actions">
|
||||
<button class="lightbox-btn" :aria-label="expanded ? 'Exit fullscreen' : 'Fullscreen'"
|
||||
:title="expanded ? 'Exit fullscreen' : 'Fullscreen'" @click.stop="toggleFullscreen">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path v-if="!expanded" d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path v-else d="M3 8h5V3m8 0v5h5M8 21v-5H3m13 5v-5h5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
v-if="pipAvailable && currentItem && isVideoFile(currentItem)"
|
||||
class="lightbox-btn"
|
||||
title="Picture-in-picture"
|
||||
title="Picture-in-picture" aria-label="Picture-in-picture"
|
||||
@click.stop="togglePip(videoEl)"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -30,7 +41,7 @@
|
||||
<rect x="12" y="12" width="7" height="5" rx="1" stroke-width="2" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="lightbox-btn" @click="close">
|
||||
<button class="lightbox-btn" aria-label="Close viewer" title="Close" @click="close">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
@@ -41,7 +52,7 @@
|
||||
<!-- Navigation arrows -->
|
||||
<button
|
||||
v-if="mediaItems.length > 1"
|
||||
class="lightbox-nav lightbox-nav-prev"
|
||||
class="lightbox-nav lightbox-nav-prev" aria-label="Previous file"
|
||||
@click.stop="prev"
|
||||
>
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -50,7 +61,7 @@
|
||||
</button>
|
||||
<button
|
||||
v-if="mediaItems.length > 1"
|
||||
class="lightbox-nav lightbox-nav-next"
|
||||
class="lightbox-nav lightbox-nav-next" aria-label="Next file"
|
||||
@click.stop="next"
|
||||
>
|
||||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -67,21 +78,23 @@
|
||||
|
||||
<!-- Image -->
|
||||
<img
|
||||
v-else-if="currentItem && currentUrl && isImageFile(currentItem)"
|
||||
v-else-if="!mediaError && currentItem && currentUrl && isImageFile(currentItem)"
|
||||
:src="currentUrl"
|
||||
:alt="currentItem.name"
|
||||
class="lightbox-media-img"
|
||||
@dblclick="toggleFullscreen"
|
||||
@error="onMediaError"
|
||||
/>
|
||||
|
||||
<!-- Video -->
|
||||
<video
|
||||
v-else-if="currentItem && currentUrl && isVideoFile(currentItem)"
|
||||
v-else-if="!mediaError && currentItem && currentUrl && isVideoFile(currentItem)"
|
||||
ref="videoEl"
|
||||
:src="currentUrl"
|
||||
:key="currentUrl"
|
||||
class="lightbox-media-video"
|
||||
controls
|
||||
playsinline
|
||||
autoplay
|
||||
@dblclick="toggleFullscreen"
|
||||
@error="onMediaError"
|
||||
@@ -91,7 +104,7 @@
|
||||
|
||||
<!-- Audio -->
|
||||
<div
|
||||
v-else-if="currentItem && currentUrl && isAudioFile(currentItem)"
|
||||
v-else-if="!mediaError && currentItem && currentUrl && isAudioFile(currentItem)"
|
||||
class="lightbox-audio-container"
|
||||
>
|
||||
<div class="lightbox-audio-artwork">
|
||||
@@ -115,7 +128,8 @@
|
||||
<svg class="w-12 h-12 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
<p class="text-white/40 text-sm">Failed to load media</p>
|
||||
<p class="text-white/70 text-sm" role="alert">Unable to load this file.</p>
|
||||
<button class="lightbox-retry" @click="retryMedia">Try again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,6 +142,7 @@ import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
|
||||
import type { FileBrowserItem } from '@/api/filebrowser-client'
|
||||
import { getFileCategory } from '@/composables/useFileType'
|
||||
import { isPipSupported, togglePip } from '@/utils/pip'
|
||||
import FileActionsMenu from './FileActionsMenu.vue'
|
||||
import { usePipSession } from '@/composables/usePipSession'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -136,10 +151,14 @@ const props = defineProps<{
|
||||
show: boolean
|
||||
fetchBlobUrl: (path: string) => Promise<string>
|
||||
streamUrl?: (path: string) => Promise<string>
|
||||
downloadUrl?: (path: string) => string
|
||||
fileActions?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
share: [item: FileBrowserItem]
|
||||
delete: [item: FileBrowserItem]
|
||||
}>()
|
||||
|
||||
const currentIndex = ref(0)
|
||||
@@ -149,6 +168,12 @@ const currentUrl = ref<string | null>(null)
|
||||
const backdropEl = ref<HTMLElement | null>(null)
|
||||
const videoEl = ref<HTMLVideoElement | null>(null)
|
||||
|
||||
const expanded = ref(false)
|
||||
let loadId = 0
|
||||
let disposed = false
|
||||
let previousFocus: HTMLElement | null = null
|
||||
let previousOverflow: string | null = null
|
||||
|
||||
const pipAvailable = isPipSupported()
|
||||
const pipSession = usePipSession()
|
||||
const pipHandoff = ref(false)
|
||||
@@ -187,49 +212,36 @@ function isAudioFile(item: FileBrowserItem): boolean {
|
||||
}
|
||||
|
||||
async function loadMedia(item: FileBrowserItem) {
|
||||
const requestId = ++loadId
|
||||
loading.value = true
|
||||
mediaError.value = false
|
||||
currentUrl.value = null
|
||||
|
||||
try {
|
||||
const cached = urlCache.get(item.path)
|
||||
if (cached) {
|
||||
currentUrl.value = cached
|
||||
} else {
|
||||
// Use streaming URL for video/audio (avoids downloading entire file into blob)
|
||||
// Use blob URL for images (needed for rendering)
|
||||
const isStreamable = isVideoFile(item) || isAudioFile(item)
|
||||
if (isStreamable && props.streamUrl) {
|
||||
const url = await props.streamUrl(item.path)
|
||||
urlCache.set(item.path, url)
|
||||
currentUrl.value = url
|
||||
} else {
|
||||
const url = await props.fetchBlobUrl(item.path)
|
||||
urlCache.set(item.path, url)
|
||||
currentUrl.value = url
|
||||
let url = urlCache.get(item.path)
|
||||
if (!url) {
|
||||
url = (isVideoFile(item) || isAudioFile(item)) && props.streamUrl
|
||||
? await props.streamUrl(item.path) : await props.fetchBlobUrl(item.path)
|
||||
if (disposed || requestId !== loadId) {
|
||||
if (url.startsWith('blob:')) URL.revokeObjectURL(url)
|
||||
return
|
||||
}
|
||||
urlCache.set(item.path, url)
|
||||
}
|
||||
if (requestId === loadId) currentUrl.value = url
|
||||
} catch {
|
||||
mediaError.value = true
|
||||
if (requestId === loadId) mediaError.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
if (requestId === loadId) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function preloadAdjacent() {
|
||||
const items = mediaItems.value
|
||||
if (items.length <= 1) return
|
||||
const prevIdx = (currentIndex.value - 1 + items.length) % items.length
|
||||
const nextIdx = (currentIndex.value + 1) % items.length
|
||||
|
||||
for (const idx of [prevIdx, nextIdx]) {
|
||||
const item = items[idx]
|
||||
if (item && !urlCache.has(item.path) && isImageFile(item)) {
|
||||
props.fetchBlobUrl(item.path).then(url => {
|
||||
urlCache.set(item.path, url)
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
function retryMedia() {
|
||||
const item = currentItem.value
|
||||
if (!item) return
|
||||
const old = urlCache.get(item.path)
|
||||
if (old?.startsWith('blob:')) URL.revokeObjectURL(old)
|
||||
urlCache.delete(item.path)
|
||||
void loadMedia(item)
|
||||
}
|
||||
|
||||
function prev() {
|
||||
@@ -245,6 +257,7 @@ function next() {
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (document.fullscreenElement === backdropEl.value) void document.exitFullscreen?.().catch(() => {})
|
||||
emit('close')
|
||||
}
|
||||
|
||||
@@ -280,14 +293,37 @@ function onLeavePip() {
|
||||
pipSession.release()
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
const el = videoEl.value
|
||||
if (!el) return
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
el.requestFullscreen().catch(() => {})
|
||||
type SafariVideo = HTMLVideoElement & { webkitEnterFullscreen?: () => void }
|
||||
async function toggleFullscreen() {
|
||||
if (document.fullscreenElement === backdropEl.value) {
|
||||
try { await document.exitFullscreen() } catch { /* Keep the exit control available. */ }
|
||||
return
|
||||
}
|
||||
if (expanded.value) { expanded.value = false; return }
|
||||
const el = backdropEl.value
|
||||
if (!el) return
|
||||
try {
|
||||
if (el.requestFullscreen) {
|
||||
await el.requestFullscreen()
|
||||
expanded.value = true
|
||||
return
|
||||
}
|
||||
const video = videoEl.value as SafariVideo | null
|
||||
if (video?.webkitEnterFullscreen) { video.webkitEnterFullscreen(); return }
|
||||
} catch { /* Embedded browsers may deny native fullscreen; expand in-place. */ }
|
||||
expanded.value = true
|
||||
}
|
||||
|
||||
function fullscreenChanged() {
|
||||
expanded.value = document.fullscreenElement === backdropEl.value
|
||||
}
|
||||
|
||||
function restorePage() {
|
||||
if (previousOverflow !== null) document.body.style.overflow = previousOverflow
|
||||
previousOverflow = null
|
||||
previousFocus?.focus()
|
||||
previousFocus = null
|
||||
document.removeEventListener('fullscreenchange', fullscreenChanged)
|
||||
}
|
||||
|
||||
function onMediaError() {
|
||||
@@ -296,33 +332,47 @@ function onMediaError() {
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') { e.preventDefault(); close() }
|
||||
else if (e.key === 'ArrowLeft') { e.preventDefault(); prev() }
|
||||
else if (e.key === 'ArrowRight') { e.preventDefault(); next() }
|
||||
}
|
||||
|
||||
watch(currentItem, (item) => {
|
||||
if (item) {
|
||||
loadMedia(item)
|
||||
preloadAdjacent()
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
if (expanded.value) void toggleFullscreen()
|
||||
else close()
|
||||
} else if (e.key === 'Tab') {
|
||||
const controls = Array.from(backdropEl.value?.querySelectorAll<HTMLElement>('button:not(:disabled), video[controls], audio[controls]') ?? [])
|
||||
const first = controls[0], last = controls[controls.length - 1]
|
||||
if (e.shiftKey && (document.activeElement === first || document.activeElement === backdropEl.value)) { e.preventDefault(); last?.focus() }
|
||||
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first?.focus() }
|
||||
} else if (!(e.target instanceof HTMLMediaElement)) {
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); prev() }
|
||||
else if (e.key === 'ArrowRight') { e.preventDefault(); next() }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.show, async (visible) => {
|
||||
if (visible) {
|
||||
pipHandoff.value = false
|
||||
currentIndex.value = props.startIndex
|
||||
const item = mediaItems.value[props.startIndex]
|
||||
if (item) {
|
||||
await loadMedia(item)
|
||||
preloadAdjacent()
|
||||
}
|
||||
expanded.value = false
|
||||
previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
previousOverflow = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
document.addEventListener('fullscreenchange', fullscreenChanged)
|
||||
currentIndex.value = Math.max(0, Math.min(props.startIndex, mediaItems.value.length - 1))
|
||||
await nextTick()
|
||||
backdropEl.value?.focus()
|
||||
} else {
|
||||
++loadId
|
||||
restorePage()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch([currentItem, () => props.show], ([item, visible]) => {
|
||||
if (visible && item) void loadMedia(item)
|
||||
}, { immediate: true })
|
||||
|
||||
onUnmounted(() => {
|
||||
disposed = true
|
||||
++loadId
|
||||
if (handoffTimer) clearTimeout(handoffTimer)
|
||||
restorePage()
|
||||
for (const url of urlCache.values()) {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
@@ -334,7 +384,10 @@ onUnmounted(() => {
|
||||
.lightbox-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
z-index: 4000;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -352,14 +405,23 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
gap: 1rem;
|
||||
padding: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 12px) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lightbox-heading { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||
.lightbox-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #eee; font-size: 14px; }
|
||||
.lightbox-count { flex: none; font-size: 12px; color: #aaa; font-variant-numeric: tabular-nums; }
|
||||
.lightbox-actions { display: flex; flex: none; gap: 8px; }
|
||||
.lightbox-btn:focus-visible, .lightbox-nav:focus-visible, .lightbox-retry:focus-visible { outline: 2px solid white; outline-offset: 3px; }
|
||||
.lightbox-retry { padding: 12px 20px; border-radius: 24px; background: #292929; color: white; }
|
||||
.lightbox-btn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: 0 0 44px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -410,7 +472,11 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 3.5rem 1rem;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 76px) 76px calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
|
||||
}
|
||||
|
||||
.lightbox-media-img {
|
||||
@@ -423,7 +489,8 @@ onUnmounted(() => {
|
||||
|
||||
.lightbox-media-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
background: black;
|
||||
@@ -501,28 +568,33 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.lightbox-content { padding: 3rem 0; }
|
||||
.lightbox-nav { width: 2.5rem; height: 2.5rem; }
|
||||
.lightbox-nav-prev { left: 0.5rem; }
|
||||
.lightbox-nav-next { right: 0.5rem; }
|
||||
.lightbox-audio-artwork { width: 8rem; height: 8rem; }
|
||||
.lightbox-media-video { border-radius: 0; }
|
||||
|
||||
/* The close button used to sit in the top bar, which lands under the
|
||||
status bar / notch safe area on most phones and is awkward to reach.
|
||||
Detach it from the top bar and pin it bottom-center, under the media,
|
||||
for mobile only — desktop keeps it in the top bar. */
|
||||
.lightbox-topbar { padding-right: 1rem; }
|
||||
.lightbox-topbar .lightbox-btn {
|
||||
/* Mobile controls have their own safe-area row, never covering video controls. */
|
||||
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
|
||||
.lightbox-topbar { padding-bottom: 8px; }
|
||||
.lightbox-heading { flex: 1; }
|
||||
.lightbox-actions {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
|
||||
bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
z-index: 20;
|
||||
gap: 8px;
|
||||
}
|
||||
.lightbox-content {
|
||||
padding: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 48px) max(8px, env(safe-area-inset-right, 0px)) calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 72px) max(8px, env(safe-area-inset-left, 0px));
|
||||
}
|
||||
.lightbox-nav {
|
||||
top: auto;
|
||||
bottom: calc(var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
|
||||
transform: none;
|
||||
width: 44px; height: 44px; padding: 0;
|
||||
}
|
||||
.lightbox-nav-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
|
||||
.lightbox-nav-next { right: max(12px, env(safe-area-inset-right, 0px)); }
|
||||
.lightbox-audio-artwork { width: 8rem; height: 8rem; }
|
||||
}
|
||||
.lightbox-expanded .lightbox-content { padding-top: var(--safe-area-top, env(safe-area-inset-top, 0px)); }
|
||||
.lightbox-expanded .lightbox-heading { visibility: hidden; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lightbox-fade-enter-active, .lightbox-fade-leave-active { transition: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import FileActionsMenu from '../FileActionsMenu.vue'
|
||||
import FileCard from '../FileCard.vue'
|
||||
import FileCardGrid from '../FileCardGrid.vue'
|
||||
vi.mock('@/stores/cloud', () => ({ useCloudStore: () => ({ downloadUrl: (p: string) => '/download' + p }) }))
|
||||
vi.mock('@/composables/useAudioPlayer', () => ({ useAudioPlayer: () => ({ playing: { value: false }, currentSrc: { value: '' } }) }))
|
||||
const wrappers: ReturnType<typeof mount>[] = []
|
||||
function render(component: any, props: any) { const w = mount(component, { props, attachTo: document.body }); wrappers.push(w); return w }
|
||||
afterEach(() => { wrappers.forEach(w => w.unmount()); wrappers.length = 0; document.body.innerHTML = '' })
|
||||
async function openMenu() { (document.querySelector('.file-actions-trigger') as HTMLButtonElement).click(); await flushPromises() }
|
||||
function action(text: string) { return Array.from(document.querySelectorAll('.file-actions-panel button')).find(e => e.textContent === text) as HTMLButtonElement }
|
||||
describe('visible file actions', () => {
|
||||
for (const card of [FileCard, FileCardGrid]) {
|
||||
it(`${card.__name} menu never opens a file and forwards share/delete correctly`, async () => {
|
||||
const item = { name: 'photo.jpg', path: '/photo.jpg', extension: 'jpg', isDir: false, size: 123, modified: '2026-10-05' }
|
||||
const w = render(card, { item }); await openMenu()
|
||||
expect(w.emitted('preview')).toBeUndefined()
|
||||
expect(document.querySelector('.file-actions-panel a')?.getAttribute('href')).toBe('/download/photo.jpg')
|
||||
action('Share with peers').click(); await flushPromises()
|
||||
expect(w.emitted('share')).toEqual([['/photo.jpg', 'photo.jpg', false]])
|
||||
expect(w.emitted('preview')).toBeUndefined()
|
||||
await openMenu(); action('Delete…').click(); await flushPromises()
|
||||
expect(w.emitted('delete')).toBeUndefined()
|
||||
action('Keep file').click(); await flushPromises()
|
||||
expect(w.emitted('delete')).toBeUndefined()
|
||||
action('Delete…').click(); await flushPromises(); action('Delete file').click(); await flushPromises()
|
||||
expect(w.emitted('delete')).toEqual([['/photo.jpg']])
|
||||
expect(w.emitted('preview')).toBeUndefined()
|
||||
})
|
||||
}
|
||||
it('omits actions that the caller cannot offer', async () => {
|
||||
render(FileActionsMenu, { name: 'Purchased image.jpg', downloadHref: 'blob:owned' }); await openMenu()
|
||||
expect(action('Delete…')).toBeUndefined(); expect(action('Share with peers')).toBeUndefined()
|
||||
expect(document.querySelector('.file-actions-panel a')).toBeTruthy()
|
||||
})
|
||||
it('dismisses on Escape and restores the trigger focus', async () => {
|
||||
render(FileActionsMenu, { name: 'file', canShare: true }); await openMenu()
|
||||
action('Share with peers').dispatchEvent(new KeyboardEvent('keydown', {key:'Escape', bubbles:true})); await flushPromises()
|
||||
expect(document.querySelector('.file-actions-panel')).toBeNull()
|
||||
expect(document.activeElement).toBe(document.querySelector('.file-actions-trigger'))
|
||||
})
|
||||
it('renders inside the fullscreen element so the menu remains reachable', async () => {
|
||||
const host = document.createElement('div');document.body.appendChild(host)
|
||||
Object.defineProperty(document, 'fullscreenElement', { configurable: true, value: host })
|
||||
try { render(FileActionsMenu, {name:'file', canShare:true}); await openMenu();expect(host.querySelector('.file-actions-panel')).toBeTruthy() }
|
||||
finally { Object.defineProperty(document, 'fullscreenElement', { configurable:true,value:null }) }
|
||||
})
|
||||
})
|
||||
@@ -415,6 +415,10 @@
|
||||
:show="lightboxIndex !== null"
|
||||
:fetch-blob-url="cloudStore.fetchBlobUrl"
|
||||
:stream-url="cloudStore.streamUrl"
|
||||
:download-url="cloudStore.downloadUrl"
|
||||
file-actions
|
||||
@share="item => handleShare(item.path, item.name, item.isDir)"
|
||||
@delete="item => handleDelete(item.path)"
|
||||
@close="lightboxIndex = null"
|
||||
/>
|
||||
|
||||
|
||||
@@ -130,6 +130,8 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="actionError" role="alert" class="alert-error mt-3">{{ actionError }}</p>
|
||||
|
||||
<!-- Share Modal -->
|
||||
<ShareModal
|
||||
v-if="shareTarget"
|
||||
@@ -148,6 +150,10 @@
|
||||
:show="lightboxIndex !== null"
|
||||
:fetch-blob-url="cloudStore.fetchBlobUrl"
|
||||
:stream-url="cloudStore.streamUrl"
|
||||
:download-url="cloudStore.downloadUrl"
|
||||
file-actions
|
||||
@share="item => handleShare(item.path, item.name, item.isDir)"
|
||||
@delete="item => handleDelete(item.path)"
|
||||
@close="lightboxIndex = null"
|
||||
/>
|
||||
</div>
|
||||
@@ -314,6 +320,7 @@ watch([useNativeUI, section, routeFolderPath], async ([native, sec, path]) => {
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const actionError = ref<string | null>(null)
|
||||
const shareTarget = ref<{ path: string; name: string; isDir: boolean } | null>(null)
|
||||
const lightboxIndex = ref<number | null>(null)
|
||||
|
||||
@@ -370,7 +377,9 @@ async function handleUpload(files: File[]) {
|
||||
}
|
||||
|
||||
async function handleDelete(path: string) {
|
||||
await cloudStore.deleteItem(path)
|
||||
actionError.value = null
|
||||
try { await cloudStore.deleteItem(path) }
|
||||
catch (error) { actionError.value = error instanceof Error ? error.message : 'Unable to delete this file. Please try again.' }
|
||||
}
|
||||
|
||||
async function handlePlay(path: string, name: string) {
|
||||
|
||||
Reference in New Issue
Block a user