From 3b04e24a6bbe17cd677c6a7ea48df10da52b783d Mon Sep 17 00:00:00 2001
From: Marvin Sextro <marvin.sextro@gmail.com>
Date: Wed, 29 Dec 2021 00:53:31 +0100
Subject: [PATCH] Improve QR code viewer

---
 pages/pass.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/pages/pass.tsx b/pages/pass.tsx
index 420ad6e..863a154 100644
--- a/pages/pass.tsx
+++ b/pages/pass.tsx
@@ -2,17 +2,37 @@ import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
 
 import React, {useEffect, useState} from "react";
 import QRCode from "react-qr-code";
+
 import Card from '../components/Card';
 import Logo from "../components/Logo";
 
 function Pass(): JSX.Element {
     const [fragment, setFragment] = useState<string>(undefined);
 
+    function closeViewer() {
+        setFragment(undefined);
+        window.location.href = '/';
+    }
+
     useEffect(() => {
         const rawFragment = window.location.hash.substring(1);
         const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
         setFragment(decodedFragment);
-    }, [fragment]);
+
+        window.location.replace('#');
+        if (typeof window.history.replaceState == 'function') {
+            const href = window.location.href;
+            history.replaceState({}, '', href.slice(0, href.lastIndexOf('/')));
+        }
+
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                closeViewer();
+            }
+        });
+
+        window.addEventListener('blur', closeViewer);
+    }, []);
 
     return (
         <div className="py-6 flex flex-col space-y-5 items-center">