more standalone styles added

web/public/index.html

@@ -4,10 +4,11 @@
     <meta charset="utf-8">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="msapplication-TileColor" content="#00a572">
+    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' >
     <meta name="theme-color" content="#ffffff">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&amp;display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
     <meta name="description" content="TorrServer - torrent to http stream">
     <title>TorrServer MatriX</title>
     <link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png">

web/src/components/About/index.jsx

@@ -3,12 +3,13 @@ import { useEffect, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import InfoIcon from '@material-ui/icons/Info'
-import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import { useTranslation } from 'react-i18next'
 import { useMediaQuery } from '@material-ui/core'
 import { echoHost } from 'utils/Hosts'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { isStandaloneApp } from 'utils/Utils'
 
 import LinkComponent from './LinkComponent'
 import { DialogWrapper, HeaderSection, ThanksSection, Section, FooterSection } from './style'
@@ -24,12 +25,22 @@ export default function AboutDialog() {
 
   return (
     <>
-      <ListItem button key='Settings' onClick={() => setOpen(true)}>
+      <StyledMenuButtonWrapper button key='Settings' onClick={() => setOpen(true)}>
+        {isStandaloneApp ? (
+          <>
+            <InfoIcon />
+            <div>{t('About')}</div>
+          </>
+        ) : (
+          <>
             <ListItemIcon>
               <InfoIcon />
             </ListItemIcon>
+
             <ListItemText primary={t('About')} />
-      </ListItem>
+          </>
+        )}
+      </StyledMenuButtonWrapper>
 
       <Dialog
         open={open}

web/src/components/Add/index.jsx

@@ -2,8 +2,9 @@ import { useState } from 'react'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import ListItemText from '@material-ui/core/ListItemText'
-import ListItem from '@material-ui/core/ListItem'
 import { useTranslation } from 'react-i18next'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { isStandaloneApp } from 'utils/Utils'
 
 import AddDialog from './AddDialog'
 
@@ -15,12 +16,22 @@ export default function AddDialogButton({ isOffline, isLoading }) {
 
   return (
     <div>
-      <ListItem disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+        {isStandaloneApp ? (
+          <>
+            <LibraryAddIcon />
+            <div>{t('AddFromLink')}</div>
+          </>
+        ) : (
+          <>
             <ListItemIcon>
               <LibraryAddIcon />
             </ListItemIcon>
+
             <ListItemText primary={t('AddFromLink')} />
-      </ListItem>
+          </>
+        )}
+      </StyledMenuButtonWrapper>
 
       {isDialogOpen && <AddDialog handleClose={handleClose} />}
     </div>

web/src/components/App/PWAFooter/index.jsx

@@ -0,0 +1,31 @@
+import { CreditCard as CreditCardIcon } from '@material-ui/icons'
+import { useTranslation } from 'react-i18next'
+import CloseServer from 'components/CloseServer'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import AddDialogButton from 'components/Add'
+import AboutDialog from 'components/About'
+import SettingsDialogButton from 'components/Settings'
+
+import StyledPWAFooter from './style'
+
+export default function PWAFooter({ setIsDonationDialogOpen, isOffline, isLoading }) {
+  const { t } = useTranslation()
+
+  return (
+    <StyledPWAFooter>
+      <CloseServer isOffline={isOffline} isLoading={isLoading} />
+
+      <StyledMenuButtonWrapper onClick={() => setIsDonationDialogOpen(true)}>
+        <CreditCardIcon />
+
+        <div>{t('Donate')}</div>
+      </StyledMenuButtonWrapper>
+
+      <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
+      <AboutDialog />
+
+      <SettingsDialogButton isOffline={isOffline} isLoading={isLoading} />
+    </StyledPWAFooter>
+  )
+}

web/src/components/App/PWAFooter/style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export default styled.div`
+  background: #575757;
+  color: #fff;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 90px;
+
+  display: none;
+
+  @media screen and (display-mode: standalone) {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    justify-items: center;
+  }
+`

web/src/components/App/index.jsx

@@ -1,7 +1,6 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { createContext, useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
 import {
   Menu as MenuIcon,
   Close as CloseIcon,
@@ -21,11 +20,12 @@ import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-component
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
+import { lightTheme, THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
+import getStyledComponentsTheme from 'style/getStyledComponentsTheme'
 
-import { AppWrapper, AppHeader, HeaderToggle } from './style'
+import { AppWrapper, AppHeader, HeaderToggle, StyledIconButton } from './style'
 import Sidebar from './Sidebar'
-import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup'
+import PWAFooter from './PWAFooter'
-import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
 
 export const DarkModeContext = createContext()
 
@@ -63,14 +63,9 @@ export default function App() {
             <Div100vh>
               <AppWrapper>
                 <AppHeader>
-                  <IconButton
+                  <StyledIconButton edge='start' color='inherit' onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
-                    edge='start'
-                    color='inherit'
-                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                    style={{ marginRight: '6px' }}
-                  >
                     {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-                  </IconButton>
+                  </StyledIconButton>
 
                   <Typography variant='h6' noWrap>
                     TorrServer {torrServerVersion}
@@ -118,6 +113,12 @@ export default function App() {
 
                 <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
+                <PWAFooter
+                  isOffline={isOffline}
+                  isLoading={isLoading}
+                  setIsDonationDialogOpen={setIsDonationDialogOpen}
+                />
+
                 <MuiThemeProvider theme={lightTheme}>
                   {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
                 </MuiThemeProvider>

web/src/components/App/style.js

@@ -1,3 +1,4 @@
+import { IconButton } from '@material-ui/core'
 import { rgba } from 'polished'
 import styled, { css } from 'styled-components'
 
@@ -15,6 +16,12 @@ export const AppWrapper = styled.div`
     grid-template-areas:
       'head head'
       'side content';
+
+    @media screen and (display-mode: standalone) {
+      grid-template-columns: 0 1fr;
+      grid-template-rows: 90px 1fr 90px;
+      height: 100vh;
+    }
   `}
 `
 
@@ -36,6 +43,15 @@ export const AppHeader = styled.div`
     box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
     padding: 0 16px;
     z-index: 3;
+
+    @media screen and (display-mode: standalone) {
+      grid-template-columns: max-content 1fr;
+      align-items: end;
+      padding: 7px 16px;
+      position: fixed;
+      width: 100%;
+      height: 90px;
+    }
   `}
 `
 export const AppSidebarStyle = styled.div`
@@ -58,6 +74,10 @@ export const AppSidebarStyle = styled.div`
     svg {
       fill: ${sidebarFillColor};
     }
+
+    @media screen and (display-mode: standalone) {
+      display: none;
+    }
   `}
 `
 export const TorrentListWrapper = styled.div`
@@ -83,6 +103,11 @@ export const TorrentListWrapper = styled.div`
   @media (max-width: 700px) {
     grid-template-columns: 1fr;
   }
+
+  @media screen and (display-mode: standalone) {
+    height: calc(100vh - 90px);
+    padding-bottom: 105px;
+  }
 `
 
 export const HeaderToggle = styled.div`
@@ -117,3 +142,11 @@ export const HeaderToggle = styled.div`
     }
   `}
 `
+
+export const StyledIconButton = styled(IconButton)`
+  margin-right: 6px;
+
+  @media screen and (display-mode: standalone) {
+    display: none;
+  }
+`

web/src/components/CloseServer.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
-import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { Button, Dialog, DialogActions, DialogTitle, ListItemIcon, ListItemText } from '@material-ui/core'
 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/StyledMenuButtonWrapper'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()
@@ -12,13 +14,22 @@ export default function CloseServer({ isOffline, isLoading }) {
 
   return (
     <>
-      <ListItem disabled={isOffline || isLoading} button key={t('CloseServer')} onClick={openDialog}>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button key={t('CloseServer')} onClick={openDialog}>
+        {isStandaloneApp ? (
+          <>
+            <PowerSettingsNewIcon />
+            <div>{t('CloseServer')}</div>
+          </>
+        ) : (
+          <>
             <ListItemIcon>
               <PowerSettingsNewIcon />
             </ListItemIcon>
 
             <ListItemText primary={t('CloseServer')} />
-      </ListItem>
+          </>
+        )}
+      </StyledMenuButtonWrapper>
 
       <Dialog open={open} onClose={closeDialog}>
         <DialogTitle>{t('CloseServer?')}</DialogTitle>

web/src/components/Settings/index.jsx

@@ -1,9 +1,10 @@
-import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import { useState } from 'react'
 import SettingsIcon from '@material-ui/icons/Settings'
 import { useTranslation } from 'react-i18next'
+import StyledMenuButtonWrapper from 'style/StyledMenuButtonWrapper'
+import { isStandaloneApp } from 'utils/Utils'
 
 import SettingsDialog from './SettingsDialog'
 
@@ -16,12 +17,22 @@ export default function SettingsDialogButton({ isOffline, isLoading }) {
 
   return (
     <div>
-      <ListItem disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+        {isStandaloneApp ? (
+          <>
+            <SettingsIcon />
+            <div>{t('SettingsDialog.Settings')}</div>
+          </>
+        ) : (
+          <>
             <ListItemIcon>
               <SettingsIcon />
             </ListItemIcon>
+
             <ListItemText primary={t('SettingsDialog.Settings')} />
-      </ListItem>
+          </>
+        )}
+      </StyledMenuButtonWrapper>
 
       {isDialogOpen && <SettingsDialog handleClose={handleClose} />}
     </div>

web/src/style/GlobalStyle.js

@@ -15,6 +15,17 @@ export default createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     letter-spacing: -0.1px;
+    -webkit-tap-highlight-color: transparent;
+
+    @media screen and (display-mode: standalone) {
+      height: 100vh;
+    }
+  }
+
+  header {
+    @media screen and (display-mode: standalone) {
+      padding-top: 30px;
+    }
   }
 
   button {

web/src/style/StyledMenuButtonWrapper.js

@@ -0,0 +1,14 @@
+import { ListItem } from '@material-ui/core'
+import styled from 'styled-components'
+
+export default styled(ListItem).attrs({ button: true })`
+  @media screen and (display-mode: standalone) {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  }
+`

web/src/style/materialUISetup.js

@@ -1,4 +1,4 @@
-import { createMuiTheme, useMediaQuery } from '@material-ui/core'
+import { createTheme, useMediaQuery } from '@material-ui/core'
 import { useEffect, useMemo, useState } from 'react'
 
 import { mainColors } from './colors'
@@ -7,7 +7,7 @@ export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
 
 const typography = { fontFamily: 'Open Sans, sans-serif' }
 
-export const darkTheme = createMuiTheme({
+export const darkTheme = createTheme({
   typography,
   palette: {
     type: THEME_MODES.DARK,
@@ -15,7 +15,7 @@ export const darkTheme = createMuiTheme({
     secondary: { main: mainColors.dark.secondary },
   },
 })
-export const lightTheme = createMuiTheme({
+export const lightTheme = createTheme({
   typography,
   palette: {
     type: THEME_MODES.LIGHT,
@@ -45,7 +45,7 @@ export const useMaterialUITheme = () => {
 
   const muiTheme = useMemo(
     () =>
-      createMuiTheme({
+      createTheme({
         typography,
         palette: {
           type: theme,

web/src/utils/Utils.js

@@ -65,3 +65,5 @@ export const getTorrents = async () => {
     throw new Error(null)
   }
 }
+
+export const isStandaloneApp = window.matchMedia('screen and (display-mode: standalone)').matches