PWAInstallationGuide added

web/src/components/App/PWAInstallationGuide/IOSShareIcon.jsx

@@ -0,0 +1,21 @@
+export default function IOSShareIcon() {
+  return (
+    <svg
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+      width={23}
+      x='0px'
+      y='0px'
+      viewBox='0 0 1000 1000'
+      enableBackground='new 0 0 1000 1000'
+      xmlSpace='preserve'
+      fill='#005FF2'
+    >
+      <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+      <g>
+        <path d='M780,290H640v35h140c19.3,0,35,15.7,35,35v560c0,19.3-15.7,35-35,35H220c-19.2,0-35-15.7-35-35V360c0-19.2,15.7-35,35-35h140v-35H220c-38.7,0-70,31.3-70,70v560c0,38.7,31.3,70,70,70h560c38.7,0,70-31.3,70-70V360C850,321.3,818.7,290,780,290z M372.5,180l110-110.2v552.7c0,9.6,7.9,17.5,17.5,17.5c9.6,0,17.5-7.9,17.5-17.5V69.8l110,110c3.5,3.5,7.9,5,12.5,5s9-1.7,12.5-5c6.8-6.8,6.8-17.9,0-24.7l-140-140c-6.8-6.8-17.9-6.8-24.7,0l-140,140c-6.8,6.8-6.8,17.9,0,24.7C354.5,186.8,365.5,186.8,372.5,180z' />
+      </g>
+    </svg>
+  )
+}

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

@@ -0,0 +1,44 @@
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import { useState } from 'react'
+
+import IOSShareIcon from './IOSShareIcon'
+import { StyledWrapper, StyledHeader, StyledContent } from './style'
+
+export function PWAInstallationGuide() {
+  const [isOpen, setIsOpen] = useState(!JSON.parse(localStorage.getItem('pwaNotificationIsClosed')))
+
+  return (
+    <StyledWrapper isOpen={isOpen}>
+      <StyledHeader>
+        <img src='/apple-icon-180.png' width={50} alt='ts-icon' />
+        Install application
+        <IconButton
+          size='small'
+          aria-label='close'
+          color='inherit'
+          onClick={() => {
+            setIsOpen(false)
+            localStorage.setItem('pwaNotificationIsClosed', true)
+          }}
+        >
+          <CloseIcon fontSize='small' />
+        </IconButton>
+      </StyledHeader>
+
+      <StyledContent>
+        <p>Install the app on your device to easily access it anytime. No app store. No download.</p>
+
+        <p>VLC button will be added to open video instantly on the phone</p>
+
+        <p>
+          1. Tap on <IOSShareIcon />
+        </p>
+
+        <p>
+          2. Select <span>Add to Home Screen</span>
+        </p>
+      </StyledContent>
+    </StyledWrapper>
+  )
+}

web/src/components/App/PWAInstallationGuide/style.jsx

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components'
+
+export const StyledWrapper = styled.div`
+  ${({ isOpen }) => css`
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    background: #eeeef0;
+    width: calc(100% - 20px);
+    z-index: 9999;
+    border-radius: 10px;
+    transition: all 0.3s;
+    color: #000;
+
+    ${isOpen
+      ? css`
+          opacity: 1;
+          transform: translate(-50%, 0);
+        `
+      : css`
+          transform: translate(-50%, 150%);
+          opacity: 0;
+          pointer-events: none;
+        `}
+
+    > :not(:last-child) {
+      border-bottom: 1px solid #dadadc;
+    }
+
+    > * {
+      padding: 20px;
+    }
+  `}
+`
+
+export const StyledHeader = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: min-content 1fr;
+  gap: 20px;
+  align-items: center;
+  font-weight: 700;
+
+  img {
+    border-radius: 5px;
+  }
+`
+
+export const StyledContent = styled.div`
+  > :not(:last-child) {
+    margin-bottom: 25px;
+  }
+
+  span {
+    background: #fefcfd;
+    padding: 5px;
+    border-radius: 5px;
+  }
+`

web/src/components/App/index.jsx

@@ -18,14 +18,18 @@ import useChangeLanguage from 'utils/useChangeLanguage'
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'
 import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'
 import { useQuery } from 'react-query'
-import { getTorrents } from 'utils/Utils'
+import { getTorrents, isStandaloneApp } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
 import { lightTheme, THEME_MODES, useMaterialUITheme } from 'style/materialUISetup'
 import getStyledComponentsTheme from 'style/getStyledComponentsTheme'
+import checkIsIOS from 'utils/checkIsIOS'
 
 import { AppWrapper, AppHeader, HeaderToggle, StyledIconButton } from './style'
 import Sidebar from './Sidebar'
 import PWAFooter from './PWAFooter'
+import { PWAInstallationGuide } from './PWAInstallationGuide'
+
+const snackbarIsClosed = JSON.parse(localStorage.getItem('snackbarIsClosed'))
 
 export const DarkModeContext = createContext()
 
@@ -123,7 +127,7 @@ export default function App() {
                   {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
                 </MuiThemeProvider>
 
-                {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+                {snackbarIsClosed ? checkIsIOS() && !isStandaloneApp && <PWAInstallationGuide /> : <DonateSnackbar />}
               </AppWrapper>
             </Div100vh>
           </StyledComponentsThemeProvider>

web/src/utils/checkIsIOS.jsx

@@ -0,0 +1,5 @@
+export default () => {
+  if (typeof window === `undefined` || typeof navigator === `undefined`) return false
+
+  return /iPhone|iPad|iPod/i.test(navigator.userAgent || navigator.vendor)
+}