viewer: component dispatch (no functional change)

a cleaner way to add new components to LdGallery

9 files changed, 52 insertions, 42 deletions

diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
index 559000e..043087d 100644
--- a/viewer/src/components/index.ts
+++ b/viewer/src/components/index.ts
@@ -21,7 +21,7 @@ import Vue from "vue"
 
 const requireComponent = require.context(
   "@/components",
-  false, // Whether or not to look in subfolders
+  true, // Whether or not to look in subfolders
   // The regular expression used to match base component filenames
   /Ld[A-Z]\w+\.vue$/
 )
diff --git a/viewer/src/components/LdAudioViewer.vue b/viewer/src/components/item_handlers/LdAudioViewer.vue
index 739d36a..8c8ce2b 100644
--- a/viewer/src/components/LdAudioViewer.vue
+++ b/viewer/src/components/item_handlers/LdAudioViewer.vue
@@ -20,7 +20,7 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ld-thumbnail :item="audioItem" />
+    <ld-thumbnail :item="item" />
     <audio :class="$style.player" :src="itemResourceUrl" preload="auto" controls>
       <a
         :download="itemFileName"
@@ -36,14 +36,14 @@ import Navigation from "@/services/navigation";
 
 @Component
 export default class LdAudioViewer extends Vue {
-  @Prop({ required: true }) readonly audioItem!: Gallery.Audio;
+  @Prop({ required: true }) readonly item!: Gallery.Audio;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.audioItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 
   get itemFileName(): string {
-    return Navigation.getFileName(this.audioItem);
+    return Navigation.getFileName(this.item);
   }
 }
 </script>
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/components/item_handlers/LdDirectory.vue
index bfe484e..f7fa33f 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/components/item_handlers/LdDirectory.vue
@@ -26,15 +26,15 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 import Navigation from "@/services/navigation";
 
 @Component
-export default class GalleryDirectory extends Vue {
-  @Prop({ required: true }) readonly directory!: Gallery.Directory;
+export default class LdDirectory extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Directory;
 
   mounted() {
     this.$uiStore.toggleFullscreen(false);
   }
 
   get orderedItems() {
-    return Navigation.directoriesFirst(this.directory.properties.items);
+    return Navigation.directoriesFirst(this.item.properties.items);
   }
 }
 </script>
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/item_handlers/LdDownload.vue
index 7b09dab..7b09dab 100644
--- a/viewer/src/components/LdDownload.vue
+++ b/viewer/src/components/item_handlers/LdDownload.vue
diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/item_handlers/LdPdfViewer.vue
index b1f6c64..6471aac 100644
--- a/viewer/src/components/LdPdfViewer.vue
+++ b/viewer/src/components/item_handlers/LdPdfViewer.vue
@@ -24,7 +24,7 @@
     <!-- prefer native browser PDF viewer if available -->
     <object class="fill" :data="itemResourceUrl" type="application/pdf">
       <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
-      <ld-download :item="pdfItem" />
+      <ld-download :item="item" />
     </object>
   </div>
 </template>
@@ -34,10 +34,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class LdPdfViewer extends Vue {
-  @Prop({ required: true }) readonly pdfItem!: Gallery.PDF;
+  @Prop({ required: true }) readonly item!: Gallery.PDF;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.pdfItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 }
 </script>
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/item_handlers/LdPicture.vue
index 78829ec..3809e4d 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/item_handlers/LdPicture.vue
@@ -31,7 +31,7 @@
   >
     <v-lazy-image
       ref="imageElement"
-      :src="pictureSrc(picture.properties.resource)"
+      :src="pictureSrc(item.properties.resource)"
       class="ld-picture-element"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
@@ -48,7 +48,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
 
 @Component
 export default class LdPicture extends Vue {
-  @Prop({ required: true }) readonly picture!: Gallery.Picture;
+  @Prop({ required: true }) readonly item!: Gallery.Picture;
   @Ref() readonly containerElement!: HTMLDivElement;
   @Ref() readonly imageElement!: Vue;
 
@@ -61,7 +61,13 @@ export default class LdPicture extends Vue {
 
   mounted() {
     this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
-    new LdZoom(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install();
+    new LdZoom(
+      this.containerElement,
+      this.imageElement.$el as HTMLImageElement,
+      this.item.properties,
+      10,
+      1 / 5
+    ).install();
   }
 
   destroyed() {
@@ -82,8 +88,8 @@ export default class LdPicture extends Vue {
   generateSlowLoadingStyle() {
     this.clearSlowLoading();
     this.loader = true;
-    if (this.picture.thumbnail) {
-      const url = this.pictureSrc(this.picture.thumbnail.resource);
+    if (this.item.thumbnail) {
+      const url = this.pictureSrc(this.item.thumbnail.resource);
       this.slowLoadingStyle = `background-image: url('${url}');`;
     }
   }
diff --git a/viewer/src/components/LdPlainTextViewer.vue b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
index 5c32470..cd26d9d 100644
--- a/viewer/src/components/LdPlainTextViewer.vue
+++ b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
@@ -31,10 +31,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class LdPlainTextViewer extends Vue {
-  @Prop({ required: true }) readonly plainTextItem!: Gallery.PlainText;
+  @Prop({ required: true }) readonly item!: Gallery.PlainText;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.plainTextItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 }
 </script>
diff --git a/viewer/src/components/LdVideoViewer.vue b/viewer/src/components/item_handlers/LdVideoViewer.vue
index b7a7c35..67203a5 100644
--- a/viewer/src/components/LdVideoViewer.vue
+++ b/viewer/src/components/item_handlers/LdVideoViewer.vue
@@ -28,7 +28,7 @@
       preload="auto"
       controls
     >
-      <ld-download :item="videoItem" />
+      <ld-download :item="item" />
     </video>
   </div>
 </template>
@@ -38,14 +38,14 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class LdVideoViewer extends Vue {
-  @Prop({ required: true }) readonly videoItem!: Gallery.Video;
+  @Prop({ required: true }) readonly item!: Gallery.Video;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.videoItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;