Merge fixes / tidies from BAPS3 to Webstudio

Author: mstratford

.env

@@ -4,5 +4,4 @@ REACT_APP_MYRADIO_NONAPI_BASE=https://ury.org.uk/myradio-staging
 REACT_APP_MYRADIO_BASE=https://ury.org.uk/api-staging/v2
 REACT_APP_BROADCAST_API_BASE=https://ury.org.uk/webstudio/api/v1
 REACT_APP_WS_URL=wss://ury.org.uk/webstudio/api/stream
-REACT_APP_BAPSICLE_INTERFACE=true
 REACT_APP_SENTRY_PUBLIC_DSN=https://[email protected]/5734903

public/index.html

@@ -38,6 +38,8 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
+
+      TODO: Ideally we shouldn't rely on CDN's during runtime.
     -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

src/App.scss

@@ -17,7 +17,7 @@ $number-of-channels: 3;
     .logo {
       height: 50px;
     }
-    .logo-big {
+    .logo-big-bapsicle {
       height: 30vh;
     }
   }

src/api.ts

@@ -205,14 +205,13 @@ export function searchForTracks(
       artist,
       title,
     });
-  } else {
-    return myradioApiRequest("/track/search", "GET", {
-      artist,
-      title,
-      limit: 100,
-      digitised: true,
-    });
   }
