From 12eb302bcc93405f81b676b1a29a9731a5fec9be Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 30 Oct 2022 17:40:33 +0100
Subject: viewer/command: add item download button

This adds a download button which allows the user to save the current
item as a file.

This is necessary because some item viewers do not expose a download
option on their own.

The download icon appears together with the other command buttons at the
top-left corner of the screen, replacing the listing sorting menu which
is only relevant for item lists (directory and search views).

GitHub: closes #308
---
 changelog.md                                  |  1 +
 viewer/ldgallery-viewer.7.md                  |  1 +
 viewer/src/locales/en.yml                     |  1 +
 viewer/src/views/layout/top/LayoutCommand.vue | 46 ++++++++++++++++++++++++---
 viewer/src/views/layout/top/LayoutTop.vue     |  5 ++-
 5 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/changelog.md b/changelog.md
index 0cf3194..07a6d3a 100644
--- a/changelog.md
+++ b/changelog.md
@@ -7,6 +7,7 @@ release. Releases are tracked and referred to using git tags.
 ## [next release]
 - New features:
   - viewer: add `CTRL-K` keyboard shortcut for quick search.
+  - viewer: added a button to download the current item.
 - Bug fixes:
   - compiler: fix detection of dimensions of EXIF-rotated pictures.
     Rebuild the gallery with `--rebuild-all` to purge erroneous cached data.
diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md
index 736f61f..46509fb 100644
--- a/viewer/ldgallery-viewer.7.md
+++ b/viewer/ldgallery-viewer.7.md
@@ -41,6 +41,7 @@ Items of the following formats can be opened and visualised within the web appli
 * PDFs
 
 Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window.
+The item being visualised can be downloaded using the download button at the top-left corner.
 
 
 # KEYBOARD SHORTCUTS
diff --git a/viewer/src/locales/en.yml b/viewer/src/locales/en.yml
index acbe24b..86ecd49 100644
--- a/viewer/src/locales/en.yml
+++ b/viewer/src/locales/en.yml
@@ -1,6 +1,7 @@
 command:
   back: Go back
   parent: Go to parent directory
+  download: Download
   search:
     clear: Clear
     search: Search
diff --git a/viewer/src/views/layout/top/LayoutCommand.vue b/viewer/src/views/layout/top/LayoutCommand.vue
index 8919da3..d930fd2 100644
--- a/viewer/src/views/layout/top/LayoutCommand.vue
+++ b/viewer/src/views/layout/top/LayoutCommand.vue
@@ -2,7 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2022  Guillaume FOUET
---               2020       Pacien TRAN-GIRARD
+--               2020-2022  Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -33,7 +33,24 @@
         size="lg"
       />
     </LdLink>
-    <LayoutCommandSort :tabindex="20" />
+
+    <LayoutCommandSort
+      v-if="isListing"
+      :tabindex="20"
+    />
+    <a
+      v-else
+      :title="t('command.download')"
+      :download="itemFileName"
+      :href="itemResourceUrl"
+      :tabindex="20"
+    >
+      <fa-icon
+        :icon="faFileDownload"
+        size="lg"
+      />
+    </a>
+
     <LdLink
       :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
       :title="t('command.back')"
@@ -67,21 +84,42 @@
 import { Item } from '@/@types/gallery';
 import LdLink from '@/components/LdLink.vue';
 import { useUiStore } from '@/store/uiStore';
-import { faAngleDoubleLeft, faArrowLeft, faFolder, faLevelUpAlt, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useNavigation } from '@/services/navigation';
+import { isDirectory, isDownloadableItem } from '@/services/itemGuards';
+import {
+  faAngleDoubleLeft,
+  faArrowLeft,
+  faFolder,
+  faLevelUpAlt,
+  faSearch,
+  faFileDownload,
+} from '@fortawesome/free-solid-svg-icons';
 import { computedEager } from '@vueuse/shared';
-import { computed } from 'vue';
+import { computed, PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import LayoutCommandSort from './LayoutCommandSort.vue';
 
 const props = defineProps({
   currentItemPath: { type: Array<Item>, required: true },
+  item: { type: Object as PropType<Item>, required: true },
 });
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+const navigation = useNavigation();
+
+const isListing = computedEager(() => !props.item || isDirectory(props.item));
+const itemFileName = computed(() => navigation.getFileName(props.item));
+const itemResourceUrl = computed(() =>
+  isDownloadableItem(props.item)
+    ? galleryStore.resourceRoot + props.item.properties.resource
+    : '',
+);
 
 const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft);
 const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode);
diff --git a/viewer/src/views/layout/top/LayoutTop.vue b/viewer/src/views/layout/top/LayoutTop.vue
index b755c42..0362840 100644
--- a/viewer/src/views/layout/top/LayoutTop.vue
+++ b/viewer/src/views/layout/top/LayoutTop.vue
@@ -19,7 +19,10 @@
 
 <template>
   <div class="flex">
