Add options to switch bridge backup WebSocket server port

app/src/daemon/index.ts

@@ -3,13 +3,27 @@
 import { spawn } from "child_process";
 import { Readable } from "stream";
 
+import minimist from "minimist";
 import WebSocket from "ws";
 
 import { DecodeTransform
        , EncodeTransform } from "../transforms";
 
 
-const wss = new WebSocket.Server({ port: 9556 });
+const argv = minimist(process.argv.slice(2), {
+    string: [ "port" ]
+  , default: {
+        port: "9556"
+    }
+});
+
+const port = parseInt(argv.port);
+if (!port || port < 1025 || port > 65535) {
+    console.error("Invalid port specified!");
+    process.exit(1);
+}
+
+const wss = new WebSocket.Server({ port });
 
 wss.on("connection", socket => {
     // Stream for incoming WebSocket messages

ext/src/_locales/en/messages.json

@@ -202,8 +202,13 @@
     }
 
   , "optionsBridgeBackupEnabled": {
-        "message": "Enable backup daemon connection"
+        "message": "Enable backup daemon connection on port $numberInput$"
-      , "description": "Backup daemon checkbox label."
+      , "description": "Backup daemon checkbox label. An HTML number input is inserted inline at the numberInput substitution."
+      , "placeholders": {
+            "numberInput": {
+                "content": "$1"
+            }
+        }
     }
   , "optionsBridgeBackupEnabledDescription": {
         "message": "If the regular bridge connection fails, attempt to connect to a bridge running in daemon mode."

ext/src/defaultOptions.ts

@@ -7,6 +7,7 @@ import { Options } from "./lib/options";
 export default {
     bridgeApplicationName: APPLICATION_NAME
   , bridgeBackupEnabled: false
+  , bridgeBackupPort: 9556
   , mediaEnabled: true
   , mediaOverlayEnabled: false
   , mediaSyncElement: false

ext/src/lib/nativeMessaging.ts

@@ -4,7 +4,7 @@ import logger from "./logger";
 import options from "./options";
 
 
-const WEBSOCKET_DAEMON_URL = "ws://localhost:9556";
+const WEBSOCKET_DAEMON_URL_PREFIX = "ws://localhost:";
 
 
 type DisconnectListener = (port: browser.runtime.Port) => void;
@@ -114,7 +114,8 @@ function connectNative (application: string) {
         if (port.error && !isNativeHostStatusKnown) {
             isNativeHostStatusKnown = true;
 
-            socket = new WebSocket(WEBSOCKET_DAEMON_URL);
+            const port = await options.get("bridgeBackupPort");
+            socket = new WebSocket(`${WEBSOCKET_DAEMON_URL_PREFIX}${port}`);
 
             socket.addEventListener("open", () => {
                 // Send all messages in queue
@@ -171,8 +172,10 @@ async function sendNativeMessage (
             throw logger.error("Bridge connection failed and backup not enabled.");
         }
 
+        const port = await options.get("bridgeBackupPort");
+
         return await new Promise((resolve, reject) => {
-            const ws = new WebSocket(WEBSOCKET_DAEMON_URL);
+            const ws = new WebSocket(`${WEBSOCKET_DAEMON_URL_PREFIX}${port}`);
 
             ws.addEventListener("open", () => {
                 ws.send(JSON.stringify(message));

ext/src/lib/options.ts

@@ -16,6 +16,7 @@ const storageArea = new TypedStorageArea<{
 export interface Options {
     bridgeApplicationName: string;
     bridgeBackupEnabled: boolean;
+    bridgeBackupPort: number;
     mediaEnabled: boolean;
     mediaOverlayEnabled: boolean;
     mediaSyncElement: boolean;

ext/src/ui/options/Bridge.tsx

@@ -4,7 +4,7 @@
 import React, { Component } from "react";
 import semver from "semver";
 
-import options from "../../lib/options";
+import options, { Options } from "../../lib/options";
 
 import { BridgeInfo } from "../../lib/bridge";
 import { getNextEllipsis } from "../../lib/utils";
@@ -62,6 +62,8 @@ const BridgeStats = (props: BridgeStatsProps) => (
 interface BridgeProps {
     info?: BridgeInfo;
     loading: boolean;
+    options?: Options;
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 interface BridgeState {
@@ -69,7 +71,6 @@ interface BridgeState {
     isUpdateAvailable: boolean;
     wasErrorCheckingUpdates: boolean;
     checkUpdatesEllipsis: string;
-    bridgeBackupEnabled?: boolean;
     updateStatus?: string;
 }
 
@@ -87,11 +88,6 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
           , checkUpdatesEllipsis: "..."
         };
 
-        options.get("bridgeBackupEnabled")
-            .then(bridgeBackupEnabled => {
-                this.setState({ bridgeBackupEnabled });
-            });
-
         this.onCheckUpdates = this.onCheckUpdates.bind(this);
         this.onCheckUpdatesResponse = this.onCheckUpdatesResponse.bind(this);
         this.onCheckUpdatesError = this.onCheckUpdatesError.bind(this);
@@ -99,6 +95,9 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
     }
 
     public render () {
+        const [ backupMessageStart, backupMessageEnd ]
+                = _("optionsBridgeBackupEnabled", "\0").split("\0");
+
         return (
             <div className="bridge">
                 { this.props.loading
@@ -108,20 +107,26 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
                         </div> )
                     : this.renderStatus() }
 
-                { !this.props.loading && this.state.bridgeBackupEnabled !== undefined &&
+                { !this.props.loading && this.props.options &&
                     <div className="bridge__options">
                         <label className="option option--inline">
                             <div className="option__control">
                                 <input name="bridgeBackupEnabled"
                                        type="checkbox"
-                                       checked={ this.state.bridgeBackupEnabled }
+                                       checked={ this.props.options.bridgeBackupEnabled }
-                                       onChange={ ev => {
+                                       onChange={ this.props.onChange } />
-                                           options.set("bridgeBackupEnabled"
-                                                 , ev.target.checked);
-                                       }} />
                             </div>
                             <div className="option__label">
-                                { _("optionsBridgeBackupEnabled") }
+                                { backupMessageStart }
+                                <input className="bridge__backup-port"
+                                       name="bridgeBackupPort"
+                                       type="number"
+                                       required
+                                       min="1025"
+                                       max="65535"
+                                       value={ this.props.options.bridgeBackupPort }
+                                       onChange={ this.props.onChange } />
+                                { backupMessageEnd }
                             </div>
                             <div className="option__description">
                                 { _("optionsBridgeBackupEnabledDescription") }

ext/src/ui/options/index.tsx

@@ -171,9 +171,6 @@ class OptionsApp extends Component<{}, OptionsAppState> {
 
         return (
             <div>
-                <Bridge info={ this.state.bridgeInfo }
-                        loading={ this.state.bridgeLoading } />
-
                 <form id="form" ref={ form => { this.form = form; }}
                         onSubmit={ this.handleFormSubmit }
                         onChange={ this.handleFormChange }>
@@ -415,6 +412,12 @@ class OptionsApp extends Component<{}, OptionsAppState> {
                             { _("optionsSave") }
                         </button>
                     </div>
+
+                    { // Workaround for form default button }
+                    <Bridge info={ this.state.bridgeInfo }
+                            loading={ this.state.bridgeLoading }
+                            options={ this.state.options }
+                            onChange={ this.handleInputChange } /> }
                 </form>
 
                 <details className="about">

ext/src/ui/options/styles/index.css

@@ -69,6 +69,7 @@
 .bridge {
     border-bottom: 1px solid var(--border-color);
     margin-bottom: 10px;
+    order: -1;
     padding-bottom: 20px;
 }
 
@@ -194,6 +195,12 @@
     margin-left: 10px;
 }
 
+.bridge__backup-port {
+    width: 75px;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
 
 .category {
     border: initial;