added rpc polling time selector

frontend/src/atoms/rpc.ts

@@ -1,4 +1,4 @@
-import { selector } from 'recoil'
+import { atom, selector } from 'recoil'
 import { RPCClient } from '../lib/rpcClient'
 import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
 
@@ -12,3 +12,12 @@ export const rpcClientState = selector({
     ),
   dangerouslyAllowMutability: true,
 })
+
+export const rpcPollingTimeState = atom({
+  key: 'rpcPollingTimeState',
+  default: Number(localStorage.getItem('rpc-polling-time')) || 1000,
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('rpc-polling-time', a.toString()))
+  ]
+})

frontend/src/components/Footer.tsx

@@ -1,15 +1,15 @@
+import DownloadIcon from '@mui/icons-material/Download'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import { AppBar, Chip, Divider, Toolbar } from '@mui/material'
 import { Suspense } from 'react'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
+import { totalDownloadSpeedState } from '../atoms/ui'
 import { useI18n } from '../hooks/useI18n'
+import { formatSpeedMiB } from '../utils'
 import FreeSpaceIndicator from './FreeSpaceIndicator'
 import VersionIndicator from './VersionIndicator'
-import DownloadIcon from '@mui/icons-material/Download'
-import { totalDownloadSpeedState } from '../atoms/ui'
-import { formatSpeedMiB } from '../utils'
 
 const Footer: React.FC = () => {
   const settings = useRecoilValue(settingsState)
@@ -35,7 +35,7 @@ const Footer: React.FC = () => {
         display: 'flex', gap: 1, justifyContent: 'space-between'
       }}>
         <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          <Chip label="RPC v3.0.8" variant="outlined" size="small" />
+          <Chip label="RPC v3.0.9" variant="outlined" size="small" />
           <VersionIndicator />
         </div>
         <div style={{ display: 'flex', gap: 4, 'alignItems': 'center' }}>

frontend/src/components/SocketSubscriber.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
+import { rpcPollingTimeState } from '../atoms/rpc'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { useSubscription } from '../hooks/observable'
@@ -19,6 +20,7 @@ const SocketSubscriber: React.FC<Props> = () => {
   const [, setDownloads] = useRecoilState(downloadsState)
 
   const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
+  const rpcPollingTime = useRecoilValue(rpcPollingTimeState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -70,11 +72,10 @@ const SocketSubscriber: React.FC<Props> = () => {
 
   useEffect(() => {
     if (connected) {
-      const sub = timer(0, 1000).subscribe(() => client.running())
+      const sub = timer(0, rpcPollingTime).subscribe(() => client.running())
-
       return () => sub.unsubscribe()
     }
-  }, [connected, client])
+  }, [connected, client, rpcPollingTime])
 
   return null
 }

frontend/src/views/Settings.tsx

@@ -4,7 +4,6 @@ import {
   Container,
   FormControl,
   FormControlLabel,
-  FormGroup,
   Grid,
   InputAdornment,
   InputLabel,
@@ -12,6 +11,7 @@ import {
   Paper,
   Select,
   SelectChangeEvent,
+  Slider,
   Stack,
   Switch,
   TextField,
@@ -27,6 +27,7 @@ import {
   map,
   takeWhile
 } from 'rxjs'
+import { rpcPollingTimeState } from '../atoms/rpc'
 import {
   Language,
   Theme,
@@ -55,15 +56,20 @@ import { validateDomain, validateIP } from '../utils'
 export default function Settings() {
   const [reverseProxy, setReverseProxy] = useRecoilState(servedFromReverseProxyState)
   const [baseURL, setBaseURL] = useRecoilState(servedFromReverseProxySubDirState)
+
   const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
   const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
   const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
   const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
+
   const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
   const [serverPort, setServerPort] = useRecoilState(serverPortState)
+  const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
+  const [pollingTime, setPollingTime] = useRecoilState(rpcPollingTimeState)
   const [language, setLanguage] = useRecoilState(languageState)
   const [appTitle, setApptitle] = useRecoilState(appTitleState)
-  const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
   const [theme, setTheme] = useRecoilState(themeState)
 
   const [invalidIP, setInvalidIP] = useState(false)
@@ -148,8 +154,6 @@ export default function Settings() {
 
   return (
     <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
-      <Grid container spacing={3}>
-        <Grid item xs={12} md={12} lg={12}>
       <Paper
         sx={{
           p: 2.5,
@@ -161,7 +165,6 @@ export default function Settings() {
         <Typography pb={2} variant="h6" color="primary">
           {i18n.t('settingsAnchor')}
         </Typography>
-            <FormGroup>
         <Grid container spacing={2}>
           <Grid item xs={12} md={11}>
             <TextField
@@ -195,6 +198,34 @@ export default function Settings() {
               error={appTitle === ''}
             />
           </Grid>
+          <Grid item xs={12} md={12}>
+            <Typography>
+              {i18n.t('rpcPollingTimeTitle')}
+            </Typography>
+            <Typography variant='caption' sx={{ mb: 0.5 }}>
+              {i18n.t('rpcPollingTimeDescription')}
+            </Typography>
+            <Slider
+              aria-label="rpc polling time"
+              defaultValue={pollingTime}
+              max={2000}
+              getAriaValueText={(v: number) => `${v} ms`}
+              step={null}
+              valueLabelDisplay="off"
+              marks={[
+                { value: 100, label: '100 ms' },
+                { value: 250, label: '250 ms' },
+                { value: 500, label: '500 ms' },
+                { value: 750, label: '750 ms' },
+                { value: 1000, label: '1000 ms' },
+                { value: 2000, label: '2000 ms' },
+              ]}
+              onChange={(_, value) => typeof value === 'number'
+                ? setPollingTime(value)
+                : setPollingTime(1000)
+              }
+            />
+          </Grid>
           <Grid item xs={12}>
             <Typography variant="h6" color="primary" sx={{ mb: 0.5 }}>
               Reverse Proxy
@@ -354,10 +385,7 @@ export default function Settings() {
             </Button>
           </Stack>
         </Grid>
-            </FormGroup>
       </Paper>
-        </Grid>
-      </Grid>
     </Container>
   )
 }