aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZéro~Informatique2022-11-06 19:34:26 +0100
committerZéro~Informatique2022-11-06 19:41:44 +0100
commitcfbff75f78963e3d24326f731590e78a4d719e9e (patch)
tree2e5436e819f8e93a1115a8142594ca80fd507bc1
parent12eb302bcc93405f81b676b1a29a9731a5fec9be (diff)
downloadldgallery-cfbff75f78963e3d24326f731590e78a4d719e9e.tar.gz
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.
-rw-r--r--viewer/src/services/ui/ldItemResourceUrl.ts8
-rw-r--r--viewer/src/views/ItemThumbnail.vue4
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/DownloadViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/MarkdownViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PdfViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PictureViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PlainTextViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/VideoViewer.vue4
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue35
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue5
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 @@
1import { Item } from '@/@types/gallery'; 1import { Item } from '@/@types/gallery';
2import { useGalleryStore } from '@/store/galleryStore'; 2import { useGalleryStore } from '@/store/galleryStore';
3import { computed } from 'vue'; 3import { computed, ToRef } from 'vue';
4import { isDownloadableItem } from '../itemGuards'; 4import { isDownloadableItem } from '../itemGuards';
5 5
6export const useItemResource = (item: Item) => { 6export const useItemResource = (item: ToRef<Item>) => {
7 const galleryStore = useGalleryStore(); 7 const galleryStore = useGalleryStore();
8 const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : ''); 8 const itemResourceUrl = computed(() => isDownloadableItem(item.value) ? galleryStore.resourceRoot + item.value.properties.resource : '');
9 const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : ''); 9 const thumbnailResourceUrl = computed(() => item.value.thumbnail ? galleryStore.resourceRoot + item.value.thumbnail.resource : '');
10 10
11 return { 11 return {
12 itemResourceUrl, 12 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';
50import { useNavigation } from '@/services/navigation'; 50import { useNavigation } from '@/services/navigation';
51import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 51import { useItemResource } from '@/services/ui/ldItemResourceUrl';
52import VLazyImage from 'v-lazy-image'; 52import VLazyImage from 'v-lazy-image';
53import { computed, PropType, ref } from 'vue'; 53import { computed, PropType, ref, toRef } from 'vue';
54 54
55const props = defineProps({ 55const props = defineProps({
56 item: { type: Object as PropType<Item>, required: true }, 56 item: { type: Object as PropType<Item>, required: true },
@@ -60,7 +60,7 @@ const navigation = useNavigation();
60 60
61const loading = ref(false); 61const loading = ref(false);
62 62
63const { thumbnailResourceUrl } = useItemResource(props.item); 63const { thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
64 64
65const pictureStyle = computed(() => { 65const pictureStyle = computed(() => {
66 const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 }; 66 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 @@
43import { AudioItem } from '@/@types/gallery'; 43import { AudioItem } from '@/@types/gallery';
44import { useNavigation } from '@/services/navigation'; 44import { useNavigation } from '@/services/navigation';
45import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 45import { useItemResource } from '@/services/ui/ldItemResourceUrl';
46import { computed, PropType } from 'vue'; 46import { computed, PropType, toRef } from 'vue';
47import { useI18n } from 'vue-i18n'; 47import { useI18n } from 'vue-i18n';
48import ItemThumbnail from '../ItemThumbnail.vue'; 48import ItemThumbnail from '../ItemThumbnail.vue';
49 49
@@ -54,7 +54,7 @@ const props = defineProps({
54const { t } = useI18n(); 54const { t } = useI18n();
55const navigation = useNavigation(); 55const navigation = useNavigation();
56 56
57const { itemResourceUrl } = useItemResource(props.item); 57const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
58const itemFileName = computed(() => navigation.getFileName(props.item)); 58const itemFileName = computed(() => navigation.getFileName(props.item));
59</script> 59</script>
60 60
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';
41import { useNavigation } from '@/services/navigation'; 41import { useNavigation } from '@/services/navigation';
42import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 42import { useItemResource } from '@/services/ui/ldItemResourceUrl';
43import { faFileDownload } from '@fortawesome/free-solid-svg-icons'; 43import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
44import { computed, PropType } from 'vue'; 44import { computed, PropType, toRef } from 'vue';
45import { useI18n } from 'vue-i18n'; 45import { useI18n } from 'vue-i18n';
46 46
47const props = defineProps({ 47const props = defineProps({
@@ -52,7 +52,7 @@ const { t } = useI18n();
52const navigation = useNavigation(); 52const navigation = useNavigation();
53 53
54const itemFileName = computed(() => navigation.getFileName(props.item)); 54const itemFileName = computed(() => navigation.getFileName(props.item));
55const { itemResourceUrl } = useItemResource(props.item); 55const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
56</script> 56</script>
57 57
58<style lang="scss" module> 58<style lang="scss" module>
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue
index d5ac7e2..574029f 100644
--- a/viewer/src/views/item_handlers/MarkdownViewer.vue
+++ b/viewer/src/views/item_handlers/MarkdownViewer.vue
@@ -33,13 +33,13 @@ import { LdMarkdown } from '@/components/async';
33import LdLoading from '@/components/LdLoading.vue'; 33import LdLoading from '@/components/LdLoading.vue';
34import { useLdFetch } from '@/services/api/ldFetch'; 34import { useLdFetch } from '@/services/api/ldFetch';
35import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 35import { useItemResource } from '@/services/ui/ldItemResourceUrl';
36import { PropType } from 'vue'; 36import { PropType, toRef } from 'vue';
37 37
38const props = defineProps({ 38const props = defineProps({
39 item: { type: Object as PropType<MarkdownItem>, required: true }, 39 item: { type: Object as PropType<MarkdownItem>, required: true },
40}); 40});
41 41
42const { itemResourceUrl } = useItemResource(props.item); 42const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
43const { isFetching, data, error } = useLdFetch(itemResourceUrl).text(); 43const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
44</script> 44</script>
45 45
diff --git a/viewer/src/views/item_handlers/PdfViewer.vue b/viewer/src/views/item_handlers/PdfViewer.vue
index 29f8033..a6ba273 100644
--- a/viewer/src/views/item_handlers/PdfViewer.vue
+++ b/viewer/src/views/item_handlers/PdfViewer.vue
@@ -36,13 +36,13 @@
36<script setup lang="ts"> 36<script setup lang="ts">
37import { PDFItem } from '@/@types/gallery'; 37import { PDFItem } from '@/@types/gallery';
38import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 38import { useItemResource } from '@/services/ui/ldItemResourceUrl';
39import { PropType } from 'vue'; 39import { PropType, toRef } from 'vue';
40import DownloadViewer from './DownloadViewer.vue'; 40import DownloadViewer from './DownloadViewer.vue';
41 41
42const props = defineProps({ 42const props = defineProps({
43 item: { type: Object as PropType<PDFItem>, required: true }, 43 item: { type: Object as PropType<PDFItem>, required: true },
44}); 44});
45 45
46const { itemResourceUrl } = useItemResource(props.item); 46const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
47 47
48</script> 48</script>
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue
index 10055fd..74b978f 100644
--- a/viewer/src/views/item_handlers/PictureViewer.vue
+++ b/viewer/src/views/item_handlers/PictureViewer.vue
@@ -46,7 +46,7 @@ import { useLdZoom } from '@/services/ui/ldZoom';
46import { useUiStore } from '@/store/uiStore'; 46import { useUiStore } from '@/store/uiStore';
47import { unrefElement, VueInstance } from '@vueuse/core'; 47import { unrefElement, VueInstance } from '@vueuse/core';
48import { createToast } from 'mosha-vue-toastify'; 48import { createToast } from 'mosha-vue-toastify';
49import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue'; 49import { CSSProperties, onMounted, onUnmounted, PropType, ref, toRef } from 'vue';
50import { useI18n } from 'vue-i18n'; 50import { useI18n } from 'vue-i18n';
51 51
52const props = defineProps({ 52const props = defineProps({
@@ -63,7 +63,7 @@ const loader = ref(false);
63const containerElement = ref<HTMLDivElement>(); 63const containerElement = ref<HTMLDivElement>();
64const imageElement = ref<VueInstance>(); 64const imageElement = ref<VueInstance>();
65 65
66const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item); 66const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
67 67
68onMounted(() => { 68onMounted(() => {
69 generateSlowLoadingStyle(); 69 generateSlowLoadingStyle();
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_handlers/PlainTextViewer.vue
index d386437..2ab429a 100644
--- a/viewer/src/views/item_handlers/PlainTextViewer.vue
+++ b/viewer/src/views/item_handlers/PlainTextViewer.vue
@@ -37,13 +37,13 @@ import { PlainTextItem } from '@/@types/gallery';
37import LdLoading from '@/components/LdLoading.vue'; 37import LdLoading from '@/components/LdLoading.vue';
38import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 38import { useItemResource } from '@/services/ui/ldItemResourceUrl';
39import { useFetch } from '@vueuse/core'; 39import { useFetch } from '@vueuse/core';
40import { PropType } from 'vue'; 40import { PropType, toRef } from 'vue';
41 41
42const props = defineProps({ 42const props = defineProps({
43 item: { type: Object as PropType<PlainTextItem>, required: true }, 43 item: { type: Object as PropType<PlainTextItem>, required: true },
44}); 44});
45 45
46const { itemResourceUrl } = useItemResource(props.item); 46const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
47const { isFinished, data } = useFetch(itemResourceUrl).text(); 47const { isFinished, data } = useFetch(itemResourceUrl).text();
48</script> 48</script>
49 49
diff --git a/viewer/src/views/item_handlers/VideoViewer.vue b/viewer/src/views/item_handlers/VideoViewer.vue
index 7d17367..8f0e775 100644
--- a/viewer/src/views/item_handlers/VideoViewer.vue
+++ b/viewer/src/views/item_handlers/VideoViewer.vue
@@ -36,12 +36,12 @@
36<script setup lang="ts"> 36<script setup lang="ts">
37import { VideoItem } from '@/@types/gallery'; 37import { VideoItem } from '@/@types/gallery';