9 files changed, 227 insertions, 15 deletions

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 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ItemThumbnail :item="item" />
+    <ItemThumbnail
+      :item="item"
+      :class="$style.audiothumb"
+    />
     <audio
       :class="$style.player"
       :src="itemResourceUrl"
@@ -40,7 +43,7 @@
 import { AudioItem } from '@/@types/gallery';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ItemThumbnail from '../ItemThumbnail.vue';
 
@@ -51,11 +54,17 @@ const props = defineProps({
 const { t } = useI18n();
 const navigation = useNavigation();
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const itemFileName = computed(() => navigation.getFileName(props.item));
 </script>
 
 <style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.audiothumb {
+  color: $text-light;
+}
+
 .player {
   width: 100%;
   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';
 import { useNavigation } from '@/services/navigation';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
-import { computed, PropType } from 'vue';
+import { computed, PropType, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -52,7 +52,7 @@ const { t } = useI18n();
 const navigation = useNavigation();
 
 const itemFileName = computed(() => navigation.getFileName(props.item));
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 </script>
 
 <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';
 import LdLoading from '@/components/LdLoading.vue';
 import { useLdFetch } from '@/services/api/ldFetch';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<MarkdownItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
 </script>
 
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 @@
 <script setup lang="ts">
 import { PDFItem } from '@/@types/gallery';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 import DownloadViewer from './DownloadViewer.vue';
 
 const props = defineProps({
   item: { type: Object as PropType<PDFItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 
 </script>
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue
index 10055fd..74b978f 100644
--- a/viewer/src/views/item_handlers/PictureViewer.vue
+++ b/viewer/src/views/item_handlers/PictureViewer.vue
@@ -46,7 +46,7 @@ import { useLdZoom } from '@/services/ui/ldZoom';
 import { useUiStore } from '@/store/uiStore';
 import { unrefElement, VueInstance } from '@vueuse/core';
 import { createToast } from 'mosha-vue-toastify';
-import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { CSSProperties, onMounted, onUnmounted, PropType, ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -63,7 +63,7 @@ const loader = ref(false);
 const containerElement = ref<HTMLDivElement>();
 const imageElement = ref<VueInstance>();
 
-const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
 
 onMounted(() => {
   generateSlowLoadingStyle();
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_handlers/PlainTextViewer.vue
index d386437..2ab429a 100644
--- a/viewer/src/views/item_handlers/PlainTextViewer.vue
+++ b/viewer/src/views/item_handlers/PlainTextViewer.vue
@@ -37,13 +37,13 @@ import { PlainTextItem } from '@/@types/gallery';
 import LdLoading from '@/components/LdLoading.vue';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
 import { useFetch } from '@vueuse/core';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 
 const props = defineProps({
   item: { type: Object as PropType<PlainTextItem>, required: true },
 });
 
-const { itemResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
 const { isFinished, data } = useFetch(itemResourceUrl).text();
 </script>
 
diff --git a/viewer/src/views/item_handlers/VideoViewer.vue b/viewer/src/views/item_handlers/VideoViewer.vue
index 7d17367..8f0e775 100644
--- a/viewer/src/views/item_handlers/VideoViewer.vue
+++ b/viewer/src/views/item_handlers/VideoViewer.vue
@@ -36,12 +36,12 @@
 <script setup lang="ts">
 import { VideoItem } from '@/@types/gallery';
 import { useItemResource } from '@/services/ui/ldItemResourceUrl';
-import { PropType } from 'vue';
+import { PropType, toRef } from 'vue';
 import DownloadViewer from './DownloadViewer.vue';
 
 const props = defineProps({
   item: { type: Object as PropType<VideoItem>, required: true },
 });
 
-const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item);
+const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
 </script>
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 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C)