Migration to room manager

assets/.env.example

@@ -0,0 +1 @@
+API_URL="https://room-manager.fishjam.com"

assets/.tool-versions

@@ -1 +1 @@
-nodejs 18.14.2
+nodejs v20.12.2

assets/package.json

@@ -8,7 +8,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview --port 5005"
   },
   "dependencies": {
     "@jellyfish-dev/react-client-sdk": "github:jellyfish-dev/react-client-sdk#RC1-event-emitter",

assets/readme.md

@@ -0,0 +1,16 @@
+# Videroom Frontend
+
+## Development
+
+1. Start the Jellyfish Media Server
+2. Start the Room Manger
+3. Start this app
+
+```shell
+npm install 
+npm run dev # connects to localhost
+API_URL="https://roommanager.com" npm run dev # connect to external sever
+```
+
+## Deployment
+

assets/src/api/api.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * Videoroom
+ * Room manager
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.1.0
@@ -23,6 +23,25 @@ import type { RequestArgs } from './base';
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS, BaseAPI, RequiredError, operationServerMap } from './base';
 
+/**
+ * 
+ * @export
+ * @interface ConnectionData
+ */
+export interface ConnectionData {
+    /**
+     * 
+     * @type {string}
+     * @memberof ConnectionData
+     */
+    'url': string;
+    /**
+     * 
+     * @type {string}
+     * @memberof ConnectionData
+     */
+    'token': string;
+}
 
 /**
  * RoomApi - axios parameter creator
@@ -33,16 +52,20 @@ export const RoomApiAxiosParamCreator = function (configuration?: Configuration)
         /**
          * Create a new peer in a room and get its token
          * @summary Join a room
-         * @param {string} roomName Room name
+         * @param {string} roomId Room ID
+         * @param {string} userId User ID
          * @param {any} [body] Room params
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        videoroomWebRoomControllerShow: async (roomName: string, body?: any, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
-            // verify required parameter 'roomName' is not null or undefined
-            assertParamExists('videoroomWebRoomControllerShow', 'roomName', roomName)
-            const localVarPath = `/api/room/{room_name}`
-                .replace(`{${"room_name"}}`, encodeURIComponent(String(roomName)));
+        apiRoomsRoomIdUsersUserIdGet: async (roomId: string, userId: string, body?: any, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'roomId' is not null or undefined
+            assertParamExists('apiRoomsRoomIdUsersUserIdGet', 'roomId', roomId)
+            // verify required parameter 'userId' is not null or undefined
+            assertParamExists('apiRoomsRoomIdUsersUserIdGet', 'userId', userId)
+            const localVarPath = `/api/rooms/{roomId}/users/{userId}`
+                .replace(`{${"roomId"}}`, encodeURIComponent(String(roomId)))
+                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
             let baseOptions;
@@ -115,15 +138,16 @@ export const RoomApiFp = function(configuration?: Configuration) {
         /**
          * Create a new peer in a room and get its token
          * @summary Join a room
-         * @param {string} roomName Room name
+         * @param {string} roomId Room ID
+         * @param {string} userId User ID
          * @param {any} [body] Room params
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async videoroomWebRoomControllerShow(roomName: string, body?: any, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<string>> {
-            const localVarAxiosArgs = await localVarAxiosParamCreator.videoroomWebRoomControllerShow(roomName, body, options);
+        async apiRoomsRoomIdUsersUserIdGet(roomId: string, userId: string, body?: any, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ConnectionData>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.apiRoomsRoomIdUsersUserIdGet(roomId, userId, body, options);
             const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
-            const localVarOperationServerBasePath = operationServerMap['RoomApi.videoroomWebRoomControllerShow']?.[localVarOperationServerIndex]?.url;
+            const localVarOperationServerBasePath = operationServerMap['RoomApi.apiRoomsRoomIdUsersUserIdGet']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
@@ -133,7 +157,7 @@ export const RoomApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async videoroomWebRoomControllerStartRecording(roomName: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<string>> {
+        async videoroomWebRoomControllerStartRecording(roomName: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ConnectionData>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.videoroomWebRoomControllerStartRecording(roomName, options);
             const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
             const localVarOperationServerBasePath = operationServerMap['RoomApi.videoroomWebRoomControllerStartRecording']?.[localVarOperationServerIndex]?.url;
@@ -152,13 +176,14 @@ export const RoomApiFactory = function (configuration?: Configuration, basePath?
         /**
          * Create a new peer in a room and get its token
          * @summary Join a room
-         * @param {string} roomName Room name
+         * @param {string} roomId Room ID
+         * @param {string} userId User ID
          * @param {any} [body] Room params
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        videoroomWebRoomControllerShow(roomName: string, body?: any, options?: any): AxiosPromise<string> {
-            return localVarFp.videoroomWebRoomControllerShow(roomName, body, options).then((request) => request(axios, basePath));
+        apiRoomsRoomIdUsersUserIdGet(roomId: string, userId: string, body?: any, options?: any): AxiosPromise<ConnectionData> {
+            return localVarFp.apiRoomsRoomIdUsersUserIdGet(roomId, userId, body, options).then((request) => request(axios, basePath));
         },
         /**
          * Starts recording in the specified room
@@ -167,7 +192,7 @@ export const RoomApiFactory = function (configuration?: Configuration, basePath?
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        videoroomWebRoomControllerStartRecording(roomName: string, options?: any): AxiosPromise<string> {
+        videoroomWebRoomControllerStartRecording(roomName: string, options?: any): AxiosPromise<ConnectionData> {
             return localVarFp.videoroomWebRoomControllerStartRecording(roomName, options).then((request) => request(axios, basePath));
         },
     };
@@ -183,14 +208,15 @@ export class RoomApi extends BaseAPI {
     /**
      * Create a new peer in a room and get its token
      * @summary Join a room
-     * @param {string} roomName Room name
+     * @param {string} roomId Room ID
+     * @param {string} userId User ID
      * @param {any} [body] Room params
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      * @memberof RoomApi
      */
