Fix host creating multiple streams

apps/web/src/components/Buttons/EndEventButton/EndEventButton.tsx

@@ -4,9 +4,11 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
 import { Button } from '@material-ui/core';
 
-import useVideoContext from '../../../hooks/useVideoContext/useVideoContext';
 import { useAppState } from '../../../state';
 import { deleteStream } from '../../../state/api/api';
+import useChatContext from '../../../hooks/useChatContext/useChatContext';
+import useSyncContext from '../../../hooks/useSyncContext/useSyncContext';
+import useVideoContext from '../../../hooks/useVideoContext/useVideoContext';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -23,11 +25,15 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function EndCallButton(props: { className?: string }) {
   const classes = useStyles();
   const { room } = useVideoContext();
+  const { disconnect: chatDisconnect } = useChatContext();
+  const { disconnect: syncDisconnect } = useSyncContext();
   const { appState, appDispatch } = useAppState();
 
   async function disconnect() {
     room!.emit('setPreventAutomaticJoinStreamAsViewer');
     room!.disconnect();
+    chatDisconnect();
+    syncDisconnect();
     appDispatch({ type: 'reset-state' });
     await deleteStream(appState.eventName);
   }

apps/web/src/components/Buttons/LeaveEventButton/LeaveEventButton.tsx

@@ -4,6 +4,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { joinStreamAsViewer, connectViewerToPlayer } from '../../../state/api/api';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useAppState } from '../../../state';
+import useChatContext from '../../../hooks/useChatContext/useChatContext';
 import usePlayerContext from '../../../hooks/usePlayerContext/usePlayerContext';
 import useVideoContext from '../../../hooks/useVideoContext/useVideoContext';
 import useSyncContext from '../../../hooks/useSyncContext/useSyncContext';
