diff options
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/ldgallery-viewer.7.md | 6 | ||||
-rw-r--r-- | viewer/package.json | 1 | ||||
-rw-r--r-- | viewer/src/@types/gallery.ts | 6 | ||||
-rw-r--r-- | viewer/src/@types/itemType.ts | 1 | ||||
-rw-r--r-- | viewer/src/assets/scss/theme.scss | 3 | ||||
-rw-r--r-- | viewer/src/locales/en.yml | 3 | ||||
-rw-r--r-- | viewer/src/services/navigation.ts | 14 | ||||
-rw-r--r-- | viewer/src/views/GalleryNavigation.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/async/AsyncEpubViewer.vue | 180 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/async/index.ts | 23 | ||||
-rw-r--r-- | viewer/yarn.lock | 301 |
11 files changed, 534 insertions, 6 deletions
diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md index 46509fb..afdaec5 100644 --- a/viewer/ldgallery-viewer.7.md +++ b/viewer/ldgallery-viewer.7.md | |||
@@ -2,7 +2,7 @@ | |||
2 | pagetitle: Viewer user manual - ldgallery | 2 | pagetitle: Viewer user manual - ldgallery |
3 | title: LDGALLERY-VIEWER(7) ldgallery | 3 | title: LDGALLERY-VIEWER(7) ldgallery |
4 | author: Pacien TRAN-GIRARD, Guillaume FOUET | 4 | author: Pacien TRAN-GIRARD, Guillaume FOUET |
5 | date: 2022-10-26 (v2.1-SNAPSHOT) | 5 | date: 2022-10-30 (v2.1-SNAPSHOT) |
6 | --- | 6 | --- |
7 | 7 | ||
8 | 8 | ||
@@ -37,8 +37,8 @@ Items of the following formats can be opened and visualised within the web appli | |||
37 | * Pictures (Bitmap, JPEG, PNG, TIFF, HDR, GIF) | 37 | * Pictures (Bitmap, JPEG, PNG, TIFF, HDR, GIF) |
38 | * Videos (OGV, WebM, Matroska, MPEG-4) | 38 | * Videos (OGV, WebM, Matroska, MPEG-4) |
39 | * Audio files (WAV, Opus, FLAC, MP3, MPEG-4) | 39 | * Audio files (WAV, Opus, FLAC, MP3, MPEG-4) |
40 | * Plain text files (`.txt`) | 40 | * Text files (TXT, Markdown) |
41 | * PDFs | 41 | * Ebooks (PDF, EPUB) |
42 | 42 | ||
43 | Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window. | 43 | Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window. |
44 | The item being visualised can be downloaded using the download button at the top-left corner. | 44 | The item being visualised can be downloaded using the download button at the top-left corner. |
diff --git a/viewer/package.json b/viewer/package.json index f5ac5e3..61ea287 100644 --- a/viewer/package.json +++ b/viewer/package.json | |||
@@ -14,6 +14,7 @@ | |||
14 | "@fortawesome/vue-fontawesome": "3.0.1", | 14 | "@fortawesome/vue-fontawesome": "3.0.1", |
15 | "@vueuse/core": "9.3.1", | 15 | "@vueuse/core": "9.3.1", |
16 | "core-js": "3.25.0", | 16 | "core-js": "3.25.0", |
17 | "epubjs": "0.3.93", | ||
17 | "hammerjs": "2.0.8", | 18 | "hammerjs": "2.0.8", |
18 | "marked": "4.1.1", | 19 | "marked": "4.1.1", |
19 | "mosha-vue-toastify": "1.0.23", | 20 | "mosha-vue-toastify": "1.0.23", |
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 { | |||
64 | export interface PDFProperties extends Downloadable { | 64 | export interface PDFProperties extends Downloadable { |
65 | type: ItemType.PDF; | 65 | type: ItemType.PDF; |
66 | } | 66 | } |
67 | export interface EPUBProperties extends Downloadable { | ||
68 | type: ItemType.EPUB; | ||
69 | } | ||
67 | export interface VideoProperties extends Downloadable { | 70 | export interface VideoProperties extends Downloadable { |
68 | type: ItemType.VIDEO; | 71 | type: ItemType.VIDEO; |
69 | } | 72 | } |
@@ -107,6 +110,9 @@ export interface MarkdownItem extends Item { | |||
107 | export interface PDFItem extends Item { | 110 | export interface PDFItem extends Item { |
108 | properties: PDFProperties; | 111 | properties: PDFProperties; |
109 | } | 112 | } |
113 | export interface EPUBItem extends Item { | ||
114 | properties: EPUBProperties; | ||
115 | } | ||
110 | export interface VideoItem extends Item { | 116 | export 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 |
16 | download: | 16 | download: |
17 | download-file-fmt: Download {0} | 17 | download-file-fmt: Download {0} |
18 | epubViewer: | ||
19 | previousSection: Previous section | ||
20 | nextSection: Next section | ||
18 | gallery: | 21 | gallery: |
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 | ||
20 | import { DirectoryItem, DownloadableItem, Item } from '@/@types/gallery'; | 20 | import { DirectoryItem, DownloadableItem, Item } from '@/@types/gallery'; |
21 | import { ItemType } from '@/@types/itemType'; | 21 | import { ItemType } from '@/@types/itemType'; |
22 | import { faFile, faFileAlt, faFileAudio, faFilePdf, faFileVideo, faFolder, faHome, faImage, IconDefinition } from '@fortawesome/free-solid-svg-icons'; | 22 | import { |
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'; | ||
23 | import { isDirectory } from './itemGuards'; | 34 | import { isDirectory } from './itemGuards'; |
24 | 35 | ||
25 | const ICON_BY_TYPE: Record<ItemType, IconDefinition> = { | 36 | const 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'; | |||
44 | import { computed, watchEffect } from 'vue'; | 44 | import { computed, watchEffect } from 'vue'; |
45 | import { useI18n } from 'vue-i18n'; | 45 | import { useI18n } from 'vue-i18n'; |
46 | import GallerySearch from './GallerySearch.vue'; | 46 | import GallerySearch from './GallerySearch.vue'; |
47 | import { EpubViewer } from './item_handlers/async'; | ||
47 | import AudioViewer from './item_handlers/AudioViewer.vue'; | 48 | import AudioViewer from './item_handlers/AudioViewer.vue'; |
48 | import DirectoryViewer from './item_handlers/DirectoryViewer.vue'; | 49 | import DirectoryViewer from './item_handlers/DirectoryViewer.vue'; |
49 | import DownloadViewer from './item_handlers/DownloadViewer.vue'; | 50 | import 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 }} |