From 4bb2dc909edb9501387fc9bfbbd6689b6c3faa81 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Wed, 17 Apr 2024 20:15:33 +0200
Subject: [PATCH] Update server ports and Livekit URLs in openvidu-react
 tutorial

---
 openvidu-react/package.json |  2 +-
 openvidu-react/src/App.tsx  | 64 ++++++++++++++++---------------------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/openvidu-react/package.json b/openvidu-react/package.json
index 1072e03e..5184d334 100644
--- a/openvidu-react/package.json
+++ b/openvidu-react/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 5080 --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
diff --git a/openvidu-react/src/App.tsx b/openvidu-react/src/App.tsx
index 653c16fd..d92c6abc 100644
--- a/openvidu-react/src/App.tsx
+++ b/openvidu-react/src/App.tsx
@@ -14,7 +14,29 @@ import OvVideo from './OvVideo';
 import OvAudio from './OvAudio';
 
 const App = () => {
-	const APPLICATION_SERVER_URL = import.meta.env.VITE_APPLICATION_SERVER_URL;
+	// For local development, leave these variables empty
+	// For production, configure them with correct URLs depending on your deployment
+	let APPLICATION_SERVER_URL = '';
+	let LIVEKIT_URL = '';
+
+	// If APPLICATION_SERVER_URL is not configured, use default value from local development
+	if (!APPLICATION_SERVER_URL) {
+		if (window.location.hostname === 'localhost') {
+			APPLICATION_SERVER_URL = 'http://localhost:6080/';
+		} else {
+			APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';
+		}
+	}
+
+	// If LIVEKIT_URL is not configured, use default value from local development
+	if (!LIVEKIT_URL) {
+		if (window.location.hostname === 'localhost') {
+			LIVEKIT_URL = 'ws://localhost:7880/';
+		} else {
+			LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
+		}
+	}
+
 	const [myRoomName, setMyRoomName] = useState('');
 	const [myParticipantName, setMyParticipantName] = useState('');
 	const [room, setRoom] = useState<Room | undefined>(undefined);
@@ -30,10 +52,10 @@ const App = () => {
 
 	const joinRoom = () => {
 
-    // --- 1) Get a Room object ---
+		// --- 1) Get a Room object ---
 
-    const room = new Room();
-    setRoom(room);
+		const room = new Room();
+		setRoom(room);
 
 		// --- 2) Specify the actions when events take place in the room ---
 
@@ -59,11 +81,9 @@ const App = () => {
 		);
 
 		getToken(myRoomName, myParticipantName).then(async (token: string) => {
-			const livekitUrl = getLivekitUrlFromMetadata(token);
-
 			// First param is the LiveKit server URL. Second param is the access token
 			try {
-				await room.connect(livekitUrl, token);
+				await room.connect(LIVEKIT_URL, token);
 				// --- 4) Publish your local tracks ---
 				await room.localParticipant.setMicrophoneEnabled(true);
 				const videoPublication = await room.localParticipant.setCameraEnabled(
@@ -106,36 +126,6 @@ const App = () => {
 		[]
 	);
 
-	const getLivekitUrlFromMetadata = useMemo(
-		() =>
-			(token: string): string => {
-				if (!token)
-					throw new Error('Trying to get room metadata from an empty token');
-				try {
-					const base64Url = token.split('.')[1];
-					const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
-					const jsonPayload = decodeURIComponent(
-						window
-							.atob(base64)
-							.split('')
-							.map((c) => {
-								return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-							})
-							.join('')
-					);
-
-					const payload = JSON.parse(jsonPayload);
-					if (!payload?.metadata)
-						throw new Error('Token does not contain metadata');
-					const metadata = JSON.parse(payload.metadata);
-					return metadata.livekitUrl;
-				} catch (error) {
-					throw new Error('Error decoding and parsing token: ' + error);
-				}
-			},
-		[]
-	);
-
 	const handleMainVideoStream = (
 		publication: LocalTrackPublication | RemoteTrackPublication
 	) => {