@@ -26,7 +27,8 @@ export default function LeaveEventButton(props: { buttonClassName?: string }) {
   const { room } = useVideoContext();
   const { appState, appDispatch } = useAppState();
   const { connect: playerConnect } = usePlayerContext();
-  const { registerUserDocument } = useSyncContext();
+  const { registerUserDocument, disconnect: syncDisconnect } = useSyncContext();
+  const { disconnect: chatDisconnect } = useChatContext();
 
   const anchorRef = useRef<HTMLButtonElement>(null);
 
@@ -44,6 +46,8 @@ export default function LeaveEventButton(props: { buttonClassName?: string }) {
     setMenuOpen(false);
     room!.emit('setPreventAutomaticJoinStreamAsViewer');
     room!.disconnect();
+    syncDisconnect();
+    chatDisconnect();
     appDispatch({ type: 'reset-state' });
   }
 

apps/web/src/components/ChatProvider/index.tsx

@@ -8,6 +8,7 @@ type ChatContextType = {
   isChatWindowOpen: boolean;
   setIsChatWindowOpen: (isChatWindowOpen: boolean) => void;
   connect: (token: string) => void;
+  disconnect: () => void;
   hasUnreadMessages: boolean;
   messages: Message[];
   conversation: Conversation | null;
@@ -36,13 +37,19 @@ export const ChatProvider: React.FC = ({ children }) => {
           window.chatClient = client;
           setChatClient(client);
         })
-        .catch(() => {
+        .catch(e => {
+          console.error(e);
           onError(new Error("There was a problem connecting to Twilio's conversation service."));
         });
     },
-    [onError]
+    [onError, chatClient]
   );
 
+  const disconnect = useCallback(() => {
+    setChatClient(undefined);
+    chatClient?.shutdown();
+  }, [chatClient]);
+
   useEffect(() => {
     if (conversation) {
       const handleMessageAdded = (message: Message) => setMessages(oldMessages => [...oldMessages, message]);
@@ -75,15 +82,16 @@ export const ChatProvider: React.FC = ({ children }) => {
           window.chatConversation = newConversation;
           setConversation(newConversation);
         })
-        .catch(() => {
+        .catch(e => {
+          console.error(e);
           onError(new Error('There was a problem getting the Conversation associated with this room.'));
         });
     }
   }, [room, chatClient, onError]);
 
   return (
     <ChatContext.Provider
-      value={{ isChatWindowOpen, setIsChatWindowOpen, connect, hasUnreadMessages, messages, conversation }}
+      value={{ isChatWindowOpen, setIsChatWindowOpen, connect, disconnect, hasUnreadMessages, messages, conversation }}
     >
       {children}
     </ChatContext.Provider>

apps/web/src/components/Player/PlayerMenuBar/PlayerMenuBar.tsx

@@ -7,6 +7,8 @@ import { useEnqueueSnackbar } from '../../../hooks/useSnackbar/useSnackbar';
 import LowerHandIcon from '../../../icons/LowerHandIcon';
 import RaiseHandIcon from '../../../icons/RaiseHandIcon';
 import ParticipantIcon from '../../../icons/ParticipantIcon';
+import useChatContext from '../../../hooks/useChatContext/useChatContext';
+import useSyncContext from '../../../hooks/useSyncContext/useSyncContext';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -41,6 +43,8 @@ export default function PlayerMenuBar({ roomName, disconnect }: { roomName?: str
   const [isHandRaised, setIsHandRaised] = useState(false);
   const lastClickTimeRef = useRef(0);
   const enqueueSnackbar = useEnqueueSnackbar();
+  const { disconnect: chatDisconnect } = useChatContext();
+  const { disconnect: syncDisconnect } = useSyncContext();
 
   const handleRaiseHand = useCallback(() => {
     if (Date.now() - lastClickTimeRef.current > 500) {
@@ -65,6 +69,13 @@ export default function PlayerMenuBar({ roomName, disconnect }: { roomName?: str
     });
   };
 
+  const disconnectFromEvent = () => {
+    disconnect();
+    appDispatch({ type: 'reset-state' });
+    chatDisconnect();
+    syncDisconnect();
+  };
+
   return (
     <footer className={classes.container}>
       <Grid container justifyContent="space-around" alignItems="center">
@@ -84,13 +95,7 @@ export default function PlayerMenuBar({ roomName, disconnect }: { roomName?: str
 
         <Grid style={{ flex: 1 }}>
           <Grid container justifyContent="flex-end">
-            <Button
-              onClick={() => {
-                disconnect();
-                appDispatch({ type: 'reset-state' });
-              }}
-              className={classes.button}
-            >
+            <Button onClick={disconnectFromEvent} className={classes.button}>
               Leave Stream
             </Button>
           </Grid>

apps/web/src/components/SyncProvider/index.tsx

@@ -5,6 +5,7 @@ import { useAppState } from '../../state';
 
 type SyncContextType = {
   connect: (token: string) => void;
+  disconnect: () => void;
   registerUserDocument: (userDocumentName: string) => Promise<void>;
   raisedHandsMap: SyncMap | undefined;
   speakersMap: SyncMap | undefined;
@@ -38,6 +39,16 @@ export const SyncProvider: React.FC = ({ children }) => {
     syncClientRef.current = new SyncClient(token, syncOptions);
   }
 
+  function disconnect() {
+    if (syncClientRef.current) {
+      setRaisedHandsMap(undefined);
+      setSpeakersMap(undefined);
+      setViewersMap(undefined);
+      setUserDocument(undefined);
+      syncClientRef.current.shutdown();
+    }
+  }
+
   function registerUserDocument(userDocumentName: string) {
     return syncClientRef.current!.document(userDocumentName).then(document => setUserDocument(document));
   }
@@ -69,6 +80,7 @@ export const SyncProvider: React.FC = ({ children }) => {
     <SyncContext.Provider
       value={{
         connect,
+        disconnect,
         registerUserDocument,
         raisedHandsMap,
         speakersMap,

apps/web/src/setupProxy.js

@@ -4,8 +4,8 @@ const path = require('path');
 require('dotenv').config({ path: path.join(__dirname, '../../../.env') });
 
 module.exports = function(app) {
-  app.use(
-    '/',
+  app.post(
+    '*',
     createProxyMiddleware({
       target: process.env.WEB_PROXY_URL,
       changeOrigin: true,