From 186d6d5806a19e1b4a3d9516003d6a5023e3166e Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Tue, 7 May 2024 17:30:19 +0200
Subject: [PATCH] Update JavaScript basic tutorial to display local video first
 in the grid layout

---
 basic/frontend/javascript/README.md  |  6 +++---
 basic/frontend/javascript/web/app.js | 23 +++++++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/basic/frontend/javascript/README.md b/basic/frontend/javascript/README.md
index c7469ba0..b15f0408 100644
--- a/basic/frontend/javascript/README.md
+++ b/basic/frontend/javascript/README.md
@@ -1,8 +1,8 @@
-# Basic Frontend JavaScript
+# Basic JavaScript
 
 Basic client application built with plain HTML, CSS and JavaScript. It internally uses [livekit-client-sdk-js](https://docs.livekit.io/client-sdk-js/).
 
-For further information, check the [tutorial documentation](https://livekit-tutorials.openvidu.io/basic/frontend/javascript).
+For further information, check the [tutorial documentation](https://livekit-tutorials.openvidu.io/basic/client/javascript).
 
 ## Prerequisites
 
@@ -14,7 +14,7 @@ For further information, check the [tutorial documentation](https://livekit-tuto
 
 ```bash
 git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git
-cd openvidu-livekit-tutorials/basic/frontend/javascript
+cd openvidu-livekit-tutorials/client/javascript
 ```
 
 2. Run the application
diff --git a/basic/frontend/javascript/web/app.js b/basic/frontend/javascript/web/app.js
index 889ec05c..ff74e56a 100644
--- a/basic/frontend/javascript/web/app.js
+++ b/basic/frontend/javascript/web/app.js
@@ -70,18 +70,18 @@ async function joinRoom() {
     }
 }
 
-function addTrack(track, participantIdentity, local = false) {
+function addTrack(track, participantIdentity, isLocal = false) {
     const element = track.attach();
     element.id = track.sid;
 
     /* If the track is a video track, we create a container and append the video element to it 
     with the participant's identity */
     if (track.kind === "video") {
-        const videoContainer = createVideoContainer(participantIdentity);
-        videoContainer.appendChild(element);
-        appendParticipantData(videoContainer, participantIdentity + (local ? " (You)" : ""));
+        const videoContainer = createVideoContainer(participantIdentity, isLocal);
+        videoContainer.append(element);
+        appendParticipantData(videoContainer, participantIdentity + (isLocal ? " (You)" : ""));
     } else {
-        document.getElementById("layout-container").appendChild(element);
+        document.getElementById("layout-container").append(element);
     }
 }
 
@@ -108,11 +108,18 @@ function generateFormValues() {
     document.getElementById("participant-name").value = "Participant" + Math.floor(Math.random() * 100);
 }
 
-function createVideoContainer(participantIdentity) {
+function createVideoContainer(participantIdentity, isLocal = false) {
     const videoContainer = document.createElement("div");
     videoContainer.id = `camera-${participantIdentity}`;
     videoContainer.className = "video-container";
-    document.getElementById("layout-container").appendChild(videoContainer);
+    const layoutContainer = document.getElementById("layout-container");
+
+    if (isLocal) {
+        layoutContainer.prepend(videoContainer);
+    } else {
+        layoutContainer.append(videoContainer);
+    }
+
     return videoContainer;
 }
 
@@ -120,7 +127,7 @@ function appendParticipantData(videoContainer, participantIdentity) {
     const dataElement = document.createElement("div");
     dataElement.className = "participant-data";
     dataElement.innerHTML = `<p>${participantIdentity}</p>`;
-    videoContainer.appendChild(dataElement);
+    videoContainer.prepend(dataElement);
 }
 
 function removeVideoContainer(participantIdentity) {