Use configurable BAPSicle server info.

Author: mstratford

.env.baps-development

@@ -0,0 +1,8 @@
+HTTPS=false
+HOST=localhost
+REACT_APP_BAPSICLE_INTERFACE=true
+# Fill the below if using custom BAPSicle server settings
+#REACT_APP_BAPSICLE_PROTOCOL=https
+#REACT_APP_BAPSICLE_HOST=localhost
+REACT_APP_BAPSICLE_PORT=13500
+#REACT_APP_WEBSOCKET_PORT=13501

.env.baps renamed to .env.baps-production

@@ -1,3 +1 @@
-HTTPS=false
 REACT_APP_BAPSICLE_INTERFACE=true
-HOST=localhost

scripts/build.js

@@ -7,7 +7,7 @@ process.env.NODE_ENV = "production";
 // If we want BAPS, specify it as the first command line argument.
 var args = process.argv.slice(2); // Remove node start.js
 if (args.length > 0 && args[0] === "baps") {
-  process.env.NODE_ENV = "baps";
+  process.env.NODE_ENV = "baps-production";
 }
 
 // Makes the script crash on unhandled rejections instead of silently

scripts/start.js

@@ -7,7 +7,7 @@ process.env.NODE_ENV = "development";
 // If we want BAPS, specify it as the first command line argument.
 var args = process.argv.slice(2); // Remove node start.js
 if (args.length > 0 && args[0] === "baps") {
-  process.env.NODE_ENV = "baps";
+  process.env.NODE_ENV = "baps-development";
 }
 
 // Makes the script crash on unhandled rejections instead of silently

src/api.ts

@@ -60,11 +60,13 @@ export async function bapsicleApiRequest(
   method: "GET" | "POST" | "PUT",
   params: any
 ): Promise<any> {
-  const res = await apiRequest(
-    "http://" + window.location.hostname + ":13500" + endpoint,
-    method,
-    params
-  );
+  let server = store.getState().bapsSession.currentServer;
+
+  if (!server) {
+    throw new Error("Trying to call BAPSicle server without connection.");
+  }
+  const url = `${server.ui_protocol}://${server.hostname}:${server.ui_port}${endpoint}`;
+  const res = await apiRequest(url, method, params);
   const json = await res.json();
   return json;
 }

src/bapsiclesession/state.ts

@@ -5,7 +5,9 @@ import { connectBAPSicle } from "../bapsicle";
 
 interface bapsServer {
   hostname: String | null;
-  port: Number | null;
+  ui_port: Number | null;
+  ui_protocol: String | null;
+  ws_port: Number | null;
   name: String | null;
 }
 
@@ -52,12 +54,24 @@ export const getCurrentServer = (): AppThunk => async (dispatch, getState) => {
 };
 
 export const getServer = (): AppThunk => async (dispatch) => {
-  // TODO Server Details Configurable
+  // Since BAPS Presenter is served by the BAPSicle web server, use the current window path unless custom defined.
   let bapsServer: bapsServer = {
-    hostname: window.location.hostname,
-    port: 13501,
+    hostname: process.env.REACT_APP_BAPSICLE_HOST
+      ? process.env.REACT_APP_BAPSICLE_HOST
+      : window.location.hostname,
+    ws_port: process.env.REACT_APP_WEBSOCKET_PORT
+      ? parseInt(process.env.REACT_APP_WEBSOCKET_PORT)
+      : 13501,
+    ui_protocol: process.env.REACT_APP_BAPSICLE_PROTOCOL
+      ? process.env.REACT_APP_BAPSICLE_PROTOCOL
+      : "http",
+    ui_port: process.env.REACT_APP_BAPSICLE_PORT
+      ? parseInt(process.env.REACT_APP_BAPSICLE_PORT)
+      : parseInt(window.location.port),
     name: "Connecting...",
   };
   dispatch(sessionState.actions.setCurrentServer({ server: bapsServer }));
-  dispatch(connectBAPSicle("ws://" + window.location.hostname + ":13501"));
+  dispatch(
+    connectBAPSicle("ws://" + bapsServer.hostname + ":" + bapsServer.ws_port)
+  );
 };

src/mixer/state.ts

@@ -475,31 +475,33 @@ export const load = (
 
   let url;
 
+  if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
+    let server = getState().bapsSession.currentServer;
+
+    if (!server) {
+      throw new Error(
+        "Trying to load audio file without BAPSicle server connection."
+      );
+    }
+    // If bapsicle, override the Myradio.
+    url = `${server.ui_protocol}://${server.hostname}:${server.ui_port}`;
+  } else {
+    url = MYRADIO_NON_API_BASE;
+  }
+
   if (item.type === "central") {
     // track
 
     if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
-      url =
-        "http://" +
-        getState().bapsSession.currentServer?.hostname +
-        ":13500/audiofile/track/" +
-        item.trackid;
+      url += "/audiofile/track/" + item.trackid;
     } else {
-      url =
-        MYRADIO_NON_API_BASE + "/NIPSWeb/secure_play?trackid=" + item.trackid;
+      url += "/NIPSWeb/secure_play?trackid=" + item.trackid;
     }
   } else if ("managedid" in item) {
     if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
-      url =
-        "http://" +
-        getState().bapsSession.currentServer?.hostname +
-        ":13500/audiofile/managed/" +
-        item.managedid;
+      url += "/audiofile/managed/" + item.managedid;
     } else {
-      url =
-        MYRADIO_NON_API_BASE +
-        "/NIPSWeb/managed_play?managedid=" +
-        item.managedid;
+      url += "/NIPSWeb/managed_play?managedid=" + item.managedid;
     }
   } else {
     throw new Error(
@@ -511,7 +513,7 @@ export const load = (
 
   let waveform = document.getElementById("waveform-" + player.toString());
   if (waveform == null) {
-    throw new Error();
+    throw new Error("No waveform element found for player.");
   }
   audioEngine.destroyPlayerIfExists(player); // clear previous (ghost) wavesurfer and it's media elements.
   // wavesurfer also sets the background white, remove for progress bar to work.

src/showplanner/state.ts

@@ -102,7 +102,6 @@ const showplan = createSlice({
       action: PayloadAction<{ channel: Number; planItems: PlanItem[] }>
     ) {
       // This is used for BAPSicle only to read in individual channels of show plan into the show state from the server.
-      // TODO: Does this need to be this complicated?
       var newItems = state.plan?.filter(
         (item) => item.channel !== action.payload.channel
       );