From cfbff75f78963e3d24326f731590e78a4d719e9e Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Sun, 6 Nov 2022 19:34:26 +0100 Subject: viewer/command: add item download button Fixed a reactivity issue with props used in a composition function (useItemResource) Fixed crash with null items in LayoutTop Changed how downloadable items are identified: We use the fact they are materialized in the gallery instead of a hardly defined "listing condition". This also simplifies the code. --- viewer/src/services/ui/ldItemResourceUrl.ts | 8 ++--- viewer/src/views/ItemThumbnail.vue | 4 +-- viewer/src/views/item_handlers/AudioViewer.vue | 4 +-- viewer/src/views/item_handlers/DownloadViewer.vue | 4 +-- viewer/src/views/item_handlers/MarkdownViewer.vue | 4 +-- viewer/src/views/item_handlers/PdfViewer.vue | 4 +-- viewer/src/views/item_handlers/PictureViewer.vue | 4 +-- viewer/src/views/item_handlers/PlainTextViewer.vue | 4 +-- viewer/src/views/item_handlers/VideoViewer.vue | 4 +-- viewer/src/views/layout/top/LayoutCommand.vue | 35 ++++++++-------------- viewer/src/views/layout/top/LayoutTop.vue | 5 +++- 11 files changed, 37 insertions(+), 43 deletions(-) diff --git a/viewer/src/services/ui/ldItemResourceUrl.ts b/viewer/src/services/ui/ldItemResourceUrl.ts index 7db7ab9..d6734b3 100644 --- a/viewer/src/services/ui/ldItemResourceUrl.ts +++ b/viewer/src/services/ui/ldItemResourceUrl.ts @@ -1,12 +1,12 @@ import { Item } from '@/@types/gallery'; import { useGalleryStore } from '@/store/galleryStore'; -import { computed } from 'vue'; +import { computed, ToRef } from 'vue'; import { isDownloadableItem } from '../itemGuards'; -export const useItemResource = (item: Item) => { +export const useItemResource = (item: ToRef) => { const galleryStore = useGalleryStore(); - const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : ''); - const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : ''); + const itemResourceUrl = computed(() => isDownloadableItem(item.value) ? galleryStore.resourceRoot + item.value.properties.resource : ''); + const thumbnailResourceUrl = computed(() => item.value.thumbnail ? galleryStore.resourceRoot + item.value.thumbnail.resource : ''); return { itemResourceUrl, diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue index bf33043..afd0e48 100644 --- a/viewer/src/views/ItemThumbnail.vue +++ b/viewer/src/views/ItemThumbnail.vue @@ -50,7 +50,7 @@ import { Item } from '@/@types/gallery'; import { useNavigation } from '@/services/navigation'; import { useItemResource } from '@/services/ui/ldItemResourceUrl'; import VLazyImage from 'v-lazy-image'; -import { computed, PropType, ref } from 'vue'; +import { computed, PropType, ref, toRef } from 'vue'; const props = defineProps({ item: { type: Object as PropType, required: true }, @@ -60,7 +60,7 @@ const navigation = useNavigation(); const loading = ref(false); -const { thumbnailResourceUrl } = useItemResource(props.item); +const { thumbnailResourceUrl } = useItemResource(toRef(props, 'item')); const pictureStyle = computed(() => { const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 }; diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue index bbba7e5..124d132 100644 --- a/viewer/src/views/item_handlers/AudioViewer.vue +++ b/viewer/src/views/item_handlers/AudioViewer.vue @@ -43,7 +43,7 @@ import { AudioItem } from '@/@types/gallery'; import { useNavigation } from '@/services/navigation'; import { useItemResource } from '@/services/ui/ldItemResourceUrl'; -import { computed, PropType } from 'vue'; +import { computed, PropType, toRef } from 'vue'; import { useI18n } from 'vue-i18n'; import ItemThumbnail from '../ItemThumbnail.vue'; @@ -54,7 +54,7 @@ const props = defineProps({ const { t } = useI18n(); const navigation = useNavigation(); -const { itemResourceUrl } = useItemResource(props.item); +const { itemResourceUrl } = useItemResource(toRef(props, 'item')); const itemFileName = computed(() => navigation.getFileName(props.item)); diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue index 6562bee..c627d3e 100644 --- a/viewer/src/views/item_handlers/DownloadViewer.vue +++ b/viewer/src/views/item_handlers/DownloadViewer.vue @@ -41,7 +41,7 @@ import { DownloadableItem } from '@/@types/gallery'; import { useNavigation } from '@/services/navigation'; import { useItemResource } from '@/services/ui/ldItemResourceUrl'; import { faFileDownload } from '@fortawesome/free-solid-svg-icons'; -import { computed, PropType } from 'vue'; +import { computed, PropType, toRef } from 'vue'; import { useI18n } from 'vue-i18n'; const props = defineProps({ @@ -52,7 +52,7 @@ const { t } = useI18n(); const navigation = useNavigation(); const itemFileName = computed(() => navigation.getFileName(props.item)); -const { itemResourceUrl } = useItemResource(props.item); +const { itemResourceUrl } = useItemResource(toRef(props, 'item'));