aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/item_handlers
diff options
context:
space:
mode:
authorpacien2023-02-17 22:57:38 +0100
committerpacien2023-02-17 22:57:38 +0100
commit46cd42de44e402fbf33522d999fa2649729ffaa8 (patch)
tree1281beefda5d9b6d2411bc47ec1327fbf0b38dde /viewer/src/views/item_handlers
parent11bbbae2850b9c45da697a8ed9626495a50a38c0 (diff)
parente939712a284dff9af6d81cc1fcd4e7f7ec9ad503 (diff)
downloadldgallery-2.2.tar.gz
Merge branch 'develop': release v2.2v2.2
Diffstat (limited to 'viewer/src/views/item_handlers')
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue15
-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/item_handlers/async/AsyncEpubViewer.vue180
-rw-r--r--viewer/src/views/item_handlers/async/index.ts23
9 files changed, 227 insertions, 15 deletions
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
index da9579f..124d132 100644
--- a/viewer/src/views/item_handlers/AudioViewer.vue
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -20,7 +20,10 @@
20 20
21<template> 21<template>
22 <div class="flex-column container-vh-centering"> 22 <div class="flex-column container-vh-centering">
23 <ItemThumbnail :item="item" /> 23 <ItemThumbnail
24 :item="item"
25 :class="$style.audiothumb"
26 />
24 <audio 27 <audio
25 :class="$style.player" 28 :class="$style.player"
26 :src="itemResourceUrl" 29 :src="itemResourceUrl"
@@ -40,7 +43,7 @@
40import { AudioItem } from '@/@types/gallery'; 43import { AudioItem } from '@/@types/gallery';
41import { useNavigation } from '@/services/navigation'; 44import { useNavigation } from '@/services/navigation';
42import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 45import { useItemResource } from '@/services/ui/ldItemResourceUrl';
43import { computed, PropType } from 'vue'; 46import { computed, PropType, toRef } from 'vue';
44import { useI18n } from 'vue-i18n'; 47import { useI18n } from 'vue-i18n';
45import ItemThumbnail from '../ItemThumbnail.vue'; 48import ItemThumbnail from '../ItemThumbnail.vue';
46 49
@@ -51,11 +54,17 @@ const props = defineProps({
51const { t } = useI18n(); 54const { t } = useI18n();
52const navigation = useNavigation(); 55const navigation = useNavigation();
53 56
54const { itemResourceUrl } = useItemResource(props.item); 57const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
55const itemFileName = computed(() => navigation.getFileName(props.item)); 58const itemFileName = computed(() => navigation.getFileName(props.item));
56</script> 59</script>
57 60
58<style lang="scss" module> 61<style lang="scss" module>
62@import "~@/assets/scss/theme";
63
64.audiothumb {
65 color: $text-light;
66}
67
59.player { 68.player {
60 width: 100%; 69 width: 100%;
61 max-width: 500px; 70 max-width: 500px;
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';
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<VideoItem>, required: true }, 43 item: { type: Object as PropType<VideoItem>, required: true },
44}); 44});
45 45
46const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item); 46const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
47</script> 47</script>
diff --git a/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue b/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue
new file mode 100644
index 0000000..b5c0cb4
--- /dev/null
+++ b/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue
@@ -0,0 +1,180 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2022 Pacien TRAN-GIRARD
6--