Remove domain segment

www/app/[roomName]/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import "@whereby.com/browser-sdk/embed";
+import { useRef } from "react";
+import useRoomMeeting from "./useRoomMeeting";
+
+export type RoomDetails = {
+  params: {
+    roomName: string;
+  };
+};
+
+export default function Room(details: RoomDetails) {
+  const wherebyRef = useRef<HTMLElement>(null);
+  const roomName = details.params.roomName;
+  const meeting = useRoomMeeting(roomName);
+
+  const roomUrl = meeting?.response?.host_room_url
+    ? meeting?.response?.host_room_url
+    : meeting?.response?.room_url;
+
+  return (
+    <>
+      {roomUrl && (
+        <whereby-embed
+          ref={wherebyRef}
+          room={roomUrl}
+          style={{ width: "100%", height: "98%" }}
+        />
+      )}
+    </>
+  );
+}

www/app/[roomName]/useRoomMeeting.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { useError } from "../(errors)/errorContext";
+import { Meeting } from "../api";
+import { shouldShowError } from "../lib/errorUtils";
+import useApi from "../lib/useApi";
+
+type ErrorMeeting = {
+  error: Error;
+  loading: false;
+  response: null;
+  reload: () => void;
+};
+
+type LoadingMeeting = {
+  response: null;
+  loading: true;
+  error: false;
+  reload: () => void;
+};
+
+type SuccessMeeting = {
+  response: Meeting;
+  loading: false;
+  error: null;
+  reload: () => void;
+};
+
+const useRoomMeeting = (
+  roomName: string | null | undefined,
+): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
+  const [response, setResponse] = useState<Meeting | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setErrorState] = useState<Error | null>(null);
+  const [reload, setReload] = useState(0);
+  const { setError } = useError();
+  const api = useApi();
+  const reloadHandler = () => setReload((prev) => prev + 1);
+
+  useEffect(() => {
+    if (!roomName || !api) return;
+
+    if (!response) {
+      setLoading(true);
+    }
+
+    api
+      .v1RoomsCreateMeeting({ roomName })
+      .then((result) => {
+        setResponse(result);
+        setLoading(false);
+        console.debug("Meeting Loaded:", result);
+      })
+      .catch((error) => {
+        const shouldShowHuman = shouldShowError(error);
+        if (shouldShowHuman) {
+          setError(error, "There was an error loading the meeting");
+        } else {
+          setError(error);
+        }
+        setErrorState(error);
+      });
+  }, [roomName, !api, reload]);
+
+  return { response, loading, error, reload: reloadHandler } as
+    | ErrorMeeting
+    | LoadingMeeting
+    | SuccessMeeting;
+};
+
+export default useRoomMeeting;