From 85140211f13d9a66211d8eaca8e042b1b6590998 Mon Sep 17 00:00:00 2001
From: pabloFuente <pablofuenteperez@gmail.com>
Date: Wed, 11 Jul 2018 17:50:39 +0200
Subject: [PATCH] openvidu-webcomponent updated to fit tutorial doc

---
 openvidu-webcomponent/README.md      |  4 +--
 openvidu-webcomponent/web/app.js     | 43 ++++++++++++++--------------
 openvidu-webcomponent/web/index.html | 19 ++++++------
 3 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/openvidu-webcomponent/README.md b/openvidu-webcomponent/README.md
index 9979aeb7..09a9dc97 100644
--- a/openvidu-webcomponent/README.md
+++ b/openvidu-webcomponent/README.md
@@ -5,9 +5,9 @@
 
 [![][OpenViduLogo]](http://openvidu.io)
 
-openvidu-starter
+openvidu-webcomponent
 ===
 
-Visit [openvidu.io/docs/tutorials/openvidu-starter/](http://openvidu.io/docs/tutorials/openvidu-webcomponent/)
+Visit [openvidu.io/docs/tutorials/openvidu-webcomponent/](http://openvidu.io/docs/tutorials/openvidu-webcomponent/)
 
 [OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120
diff --git a/openvidu-webcomponent/web/app.js b/openvidu-webcomponent/web/app.js
index e74cf89f..04434738 100644
--- a/openvidu-webcomponent/web/app.js
+++ b/openvidu-webcomponent/web/app.js
@@ -1,55 +1,54 @@
 $(document).ready(() => {
-    var ov = document.querySelector('openvidu-webcomponent');
+    var webComponent = document.querySelector('openvidu-webcomponent');
+    var form = document.getElementById('main');
 
-    ov.addEventListener('joinSession', (event) => {
-        document.getElementById('main').style.display = 'none';
-        document.getElementById('session').style.display = 'block';
+    webComponent.addEventListener('joinSession', (event) => {
+        form.style.display = 'none';
+        webComponent.style.display = 'block';
     });
-
-    ov.addEventListener('leaveSession', (event) => {
-        document.getElementById('main').style.display = 'block';
-        document.getElementById('session').style.display = 'none';
+    webComponent.addEventListener('leaveSession', (event) => {
+        form.style.display = 'block';
+        webComponent.style.display = 'none';
     });
-
-    ov.addEventListener('error', (event) => {
+    webComponent.addEventListener('error', (event) => {
         console.log('Error event', event.detail);
     });
 });
 
 function joinSession() {
-    var ov = document.querySelector('openvidu-webcomponent');
-    var sessionId = document.getElementById('sessionId').value;
+    var sessionName = document.getElementById('sessionName').value;
     var user = document.getElementById('user').value;
 
-    getToken(sessionId).then((token) => {
-        ov.sessionConfig = { sessionId, user, token };
+    getToken(sessionName).then((token) => {
+        var webComponent = document.querySelector('openvidu-webcomponent');
+        webComponent.sessionConfig = { sessionName, user, token };
     });
 }
 
 /**
  * --------------------------
- * SERVER-SIDE RESPONSABILITY
+ * SERVER-SIDE RESPONSIBILITY
  * --------------------------
  * These methods retrieve the mandatory user token from OpenVidu Server.
- * This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+ * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
  * the API REST, openvidu-java-client or openvidu-node-client):
  *   1) Initialize a session in OpenVidu Server	(POST /api/sessions)
  *   2) Generate a token in OpenVidu Server		(POST /api/tokens)
- *   3) The token must be consumed in Session.connect() method
+ *   3) Configure OpenVidu Web Component in your client side with the token
  */
 
 var OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
 
-function getToken(mySessionId) {
-    return createSession(mySessionId).then((sessionId) => createToken(sessionId));
+function getToken(sessionName) {
+    return createSession(sessionName).then((sessionId) => createToken(sessionId));
 }
 
-function createSession(sessionId) {
+function createSession(sessionName) {
     return new Promise((resolve, reject) => {
         $.ajax({
             type: 'POST',
             url: OPENVIDU_SERVER_URL + '/api/sessions',
-            data: JSON.stringify({ customSessionId: sessionId }),
+            data: JSON.stringify({ customSessionId: sessionName }),
             headers: {
                 Authorization: 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
                 'Content-Type': 'application/json',
@@ -57,7 +56,7 @@ function createSession(sessionId) {
             success: (response) => resolve(response.id),
             error: (error) => {
                 if (error.status === 409) {
-                    resolve(sessionId);
+                    resolve(sessionName);
                 } else {
                     console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + OPENVIDU_SERVER_URL);
                     if (
diff --git a/openvidu-webcomponent/web/index.html b/openvidu-webcomponent/web/index.html
index 2a100335..cd2c67b3 100644
--- a/openvidu-webcomponent/web/index.html
+++ b/openvidu-webcomponent/web/index.html
@@ -7,24 +7,20 @@
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
         crossorigin="anonymous"></script>
 
-
-    <!-- OpenVidu WebComponent -->
-    <link rel="stylesheet" href="openvidu-webcomponent.css">
-    <script type='application/javascript' src='openvidu-webcomponent.js'></script>
-    <!-- OpenVidu WebComponent -->
-
     <script src="app.js"></script>
-
-
+    <script src='openvidu-webcomponent.js'></script>
+    <link rel="stylesheet" href="openvidu-webcomponent.css">
 </head>
 
 <body>
+
+    <!-- Form to connect to a video-session -->
     <div id="main" style="text-align: center;">
         <h1>Join a video session</h1>
         <form onsubmit="joinSession(); return false" style="padding: 80px; margin: auto">
             <p>
                 <label>Session:</label>
-                <input type="text" id="sessionId" value="SessionA" required>
+                <input type="text" id="sessionName" value="SessionA" required>
             </p>
             <p>
                 <label>User:</label>
@@ -36,8 +32,9 @@
         </form>
     </div>
 
-    <openvidu-webcomponent id="session" style="display: none;"></openvidu-webcomponent>
+    <!-- OpenVidu Web Component -->
+    <openvidu-webcomponent style="display: none;"></openvidu-webcomponent>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file