1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!-- ldgallery - A static generator which turns a collection of tagged
-- pictures into a searchable web gallery.
--
-- Copyright (C) 2019-2022 Guillaume FOUET
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU Affero General Public License as
-- published by the Free Software Foundation, either version 3 of the
-- License, or (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful,
-- but WITHOUT ANY WARRANTY; without even the implied warranty of
-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-- GNU Affero General Public License for more details.
--
-- You should have received a copy of the GNU Affero General Public License
-- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div>
<LdNotice
v-if="isError"
:icon="faFolderOpen"
:message="t('gallery.unknown-resource')"
/>
<GallerySearch v-else-if="isSearch" />
<component
:is="componentName"
v-else
:key="componentKey"
:item="galleryStore.currentItem"
/>
</div>
</template>
<script setup lang="ts">
import { ItemType } from '@/@types/itemType';
import LdNotice from '@/components/LdNotice.vue';
import { isDirectory } from '@/services/itemGuards';
import { useGalleryStore } from '@/store/galleryStore';
import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
import { computedEager } from '@vueuse/shared';
import { computed, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';
import GallerySearch from './GallerySearch.vue';
import { EpubViewer } from './item_handlers/async';
import AudioViewer from './item_handlers/AudioViewer.vue';
import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
import DownloadViewer from './item_handlers/DownloadViewer.vue';
import MarkdownViewer from './item_handlers/MarkdownViewer.vue';
import PdfViewer from './item_handlers/PdfViewer.vue';
import PictureViewer from './item_handlers/PictureViewer.vue';
import PlainTextViewer from './item_handlers/PlainTextViewer.vue';
import VideoViewer from './item_handlers/VideoViewer.vue';
const props = defineProps({
path: { type: String, required: true },
query: { type: Array<string>, required: true },
});
const { t } = useI18n();
const galleryStore = useGalleryStore();
const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
directory: DirectoryViewer,
picture: PictureViewer,
plaintext: PlainTextViewer,
markdown: MarkdownViewer,
pdf: PdfViewer,
epub: EpubViewer,
video: VideoViewer,
audio: AudioViewer,
other: DownloadViewer,
};
const isError = computedEager(() => !galleryStore.currentItem?.properties.type);
const isSearch = computedEager(() => isDirectory(galleryStore.currentItem) && props.query.length > 0);
const componentName = computed(() => COMPONENT_BY_TYPE[galleryStore.currentItem?.properties.type ?? ItemType.OTHER]);
const componentKey = computed(() => galleryStore.currentItem?.path ?? '');
watchEffect(() => (galleryStore.currentPath = props.path));
</script>
|