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

2 files changed, 16 insertions, 1 deletions

diff --git a/viewer/public/index.html b/viewer/public/index.html
index cadbc72..4b7e26d 100644
--- a/viewer/public/index.html
+++ b/viewer/public/index.html
@@ -24,7 +24,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0">
   <meta name="generator" content="ldgallery">
 
   <link rel="manifest" href="manifest.json">
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>