aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/item_handlers
diff options
context:
space:
mode:
authorZéro~Informatique2022-07-26 08:44:34 +0200
committerpacien2022-09-03 01:30:42 +0200
commit00510820a2794efcadbc83f7f8b54318fe198ecb (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/views/item_handlers
parent88aa098c07e067f9f737fbeba1f52a9bd5042e53 (diff)
downloadldgallery-00510820a2794efcadbc83f7f8b54318fe198ecb.tar.gz
viewer: migrate to vue 3, general refactoring and cleanup
Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112
Diffstat (limited to 'viewer/src/views/item_handlers')
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue65
-rw-r--r--viewer/src/views/item_handlers/DirectoryViewer.vue42
-rw-r--r--viewer/src/views/item_handlers/DownloadViewer.vue66
-rw-r--r--viewer/src/views/item_handlers/MarkdownViewer.vue50
-rw-r--r--viewer/src/views/item_handlers/PdfViewer.vue48
-rw-r--r--viewer/src/views/item_handlers/PictureViewer.vue129
-rw-r--r--viewer/src/views/item_handlers/PlainTextViewer.vue69
-rw-r--r--viewer/src/views/item_handlers/VideoViewer.vue47
8 files changed, 516 insertions, 0 deletions
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
new file mode 100644
index 0000000..da9579f
--- /dev/null
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -0,0 +1,65 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2020 Pacien TRAN-GIRARD
6--
7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as
9-- published by the Free Software Foundation, either version 3 of the
10-- License, or (at your option) any later version.
11--
12-- This program is distributed in the hope that it will be useful,
13-- but WITHOUT ANY WARRANTY; without even the implied warranty of
14-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15-- GNU Affero General Public License for more details.
16--
17-- You should have received a copy of the GNU Affero General Public License
18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19-->
20
21<template>
22 <div class="flex-column container-vh-centering">
23 <ItemThumbnail :item="item" />
24 <audio
25 :class="$style.player"
26 :src="itemResourceUrl"
27 preload="auto"
28 controls
29 >
30 <a
31 :download="itemFileName"
32 :href="itemResourceUrl"
33 v-text="t('download.download-file-fmt', [itemFileName])"
34 />
35 </audio>
36 </div>
37</template>
38
39<script setup lang="ts">
40import { AudioItem } from '@/@types/gallery';
41import { useNavigation } from '@/services/navigation';
42import { useItemResource } from '@/services/ui/ldItemResourceUrl';
43import { computed, PropType } from 'vue';
44import { useI18n } from 'vue-i18n';
45import ItemThumbnail from '../ItemThumbnail.vue';
46
47const props = defineProps({
48 item: { type: Object as PropType<AudioItem>, required: true },
49});
50
51const { t } = useI18n();
52const navigation = useNavigation();
53
54const { itemResourceUrl } = useItemResource(props.item);
55const itemFileName = computed(() => navigation.getFileName(props.item));
56</script>
57
58<style lang="scss" module>
59.player {
60 width: 100%;
61 max-width: 500px;
62 margin-top: 1em;
63 text-align: center; // for fallback download link
64}
65</style>
diff --git a/viewer/src/views/item_handlers/DirectoryViewer.vue b/viewer/src/views/item_handlers/DirectoryViewer.vue
new file mode 100644
index 0000000..9b52fa8
--- /dev/null
+++ b/viewer/src/views/item_handlers/DirectoryViewer.vue
@@ -0,0 +1,42 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <GalleryTiles
22 :items="props.item.properties.items"
23 :noresult-message="t('directory.no-results')"
24 />
25</template>
26
27<script setup lang="ts">
28import { DirectoryItem } from '@/@types/gallery';
29import { useUiStore } from '@/store/uiStore';
30import GalleryTiles from '@/views/GalleryTiles.vue';
31import { PropType } from 'vue';
32import { useI18n } from 'vue-i18n';
33
34const props = defineProps({
35 item: { type: Object as PropType<DirectoryItem>, required: true },
36});
37
38const { t } = useI18n();
39const uiStore = useUiStore();
40
41uiStore.toggleFullscreen(false);
42</script>
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue
new file mode 100644
index 0000000..6562bee
--- /dev/null
+++ b/viewer/src/views/item_handlers/DownloadViewer.vue
@@ -0,0 +1,66 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2020 Pacien TRAN-GIRARD
6--
7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as
9-- published by the Free Software Foundation, either version 3 of the
10-- License, or (at your option) any later version.
11--
12-- This program is distributed in the hope that it will be useful,
13-- but WITHOUT ANY WARRANTY; without even the implied warranty of
14-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15-- GNU Affero General Public License for more details.
16--
17-- You should have received a copy of the GNU Affero General Public License
18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19-->
20
21<template>
22 <div class="container-vh-centering">
23 <a
24 :class="$style.content"
25 :download="itemFileName"
26 :href="itemResourceUrl"
27 >
28 <!-- TODO: show thumbnail instead of this generic file download icon? -->
29 <fa-icon
30 :class="$style.icon"
31 :icon="faFileDownload"
32 size="6x"
33 />
34 <div>{{ t("download.download-file-fmt", [itemFileName]) }}</div>
35 </a>
36 </div>
37</template>
38
39<script setup lang="ts">
40import { DownloadableItem } from '@/@types/gallery';
41import { useNavigation } from '@/services/navigation';
42import { useItemResource } from '@/services/ui/ldItemResourceUrl';
43import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
44import { computed, PropType } from 'vue';
45import { useI18n } from 'vue-i18n';
46
47const props = defineProps({
48 item: { type: Object as PropType<DownloadableItem>, required: true },
49});
50
51const { t } = useI18n();
52const navigation = useNavigation();
53
54const itemFileName = computed(() => navigation.getFileName(props.item));
55const { itemResourceUrl } = useItemResource(props.item);
56</script>
57
58<style lang="scss" module>
59.content {
60 text-align: center;
61}
62
63.icon {
64 margin-bottom: 0.15em;
65}
66</style>
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue
new file mode 100644
index 0000000..d5ac7e2
--- /dev/null
+++ b/viewer/src/views/item_handlers/MarkdownViewer.vue
@@ -0,0 +1,50 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2021 Guillaume FOUET
6--
7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as
9-- published by the Free Software Foundation, either version 3 of the
10-- License, or (at your option) any later version.
11--
12-- This program is distributed in the hope that it will be useful,
13-- but WITHOUT ANY WARRANTY; without even the implied warranty of
14-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15-- GNU Affero General Public License for more details.
16--
17-- You should have received a copy of the GNU Affero General Public License
18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19-->
20
21<template>
22 <LdLoading v-if="isFetching" />