-    <LayoutCommand :current-item-path="galleryStore.currentItemPath" />
+    <LayoutCommand
+      :current-item-path="galleryStore.currentItemPath"
+      :item="galleryStore.currentItem"
+    />
     <LayoutBreadcrumb
       :current-item-path="galleryStore.currentItemPath"
       :search-mode="uiStore.searchMode"
-- 
cgit v1.2.3


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<Item>) => {
   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<Item>, 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));
 </script>
 
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'));
 </script>
 
 <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';
 import LdLoading from '@/components/LdLoading.vue';
 import { useLdFetch } from '@/services/api/ldFetch';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<MarkdownItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
 </script>
 
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 @@
 <script setup lang="ts">
 import { PDFItem } from '@/@types/gallery';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 import DownloadViewer from './DownloadViewer.vue';
 
 const props = defineProps({
   item: { type: Object as PropType<PDFItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 
 </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';
 import { useUiStore } from '@/store/uiStore';
 import { unrefElement, VueInstance } from '@vueuse/core';
 import { createToast } from 'mosha-vue-toastify';
-import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { CSSProperties, onMounted, onUnmounted, PropType, ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -63,7 +63,7 @@ const loader = ref(false);
 const containerElement = ref<HTMLDivElement>();
 const imageElement = ref<VueInstance>();
 
-const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
 
 onMounted(() => {
   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';
 import LdLoading from '@/components/LdLoading.vue';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import { useFetch } from '@vueuse/core';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<PlainTextItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const { isFinished, data } = useFetch(itemResourceUrl).text();
 </script>
 
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 @@
 <script setup lang="ts">
 import { VideoItem } from '@/@types/gallery';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 import DownloadViewer from './DownloadViewer.vue';
 
 const props = defineProps({
   item: { type: Object as PropType<VideoItem>, required: true },
 });
 
-const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
 </script>
diff --git a/viewer/src/views/layout/top/LayoutCommand.vue b/viewer/src/views/layout/top/LayoutCommand.vue
index d930fd2..85d47b6 100644
--- a/viewer/src/views/layout/top/LayoutCommand.vue
+++ b/viewer/src/views/layout/top/LayoutCommand.vue
@@ -34,14 +34,10 @@
       />
     </LdLink>
 
-    <LayoutCommandSort
-      v-if="isListing"
-      :tabindex="20"
-    />
-    <a
-      v-else
+    <LdLink
+      v-if="itemResourceUrl"
       :title="t('command.download')"
-      :download="itemFileName"
+      :download="navigation.getFileName(props.item)"
       :href="itemResourceUrl"
       :tabindex="20"
     >
@@ -49,7 +45,11 @@
         :icon="faFileDownload"
         size="lg"
       />
-    </a>
+    </LdLink>
+    <LayoutCommandSort
+      v-else
+      :tabindex="20"
+    />
 
     <LdLink
       :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
@@ -83,20 +83,19 @@
 <script setup lang="ts">
 import { Item } from '@/@types/gallery';
 import LdLink from '@/components/LdLink.vue';
-import { useUiStore } from '@/store/uiStore';
-import { useGalleryStore } from '@/store/galleryStore';
 import { useNavigation } from '@/services/navigation';
-import { isDirectory, isDownloadableItem } from '@/services/itemGuards';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { useUiStore } from '@/store/uiStore';
 import {
   faAngleDoubleLeft,
   faArrowLeft,
+  faFileDownload,
   faFolder,
   faLevelUpAlt,
   faSearch,
-  faFileDownload,
 } from '@fortawesome/free-solid-svg-icons';
 import { computedEager } from '@vueuse/shared';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import LayoutCommandSort from './LayoutCommandSort.vue';
@@ -110,16 +109,8 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const uiStore = useUiStore();
-const galleryStore = useGalleryStore();
 const navigation = useNavigation();
-
-const isListing = computedEager(() => !props.item || isDirectory(props.item));
-const itemFileName = computed(() => navigation.getFileName(props.item));
-const itemResourceUrl = computed(() =>
-  isDownloadableItem(props.item)
-    ? galleryStore.resourceRoot + props.item.properties.resource
-    : '',
-);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 
 const commandToggleSearchPanelIcon = computed(() => uiStore.fullWidth ? faSearch : faAngleDoubleLeft);
 const isRoot = computedEager(() => props.currentItemPath.length <= 1 && !uiStore.searchMode);
diff --git a/viewer/src/views/layout/top/LayoutTop.vue b/viewer/src/views/layout/top/LayoutTop.vue
index 0362840..02c8b7b 100644
--- a/viewer/src/views/layout/top/LayoutTop.vue
+++ b/viewer/src/views/layout/top/LayoutTop.vue
@@ -18,7 +18,10 @@
 -->
 
 <template>
-  <div class="flex">
+  <div
+    v-if="galleryStore.currentItem"
+    class="flex"
+  >
     <LayoutCommand
       :current-item-path="galleryStore.currentItemPath"
       :item="galleryStore.currentItem"
-- 
cgit v1.2.3