From 6b6c1145ab8e4e6894eb54b1c98fb4b02e0d17b3 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 17 Oct 2020 20:54:18 +0200
Subject: viewer: set pointer cursor on collapsible info panel title bar

GitHub: closes #269
---
 viewer/src/views/PanelLeft.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 0ab3aa8..d2a3656 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -37,7 +37,7 @@
         :current-tags="currentTags"
       />
     </div>
-    <h1 class="flex title" @click="infoOpen = !infoOpen">
+    <h1 :class="$style.infoPanelTitleBar" class="flex title" @click="infoOpen = !infoOpen">
       {{ $t("panelLeft.information.title") }}
       <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
     </h1>
@@ -108,6 +108,10 @@ export default class PanelLeft extends Vue {
       margin-top: 2px; // Fixes a vertical centering issue with the carret
     }
   }
+
+  .infoPanelTitleBar {
+    cursor: pointer;
+  }
 }
 
 .flexShrinkFully {
-- 
cgit v1.2.3


From 5e179a35b23282c4613582755de06a91f6991309 Mon Sep 17 00:00:00 2001
From: zeroinformatique
Date: Sun, 18 Oct 2020 00:22:04 +0200
Subject: viewer: accessibility: set focus on the main area (#273)

github: resolves #177---
 viewer/src/views/MainLayout.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 6ef9a3b..9cd518b 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -22,7 +22,7 @@
     <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
     <panel-top v-if="isReady" class="layout layout-top" />
     <panel-left v-if="isReady" class="layout layout-left" />
-    <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
+    <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" tabindex="01" />
     <b-loading :active="isLoading" is-full-page />
     <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
   </div>
@@ -43,6 +43,10 @@ export default class MainLayout extends Vue {
   isLoading: boolean = true;
   scrollPositions: ScrollPosition = {};
 
+  get contentDiv() {
+    return this.content.$el as HTMLDivElement;
+  }
+
   mounted() {
     history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
     this.fetchGalleryItems();
@@ -53,11 +57,15 @@ export default class MainLayout extends Vue {
     document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
   }
 
+  moveFocusToContentDiv() {
+    setTimeout(() => this.contentDiv.focus());
+  }
+
   @Watch("$route")
   routeChanged(newRoute: Route, oldRoute: Route) {
-    const el = this.content.$el;
-    this.scrollPositions[oldRoute.path] = el.scrollTop;
-    this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path]));
+    this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop;
+    this.$nextTick(() => (this.contentDiv.scrollTop = this.scrollPositions[newRoute.path]));
+    this.moveFocusToContentDiv();
   }
 
   fetchGalleryItems() {
@@ -66,6 +74,7 @@ export default class MainLayout extends Vue {
       .fetchConfig()
       .then(this.$uiStore.initFromConfig)
       .then(this.$galleryStore.fetchGalleryItems)
+      .then(this.moveFocusToContentDiv)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
@@ -130,6 +139,9 @@ html {
     left: var(--layout-left);
     z-index: 3;
     overflow-x: hidden;
+    &:focus {
+      outline: none;
+    }
   }
 }
 .fullscreen {
-- 
cgit v1.2.3


From 7bd88b9d462903ae7753b9ef7a3613ebcd9bad45 Mon Sep 17 00:00:00 2001
From: pacien
Date: Fri, 25 Jun 2021 12:09:30 +0200
Subject: viewer/GalleryNavigation: uniquely identify viewer instances by item

This forces viewer components to be re-instantiated on item change.

GitHub: fixes #268
---
 viewer/src/views/GalleryNavigation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index fd1f19a..c53df66 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -21,7 +21,7 @@
   <div>
     <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
     <gallery-search v-else-if="isSearch" :path="path" />
-    <component :is="componentName" v-else :item="$galleryStore.currentItem" />
+    <component :is="componentName" v-else :key="$galleryStore.currentItem.path" :item="$galleryStore.currentItem" />
   </div>
 </template>
 
-- 
cgit v1.2.3


From 6b125a393d8ce10bfd9273c24ea1615b335abeba Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 26 Jun 2021 17:44:03 +0200
Subject: viewer/GalleryNavigation: uniquely identify viewer instances by item

Fixed error "Object is possibly 'null'" in the template
---
 viewer/src/views/GalleryNavigation.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index c53df66..69198f6 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -21,7 +21,7 @@
   <div>
     <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
     <gallery-search v-else-if="isSearch" :path="path" />
-    <component :is="componentName" v-else :key="$galleryStore.currentItem.path" :item="$galleryStore.currentItem" />
+    <component :is="componentName" v-else :key="componentKey" :item="$galleryStore.currentItem" />
   </div>
 </template>
 
@@ -66,6 +66,10 @@ export default class GalleryNavigation extends Vue {
     return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
   }
 
+  get componentKey() {
+    return this.$galleryStore.currentItem?.path ?? "";
+  }
+
   @Watch("path")
   pathChanged() {
     this.$galleryStore.setCurrentPath(this.path);
-- 
cgit v1.2.3


From 9165cc1efcf7791f78b61b2c51a9de651b1b09aa Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 2 Jul 2021 22:53:16 +0200
Subject: viewer: types normalization - gallery.d.ts

GitHub: closes #301
---
 viewer/src/views/GalleryNavigation.vue | 8 ++++----
 viewer/src/views/GallerySearch.vue     | 3 +--
 viewer/src/views/MainLayout.vue        | 4 ++--
 viewer/src/views/PanelLeft.vue         | 5 ++---
 4 files changed, 9 insertions(+), 11 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 69198f6..8bb225a 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { ItemType } from "@/@types/ItemType";
 import Navigation from "@/services/navigation";
 import GallerySearch from "@/views/GallerySearch.vue";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
 @Component({
   components: {
@@ -41,13 +41,13 @@ export default class GalleryNavigation extends Vue {
   @Prop(Array) readonly query!: string[];
 
   readonly COMPONENT_BY_TYPE: Record<ItemType, string> = {
-    directory: "ld-directory",
-    picture: "ld-picture",
+    directory: "ld-directory-viewer",
+    picture: "ld-picture-viewer",
     plaintext: "ld-plain-text-viewer",
     pdf: "ld-pdf-viewer",
     video: "ld-video-viewer",
     audio: "ld-audio-viewer",
-    other: "ld-download",
+    other: "ld-download-viewer",
   };
 
   mounted() {
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index fec7216..6d3deb4 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -22,9 +22,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { Operation } from "@/@types/Operation";
 import IndexSearch from "@/services/indexsearch";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class GalleryPicture extends Vue {
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 9cd518b..edca4bf 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Ref, Watch } from "vue-property-decorator";
+import { Component, Ref, Vue, Watch } from "vue-property-decorator";
+import { Route } from "vue-router";
 import PanelLeft from "./PanelLeft.vue";
 import PanelTop from "./PanelTop.vue";
-import { Route } from "vue-router";
 
 @Component({
   components: { PanelLeft, PanelTop },
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index d2a3656..5c42fa9 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -48,10 +48,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
-import { Dictionary, Route } from "vue-router/types/router";
 import Navigation from "@/services/navigation";
-import IndexFactory from "@/services/indexfactory";
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { Dictionary, Route } from "vue-router/types/router";
 
 @Component
 export default class PanelLeft extends Vue {
-- 
cgit v1.2.3


From 92cb34b719b481faf417760f307241e8f6d777a9 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 2 Jul 2021 22:59:56 +0200
Subject: viewer: types normalization - tag.d.ts

GitHub: closes #301
---
 viewer/src/views/PanelLeft.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 5c42fa9..ea61865 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -48,13 +48,14 @@
 </template>
 
 <script lang="ts">
+import { TagSearch } from "@/@types/tag";
 import Navigation from "@/services/navigation";
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { Dictionary, Route } from "vue-router/types/router";
 
 @Component
 export default class PanelLeft extends Vue {
-  searchFilters: Tag.Search[] = [];
+  searchFilters: TagSearch[] = [];
   infoOpen: boolean = true;
 
   mounted() {
-- 
cgit v1.2.3


From 1f0377c1b4c2959c73fe4e368673f057ef369917 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 2 Jul 2021 23:04:52 +0200
Subject: viewer: types normalization - scrollposition.d.ts

GitHub: closes #301
---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index edca4bf..13b17b4 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -29,6 +29,7 @@
 </template>
 
 <script lang="ts">
+import { ScrollPosition } from "@/@types/scrollposition";
 import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import { Route } from "vue-router";
 import PanelLeft from "./PanelLeft.vue";
-- 
cgit v1.2.3


From de6827776283d06eab889790a238979fb8156a3e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 01:36:32 +0200
Subject: viewer: document.fullscreen is deprecated, use
 document.fullscreenElement instead

---
 viewer/src/views/MainLayout.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 13b17b4..eee813f 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -95,14 +95,19 @@ export default class MainLayout extends Vue {
     });
   }
 
+  isFullscreenActive(): boolean {
+    return Boolean(document.fullscreenElement);
+  }
+
   @Watch("$uiStore.fullscreen")
   applyFullscreen(fullscreen: boolean) {
-    if (fullscreen && !document.fullscreen) document.body.requestFullscreen();
-    else if (document.fullscreen) document.exitFullscreen();
+    const isFullscreenActive = this.isFullscreenActive();
+    if (fullscreen && !isFullscreenActive) document.body.requestFullscreen();
+    else if (isFullscreenActive) document.exitFullscreen();
   }
 
   onFullscreenChange() {
-    this.$uiStore.toggleFullscreen(document.fullscreen);
+    this.$uiStore.toggleFullscreen(this.isFullscreenActive());
   }
 }
 </script>
-- 
cgit v1.2.3


From cddf5d5c42795388dbd9058268160f1e867d64f5 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 05:06:44 +0200
Subject: viewer: use CSS module (MainLayout)

Extracted from 0f4a1d1 (GH PR #304).
---
 viewer/src/views/MainLayout.vue | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index eee813f..c54f183 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,11 +18,17 @@
 -->
 
 <template>
-  <div :class="{ fullscreen: $uiStore.fullscreen, fullwidth: $uiStore.fullWidth }">
+  <div :class="{ [$style.fullscreen]: $uiStore.fullscreen, [$style.fullwidth]: $uiStore.fullWidth }">
     <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
-    <panel-top v-if="isReady" class="layout layout-top" />
-    <panel-left v-if="isReady" class="layout layout-left" />
-    <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" tabindex="01" />
+    <PanelTop v-if="isReady" :class="[$style.layout, $style.layoutTop]" />
+    <PanelLeft v-if="isReady" :class="[$style.layout, $style.layoutLeft]" />
+    <router-view
+      v-if="!isLoading"
+      ref="content"
+      :class="[$style.layout, $style.layoutContent]"
+      class="scrollbar"
+      tabindex="01"
+    />
     <b-loading :active="isLoading" is-full-page />
     <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
   </div>
@@ -112,11 +118,11 @@ export default class MainLayout extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-body,
-html {
+:global(body),
+:global(html) {
   height: 100%;
   overflow: hidden;
   touch-action: none;
@@ -131,16 +137,16 @@ html {
   bottom: 0;
   left: 0;
   right: 0;
-  &.layout-top {
+  &.layoutTop {
     height: $layout-top;
     z-index: 1;
   }
-  &.layout-left {
+  &.layoutLeft {
     top: $layout-top;
     width: $layout-left;
     z-index: 2;
   }
-  &.layout-content {
+  &.layoutContent {
     top: var(--layout-top);
     left: var(--layout-left);
     z-index: 3;
@@ -164,17 +170,16 @@ html {
 }
 
 .layout {
-  &.layout-top {
+  &.layoutTop {
     background-color: $panel-top-bgcolor;
     color: $panel-top-txtcolor;
   }
-  &.layout-left {
+  &.layoutLeft {
     background-color: $panel-left-bgcolor;
     color: $panel-left-txtcolor;
   }
-  &.layout-content {
+  &.layoutContent {
     background-color: $content-bgcolor;
   }
 }
-// =====
 </style>
-- 
cgit v1.2.3


From dfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 4 Jul 2021 02:22:39 +0200
Subject: viewer: use CSS modules

GitHub: closes #196
---
 viewer/src/views/GalleryNavigation.vue | 2 --
 viewer/src/views/GallerySearch.vue     | 2 --
 viewer/src/views/PanelTop.vue          | 2 --
 3 files changed, 6 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 8bb225a..fdd3922 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -80,5 +80,3 @@ export default class GalleryNavigation extends Vue {
   }
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 6d3deb4..5ab56e0 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -52,5 +52,3 @@ export default class GalleryPicture extends Vue {
   }
 }
 </script>
-
-<style lang="scss"></style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index f10a722..4e92f07 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -30,5 +30,3 @@ import { Component, Vue } from "vue-property-decorator";
 @Component
 export default class PanelTop extends Vue {}
 </script>
-
-<style lang="scss"></style>
-- 
cgit v1.2.3


From 928c501dda0c3580e3cb0389efc16fc1dde16b68 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 05:06:44 +0200
Subject: viewer: optional user-defined markdown splash screen

GitHub: closes #284
---
 viewer/src/views/MainLayout.vue   | 46 +++++++++++++++----------
 viewer/src/views/SplashScreen.vue | 72 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 18 deletions(-)
 create mode 100644 viewer/src/views/SplashScreen.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c54f183..2347ba7 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -22,14 +22,13 @@
     <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
     <PanelTop v-if="isReady" :class="[$style.layout, $style.layoutTop]" />
     <PanelLeft v-if="isReady" :class="[$style.layout, $style.layoutLeft]" />
-    <router-view
-      v-if="!isLoading"
-      ref="content"
-      :class="[$style.layout, $style.layoutContent]"
-      class="scrollbar"
-      tabindex="01"
+    <b-loading v-if="isLoading" active />
+    <SplashScreen
+      v-else-if="$uiStore.splashScreenEnabled"
+      :class="$style.layout"
+      @validation="$uiStore.validateSpashScreen()"
     />
-    <b-loading :active="isLoading" is-full-page />
+    <router-view v-else ref="content" :class="[$style.layout, $style.layoutContent]" class="scrollbar" tabindex="01" />
     <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
   </div>
 </template>
@@ -40,18 +39,32 @@ import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import { Route } from "vue-router";
 import PanelLeft from "./PanelLeft.vue";
 import PanelTop from "./PanelTop.vue";
+import SplashScreen from "./SplashScreen.vue";
 
 @Component({
-  components: { PanelLeft, PanelTop },
+  components: {
+    PanelLeft,
+    PanelTop,
+    SplashScreen,
+  },
 })
 export default class MainLayout extends Vue {
-  @Ref() readonly content!: Vue;
+  @Ref() readonly content?: Vue;
 
   isLoading: boolean = true;
   scrollPositions: ScrollPosition = {};
 
-  get contentDiv() {
-    return this.content.$el as HTMLDivElement;
+  get contentDiv(): HTMLDivElement | null {
+    return (this.content?.$el as HTMLDivElement) ?? null;
+  }
+
+  get isReady(): boolean {
+    return (
+      !this.$uiStore.splashScreenEnabled &&
+      !this.isLoading &&
+      this.$galleryStore.config !== null &&
+      this.$galleryStore.currentPath !== null
+    );
   }
 
   mounted() {
@@ -65,13 +78,14 @@ export default class MainLayout extends Vue {
   }
 
   moveFocusToContentDiv() {
-    setTimeout(() => this.contentDiv.focus());
+    setTimeout(() => this.contentDiv?.focus());
   }
 
   @Watch("$route")
   routeChanged(newRoute: Route, oldRoute: Route) {
+    if (!this.contentDiv) return;
     this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop;
-    this.$nextTick(() => (this.contentDiv.scrollTop = this.scrollPositions[newRoute.path]));
+    this.$nextTick(() => (this.contentDiv!.scrollTop = this.scrollPositions[newRoute.path]));
     this.moveFocusToContentDiv();
   }
 
@@ -86,14 +100,10 @@ export default class MainLayout extends Vue {
       .catch(this.displayError);
   }
 
-  get isReady() {
-    return !this.isLoading && this.$galleryStore.config && this.$galleryStore.currentPath !== null;
-  }
-
   displayError(reason: any) {
     this.$buefy.snackbar.open({
       message: `${reason}`,
-      actionText: "Retry",
+      actionText: this.$t("snack.retry"),
       position: "is-top",
       type: "is-danger",
       indefinite: true,
diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
new file mode 100644
index 0000000..808567e
--- /dev/null
+++ b/viewer/src/views/SplashScreen.vue
@@ -0,0 +1,72 @@
+<template>
+  <b-loading v-if="isLoading" active />
+  <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
+    <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
+    <b-button size="is-large" :label="buttonAcknowledgeLabel" :class="$style.buttonAcknowledge" @click="validation" />
+  </div>
+</template>
+
+<script lang="ts">
+import { SplashScreenConfig } from "@/@types/splashscreen";
+import { Markdown } from "@/components/async";
+import FetchWithCheck from "@/services/fetchWithCheck";
+import { TranslateResult } from "vue-i18n";
+import { Component, Emit, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {
+    Markdown,
+  },
+})
+export default class SplashScreen extends Vue {
+  isLoading: boolean = true;
+  markdown: string | null = null;
+
+  get config(): SplashScreenConfig {
+    return this.$uiStore.splashScreenConfig!;
+  }
+
+  created() {
+    this.fetchMarkdown();
+  }
+
+  fetchMarkdown() {
+    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.dontshowagainUID ?? ""}`)
+      .then(response => response.text())
+      .then(text => (this.markdown = text))
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `${reason}`,
+      actionText: this.$t("snack.retry"),
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchMarkdown,
+    });
+  }
+
+  get buttonAcknowledgeLabel(): TranslateResult {
+    return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
+  }
+
+  @Emit()
+  validation() {}
+}
+</script>
+
+<style lang="scss" module>
+.splashscreen {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 32px;
+}
+.buttonAcknowledge {
+  min-width: 310px;
+  align-self: center;
+}
+</style>
-- 
cgit v1.2.3


From c28b29b12810548a5927a02ca80714fcce24a61b Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 4 Jul 2021 18:37:46 +0200
Subject: viewer/SplashScreen: remove useless style class

---
 viewer/src/views/SplashScreen.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index 808567e..a2f499a 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -2,7 +2,7 @@
   <b-loading v-if="isLoading" active />
   <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
     <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
-    <b-button size="is-large" :label="buttonAcknowledgeLabel" :class="$style.buttonAcknowledge" @click="validation" />
+    <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" />
   </div>
 </template>
 
@@ -65,8 +65,4 @@ export default class SplashScreen extends Vue {
   align-items: center;
   padding: 32px;
 }
-.buttonAcknowledge {
-  min-width: 310px;
-  align-self: center;
-}
 </style>
-- 
cgit v1.2.3


From c83f44cd69a227f873a026c01653ef434b6ae045 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 5 Jul 2021 19:10:20 +0200
Subject: viewer: viewer: optional user-defined markdown splash screen

Code review changes
---
 viewer/src/views/SplashScreen.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index a2f499a..dcb845d 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -31,7 +31,7 @@ export default class SplashScreen extends Vue {
   }
 
   fetchMarkdown() {
-    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.dontshowagainUID ?? ""}`)
+    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
       .then(response => response.text())
       .then(text => (this.markdown = text))
       .finally(() => (this.isLoading = false))
-- 
cgit v1.2.3


From 2f9e51b5cd7dfafadac90ec896edd365da12a1c8 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 23:07:09 +0200
Subject: viewer: add markdown item handler

Extracted from b170f49 (GH PR #304)
---
 viewer/src/views/GalleryNavigation.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index fdd3922..200637e 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -44,6 +44,7 @@ export default class GalleryNavigation extends Vue {
     directory: "ld-directory-viewer",
     picture: "ld-picture-viewer",
     plaintext: "ld-plain-text-viewer",
+    markdown: "ld-markdown-viewer",
     pdf: "ld-pdf-viewer",
     video: "ld-video-viewer",
     audio: "ld-audio-viewer",
-- 
cgit v1.2.3


From 581029f1b15b51f90812a47b20bce454014da32a Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 12 Apr 2022 21:35:24 +0200
Subject: viewer: add markdown item handler

Minor CSS fixes
Comment for future upgrade to Vue3
---
 viewer/src/views/SplashScreen.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index dcb845d..93d84a1 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -30,6 +30,7 @@ export default class SplashScreen extends Vue {
     this.fetchMarkdown();
   }
 
+  // TODO: Identical to LdMarkdownViewer.vue, use composition with Vue3.
   fetchMarkdown() {
     FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
       .then(response => response.text())
-- 
cgit v1.2.3


From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001
From: Zéro~Informatique
Date: Tue, 26 Jul 2022 08:44:34 +0200
Subject: viewer: migrate to vue 3, general refactoring and cleanup

Non-exhaustive list of fixes and improvements done at the same time:

- html default background to grey (avoids white flash during init)
- unified links behavior
- added more theme variables
- removed the flex-expand transition (it wasn't working) and replaced it
  with a slide
- fixed LdLoading not centered on the content
- title on removable tags
- fixed an issue with encoded URI from vue-router
- unified Item resource URLs
- removed the iframe for PlainTextViewer (it wasn't working properly)
  and replaced it with a pre
- fixed clear and search buttons tabindex
- fixed the information panel bumping up during the fade animation of
  tag's dropdown
- fixed some focus outlines not appearing correctly
- moved CSS variables to the :root context
- Code cleaning

GitHub: closes #217
GitHub: closes #300
GitHub: closes #297
GitHub: closes #105
GitHub: closes #267
GitHub: closes #275
GitHub: closes #228
GitHub: closes #215
GitHub: closes #112
---
 viewer/src/views/GalleryNavigation.vue             | 106 ++++++-----
 viewer/src/views/GallerySearch.vue                 |  60 +++---
 viewer/src/views/GalleryTiles.vue                  |  70 +++++++
 viewer/src/views/ItemThumbnail.vue                 |  99 ++++++++++
 viewer/src/views/MainLayout.vue                    | 173 +++++++----------
 viewer/src/views/PanelLeft.vue                     | 120 ------------
 viewer/src/views/PanelTop.vue                      |  32 ----
 viewer/src/views/SplashScreen.vue                  | 106 ++++++-----
 viewer/src/views/item_handlers/AudioViewer.vue     |  65 +++++++
 viewer/src/views/item_handlers/DirectoryViewer.vue |  42 +++++
 viewer/src/views/item_handlers/DownloadViewer.vue  |  66 +++++++
 viewer/src/views/item_handlers/MarkdownViewer.vue  |  50 +++++
 viewer/src/views/item_handlers/PdfViewer.vue       |  48 +++++
 viewer/src/views/item_handlers/PictureViewer.vue   | 129 +++++++++++++
 viewer/src/views/item_handlers/PlainTextViewer.vue |  69 +++++++
 viewer/src/views/item_handlers/VideoViewer.vue     |  47 +++++
 .../src/views/layout/left/LayoutCommandSearch.vue  |  64 +++++++
 viewer/src/views/layout/left/LayoutInformation.vue |  99 ++++++++++
 viewer/src/views/layout/left/LayoutLeft.vue        | 158 ++++++++++++++++
 viewer/src/views/layout/left/LayoutProposition.vue | 208 +++++++++++++++++++++
 viewer/src/views/layout/left/LayoutTagInput.vue    | 164 ++++++++++++++++
 viewer/src/views/layout/left/LayoutTagList.vue     |  74 ++++++++
 viewer/src/views/layout/top/LayoutBreadcrumb.vue   | 130 +++++++++++++
 viewer/src/views/layout/top/LayoutCommand.vue      | 127 +++++++++++++
 viewer/src/views/layout/top/LayoutCommandSort.vue  | 117 ++++++++++++
 viewer/src/views/layout/top/LayoutTop.vue          |  38 ++++
 26 files changed, 2071 insertions(+), 390 deletions(-)
 create mode 100644 viewer/src/views/GalleryTiles.vue
 create mode 100644 viewer/src/views/ItemThumbnail.vue
 delete mode 100644 viewer/src/views/PanelLeft.vue
 delete mode 100644 viewer/src/views/PanelTop.vue
 create mode 100644 viewer/src/views/item_handlers/AudioViewer.vue
 create mode 100644 viewer/src/views/item_handlers/DirectoryViewer.vue
 create mode 100644 viewer/src/views/item_handlers/DownloadViewer.vue
 create mode 100644 viewer/src/views/item_handlers/MarkdownViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PdfViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PictureViewer.vue
 create mode 100644 viewer/src/views/item_handlers/PlainTextViewer.vue
 create mode 100644 viewer/src/views/item_handlers/VideoViewer.vue
 create mode 100644 viewer/src/views/layout/left/LayoutCommandSearch.vue
 create mode 100644 viewer/src/views/layout/left/LayoutInformation.vue
 create mode 100644 viewer/src/views/layout/left/LayoutLeft.vue
 create mode 100644 viewer/src/views/layout/left/LayoutProposition.vue
 create mode 100644 viewer/src/views/layout/left/LayoutTagInput.vue
 create mode 100644 viewer/src/views/layout/left/LayoutTagList.vue
 create mode 100644 viewer/src/views/layout/top/LayoutBreadcrumb.vue
 create mode 100644 viewer/src/views/layout/top/LayoutCommand.vue
 create mode 100644 viewer/src/views/layout/top/LayoutCommandSort.vue
 create mode 100644 viewer/src/views/layout/top/LayoutTop.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 200637e..0869aaf 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -19,65 +19,63 @@
 
 <template>
   <div>
-    <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
-    <gallery-search v-else-if="isSearch" :path="path" />
-    <component :is="componentName" v-else :key="componentKey" :item="$galleryStore.currentItem" />
+    <LdNotice
+      v-if="isError"
+      :icon="faFolderOpen"
+      :message="t('gallery.unknown-resource')"
+    />
+    <GallerySearch v-else-if="isSearch" />
+    <component
+      :is="componentName"
+      v-else
+      :key="componentKey"
+      :item="galleryStore.currentItem"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import { ItemType } from "@/@types/ItemType";
-import Navigation from "@/services/navigation";
-import GallerySearch from "@/views/GallerySearch.vue";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+<script setup lang="ts">
+import { ItemType } from '@/@types/itemType';
+import LdNotice from '@/components/LdNotice.vue';
+import { isDirectory } from '@/services/itemGuards';
+import { useGalleryStore } from '@/store/galleryStore';
+import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+import { computedEager } from '@vueuse/shared';
+import { computed, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GallerySearch from './GallerySearch.vue';
+import AudioViewer from './item_handlers/AudioViewer.vue';
+import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
+import DownloadViewer from './item_handlers/DownloadViewer.vue';
+import MarkdownViewer from './item_handlers/MarkdownViewer.vue';
+import PdfViewer from './item_handlers/PdfViewer.vue';
+import PictureViewer from './item_handlers/PictureViewer.vue';
+import PlainTextViewer from './item_handlers/PlainTextViewer.vue';
+import VideoViewer from './item_handlers/VideoViewer.vue';
 
-@Component({
-  components: {
-    GallerySearch,
-  },
-})
-export default class GalleryNavigation extends Vue {
-  @Prop(String) readonly path!: string;
-  @Prop(Array) readonly query!: string[];
+const props = defineProps({
+  path: { type: String, required: true },
+  query: { type: Array<string>, required: true },
+});
 
-  readonly COMPONENT_BY_TYPE: Record<ItemType, string> = {
-    directory: "ld-directory-viewer",
-    picture: "ld-picture-viewer",
-    plaintext: "ld-plain-text-viewer",
-    markdown: "ld-markdown-viewer",
-    pdf: "ld-pdf-viewer",
-    video: "ld-video-viewer",
-    audio: "ld-audio-viewer",
-    other: "ld-download-viewer",
-  };
+const { t } = useI18n();
+const galleryStore = useGalleryStore();
 
-  mounted() {
-    this.pathChanged();
-  }
+const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
+  directory: DirectoryViewer,
+  picture: PictureViewer,
+  plaintext: PlainTextViewer,
+  markdown: MarkdownViewer,
+  pdf: PdfViewer,
+  video: VideoViewer,
+  audio: AudioViewer,
+  other: DownloadViewer,
+};
 
-  get isError() {
-    return this.checkType(null);
-  }
+const isError = computedEager(() => !galleryStore.currentItem?.properties.type);
+const isSearch = computedEager(() => isDirectory(galleryStore.currentItem) && props.query.length > 0);
+const componentName = computed(() => COMPONENT_BY_TYPE[galleryStore.currentItem?.properties.type ?? ItemType.OTHER]);
+const componentKey = computed(() => galleryStore.currentItem?.path ?? '');
 
-  get isSearch() {
-    return this.checkType(ItemType.DIRECTORY) && this.query.length > 0;
-  }
-
-  get componentName() {
-    return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
-  }
-
-  get componentKey() {
-    return this.$galleryStore.currentItem?.path ?? "";
-  }
-
-  @Watch("path")
-  pathChanged() {
-    this.$galleryStore.setCurrentPath(this.path);
-  }
-
-  checkType(type: ItemType | null): boolean {
-    return Navigation.checkType(this.$galleryStore.currentItem, type);
-  }
-}
+watchEffect(() => (galleryStore.currentPath = props.path));
 </script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 5ab56e0..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,37 +18,39 @@
 -->
 
 <template>
-  <ld-gallery :items="items" :noresult="noResult" />
+  <GalleryTiles
+    :items="items.filteredByPath"
+    :noresult-message="noResult"
+  />
 </template>
 
-<script lang="ts">
-import IndexSearch from "@/services/indexsearch";
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { useIndexSearch } from '@/services/indexSearch';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { computed, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import GalleryTiles from './GalleryTiles.vue';
 
-@Component
-export default class GalleryPicture extends Vue {
-  @Prop(String) readonly path!: string;
-  otherCount: number = 0;
+const { t } = useI18n();
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+const indexSearch = useIndexSearch();
 
-  mounted() {
-    this.$uiStore.toggleFullscreen(false);
-    this.$uiStore.toggleSearchMode(true);
-  }
+uiStore.toggleFullscreen(false);
+uiStore.searchMode = true;
+onUnmounted(() => {
+  uiStore.searchMode = false;
+  galleryStore.currentSearch = [];
+});
 
-  destroyed() {
-    this.$uiStore.toggleSearchMode(false);
-    this.$galleryStore.setCurrentSearch([]);
-  }
-
-  get items() {
-    const searchResult = IndexSearch.search(this.$galleryStore.currentSearch);
-    const filteredByPath = searchResult.filter(item => item.path.startsWith(this.path));
-    this.otherCount = searchResult.length - filteredByPath.length;
-    return filteredByPath;
-  }
-
-  get noResult() {
-    return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]);
-  }
-}
+const items = computed(() => {
+  const { currentPath, currentSearch } = galleryStore;
+  if (!currentPath) return { searchResult: [], filteredByPath: [] };
+  const searchResult = indexSearch(currentSearch);
+  const filteredByPath = searchResult.filter(item => item.path.startsWith(currentPath));
+  return { searchResult, filteredByPath };
+});
+const otherCount = computed(() => items.value.searchResult.length - items.value.filteredByPath.length);
+const noResult = computed(() => t('search.no-result-fmt', [otherCount.value]));
 </script>
diff --git a/viewer/src/views/GalleryTiles.vue b/viewer/src/views/GalleryTiles.vue
new file mode 100644
index 0000000..96d69da
--- /dev/null
+++ b/viewer/src/views/GalleryTiles.vue
@@ -0,0 +1,70 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    v-if="hasResults"
+    :class="$style.thumbnailTiles"
+  >
+    <LdLink
+      v-for="item in orderedItems"
+      :key="item.path"
+      :to="item.path"
+    >
+      <ItemThumbnail :item="item" />
+    </LdLink>
+  </div>
+  <LdNotice
+    v-else
+    :icon="faSearch"
+    :message="noresultMessage"
+  />
+</template>
+
+<script setup lang="ts">
+import { Item } from '@/@types/gallery';
+import LdLink from '@/components/LdLink.vue';
+import LdNotice from '@/components/LdNotice.vue';
+import { useUiStore } from '@/store/uiStore';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { computed } from 'vue';
+import ItemThumbnail from './ItemThumbnail.vue';
+
+const props = defineProps({
+  items: { type: Array<Item>, required: true },
+  noresultMessage: { type: String, required: true },
+});
+
+const uiStore = useUiStore();
+const hasResults = computed(() => props.items.length);
+const orderedItems = computed(() => [...props.items].sort(uiStore.sort.fn));
+</script>
+
+<style lang="scss" module>
+.thumbnailTiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-evenly;
+
+  & > a {
+    margin: 2px;
+  }
+}
+</style>
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
new file mode 100644
index 0000000..1c9e206
--- /dev/null
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -0,0 +1,99 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div :class="{ [$style.preload]: loading }">
+    <!-- Can't use img loading="lazy" yet because @loadstart doesn't work on Chromium -->
+    <!-- Also it loads the picture before scroll init (too early) -->
+    <VLazyImage
+      v-if="thumbnailResourceUrl"
+      :src="thumbnailResourceUrl"
+      :style="pictureStyle"
+      :title="item.title"
+      @intersect="loading = true"
+      @load="loading = false"
+    />
+    <div
+      v-else
+      class="flex-column flex-center"
+      :class="$style.thumbnailOther"
+    >
+      <div>
+        <fa-icon
+          :icon="icon"
+          size="4x"
+        />
+      </div>
+      {{ item.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Item } from '@/@types/gallery';
+import { useNavigation } from '@/services/navigation';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import VLazyImage from 'v-lazy-image';
+import { computed, PropType, ref } from 'vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<Item>, required: true },
+});
+
+const navigation = useNavigation();
+
+const loading = ref(false);
+
+const { thumbnailResourceUrl } = useItemResource(props.item);
+
+const pictureStyle = computed(() => {
+  const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 };
+  return { width: `${resolution.width}px`, height: `${resolution.height}px` };
+});
+
+const icon = computed(() => navigation.getIcon(props.item));
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.thumbnailOther {
+  width: $thumbnail-other-size;
+  height: $thumbnail-other-size;
+  padding-top: $body-line-height * 1em;
+  text-align: center;
+  word-break: break-word;
+  overflow: hidden;
+  > div {
+    min-height: $body-line-height * 3em;
+  }
+}
+
+.preload {
+  animation: preloadAnimation 1s infinite ease-in-out alternate;
+}
+@keyframes preloadAnimation {
+  from {
+    background-color: $content-bgcolor;
+  }
+  to {
+    background-color: $skeleton-color;
+  }
+}
+</style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2347ba7..9c84116 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,7 +1,7 @@
 <!-- ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
--- Copyright (C) 2019-2020  Guillaume FOUET
+-- Copyright (C) 2019-2022  Guillaume FOUET
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -18,131 +18,94 @@
 -->
 
 <template>
-  <div :class="{ [$style.fullscreen]: $uiStore.fullscreen, [$style.fullwidth]: $uiStore.fullWidth }">
-    <ld-title :gallery-title="$galleryStore.galleryTitle" :current-item="$galleryStore.currentItem" />
-    <PanelTop v-if="isReady" :class="[$style.layout, $style.layoutTop]" />
-    <PanelLeft v-if="isReady" :class="[$style.layout, $style.layoutLeft]" />
-    <b-loading v-if="isLoading" active />
+  <div :class="{ [$style.fullscreen]: uiStore.fullscreen, [$style.fullwidth]: uiStore.fullWidth }">
+    <LdLoading v-if="isLoading" />
     <SplashScreen
-      v-else-if="$uiStore.splashScreenEnabled"
-      :class="$style.layout"
-      @validation="$uiStore.validateSpashScreen()"
+      v-else-if="uiStore.splashScreenEnabled"
+      @validation="validateSpashScreen"
     />
-    <router-view v-else ref="content" :class="[$style.layout, $style.layoutContent]" class="scrollbar" tabindex="01" />
-    <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
+    <template v-else-if="galleryStore.config && galleryStore.galleryIndex">
+      <LayoutTop :class="[$style.layout, $style.layoutTop]" />
+      <LayoutLeft :class="[$style.layout, $style.layoutLeft]" />
+      <router-view
+        ref="content"
+        :class="[$style.layout, $style.layoutContent]"
+        class="scrollbar"
+        tabindex="2"
+      />
+    </template>
   </div>
 </template>
 
-<script lang="ts">
-import { ScrollPosition } from "@/@types/scrollposition";
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import { Route } from "vue-router";
-import PanelLeft from "./PanelLeft.vue";
-import PanelTop from "./PanelTop.vue";
-import SplashScreen from "./SplashScreen.vue";
-
-@Component({
-  components: {
-    PanelLeft,
-    PanelTop,
-    SplashScreen,
-  },
-})
-export default class MainLayout extends Vue {
-  @Ref() readonly content?: Vue;
-
-  isLoading: boolean = true;
-  scrollPositions: ScrollPosition = {};
-
-  get contentDiv(): HTMLDivElement | null {
-    return (this.content?.$el as HTMLDivElement) ?? null;
-  }
-
-  get isReady(): boolean {
-    return (
-      !this.$uiStore.splashScreenEnabled &&
-      !this.isLoading &&
-      this.$galleryStore.config !== null &&
-      this.$galleryStore.currentPath !== null
-    );
-  }
-
-  mounted() {
-    history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
-    this.fetchGalleryItems();
-    document.body.addEventListener("fullscreenchange", this.onFullscreenChange);
-  }
-
-  destroyed() {
-    document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
-  }
-
-  moveFocusToContentDiv() {
-    setTimeout(() => this.contentDiv?.focus());
-  }
-
-  @Watch("$route")
-  routeChanged(newRoute: Route, oldRoute: Route) {
-    if (!this.contentDiv) return;
-    this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop;
-    this.$nextTick(() => (this.contentDiv!.scrollTop = this.scrollPositions[newRoute.path]));
-    this.moveFocusToContentDiv();
-  }
-
-  fetchGalleryItems() {
-    this.isLoading = true;
-    this.$galleryStore
-      .fetchConfig()
-      .then(this.$uiStore.initFromConfig)
-      .then(this.$galleryStore.fetchGalleryItems)
-      .then(this.moveFocusToContentDiv)
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
-
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `${reason}`,
-      actionText: this.$t("snack.retry"),
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchGalleryItems,
-    });
-  }
-
-  isFullscreenActive(): boolean {
-    return Boolean(document.fullscreenElement);
-  }
+<script setup lang="ts">
+import LdLoading from '@/components/LdLoading.vue';
+import { useLdKeepFocus } from '@/services/ui/ldKeepFocus';
+import { useLdSaveScroll } from '@/services/ui/ldSaveScroll';
+import { useGalleryStore } from '@/store/galleryStore';
+import { useUiStore } from '@/store/uiStore';
+import { VueInstance } from '@vueuse/core';
+import { createToast } from 'mosha-vue-toastify';
+import { nextTick, ref } from 'vue';
+import LayoutLeft from './layout/left/LayoutLeft.vue';
+import LayoutTop from './layout/top/LayoutTop.vue';
+import SplashScreen from './SplashScreen.vue';
+
+const uiStore = useUiStore();
+const galleryStore = useGalleryStore();
+
+const content = ref<VueInstance>();
+const isLoading = ref(true);
+
+useLdSaveScroll(content);
+const { moveFocus } = useLdKeepFocus(content);
+
+history.replaceState({ ldgallery: 'ENTRYPOINT' }, '');
+fetchGalleryItems();
+
+function fetchGalleryItems() {
+  isLoading.value = true;
+  galleryStore
+    .fetchConfig()
+    .then(uiStore.initFromConfig)
+    .then(galleryStore.fetchGalleryItems)
+    .then(moveFocus)
+    .finally(() => (isLoading.value = false))
+    .catch(displayError);
+}
 
-  @Watch("$uiStore.fullscreen")
-  applyFullscreen(fullscreen: boolean) {
-    const isFullscreenActive = this.isFullscreenActive();
-    if (fullscreen && !isFullscreenActive) document.body.requestFullscreen();
-    else if (isFullscreenActive) document.exitFullscreen();
-  }
+function displayError(reason: unknown) {
+  createToast(String(reason), {
+    type: 'danger',
+    position: 'top-center',
+    timeout: 10000,
+    showIcon: true,
+    onClose: () => !isLoading.value && fetchGalleryItems(),
+  });
+}
 
-  onFullscreenChange() {
-    this.$uiStore.toggleFullscreen(this.isFullscreenActive());
-  }
+function validateSpashScreen() {
+  uiStore.validateSpashScreen();
+  nextTick(moveFocus);
 }
 </script>
 
 <style lang="scss" module>
-@import "~@/assets/scss/theme.scss";
+@import "~@/assets/scss/theme";
 
+:root {
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
+}
 :global(body),
 :global(html) {
+  font-family: $family-sans-serif;
   height: 100%;
   overflow: hidden;
   touch-action: none;
   background-color: $content-bgcolor;
-  --layout-top: #{$layout-top};
-  --layout-left: #{$layout-left};
 }
 .layout {
   position: fixed;
-  transition: all $transition-flex-expand linear;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
deleted file mode 100644
index ea61865..0000000
--- a/viewer/src/views/PanelLeft.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex-column" :class="$style.sidebar">
-    <ld-tag-input
-      :search-filters.sync="searchFilters"
-      :tags-index="$galleryStore.tagsIndex"
-      @onkeyenter-empty="search"
-    />
-    <ld-command-search @clear="clear" @search="search" />
-    <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully">
-      <ld-proposition
-        v-for="category in $galleryStore.tagsCategories"
-        :key="category.tag"
-        :category="$galleryStore.tagsIndex[category.tag]"
-        :show-category="$galleryStore.tagsCategories.length > 1"
-        :search-filters.sync="searchFilters"
-        :tags-index="category.index"
-        :current-tags="currentTags"
-      />
-    </div>
-    <h1 :class="$style.infoPanelTitleBar" class="flex title" @click="infoOpen = !infoOpen">
-      {{ $t("panelLeft.information.title") }}
-      <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
-    </h1>
-    <transition name="flex-expand">
-      <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { TagSearch } from "@/@types/tag";
-import Navigation from "@/services/navigation";
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { Dictionary, Route } from "vue-router/types/router";
-
-@Component
-export default class PanelLeft extends Vue {
-  searchFilters: TagSearch[] = [];
-  infoOpen: boolean = true;
-
-  mounted() {
-    this.restoreSearchFilters(this.$route);
-  }
-
-  clear() {
-    this.searchFilters = [];
-    this.search();
-  }
-
-  search() {
-    const lastDirectory = Navigation.getLastDirectory(this.$galleryStore.currentItemPath);
-    this.$router.push({ path: lastDirectory.path, query: this.serializeSearch() }).catch(err => {
-      if (err.name !== "NavigationDuplicated") throw err;
-    });
-  }
-
-  serializeSearch() {
-    let query: Dictionary<null> = {};
-    this.searchFilters.forEach(filter => (query[filter.display] = null));
-    return query;
-  }
-
-  get currentTags() {
-    return this.$galleryStore.currentItem?.tags ?? [];
-  }
-
-  @Watch("$route")
-  restoreSearchFilters(route: Route) {
-    const query = Object.keys(route.query);
-    if (query.length > 0) this.$galleryStore.search(query).then(search => (this.searchFilters = [...search]));
-  }
-}
-</script>
-
-<style lang="scss" module>
-@import "~@/assets/scss/theme.scss";
-
-.sidebar {
-  :global(.title) {
-    background-color: $proposed-category-bgcolor;
-    padding: 0.2em 0.5em;
-    margin: 0 0 1px 0;
-    font-variant: small-caps;
-    justify-content: space-between;
-    user-select: none;
-    > svg {
-      color: $link;
-      margin-top: 2px; // Fixes a vertical centering issue with the carret
-    }
-  }
-
-  .infoPanelTitleBar {
-    cursor: pointer;
-  }
-}
-
-.flexShrinkFully {
-  flex-shrink: 1000;
-}
-</style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
deleted file mode 100644
index 4e92f07..0000000
--- a/viewer/src/views/PanelTop.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="flex">
-    <ld-command :current-item-path="$galleryStore.currentItemPath" />
-    <ld-breadcrumb :current-item-path="$galleryStore.currentItemPath" :search-mode="$uiStore.searchMode" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class PanelTop extends Vue {}
-</script>
diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index 93d84a1..c6c2d09 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -1,62 +1,63 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
-  <b-loading v-if="isLoading" active />
-  <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
-    <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
-    <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" />
+  <LdLoading v-if="isFetching" />
+  <div
+    v-else-if="!error && data"
+    :class="$style.splashscreen"
+    class="scrollbar"
+  >
+    <LdMarkdown
+      :style="config.style"
+      class="flex-grow-1"
+      :markdown="data"
+    />
+    <button
+      tabindex="1"
+      autofocus
+      @click="emit('validation')"
+    >
+      {{ buttonAcknowledgeLabel }}
+    </button>
   </div>
 </template>
 
-<script lang="ts">
-import { SplashScreenConfig } from "@/@types/splashscreen";
-import { Markdown } from "@/components/async";
-import FetchWithCheck from "@/services/fetchWithCheck";
-import { TranslateResult } from "vue-i18n";
-import { Component, Emit, Vue } from "vue-property-decorator";
-
-@Component({
-  components: {
-    Markdown,
-  },
-})
-export default class SplashScreen extends Vue {
-  isLoading: boolean = true;
-  markdown: string | null = null;
+<script setup lang="ts">
+import { LdMarkdown } from '@/components/async';
+import LdLoading from '@/components/LdLoading.vue';
+import { useLdFetch } from '@/services/api/ldFetch';
+import { useUiStore } from '@/store/uiStore';
+import { computed, readonly } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-  get config(): SplashScreenConfig {
-    return this.$uiStore.splashScreenConfig!;
-  }
+const emit = defineEmits(['validation']);
 
-  created() {
-    this.fetchMarkdown();
-  }
+const { t } = useI18n();
+const uiStore = useUiStore();
 
-  // TODO: Identical to LdMarkdownViewer.vue, use composition with Vue3.
-  fetchMarkdown() {
-    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
-      .then(response => response.text())
-      .then(text => (this.markdown = text))
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
+const config = readonly(uiStore.splashScreenConfig ?? {});
 
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `${reason}`,
-      actionText: this.$t("snack.retry"),
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchMarkdown,
-    });
-  }
+const buttonAcknowledgeLabel = computed(() => config.buttonAcknowledgeLabel ?? t('splashScreen.button.acknowledge'));
+const itemResourceUrl = computed(() => `${process.env.VUE_APP_DATA_URL}${config.resource}?${config.acknowledgmentKey ?? ''}`);
 
-  get buttonAcknowledgeLabel(): TranslateResult {
-    return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
-  }
-
-  @Emit()
-  validation() {}
-}
+const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
 </script>
 
 <style lang="scss" module>
@@ -65,5 +66,10 @@ export default class SplashScreen extends Vue {
   flex-flow: column;
   align-items: center;
   padding: 32px;
+
+  button {
+    font-size: 1.5rem;
+    margin-top: 1em;
+  }
 }
 </style>
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
new file mode 100644
index 0000000..da9579f
--- /dev/null
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -0,0 +1,65 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div class="flex-column container-vh-centering">
+    <ItemThumbnail :item="item" />
+    <audio
+      :class="$style.player"
+      :src="itemResourceUrl"
+      preload="auto"
+      controls
+    >
+      <a
+        :download="itemFileName"
+        :href="itemResourceUrl"
+        v-text="t('download.download-file-fmt', [itemFileName])"
+      />
+    </audio>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AudioItem } from '@/@types/gallery';
+import { useNavigation } from '@/services/navigation';
+import { useItemResource } from '@/services/ui/ldItemResourceUrl';
+import { computed, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ItemThumbnail from '../ItemThumbnail.vue';
+
+const props = defineProps({
+  item: { type: Object as PropType<AudioItem>, required: true },
+});
+
+const { t } = useI18n();
+const navigation = useNavigation();
+
+const { itemResourceUrl } = useItemResource(props.item);
+const itemFileName = computed(() => navigation.getFileName(props.item));
+</script>
+
+<style lang="scss" module>
+.player {
+  width: 100%;
+  max-width: 500px;
+  margin-top: 1em;
+  text-align: center; // for fallback download link
+}
+</style>
diff --git a/viewer/src/views/item_handlers/DirectoryViewer.vue b/viewer/src/views/item_handlers/DirectoryViewer.vue
new file mode 100644
index 0000000..9b52fa8
--- /dev/null
+++ b/viewer/src/views/item_handlers/DirectoryViewer.vue
@@ -0,0 +1,42 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2022  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <GalleryTiles
+    :items="props.item.properties.items"
+    :noresult-message="t('directory.no-results')"
+  />
+</template>
+
+<script setup lang="ts">
+import { DirectoryItem } from '@/@types/gallery';
+import { useUiStore } from '@/store/uiStore';
+import GalleryTiles from '@/views/GalleryTiles.vue';
+import { PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  item: { type: Object as PropType<DirectoryItem>, required: true },
+});
+
+const { t } = useI18n();
+const uiStore = useUiStore();
+
+uiStore.toggleFullscreen(false);
+</script>
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue
new file mode 100644
index 0000000..6562bee
--- /dev/null
+++ b/viewer/src/views/item_handlers/DownloadViewer.vue
@@ -0,0 +1,66 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be use