Handle port change

frontend/src/App.tsx

@@ -36,7 +36,7 @@ import ArchivedDownloads from "./Archived";
 
 const drawerWidth: number = 240;
 
-const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:3022`)
+const socket = io(`http://${localStorage.getItem('server-addr') || 'localhost'}:${localStorage.getItem('server-port') || '3022'}`)
 
 interface AppBarProps extends MuiAppBarProps {
     open?: boolean;

frontend/src/Settings.tsx

@@ -19,9 +19,9 @@ import {
 } from "@mui/material";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { debounceTime, distinctUntilChanged, map, of } from "rxjs";
+import { debounceTime, distinctUntilChanged, map, of, takeWhile } from "rxjs";
 import { Socket } from "socket.io-client";
-import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
+import { LanguageUnion, setCliArgs, setFormatSelection, setLanguage, setServerAddr, setServerPort, setTheme, ThemeUnion } from "./features/settings/settingsSlice";
 import { alreadyUpdated, updated } from "./features/status/statusSlice";
 import { RootState } from "./stores/store";
 import { validateDomain, validateIP } from "./utils";
@@ -63,6 +63,22 @@ export default function Settings({ socket }: Props) {
         return $serverAddr.unsubscribe()
     }
 
+    /**
+     * Set server port
+     */
+    const handlePortChange = (event: any) => {
+        const $port = of(event)
+            .pipe(
+                map(event => event.target.value),
+                map(val => Number(val)),
+                takeWhile(val => isFinite(val) && val <= 65535),
+            )
+            .subscribe(port => {
+                dispatch(setServerPort(port.toString()))
+            })
+        return $port.unsubscribe()
+    }
+
     /**
      * Language toggler handler 
      */
@@ -102,7 +118,7 @@ export default function Settings({ socket }: Props) {
                         </Typography>
                         <FormGroup>
                             <Grid container spacing={2}>
-                                <Grid item xs={12} md={12}>
+                                <Grid item xs={12} md={11}>
                                     <TextField
                                         fullWidth
                                         label={settings.i18n.t('serverAddressTitle')}
@@ -115,16 +131,16 @@ export default function Settings({ socket }: Props) {
                                         sx={{ mb: 2 }}
                                     />
                                 </Grid>
-                                {/* <Grid item xs={12} md={2}>
+                                <Grid item xs={12} md={1}>
                                     <TextField
                                         fullWidth
-                                        label={settings.i18n.t('serverAddressTitle')}
+                                        label={settings.i18n.t('serverPortTitle')}
-                                        defaultValue={settings.serverAddr}
+                                        defaultValue={settings.serverPort}
-                                        onChange={handleAddrChange}
+                                        onChange={handlePortChange}
-                                        error={invalidIP}
+                                        error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
                                         sx={{ mb: 2 }}
                                     />
-                                </Grid> */}
+                                </Grid>
                             </Grid>
                             <Grid container spacing={2}>
                                 <Grid item xs={12} md={6}>

frontend/src/assets/i18n.yaml

@@ -11,6 +11,7 @@ languages:
     lightThemeButton: Light theme
     settingsAnchor: Settings
     serverAddressTitle: Server address
+    serverPortTitle: Port
     extractAudioCheckbox: Extract audio
     noMTimeCheckbox: Don't set file modification time
     bgReminder: Once you close this page the download will continue in the background.
@@ -28,6 +29,7 @@ languages:
     lightThemeButton: Tema chiaro
     settingsAnchor: Impostazioni
     serverAddressTitle: Indirizzo server
+    serverPortTitle: Porta
     extractAudioCheckbox: Estrai l'audio
     noMTimeCheckbox: Non impostare la proprietà "Data ultima modifica"
     bgReminder: Chiusa questa UI il download continuerà in background.
@@ -45,6 +47,7 @@ languages:
     lightThemeButton: 明亮主题
     settingsAnchor: 设置
     serverAddressTitle: 服务器地址
+    serverPortTitle: Port
     extractAudioCheckbox: 提取音频
     noMTimeCheckbox: 不设置文件修改时间
     bgReminder: 关闭页面后，下载会继续在后台运行。
@@ -62,6 +65,7 @@ languages:
     lightThemeButton: Light theme
     settingsAnchor: Settings
     serverAddressTitle: Server address
+    serverPortTitle: Port
     extractAudioCheckbox: Extract audio
     noMTimeCheckbox: Don't set file modification time
     bgReminder: Once you close this page the download will continue in the background.
@@ -79,6 +83,7 @@ languages:
     lightThemeButton: Light theme
     settingsAnchor: Settings
     serverAddressTitle: Server address
+    serverPortTitle: Port
     extractAudioCheckbox: Extract audio
     noMTimeCheckbox: Don't set file modification time
     bgReminder: Once you close this page the download will continue in the background.
@@ -96,6 +101,7 @@ languages:
     lightThemeButton: 라이트 모드
     settingsAnchor: 설정
     serverAddressTitle: 서버 주소
+    serverPortTitle: Port
     extractAudioCheckbox: 오디오 추출
     noMTimeCheckbox: 파일 수정 시간을 설정하지 않음
     bgReminder: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다

frontend/src/features/settings/settingsSlice.ts

@@ -7,6 +7,7 @@ export type ThemeUnion = "light" | "dark"
 
 export interface SettingsState {
     serverAddr: string,
+    serverPort: string,
     language: LanguageUnion,
     theme: ThemeUnion,
     cliArgs: CliArguments,
@@ -16,6 +17,7 @@ export interface SettingsState {
 
 const initialState: SettingsState = {
     serverAddr: localStorage.getItem("server-addr") || window.location.hostname,
+    serverPort: localStorage.getItem("server-port") || window.location.port,
     language: (localStorage.getItem("language") || "english") as LanguageUnion,
     theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
     cliArgs: localStorage.getItem("cli-args") ? new CliArguments().fromString(localStorage.getItem("cli-args") ?? "") : new CliArguments(false, true),
@@ -31,6 +33,10 @@ export const settingsSlice = createSlice({
             state.serverAddr = action.payload
             localStorage.setItem("server-addr", action.payload)
         },
+        setServerPort: (state, action: PayloadAction<string>) => {
+            state.serverPort = action.payload
+            localStorage.setItem("server-port", action.payload)
+        },
         setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
             state.language = action.payload
             state.i18n.setLanguage(action.payload)
@@ -51,6 +57,6 @@ export const settingsSlice = createSlice({
     }
 })
 
-export const { setLanguage, setCliArgs, setTheme, setServerAddr, setFormatSelection } = settingsSlice.actions
+export const { setLanguage, setCliArgs, setTheme, setServerAddr, setServerPort, setFormatSelection } = settingsSlice.actions
 
 export default settingsSlice.reducer