refactor recording and stuff

Jenkinsfile

@@ -70,6 +70,7 @@ pipeline {
         steps {
           sshagent(credentials: ['ury']) {
            sh 'scp -v -o StrictHostKeyChecking=no server.py liquidsoap@dolby.ury:/opt/webstudioserver/server.py'
+           sh 'scp -v -o StrictHostKeyChecking=no requirements.txt liquidsoap@dolby.ury:/opt/webstudioserver/requirements.txt'
           }
         }
       }

src/broadcast/state.ts

@@ -7,11 +7,12 @@ import * as NavbarState from "../navbar/state";
 import { ConnectionStateEnum, Streamer } from "./streamer";
 import { RecordingStreamer } from "./recording_streamer";
 
-export let streamer: Streamer | null = null;
+export let streamer: WebRTCStreamer | null = null;
 
 interface BroadcastState {
   tracklisting: boolean;
   connectionState: ConnectionStateEnum;
+  recordingState: ConnectionStateEnum;
 }
 
 const broadcastState = createSlice({
@@ -19,6 +20,7 @@ const broadcastState = createSlice({
   initialState: {
     tracklisting: false,
     connectionState: "NOT_CONNECTED",
+    recordingState: "NOT_CONNECTED"
   } as BroadcastState,
   reducers: {
     toggleTracklisting(state) {
@@ -27,6 +29,9 @@ const broadcastState = createSlice({
     setConnectionState(state, action: PayloadAction<ConnectionStateEnum>) {
       state.connectionState = action.payload;
     },
+    setRecordingState(state, action: PayloadAction<ConnectionStateEnum>) {
+      state.recordingState = action.payload;
+    },
   },
 });
 
@@ -71,34 +76,46 @@ export function sendTracklistStart(trackid: number): Promise<TrackListItem> {
   });
 }
 
-const RECORD = false;
-
-export const connect = (): AppThunk => async (dispatch, getState) => {
-  if (RECORD) {
-    streamer = new RecordingStreamer(MixerState.destination.stream);
-  } else {
-    if (!getState().session.userCanBroadcast) {
-      dispatch(
-        NavbarState.showAlert({
-          color: "warning",
-          content: "You are not WebStudio Trained and cannot go live.",
-          closure: 7000,
-        })
-      );
-      return;
-    }
-    streamer = new WebRTCStreamer(MixerState.destination.stream);
+export const startStreaming = (): AppThunk => async (dispatch, getState) => {
+  if (!getState().session.userCanBroadcast) {
+    dispatch(
+      NavbarState.showAlert({
+        color: "warning",
+        content: "You are not WebStudio Trained and cannot go live.",
+        closure: 7000,
+      })
+    );
+    return;
   }
+  streamer = new WebRTCStreamer(MixerState.destination.stream);
   streamer.addConnectionStateListener((state) => {
     dispatch(broadcastState.actions.setConnectionState(state));
   });
   await streamer.start();
 };
 
-export const disconnect = (): AppThunk => async (dispatch) => {
+export const stopStreaming = (): AppThunk => async (dispatch) => {
   if (streamer) {
     await streamer.stop();
   } else {
     console.warn("disconnect called with no streamer!");
   }
 };
+
+let recorder: RecordingStreamer;
+
+export const startRecording = (): AppThunk => async dispatch => {
+  recorder = new RecordingStreamer(MixerState.destination.stream);
+  recorder.addConnectionStateListener((state) => {
+    dispatch(broadcastState.actions.setConnectionState(state));
+  });
+  await recorder.start();
+}
+
+export const stopRecording = (): AppThunk => async dispatch => {
+  if (recorder) {
+    await recorder.stop();
+  } else {
+    console.warn("stopRecording called with no recorder!");
+  }
+}

src/navbar/index.tsx

@@ -12,6 +12,7 @@ export function NavBar() {
 	const dispatch = useDispatch();
 	const sessionState = useSelector((state: RootState) => state.session);
 	const broadcastState = useSelector((state: RootState) => state.broadcast);
+	const settings = useSelector((state: RootState) => state.settings);
 	const redirect_url = encodeURIComponent(window.location.toString());
 	return (
 		<>
@@ -42,6 +43,25 @@ export function NavBar() {
 							: "Not Tracklisting"}{" "}
 					</button>
 				</li>
+				{settings.enableRecording && (
+					<li className="nav-item nav-link">
+						<button
+							className=""
+							onClick={() =>
+								dispatch(
+									broadcastState.recordingState ===
+										"NOT_CONNECTED"
+										? BroadcastState.startRecording()
+										: BroadcastState.stopRecording()
+								)
+							}
+						>
+							{broadcastState.recordingState === "NOT_CONNECTED"
+								? "Start Recording"
+								: "Stop Recording"}
+						</button>
+					</li>
+				)}
 				<li className="nav-item nav-link">
 					<button
 						className=""
@@ -49,8 +69,8 @@ export function NavBar() {
 							dispatch(
 								broadcastState.connectionState ===
 									"NOT_CONNECTED"
-									? BroadcastState.connect()
-									: BroadcastState.disconnect()
+									? BroadcastState.startStreaming()
+									: BroadcastState.stopStreaming()
 							)
 						}
 					>

src/optionsMenu/AdvancedTab.tsx

@@ -27,6 +27,24 @@ export function AdvancedTab() {
 					Show showplan debugging information
 				</label>
 			</div>
+			<div className="form-check">
+				<input
+					className="form-check-input"
+					type="checkbox"
+					checked={settings.enableRecording}
+					onChange={(e) =>
+						dispatch(
+							changeSetting({
+								key: "enableRecording",
+								val: e.target.checked,
+							})
+						)
+					}
+				/>
+				<label className="form-check-label">
+					Enable recording
+				</label>
+			</div>
 		</>
 	);
 }

src/optionsMenu/settingsState.ts

@@ -2,11 +2,15 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 interface Settings {
 	showDebugInfo: boolean;
+	enableRecording: boolean;
 }
 
 const settingsState = createSlice({
 	name: "settings",
-	initialState: {} as Settings,
+	initialState: {
+		showDebugInfo: false,
+		enableRecording: false
+	} as Settings,
 	reducers: {
 		changeSetting<K extends keyof Settings>(state: Settings, action: PayloadAction<{ key: K, val: Settings[K] }>) {
 			state[action.payload.key] = action.payload.val;