aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/@types/gallery.ts6
-rw-r--r--viewer/src/@types/itemType.ts1
-rw-r--r--viewer/src/assets/scss/theme.scss3
-rw-r--r--viewer/src/locales/en.yml3
-rw-r--r--viewer/src/services/navigation.ts14
-rw-r--r--viewer/src/views/GalleryNavigation.vue2
-rw-r--r--viewer/src/views/item_handlers/async/AsyncEpubViewer.vue180
-rw-r--r--viewer/src/views/item_handlers/async/index.ts23
8 files changed, 231 insertions, 1 deletions
diff --git a/viewer/src/@types/gallery.ts b/viewer/src/@types/gallery.ts
index 8c0f177..6960de2 100644
--- a/viewer/src/@types/gallery.ts
+++ b/viewer/src/@types/gallery.ts
@@ -64,6 +64,9 @@ export interface MarkdownProperties extends Downloadable {
64export interface PDFProperties extends Downloadable { 64export interface PDFProperties extends Downloadable {
65 type: ItemType.PDF; 65 type: ItemType.PDF;
66} 66}
67export interface EPUBProperties extends Downloadable {
68 type: ItemType.EPUB;
69}
67export interface VideoProperties extends Downloadable { 70export interface VideoProperties extends Downloadable {
68 type: ItemType.VIDEO; 71 type: ItemType.VIDEO;
69} 72}
@@ -107,6 +110,9 @@ export interface MarkdownItem extends Item {
107export interface PDFItem extends Item { 110export interface PDFItem extends Item {
108 properties: PDFProperties; 111 properties: PDFProperties;
109} 112}
113export interface EPUBItem extends Item {
114 properties: EPUBProperties;
115}
110export interface VideoItem extends Item { 116export interface VideoItem extends Item {
111 properties: VideoProperties; 117 properties: VideoProperties;
112} 118}
diff --git a/viewer/src/@types/itemType.ts b/viewer/src/@types/itemType.ts
index ecab05c..8528728 100644
--- a/viewer/src/@types/itemType.ts
+++ b/viewer/src/@types/itemType.ts
@@ -23,6 +23,7 @@ export enum ItemType {
23 PLAINTEXT = 'plaintext', 23 PLAINTEXT = 'plaintext',
24 MARKDOWN = 'markdown', 24 MARKDOWN = 'markdown',
25 PDF = 'pdf', 25 PDF = 'pdf',
26 EPUB = 'epub',
26 VIDEO = 'video', 27 VIDEO = 'video',
27 AUDIO = 'audio', 28 AUDIO = 'audio',
28 DIRECTORY = 'directory', 29 DIRECTORY = 'directory',
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 63febbf..6622fa5 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -41,6 +41,8 @@ $dropdown-item-color: $palette-600;
41$dropdown-item-hover-color: $palette-500; 41$dropdown-item-hover-color: $palette-500;
42$panel-top-bgcolor: $palette-800; 42$panel-top-bgcolor: $palette-800;
43$panel-top-txtcolor: $primary; 43$panel-top-txtcolor: $primary;
44$panel-bottom-bgcolor: $palette-800;
45$panel-bottom-txtcolor: $primary;
44$panel-left-bgcolor: $palette-800; 46$panel-left-bgcolor: $palette-800;
45$panel-left-txtcolor: $primary; 47$panel-left-txtcolor: $primary;
46$command-buttons-bgcolor: $palette-700; 48$command-buttons-bgcolor: $palette-700;
@@ -55,6 +57,7 @@ $thumbnail-other-size: $body-line-height * 7em;
55$proposed-category-bgcolor: $palette-700; 57$proposed-category-bgcolor: $palette-700;
56$viewer-text: $palette-000; 58$viewer-text: $palette-000;
57$viewer-text-background: $palette-900; 59$viewer-text-background: $palette-900;
60$viewer-epub-background: $palette-000;
58 61
59// Layout 62// Layout
60 63
diff --git a/viewer/src/locales/en.yml b/viewer/src/locales/en.yml
index 86ecd49..280f18b 100644
--- a/viewer/src/locales/en.yml
+++ b/viewer/src/locales/en.yml
@@ -15,6 +15,9 @@ directory:
15 no-results: Empty directory 15 no-results: Empty directory
16download: 16download:
17 download-file-fmt: Download {0} 17 download-file-fmt: Download {0}
18epubViewer:
19 previousSection: Previous section
20 nextSection: Next section
18gallery: 21gallery:
19 resource-loading-error: Error loading resource 22 resource-loading-error: Error loading resource
20 unknown-resource: Resource not found 23 unknown-resource: Resource not found
diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts
index b2e807b..fb01169 100644
--- a/viewer/src/services/navigation.ts
+++ b/viewer/src/services/navigation.ts
@@ -19,7 +19,18 @@
19 19
20import { DirectoryItem, DownloadableItem, Item } from '@/@types/gallery'; 20import { DirectoryItem, DownloadableItem, Item } from '@/@types/gallery';
21import { ItemType } from '@/@types/itemType'; 21import { ItemType } from '@/@types/itemType';
22import { faFile, faFileAlt, faFileAudio, faFilePdf, faFileVideo, faFolder, faHome, faImage, IconDefinition } from '@fortawesome/free-solid-svg-icons'; 22import {
23 faFile,
24 faFileAlt,
25 faFileAudio,
26 faFilePdf,
27 faBook,
28 faFileVideo,
29 faFolder,
30 faHome,
31 faImage,
32 IconDefinition,
33} from '@fortawesome/free-solid-svg-icons';
23import { isDirectory } from './itemGuards'; 34import { isDirectory } from './itemGuards';
24 35
25const ICON_BY_TYPE: Record<ItemType, IconDefinition> = { 36const ICON_BY_TYPE: Record<ItemType, IconDefinition> = {
@@ -28,6 +39,7 @@ const ICON_BY_TYPE: Record<ItemType, IconDefinition> = {
28 plaintext: faFileAlt, 39 plaintext: faFileAlt,
29 markdown: faFileAlt, 40 markdown: faFileAlt,
30 pdf: faFilePdf, 41 pdf: faFilePdf,
42 epub: faBook,
31 video: faFileVideo, 43 video: faFileVideo,
32 audio: faFileAudio, 44 audio: faFileAudio,
33 other: faFile, 45 other: faFile,
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/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--
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="$style.container">
23 <div
24 ref="view"
25 :class="$style.epubView"
26 class="scrollbar"
27 />
28
29 <ul
30 v-if="prevSection || nextSection"
31 :class="$style.navBar"
32 >
33 <li>
34 <LdLink
35 v-if="prevSection"
36 @click="goToPrevSection"
37 >
38 <fa-icon
39 :icon="faSquareCaretLeft"
40 size="lg"
41 alt="«"
42 />
43 {{ prevSectionLabel }}
44 </LdLink>
45 </li>
46
47 <li>
48 {{ currSectionLabel }}
49 </li>
50
51 <li>
52 <LdLink
53 v-if="nextSection"
54 @click="goToNextSection"
55 >
56 {{ nextSectionLabel }}
57 <fa-icon
58 :icon="faSquareCaretRight"
59 size="lg"
60 alt="»"
61 />
62 </LdLink>
63 </li>
64 </ul>
65 </div>
66</template>
67
68<script setup lang="ts">
69import { EPUBItem } from '@/@types/gallery';
70import { useItemResource } from '@/services/ui/ldItemResourceUrl';
71import { useUiStore } from '@/store/uiStore';
72import ePub, { Rendition } from 'epubjs';
73import { SpineItem } from 'epubjs/types/section';
74import { computed, PropType, Ref, ref, toRef, watch } from 'vue';
75import { useI18n } from 'vue-i18n';
76import LdLink from '@/components/LdLink.vue';
77import {
78 faSquareCaretLeft,
79 faSquareCaretRight,
80} from '@fortawesome/free-solid-svg-icons';
81
82const { t } = use