diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a1cb40d..e5b73c7 100755 --- a/frontend/src/App.tsx +++ b/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; diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx index a147bac..05feb71 100644 --- a/frontend/src/Settings.tsx +++ b/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) { - + - {/* + 65535} sx={{ mb: 2 }} /> - */} + diff --git a/frontend/src/assets/i18n.yaml b/frontend/src/assets/i18n.yaml index d5717f9..53fb8dc 100644 --- a/frontend/src/assets/i18n.yaml +++ b/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: 이 페이지를 닫아도 백그라운드에서 다운로드가 계속됩니다 diff --git a/frontend/src/features/settings/settingsSlice.ts b/frontend/src/features/settings/settingsSlice.ts index c92d41d..f4d968b 100644 --- a/frontend/src/features/settings/settingsSlice.ts +++ b/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) => { + state.serverPort = action.payload + localStorage.setItem("server-port", action.payload) + }, setLanguage: (state, action: PayloadAction) => { 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 \ No newline at end of file