1+ import { useTranslation } from 'next-i18next' ;
12import { serverSideTranslations } from 'next-i18next/serverSideTranslations' ;
23
34import React , { useEffect , useState } from "react" ;
45import QRCode from "react-qr-code" ;
56
7+ import Alert from '../components/Alert' ;
68import Card from '../components/Card' ;
79import Logo from "../components/Logo" ;
810
911function Pass ( ) : JSX . Element {
10- const [ fragment , setFragment ] = useState < string > ( undefined ) ;
12+ const { t } = useTranslation ( [ 'common' , 'index' ] ) ;
1113
12- function closeViewer ( ) {
13- setFragment ( undefined ) ;
14- window . location . replace ( '/' ) ;
15- }
14+ const [ fragment , setFragment ] = useState < string > ( undefined ) ;
15+ const [ view , setView ] = useState < boolean > ( true ) ;
1616
1717 useEffect ( ( ) => {
1818 const rawFragment = window . location . hash . substring ( 1 ) ;
19- const decodedFragment = Buffer . from ( rawFragment , 'base64' ) . toString ( ) ;
20- setFragment ( decodedFragment ) ;
2119
22- document . addEventListener ( 'visibilitychange' , ( ) => {
23- if ( document . hidden ) {
24- closeViewer ( ) ;
20+ if ( ! rawFragment ) {
21+ setView ( false ) ;
22+ }
23+
24+ const resizeTimeout = window . setTimeout ( ( ) => {
25+ if ( rawFragment ) {
26+ window . location . replace ( '/pass/note' ) ;
2527 }
26- } ) ;
28+ } , 200 ) ;
2729
28- window . addEventListener ( 'blur' , closeViewer ) ;
29- window . addEventListener ( 'beforeunload' , closeViewer ) ;
30- window . addEventListener ( 'pagehide' , closeViewer ) ;
30+ window . addEventListener ( 'resize' , ( ) => {
31+ clearTimeout ( resizeTimeout ) ;
32+ const decodedFragment = Buffer . from ( rawFragment , 'base64' ) . toString ( ) ;
33+ setFragment ( decodedFragment ) ;
34+ } ) ;
3135 } , [ ] ) ;
3236
3337 return (
34- < div className = "py-6 flex flex-col space-y-5 items-center" >
38+ < div className = "py-5 flex flex-col space-y-5 md:w-2/3 xl:w-2/5 md:mx-auto items-center justify-center px-5 " >
3539 < Logo />
3640 < div className = "flex flex-row items-center" >
3741 {
3842 fragment &&
3943 < Card content = {
4044 < div className = "p-2 bg-white rounded-md" >
41- < QRCode value = { fragment } size = { 280 } level = "L" />
45+ < QRCode value = { fragment } size = { 280 } level = "L" />
4246 </ div >
4347 } />
4448 }
49+ {
50+ ! view &&
51+ < Alert isWarning = { true } message = { t ( 'index:viewerNote' ) } onClose = { undefined } />
52+ }
4553 </ div >
4654 </ div >
4755 )
@@ -50,7 +58,7 @@ function Pass(): JSX.Element {
5058export async function getStaticProps ( { locale } ) {
5159 return {
5260 props : {
53- ...( await serverSideTranslations ( locale , [ 'common' ] ) ) ,
61+ ...( await serverSideTranslations ( locale , [ 'index' , ' common'] ) ) ,
5462 } ,
5563 } ;
5664}
0 commit comments