fix(cloud): music opens the bottom-bar player, never the lightbox

FileCard audio clicks now emit play (global GlobalAudioPlayer bar) —
wired through the FileGrid list view, the Cloud My Files list and own
search results. Peer Files already used the bottom bar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-07-15 11:23:57 +01:00
parent a34634e00f
commit df403c5a69
3 changed files with 16 additions and 2 deletions

View File

@ -103,6 +103,7 @@ const emit = defineEmits<{
delete: [path: string] delete: [path: string]
share: [path: string, name: string, isDir: boolean] share: [path: string, name: string, isDir: boolean]
preview: [path: string] preview: [path: string]
play: [path: string, name: string]
}>() }>()
const cloudStore = useCloudStore() const cloudStore = useCloudStore()
@ -122,8 +123,10 @@ const downloadHref = computed(() => cloudStore.downloadUrl(props.item.path))
function handleClick() { function handleClick() {
if (props.item.isDir) { if (props.item.isDir) {
emit('navigate', props.item.path) emit('navigate', props.item.path)
} else if (isImage.value || isVideo.value || isAudio.value) { } else if (isAudio.value) {
// MediaLightbox handles all three media kinds. // Music goes to the global bottom-bar player, not the lightbox.
emit('play', props.item.path, props.item.name)
} else if (isImage.value || isVideo.value) {
emit('preview', props.item.path) emit('preview', props.item.path)
} else { } else {
// Non-media files open by downloading a click should always act on the file. // Non-media files open by downloading a click should always act on the file.

View File

@ -53,6 +53,7 @@
:item="item" :item="item"
@navigate="$emit('navigate', $event)" @navigate="$emit('navigate', $event)"
@delete="$emit('delete', $event)" @delete="$emit('delete', $event)"
@play="(path, name) => $emit('play', path, name)"
@share="(path, name, isDir) => $emit('share', path, name, isDir)" @share="(path, name, isDir) => $emit('share', path, name, isDir)"
@preview="$emit('preview', $event)" @preview="$emit('preview', $event)"
/> />

View File

@ -93,6 +93,7 @@
:item="r.item" :item="r.item"
@delete="handleDelete" @delete="handleDelete"
@share="handleShare" @share="handleShare"
@play="handlePlay"
@preview="(p: string) => handlePreview(p, searchMineItems)" @preview="(p: string) => handlePreview(p, searchMineItems)"
/> />
<button <button
@ -141,6 +142,7 @@
:item="item" :item="item"
@delete="handleDelete" @delete="handleDelete"
@share="handleShare" @share="handleShare"
@play="handlePlay"
@preview="(p: string) => handlePreview(p, filteredMyFiles)" @preview="(p: string) => handlePreview(p, filteredMyFiles)"
/> />
</div> </div>
@ -359,6 +361,7 @@ import { useCloudStore } from '../stores/cloud'
import { fileBrowserClient, type FileBrowserItem } from '@/api/filebrowser-client' import { fileBrowserClient, type FileBrowserItem } from '@/api/filebrowser-client'
import { rpcClient } from '@/api/rpc-client' import { rpcClient } from '@/api/rpc-client'
import { getFileCategory } from '../composables/useFileType' import { getFileCategory } from '../composables/useFileType'
import { useAudioPlayer } from '../composables/useAudioPlayer'
import FileCard from '../components/cloud/FileCard.vue' import FileCard from '../components/cloud/FileCard.vue'
import ShareModal from '../components/cloud/ShareModal.vue' import ShareModal from '../components/cloud/ShareModal.vue'
import MediaLightbox from '../components/cloud/MediaLightbox.vue' import MediaLightbox from '../components/cloud/MediaLightbox.vue'
@ -366,6 +369,7 @@ import MediaLightbox from '../components/cloud/MediaLightbox.vue'
const router = useRouter() const router = useRouter()
const store = useAppStore() const store = useAppStore()
const cloudStore = useCloudStore() const cloudStore = useCloudStore()
const audioPlayer = useAudioPlayer()
const sectionCounts = ref<Record<string, number>>({}) const sectionCounts = ref<Record<string, number>>({})
const countsLoading = ref(false) const countsLoading = ref(false)
@ -565,6 +569,12 @@ function handleShare(path: string, name: string, isDir: boolean) {
shareTarget.value = { path, name, isDir } shareTarget.value = { path, name, isDir }
} }
/** Music opens in the global bottom-bar player (GlobalAudioPlayer in App.vue). */
async function handlePlay(path: string, name: string) {
const url = await cloudStore.streamUrl(path)
audioPlayer.play(url, name)
}
function handlePreview(path: string, context: FileBrowserItem[]) { function handlePreview(path: string, context: FileBrowserItem[]) {
// MediaLightbox filters to media internally; index within that filtered list. // MediaLightbox filters to media internally; index within that filtered list.
const mediaItems = context.filter(item => { const mediaItems = context.filter(item => {