aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryNavigation.vue2
-rw-r--r--viewer/src/views/ItemThumbnail.vue6
-rw-r--r--viewer/src/views/MainLayout.vue5
-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
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue8
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue16
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue37
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue10
16 files changed, 292 insertions, 34 deletions
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 0869aaf..b342c52 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -44,6 +44,7 @@ import { computedEager } from '@vueuse/shared';
44import { computed, watchEffect } from 'vue'; 44import { computed, watchEffect } from 'vue';
45import { useI18n } from 'vue-i18n'; 45import { useI18n } from 'vue-i18n';
46import GallerySearch from './GallerySearch.vue'; 46import GallerySearch from './GallerySearch.vue';
47import { EpubViewer } from './item_handlers/async';
47import AudioViewer from './item_handlers/AudioViewer.vue'; 48import AudioViewer from './item_handlers/AudioViewer.vue';
48import DirectoryViewer from './item_handlers/DirectoryViewer.vue'; 49import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
49import DownloadViewer from './item_handlers/DownloadViewer.vue'; 50import DownloadViewer from './item_handlers/DownloadViewer.vue';
@@ -67,6 +68,7 @@ const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
67 plaintext: PlainTextViewer, 68 plaintext: PlainTextViewer,
68 markdown: MarkdownViewer, 69 markdown: MarkdownViewer,
69 pdf: PdfViewer, 70 pdf: PdfViewer,
71 epub: EpubViewer,
70 video: VideoViewer, 72 video: VideoViewer,
71 audio: AudioViewer, 73 audio: AudioViewer,
72 other: DownloadViewer, 74 other: DownloadViewer,
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
index 1c9e206..afd0e48 100644
--- a/viewer/src/views/ItemThumbnail.vue
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -40,7 +40,7 @@
40 size="4x" 40 size="4x"
41 /> 41 />
42 </div> 42 </div>
43 {{ item.title }} 43 <div v-text="item.title" />
44 </div> 44 </div>
45 </div> 45 </div>
46</template> 46</template>
@@ -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/MainLayout.vue b/viewer/src/views/MainLayout.vue
index d8b3300..30bfe97 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -26,7 +26,10 @@
26 /> 26 />
27 <template v-else-if="galleryStore.config && galleryStore.galleryIndex"> 27 <template v-else-if="galleryStore.config && galleryStore.galleryIndex">
28 <LayoutTop :class="[$style.layout, $style.layoutTop]" /> 28 <LayoutTop :class="[$style.layout, $style.layoutTop]" />
29 <LayoutLeft :class="[$style.layout, $style.layoutLeft]" /> 29 <LayoutLeft
30 v-show="!uiStore.fullWidth"
31 :class="[$style.layout, $style.layoutLeft]"
32 />
30 <router-view 33 <router-view
31 ref="content" 34 ref="content"
32 :class="[$style.layout, $style.layoutContent]" 35 :class="[$style.layout, $style.layoutContent]"
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