+  return myradioApiRequest("/track/search", "GET", {
+    artist,
+    title,
+    limit: 100,
+    digitised: true,
+  });
 }
 
 export function getTimeslots(): Promise<Array<Timeslot>> {

src/bapsiclesession/index.tsx

@@ -12,7 +12,7 @@ export function ConnectionDialogue({ error }: { error: String | null }) {
   return (
     <div className="loading-dialogue">
       <div className="logo-container">
-        <img className="logo-big mb-2" src={appLogo} alt="BAPS Logo" />
+        <img className="logo-big-bapsicle mb-2" src={appLogo} alt="BAPS Logo" />
       </div>
 
       <span className="inner">

src/index.tsx

@@ -4,7 +4,6 @@ import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorkerLoader";
 
-
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 

src/mixer/audio.ts

@@ -289,6 +289,8 @@ class Player extends ((PlayerEmitter as unknown) as { new (): EventEmitter }) {
       instance.emit("pause");
     });
     wavesurfer.on("seek", () => {
+      // This is used to prevent infinite loops when bapsicle tells wavesurfer to change position,
+      // since otherwise it would send an change update back to the bapsicle server again (as if the user seeked intentionally).
       if (instance.ignore_next_seek) {
         instance.ignore_next_seek = false;
       } else {

src/mixer/state.ts

@@ -379,6 +379,7 @@ export const setLoadedItemOutro = (
 };
 
 export const seek = (player: number, time_s: number): AppThunk => async () => {
+  // Used only by Bapsicle to update the wavesurfer seek position.
   const playerInstance = await audioEngine.getPlayer(player);
 
   if (playerInstance) {
@@ -426,6 +427,7 @@ export const load = (
   const currentItem = getState().mixer.players[player].loadedItem;
   if (currentItem !== null && itemId(currentItem) === itemId(item)) {
     if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
+      // In BAPS, another client could have updated the audio markers etc, so we have to still check and update them.
       // The cue/intro/outro point(s) have changed.
       if (
         "cue" in currentItem &&
@@ -567,6 +569,7 @@ export const load = (
       dispatch(mixerState.actions.itemLoadComplete({ player }));
 
       if (!process.env.REACT_APP_BAPSICLE_INTERFACE) {
+        // BAPS server will give these values already on load based on it's own calculation, not wavesurfer's.
         dispatch(
           mixerState.actions.setTimeLength({
             player,
@@ -585,6 +588,7 @@ export const load = (
       const state = getState().mixer.players[player];
 
       if (!process.env.REACT_APP_BAPSICLE_INTERFACE) {
+        // Client doesn't do any audio playing in BAPS.
         if (state.playOnLoad) {
           playerInstance.play();
         }
@@ -603,16 +607,18 @@ export const load = (
     });
 
     if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
+      // If user manually seeks on the waveform, just direct that to the webserver.
       playerInstance.on("timeChangeSeek", (time) => {
-        if (
-          Math.abs(time - getState().mixer.players[player].timeCurrent) > 0.5
-        ) {
-          sendBAPSicleChannel({
-            channel: player,
-            command: "SEEK",
-            time: time,
-          });
-        }
+        // Limit
+        //if (
+        //  Math.abs(time - getState().mixer.players[player].timeCurrent) > 0.5
+        //) {
+        sendBAPSicleChannel({
+          channel: player,
+          command: "SEEK",
+          time: time,
+        });
+        //}
       });
     } else {
       playerInstance.on("play", () => {
@@ -1261,10 +1267,40 @@ export const mixerKeyboardShortcutsMiddleware: Middleware<
     store.dispatch(handleKeyboardShortcut(store, 2, "STOP"));
   });
 
-  Keys("x", () => {
-    const state = store.getState().mixer.mic;
-    store.dispatch(setMicVolume(state.volume === 1 ? "off" : "full"));
-  });
+  if (!process.env.REACT_APP_BAPSICLE_INTERFACE) {
+    Keys("a", () => {
+      store.dispatch(setVolume(0, "off"));
+    });
+    Keys("s", () => {
+      store.dispatch(setVolume(0, "bed"));
+    });
+    Keys("d", () => {
+      store.dispatch(setVolume(0, "full"));
+    });
+    Keys("f", () => {
+      store.dispatch(setVolume(1, "off"));
+    });
+    Keys("g", () => {
+      store.dispatch(setVolume(1, "bed"));
+    });
+    Keys("h", () => {
+      store.dispatch(setVolume(1, "full"));
+    });
+    Keys("j", () => {
+      store.dispatch(setVolume(2, "off"));
+    });
+    Keys("k", () => {
+      store.dispatch(setVolume(2, "bed"));
+    });
+    Keys("l", () => {
+      store.dispatch(setVolume(2, "full"));
+    });
+
+    Keys("x", () => {
+      const state = store.getState().mixer.mic;
+      store.dispatch(setMicVolume(state.volume === 1 ? "off" : "full"));
+    });
+  }
 
   return (next) => (action) => next(action);
 };

src/showplanner/Item.tsx

@@ -50,8 +50,7 @@ export const Item = memo(function Item({
 
   function triggerClick() {
     if (column > -1) {
-      console.log("Clicking to load:", x);
-
+      // TODO: move this into mixer state if we can.
       if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
         sendBAPSicleChannel({
           channel: column,

src/showplanner/Player.tsx

@@ -81,6 +81,7 @@ const setTrackIntro = (
   secs: number,
   player: number
 ): AppThunk => async (dispatch, getState) => {
+  // TODO Move into MixerState
   if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
     let marker = {
       name: "Intro",

src/showplanner/index.tsx

@@ -50,8 +50,6 @@ import Modal from "react-modal";
 import { Sidebar } from "./sidebar";
 import { PLAYER_ID_PREVIEW } from "../mixer/audio";
 
-import { sendBAPSicleChannel } from "../bapsicle";
-
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
     <div className="channel" id={"channel-" + id}>
@@ -112,6 +110,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
 
   useEffect(() => {
     if (!process.env.REACT_APP_BAPSICLE_INTERFACE) {
+      // In BAPS, we'll load in the show plan from a async message from server.
       dispatch(getShowplan(timeslotId));
     }
   }, [dispatch, timeslotId]);
@@ -148,15 +147,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
         cue: 0,
         ...data,
       };
-      if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
-        sendBAPSicleChannel({
-          channel: newItem.channel,
-          command: "ADD",
-          newItem: newItem,
-        });
-      } else {
-        dispatch(addItem(timeslotId, newItem));
-      }
+      dispatch(addItem(timeslotId, newItem));
       increment(null);
     } else if (result.draggableId[0] === "A") {
       // this is an aux resource
@@ -171,15 +162,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
         cue: 0,
         ...data,
       } as any;
-      if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
-        sendBAPSicleChannel({
-          channel: newItem.channel,
-          command: "ADD",
-          newItem: newItem,
-        });
-      } else {
-        dispatch(addItem(timeslotId, newItem));
-      }
+      dispatch(addItem(timeslotId, newItem));
       increment(null);
     } else {
       // this is a normal move (ghosts aren't draggable)
@@ -204,28 +187,6 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     }
   }
 
-  async function onCtxRemoveClick(
-    e: any,
-    data: { id: string; column: number; index: number }
-  ) {
-    if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
-      sendBAPSicleChannel({
-        channel: data.column,
-        command: "REMOVE",
-        weight: data.index,
-      });
-    } else {
-      dispatch(removeItem(timeslotId, data.id));
-    }
-  }
-
-  async function onCtxUnPlayedClick(
-    e: any,
-    data: { id: string; column: number; index: number }
-  ) {
-    dispatch(setItemPlayed(data.id.toString(), false, data.column));
-  }
-
   // Add support for reloading the show plan from the iFrames.
   // There is a similar listener in showplanner/ImporterModal.tsx to handle closing the iframe.
   useEffect(() => {
@@ -275,9 +236,9 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
           <FaTrash /> Remove
         </CtxMenuItem>
         <CtxMenuItem
-          onClick={(args) =>
-            dispatch(setItemPlayed((args.props as any).id, false))
-          }
+          onClick={(args) => {
+            dispatch(setItemPlayed((args.props as any).id, false));
+          }}
         >
           <FaCircleNotch /> Mark Unplayed
         </CtxMenuItem>