-    public videoroomWebRoomControllerShow(roomName: string, body?: any, options?: RawAxiosRequestConfig) {
-        return RoomApiFp(this.configuration).videoroomWebRoomControllerShow(roomName, body, options).then((request) => request(this.axios, this.basePath));
+    public apiRoomsRoomIdUsersUserIdGet(roomId: string, userId: string, body?: any, options?: RawAxiosRequestConfig) {
+        return RoomApiFp(this.configuration).apiRoomsRoomIdUsersUserIdGet(roomId, userId, body, options).then((request) => request(this.axios, this.basePath));
     }
 
     /**

assets/src/api/base.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * Videoroom
+ * Room manager
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.1.0
@@ -19,7 +19,7 @@ import type { Configuration } from './configuration';
 import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
 import globalAxios from 'axios';
 
-export const BASE_PATH = "http://localhost:5004".replace(/\/+$/, "");
+export const BASE_PATH = "http://localhost:8080".replace(/\/+$/, "");
 
 /**
  *

assets/src/api/common.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * Videoroom
+ * Room manager
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.1.0

assets/src/api/configuration.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * Videoroom
+ * Room manager
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.1.0

assets/src/api/index.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 /**
- * Videoroom
+ * Room manager
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
  * The version of the OpenAPI document: 0.1.0

assets/src/pages/room/RoomPage.tsx

@@ -19,6 +19,8 @@ type ConnectComponentProps = {
   roomId: string;
 };
 
+const userId = crypto.randomUUID()
+
 const ConnectComponent: FC<ConnectComponentProps> = (
   {
     username,
@@ -138,12 +140,13 @@ const ConnectComponent: FC<ConnectComponentProps> = (
   const disconnect = useDisconnect();
 
   useEffect(() => {
-    getTokenAndAddress(roomId)
-      .then((tokenAndAddress) => {
+    getTokenAndAddress(roomId, userId)
+      .then(({ token, url }) => {
+
         return connect({
           peerMetadata: { name: username },
-          token: tokenAndAddress.token,
-          signaling: getSignalingAddress(tokenAndAddress.serverAddress)
+          token: token,
+          signaling: getSignalingAddress(url)
         });
       });
 

assets/src/pages/room/consts.ts

@@ -1,28 +1,28 @@
 export const AUDIO_TRACK_CONSTRAINTS: MediaTrackConstraints = {
-  advanced: [{ autoGainControl: true }, { noiseSuppression: true }, { echoCancellation: true }],
+  advanced: [{ autoGainControl: true }, { noiseSuppression: true }, { echoCancellation: true }]
 };
 
 export const VIDEO_TRACK_CONSTRAINTS: MediaTrackConstraints = {
   width: {
     max: 1280,
     ideal: 1280,
-    min: 640,
+    min: 640
   },
   height: {
     max: 720,
     ideal: 720,
-    min: 320,
+    min: 320
   },
   frameRate: {
     max: 30,
-    ideal: 24,
-  },
+    ideal: 24
+  }
 } as const;
 
 export const SCREENSHARING_TRACK_CONSTRAINTS: MediaTrackConstraints = {
   frameRate: { ideal: 20, max: 25 },
   width: { max: 1920, ideal: 1920 },
-  height: { max: 1080, ideal: 1080 },
+  height: { max: 1080, ideal: 1080 }
 };
 
 export const LOCAL_PEER_NAME = "You";
@@ -34,36 +34,20 @@ export const DEFAULT_AUTOSTART_MICROPHONE_VALUE = true;
 export const DEFAULT_MANUAL_MODE_CHECKBOX_VALUE = false;
 export const DEFAULT_SMART_LAYER_SWITCHING_CHECKBOX_VALUE = true;
 
-const isSecure = new URL(window.location.origin).protocol === "https:";
-// @ts-ignore
-const isDevEnv = import.meta.env.MODE === "development";
-
-const protocol = isSecure ? "https" : "http"
-
 // @ts-ignore
-export const BACKEND_URL = isDevEnv ?
-  new URL(window.location.origin) :
-  new URL(`${protocol}://${import.meta.env.VITE_BE_HOST}`)
-
-  // @ts-ignore
-export const JELLYFISH_VERSION = import.meta.env.VITE_JELLYFISH_VERSION
+export const JELLYFISH_VERSION = import.meta.env.VITE_JELLYFISH_VERSION;
 // @ts-ignore
-export const JELLYROOM_VERSION = import.meta.env.VITE_JELLYROOM_VERSION
+export const JELLYROOM_VERSION = import.meta.env.VITE_JELLYROOM_VERSION;
 
-// videoroom_backend should return this address (host and port)
-// @ts-ignore
-const origin_websocket_url = new URL(window.location.origin)
-origin_websocket_url.protocol = isSecure ? "wss:" : "ws:";
+export const getSignalingAddress = (url: string) => {
+  const jellyfishUrl = new URL(url);
 
-export const getSignalingAddress = (serverAddress: String) => {
-  return {
-    host: serverAddress.toString(),
-    path: "/socket/peer/websocket",
-    protocol: isSecure ? "wss" : "ws"
-  }
-}
-
-export const JELLYFISH_WEBSOCKET_PROTOCOL = isSecure ? "wss" : "ws";
+  return ({
+    protocol: jellyfishUrl.protocol.replace(":", ""),
+    path: jellyfishUrl.pathname,
+    host: jellyfishUrl.host
+  });
+};
 
 export const MAX_TILE_HEIGHT_FOR_MEDIUM_ENCODING = 600;
 export const MAX_TILE_HEIGHT_FOR_LOW_ENCODING = 250;

assets/src/room.api.tsx

@@ -1,19 +1,16 @@
 import axios from "axios";
-import { RoomApi } from "./api";
-import { BACKEND_URL } from "./pages/room/consts";
+import { ConnectionData, RoomApi } from "./api";
 
-const API = new RoomApi(undefined, BACKEND_URL.origin, axios);
+const API = new RoomApi(undefined, window.location.origin, axios);
 
-export const getTokenAndAddress = (roomId: string) =>
-  API.videoroomWebRoomControllerShow(roomId).then((resp) => {
-    // @ts-ignore    
-    const address = resp?.data?.data?.jellyfish_address || "";
+export const getTokenAndAddress = (roomId: string, username: string): Promise<ConnectionData> =>
+  API.apiRoomsRoomIdUsersUserIdGet(roomId, username).then((resp) => {
+    if (!resp) throw Error("Empty response");
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const token = resp?.data?.data?.token || "";
-    return { token: token, serverAddress: address };
+    console.log({ name: "Response", result: resp.data });
+
+    return resp.data;
   });
 
 export const startRecording = (roomId: string) =>
-  API.videoroomWebRoomControllerStartRecording(roomId);
+  API.videoroomWebRoomControllerStartRecording(roomId);