more standalone styles added

2025-12-19 13:36:09 +05:00 · 2022-06-19 17:50:45 +03:00
parent 33563b97c4
commit 23304ee821
13 changed files with 199 additions and 44 deletions
--- a/web/public/index.html
+++ b/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">
--- a/web/src/components/About/index.jsx
+++ b/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)}>
-        <ListItemIcon>
-          <InfoIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('About')} />
-      </ListItem>
+      <StyledMenuButtonWrapper button key='Settings' onClick={() => setOpen(true)}>
+        {isStandaloneApp ? (
+          <>
+            <InfoIcon />
+            <div>{t('About')}</div>
+          </>
+        ) : (
+          <>
+            <ListItemIcon>
+              <InfoIcon />
+            </ListItemIcon>
+
+            <ListItemText primary={t('About')} />
+          </>
+        )}
+      </StyledMenuButtonWrapper>

      <Dialog
        open={open}
--- a/web/src/components/Add/index.jsx
+++ b/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}>
-        <ListItemIcon>
-          <LibraryAddIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('AddFromLink')} />
-      </ListItem>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+        {isStandaloneApp ? (
+          <>
+            <LibraryAddIcon />
+            <div>{t('AddFromLink')}</div>
+          </>
+        ) : (
+          <>
+            <ListItemIcon>
+              <LibraryAddIcon />
+            </ListItemIcon>
+
+            <ListItemText primary={t('AddFromLink')} />
+          </>
+        )}
+      </StyledMenuButtonWrapper>

      {isDialogOpen && <AddDialog handleClose={handleClose} />}
    </div>
--- a/web/src/components/App/PWAFooter/index.jsx
+++ b/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>
+  )
+}
--- a/web/src/components/App/PWAFooter/style.js
+++ b/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;
+  }
+`
--- a/web/src/components/App/index.jsx
+++ b/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 getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
+import PWAFooter from './PWAFooter'

 export const DarkModeContext = createContext()

@@ -63,14 +63,9 @@ export default function App() {
            <Div100vh>
              <AppWrapper>
                <AppHeader>
-                  <IconButton
-                    edge='start'
-                    color='inherit'
-                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                    style={{ marginRight: '6px' }}
-                  >
+                  <StyledIconButton edge='start' color='inherit' onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
                    {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>
--- a/web/src/components/App/style.js
+++ b/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;
+  }
+`
--- a/web/src/components/CloseServer.jsx
+++ b/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}>
-        <ListItemIcon>
-          <PowerSettingsNewIcon />
-        </ListItemIcon>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button key={t('CloseServer')} onClick={openDialog}>
+        {isStandaloneApp ? (
+          <>
+            <PowerSettingsNewIcon />
+            <div>{t('CloseServer')}</div>
+          </>
+        ) : (
+          <>
+            <ListItemIcon>
+              <PowerSettingsNewIcon />
+            </ListItemIcon>

-        <ListItemText primary={t('CloseServer')} />
-      </ListItem>
+            <ListItemText primary={t('CloseServer')} />
+          </>
+        )}
+      </StyledMenuButtonWrapper>

      <Dialog open={open} onClose={closeDialog}>
        <DialogTitle>{t('CloseServer?')}</DialogTitle>
--- a/web/src/components/Settings/index.jsx
+++ b/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}>
-        <ListItemIcon>
-          <SettingsIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('SettingsDialog.Settings')} />
-      </ListItem>
+      <StyledMenuButtonWrapper disabled={isOffline || isLoading} button onClick={handleClickOpen}>
+        {isStandaloneApp ? (
+          <>
+            <SettingsIcon />
+            <div>{t('SettingsDialog.Settings')}</div>
+          </>
+        ) : (
+          <>
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+
+            <ListItemText primary={t('SettingsDialog.Settings')} />
+          </>
+        )}
+      </StyledMenuButtonWrapper>

      {isDialogOpen && <SettingsDialog handleClose={handleClose} />}
    </div>
--- a/web/src/style/GlobalStyle.js
+++ b/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 {
--- a/web/src/style/StyledMenuButtonWrapper.js
+++ b/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;
+  }
+`
--- a/web/src/style/materialUISetup.js
+++ b/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,
--- a/web/src/utils/Utils.js
+++ b/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