Cleanup the URL after joining

custom/fitness-demo/pages/[room].js

@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import App from '../components/App';
 import NotConfigured from '../components/Prejoin/NotConfigured';
 
-const Slug = ({
+const Room = ({
   domain,
   isConfigured = false,
   subscribeToTracksAutomatically = true,
@@ -20,7 +20,7 @@ const Slug = ({
   customAppComponent,
 }) => {
   const router = useRouter();
-  const { slug, t } = router.query;
+  const { room, t } = router.query;
 
   if (!isConfigured) return <NotConfigured />;
   return (
@@ -31,9 +31,10 @@ const Slug = ({
     >
       <CallProvider
         domain={domain}
-        room={slug}
+        room={room}
         token={t}
         subscribeToTracksAutomatically={subscribeToTracksAutomatically}
+        cleanURLOnJoin
       >
         <ParticipantsProvider>
           <TracksProvider>
@@ -49,7 +50,7 @@ const Slug = ({
   )
 };
 
-export default Slug;
+export default Room;
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();

custom/shared/contexts/CallProvider.js

@@ -14,6 +14,7 @@ import React, {
 } from 'react';
 import DailyIframe from '@daily-co/daily-js';
 import Bowser from 'bowser';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import {
   ACCESS_STATE_LOBBY,
@@ -31,7 +32,9 @@ export const CallProvider = ({
   room,
   token = '',
   subscribeToTracksAutomatically = true,
+  cleanURLOnJoin = false,
 }) => {
+  const router = useRouter();
   const [roomInfo, setRoomInfo] = useState(null);
   const [enableScreenShare, setEnableScreenShare] = useState(false);
   const [videoQuality, setVideoQuality] = useState(VIDEO_QUALITY_AUTO);
@@ -119,6 +122,15 @@ export const CallProvider = ({
     setPreJoinNonAuthorized(requiresPermission && !token);
   }, [state, daily, token]);
 
+  useEffect(() => {
+    if (!daily) return;
+
+    if (cleanURLOnJoin)
+      daily.on('joined-meeting', () => router.replace(`/${room}`));
+
+    return () => daily.off('joined-meeting', () => router.replace(`/${room}`));
+  }, [cleanURLOnJoin, daily, room, router]);
+
   return (
     <CallContext.Provider
       value={{