pwa footer toggles modals

web/src/components/About/index.jsx

@@ -9,6 +9,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { echoHost } from 'utils/Hosts'
 import { StyledDialog, StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { isStandaloneApp } from 'utils/Utils'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 import LinkComponent from './LinkComponent'
 import { DialogWrapper, HeaderSection, ThanksSection, Section, FooterSection } from './style'
@@ -22,6 +23,9 @@ export default function AboutDialog() {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
   }, [])
 
+  const onClose = () => setOpen(false)
+  const ref = useOnStandaloneAppOutsideClick(onClose)
+
   return (
     <>
       <StyledMenuButtonWrapper button key='Settings' onClick={() => setOpen(true)}>
@@ -43,11 +47,11 @@ export default function AboutDialog() {
 
       <StyledDialog
         open={open}
-        onClose={() => setOpen(false)}
+        onClose={onClose}
         aria-labelledby='form-dialog-title'
         fullScreen={fullScreen}
         maxWidth='xl'
-        hideBackdrop={isStandaloneApp}
+        ref={ref}
       >
         <DialogWrapper>
           <HeaderSection>
@@ -83,7 +87,7 @@ export default function AboutDialog() {
           </div>
 
           <FooterSection>
-            <Button onClick={() => setOpen(false)} color='primary' variant='contained'>
+            <Button onClick={onClose} color='primary' variant='contained'>
               {t('Close')}
             </Button>
           </FooterSection>

web/src/components/Add/AddDialog.jsx

@@ -9,10 +9,11 @@ import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
-import { getTorrents, isStandaloneApp } from 'utils/Utils'
+import { getTorrents } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
 import { ButtonWrapper } from 'style/DialogStyles'
 import { StyledDialog, StyledHeader } from 'style/CustomMaterialUiStyles'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 import { checkImageURL, getMoviePosters, checkTorrentSource, parseTorrentTitle } from './helpers'
 import { Content } from './style'
@@ -46,6 +47,8 @@ export default function AddDialog({
   const [isCustomTitleEnabled, setIsCustomTitleEnabled] = useState(false)
   const [currentSourceHash, setCurrentSourceHash] = useState()
 
+  const ref = useOnStandaloneAppOutsideClick(handleClose)
+
   const { data: torrents } = useQuery('torrents', getTorrents, { retry: 1, refetchInterval: 1000 })
 
   useEffect(() => {
@@ -223,14 +226,7 @@ export default function AddDialog({
   }
 
   return (
-    <StyledDialog
+    <StyledDialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md' ref={ref}>
-      open
-      onClose={handleClose}
-      fullScreen={fullScreen}
-      fullWidth
-      maxWidth='md'
-      hideBackdrop={isStandaloneApp}
-    >
       <StyledHeader>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</StyledHeader>
 
       <Content isEditMode={isEditMode}>

web/src/components/CloseServer.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
-import { Button, Dialog, DialogActions, DialogTitle, ListItemIcon, ListItemText } from '@material-ui/core'
+import { Button, DialogActions, DialogTitle, ListItemIcon, ListItemText } from '@material-ui/core'
+import { StyledDialog, StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
 import { shutdownHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { isStandaloneApp } from 'utils/Utils'
-import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()
@@ -12,6 +13,8 @@ export default function CloseServer({ isOffline, isLoading }) {
   const closeDialog = () => setOpen(false)
   const openDialog = () => setOpen(true)
 
+  const ref = useOnStandaloneAppOutsideClick(closeDialog)
+
   return (
     <>
       <StyledMenuButtonWrapper disabled={isOffline || isLoading} button key={t('CloseServer')} onClick={openDialog}>
@@ -31,7 +34,7 @@ export default function CloseServer({ isOffline, isLoading }) {
         )}
       </StyledMenuButtonWrapper>
 
-      <Dialog open={open} onClose={closeDialog}>
+      <StyledDialog open={open} onClose={closeDialog} ref={ref}>
         <DialogTitle>{t('CloseServer?')}</DialogTitle>
         <DialogActions>
           <Button variant='outlined' onClick={closeDialog} color='secondary'>
@@ -50,7 +53,7 @@ export default function CloseServer({ isOffline, isLoading }) {
             {t('TurnOff')}
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
     </>
   )
 }

web/src/components/Donate/DonateDialog.jsx

@@ -1,5 +1,4 @@
 import ListItem from '@material-ui/core/ListItem'
-import Dialog from '@material-ui/core/Dialog'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogActions from '@material-ui/core/DialogActions'
@@ -7,15 +6,18 @@ import List from '@material-ui/core/List'
 import ButtonGroup from '@material-ui/core/ButtonGroup'
 import Button from '@material-ui/core/Button'
 import { useTranslation } from 'react-i18next'
+import { StyledDialog } from 'style/CustomMaterialUiStyles'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 const donateFrame =
   '<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="320" height="320" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
 
 export default function DonateDialog({ onClose }) {
   const { t } = useTranslation()
+  const ref = useOnStandaloneAppOutsideClick(onClose)
 
   return (
-    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='xs'>
+    <StyledDialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth maxWidth='xs' ref={ref}>
       <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
       <DialogContent>
         <List>
@@ -38,6 +40,6 @@ export default function DonateDialog({ onClose }) {
           Ok
         </Button>
       </DialogActions>
-    </Dialog>
+    </StyledDialog>
   )
 }

web/src/components/Settings/SettingsDialog.jsx

@@ -11,7 +11,7 @@ import Tab from '@material-ui/core/Tab'
 import SwipeableViews from 'react-swipeable-views'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
-import { isStandaloneApp } from 'utils/Utils'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 import { SettingsHeader, FooterSection, Content } from './style'
 import defaultSettings from './defaultSettings'
@@ -37,6 +37,8 @@ export default function SettingsDialog({ handleClose }) {
     })
   }, [])
 
+  const ref = useOnStandaloneAppOutsideClick(handleClose)
+
   const handleSave = () => {
     handleClose()
     const sets = JSON.parse(JSON.stringify(settings))
@@ -83,14 +85,7 @@ export default function SettingsDialog({ handleClose }) {
   const handleChangeIndex = index => setSelectedTab(index)
 
   return (
-    <StyledDialog
+    <StyledDialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md' ref={ref}>
-      open
-      onClose={handleClose}
-      fullScreen={fullScreen}
-      fullWidth
-      maxWidth='md'
-      hideBackdrop={isStandaloneApp}
-    >
       <SettingsHeader>
         <div>{t('SettingsDialog.Settings')}</div>
         <FormControlLabel

web/src/components/TorrentCard/index.jsx

@@ -5,7 +5,7 @@ import {
   Close as CloseIcon,
   Delete as DeleteIcon,
 } from '@material-ui/icons'
-import { getPeerString, humanizeSize, humanizeSpeed, isStandaloneApp, removeRedundantCharacters } from 'utils/Utils'
+import { getPeerString, humanizeSize, humanizeSpeed, removeRedundantCharacters } from 'utils/Utils'
 import { playlistTorrHost, torrentsHost } from 'utils/Hosts'
 import { NoImageIcon } from 'icons'
 import DialogTorrentDetailsContent from 'components/DialogTorrentDetailsContent'
@@ -129,7 +129,6 @@ const Torrent = ({ torrent }) => {
         fullWidth
         maxWidth='xl'
         TransitionComponent={Transition}
-        hideBackdrop={isStandaloneApp}
       >
         <DialogTorrentDetailsContent closeDialog={closeDetailedInfo} torrent={torrent} />
       </StyledDialog>

web/src/style/CustomMaterialUiStyles.js

@@ -3,6 +3,7 @@ import Dialog from '@material-ui/core/Dialog'
 import { pwaFooterHeight } from 'components/App/PWAFooter/style'
 import styled from 'styled-components'
 import { Header } from 'style/DialogStyles'
+import { isStandaloneApp } from 'utils/Utils'
 
 export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })`
   @media screen and (display-mode: standalone) {
@@ -16,7 +17,9 @@ export const StyledMenuButtonWrapper = styled(ListItem).attrs({ button: true })`
   }
 `
 
-export const StyledDialog = styled(Dialog)`
+export const StyledDialog = styled(Dialog).attrs({
+  ...(isStandaloneApp && { hideBackdrop: true, transitionDuration: 0 }),
+})`
   @media screen and (display-mode: standalone) {
     margin-bottom: ${pwaFooterHeight}px;
 

web/src/utils/useOnStandaloneAppOutsideClick.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react'
+import { isStandaloneApp } from 'utils/Utils'
+
+export default function useOnStandaloneAppOutsideClick(onClickOutside) {
+  const ref = useRef()
+
+  useEffect(() => {
+    if (!isStandaloneApp) return
+
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside && onClickOutside()
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside, true)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true)
+    }
+  })
+
+  return ref
+}