feat: unlock changing port in UI (#476)

* refactor: unlock changing port in UI

* Change server port (#464)

* Ability to save custom port

* Launch server on custom port & pass that port to electron

* Add serverPort validation

* Prevent changing port in docker

---------

Co-authored-by: Snehanshu Phukon <snehanshu@mamboemm.com>

---------

Co-authored-by: স্নেহাংশু ফুকন <hello@snehanshu.com>
Co-authored-by: Snehanshu Phukon <snehanshu@mamboemm.com>

apps/client/src/common/api/apiConstants.ts

@@ -1,5 +1,3 @@
-export const STATIC_PORT = 4001;
-
 // REST stuff
 export const EVENT_DATA = ['eventdata'];
 export const ALIASES = ['aliases'];
@@ -15,8 +13,9 @@ export const RUNTIME = ['runtimeStore'];
 const location = window.location;
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
 
+const STATIC_PORT = 4001;
 export const serverPort = import.meta.env.DEV ? STATIC_PORT : location.port;
-export const serverURL = import.meta.env.DEV ? `http://${location.hostname}:${serverPort}` : location.origin;
+export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
 export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
 
 export const eventURL = `${serverURL}/eventdata`;

apps/client/src/common/api/ontimeApi.ts

@@ -1,13 +1,5 @@
 import axios from 'axios';
-import {
-  Alias,
-  EventData,
-  OSCSettings,
-  OscSubscription,
-  Settings,
-  UserFields,
-  ViewSettings,
-} from 'ontime-types';
+import { Alias, EventData, OSCSettings, OscSubscription, Settings, UserFields, ViewSettings } from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';

apps/client/src/features/info/InfoNif.tsx

@@ -1,5 +1,6 @@
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
+import { serverPort } from '../../common/api/apiConstants';
 import useInfo from '../../common/hooks-query/useInfo';
 import { openLink } from '../../common/utils/linkUtils';
 
@@ -9,7 +10,7 @@ export default function InfoNif() {
   const { data } = useInfo();
 
   const handleClick = (address: string) => {
-    const baseURL = 'http://__IP__:4001';
+    const baseURL = `http://__IP__:${serverPort}`;
     openLink(baseURL.replace('__IP__', address));
   };
 

apps/client/src/features/modals/settings-modal/AppSettings.tsx

@@ -61,7 +61,7 @@ export default function AppSettingsModal() {
       <ModalSplitInput
         field='serverPort'
         title='Ontime is available on port'
-        description='Default 4001'
+        description='Default 4001 (needs app restart to change)'
         error={errors.serverPort?.message}
       >
         <Input
@@ -69,7 +69,6 @@ export default function AppSettingsModal() {
           size='sm'
           textAlign='right'
           maxLength={5}
-          disabled
           variant='ontime-filled-on-light'
           {...register('serverPort', {
             required: { value: true, message: 'Required field' },