viewer: fullscreen on double-click is now true fullscreen. Also works on web-app

1 files changed, 15 insertions, 0 deletions

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c09e99a..bcd2249 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -49,6 +49,11 @@ export default class MainLayout extends Vue {
   mounted() {
     history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
     this.fetchGalleryItems();
+    document.body.addEventListener("fullscreenchange", this.onFullscreenChange);
+  }
+
+  destroyed() {
+    document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
   }
 
   @Watch("$route")
@@ -77,6 +82,16 @@ export default class MainLayout extends Vue {
       onAction: this.fetchGalleryItems,
     });
   }
+
+  @Watch("$uiStore.fullscreen")
+  applyFullscreen(fullscreen: boolean) {
+    if (fullscreen && !document.fullscreen) document.body.requestFullscreen();
+    else if (document.fullscreen) document.exitFullscreen();
+  }
+
+  onFullscreenChange() {
+    this.$uiStore.toggleFullscreen(document.fullscreen);
+  }
 }
 </script>