refactor: un-hardcode file urls
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import ImageViewer from '~/components/ImageViewer.vue';
|
||||
import { resolveFileUrl } from '~~/utils/url';
|
||||
|
||||
const props = defineProps<{
|
||||
file: {
|
||||
@@ -17,6 +18,8 @@ const isVideo = computed(() => props.file.mimeType.startsWith('video/'));
|
||||
const isAudio = computed(() => props.file.mimeType.startsWith('audio/'));
|
||||
const isPdf = computed(() => props.file.mimeType === 'application/pdf');
|
||||
|
||||
const resolvedUrl = computed(() => resolveFileUrl(props.file.url));
|
||||
|
||||
const imageViewerOpen = ref(false);
|
||||
const imageRef = ref<HTMLImageElement | null>(null);
|
||||
const imageViewerOriginRect = ref<DOMRect | null>(null);
|
||||
@@ -45,16 +48,16 @@ function openImageViewer() {
|
||||
<template>
|
||||
<div class="relative h-full w-fit flex">
|
||||
<div v-if="isImage">
|
||||
<img ref="imageRef" :src="props.file.url"
|
||||
<img ref="imageRef" :src="resolvedUrl"
|
||||
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover cursor-zoom-in hover:opacity-90 transition-opacity"
|
||||
@click="openImageViewer" />
|
||||
<ImageViewer v-if="imageViewerOpen" :src="props.file.url" :alt="props.file.name"
|
||||
<ImageViewer v-if="imageViewerOpen" :src="resolvedUrl" :alt="props.file.name"
|
||||
:origin-rect="imageViewerOriginRect" :origin-element="imageRef"
|
||||
@close="imageViewerOpen = false" />
|
||||
</div>
|
||||
<video v-else-if="isVideo" controls :src="props.file.url"
|
||||
<video v-else-if="isVideo" controls :src="resolvedUrl"
|
||||
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
|
||||
<audio v-else-if="isAudio" controls :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64" />
|
||||
<audio v-else-if="isAudio" controls :src="resolvedUrl" class="rounded-lg h-full w-full max-h-36 max-w-64" />
|
||||
|
||||
<div v-else class="flex items-center gap-2 p-2 rounded-lg bg-[var(--color-hover)] min-w-40 max-w-48">
|
||||
<span :class="[fileIcon, 'text-6 text-[var(--color-accent)]']"></span>
|
||||
|
||||
@@ -42,7 +42,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
|
||||
}
|
||||
|
||||
if (oldCount > newCount) {
|
||||
const activeChild = message.children.find(c => c.id === message.activeChildId);
|
||||
const activeChild = message.children.find(c => c?.id === message.activeChildId);
|
||||
if (!activeChild) {
|
||||
emit('patch', { activeChildId: message.children[newCount - 1]?.id ?? null });
|
||||
}
|
||||
@@ -57,7 +57,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
|
||||
|
||||
const activeMessage = computed(() => {
|
||||
if (message.activeChildId && message.children.length > 0) {
|
||||
const child = message.children.find(c => c.id === message.activeChildId);
|
||||
const child = message.children.find(c => c?.id === message.activeChildId);
|
||||
if (child) return child;
|
||||
}
|
||||
|
||||
@@ -140,7 +140,7 @@ const messageCount = computed(() => {
|
||||
|
||||
const currentChildIndex = computed(() => {
|
||||
if (!message.activeChildId) return 0;
|
||||
const idx = message.children.findIndex(c => c.id === message.activeChildId);
|
||||
const idx = message.children.findIndex(c => c?.id === message.activeChildId);
|
||||
return idx >= 0 ? idx + 1 : 0;
|
||||
});
|
||||
|
||||
@@ -150,7 +150,7 @@ const navigateChild = (direction: -1 | 1) => {
|
||||
: [null, ...message.children];
|
||||
|
||||
const currentIdx = allItems.findIndex(item =>
|
||||
item === null ? !message.activeChildId : item.id === message.activeChildId
|
||||
!item ? !message.activeChildId : item.id === message.activeChildId
|
||||
);
|
||||
|
||||
const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));
|
||||
|
||||
Reference in New Issue
Block a user