switching visuals per app, link for creating create join links

velconnect/routes/api.py

@@ -50,7 +50,7 @@ async def read_root():
         default-schema-tab = 'example'
         > 
         <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;"> 
-          <img src = "http://velconnect.ugavel.com/static/favicons/android-chrome-256x256.png" style="width:10em; margin: auto;" />
+          <img src = "/static/img/velconnect_logo_1.png" style="width:10em; margin: 2em auto;" />
         </div>
       </rapi-doc>
     </body>

velconnect/routes/api_v2.py

@@ -4,7 +4,6 @@ import string
 
 import fastapi
 from fastapi.responses import HTMLResponse
-from pydantic import BaseModel
 
 import db
 
@@ -38,7 +37,7 @@ async def read_root():
         default-schema-tab = 'example'
         > 
         <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;"> 
-          <img src = "http://velconnect.ugavel.com/static/favicons/android-chrome-256x256.png" style="width:10em; margin: auto;" />
+          <img src = "/static/img/velconnect_logo_1.png" style="width:10em; margin: 2em auto;" />
         </div>
       </rapi-doc>
     </body>

velconnect/static/js/util.js

@@ -1,9 +1,8 @@
-
 function httpGetAsync(theUrl, callback, failCallback) {
-    var xmlHttp = new XMLHttpRequest();
+    const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
-        if (xmlHttp.readyState == 4) {
-            if (xmlHttp.status == 200) {
+        if (xmlHttp.readyState === 4) {
+            if (xmlHttp.status === 200) {
                 callback(xmlHttp.responseText);
             } else {
                 failCallback(xmlHttp.status);
@@ -16,7 +15,7 @@ function httpGetAsync(theUrl, callback, failCallback) {
 
 
 function httpPostAsync(theUrl, data, callback, failCallback) {
-    var xmlHttp = new XMLHttpRequest();
+    const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState === 4) {
             if (xmlHttp.status === 200) {
@@ -45,10 +44,10 @@ function getCookie(cname) {
     let ca = decodedCookie.split(';');
     for (let i = 0; i < ca.length; i++) {
         let c = ca[i];
-        while (c.charAt(0) == ' ') {
+        while (c.charAt(0) === ' ') {
             c = c.substring(1);
         }
-        if (c.indexOf(name) == 0) {
+        if (c.indexOf(name) === 0) {
             return c.substring(name.length, c.length);
         }
     }
@@ -56,7 +55,7 @@ function getCookie(cname) {
 }
 
 function writeClass(className, data) {
-    if (data == undefined || data == null || data.toString() == 'undefined') {
+    if (data === undefined || data == null || data.toString() === 'undefined') {
         data = "";
     }
 
@@ -67,7 +66,7 @@ function writeClass(className, data) {
 }
 
 function writeId(idName, data) {
-    if (data == undefined || data == null || data.toString() == 'undefined') {
+    if (data === undefined || data == null || data.toString() === 'undefined') {
         data = "";
     }
 
@@ -75,7 +74,7 @@ function writeId(idName, data) {
 }
 
 function writeValue(className, data) {
-    if (data == undefined || data == null || data.toString() == 'undefined') {
+    if (data === undefined || data == null || data.toString() === 'undefined') {
         data = "";
     }
 
@@ -87,7 +86,7 @@ function writeValue(className, data) {
 
 
 function writeSrc(className, data) {
-    if (data == undefined || data == null || data.toString() == 'undefined') {
+    if (data === undefined || data == null || data.toString() === 'undefined') {
         data = "";
     }
 
@@ -132,23 +131,38 @@ function timeSinceString(date) {
     let interval = seconds / 31536000;
 
     if (interval > 1) {
-        return Math.floor(interval) + " years";
+        let val = Math.floor(interval);
+        let ret = val + " year";
+        if (val !== 1) ret += "s";
+        return ret;
     }
     interval = seconds / 2592000;
     if (interval > 1) {
-        return Math.floor(interval) + " months";
+        let val = Math.floor(interval);
+        let ret = val + " month";
+        if (val !== 1) ret += "s";
+        return ret;
     }
     interval = seconds / 86400;
     if (interval > 1) {
-        return Math.floor(interval) + " days";
+        let val = Math.floor(interval);
+        let ret = val + " day";
+        if (val !== 1) ret += "s";
+        return ret;
     }
     interval = seconds / 3600;
     if (interval > 1) {
-        return Math.floor(interval) + " hours";
+        let val = Math.floor(interval);
+        let ret = val + " hour";
+        if (val !== 1) ret += "s";
+        return ret;
     }
     interval = seconds / 60;
     if (interval > 1) {
-        return Math.floor(interval) + " minutes";
+        let val = Math.floor(interval);
+        let ret = val + " minute";
+        if (val !== 1) ret += "s";
+        return ret;
     }
     return Math.floor(seconds) + " seconds";
 }

velconnect/templates/api.html

@@ -8,7 +8,7 @@
 
 <body>
   <rapi-doc render-style="read" primary-color="#bc1f2d" show-header="false" show-info="true"
-    spec-url="https://connect.vel.workers.dev/api/api_spec.json" default-schema-tab='example'>
+    spec-url="/api/api_spec.json" default-schema-tab='example'>
 
 
     <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;">

velconnect/templates/index.html

@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
 
 <head>
 
@@ -54,11 +54,11 @@
     <div id="headset_details" style="display: none;">
         <div class="panel card">
             <div class="card-image">
-                <img class="img-responsive" src="/static/img/mini_landscape.png" alt="conVRged Logo">
+                <img id="cover_image" class="img-responsive" src="/static/img/cover_default.png">
             </div>
             <div class="panel-header text-center">
                 <figure class="avatar avatar-lg" style="background: none;"><img
-                        src="/static/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
+                        src="/static/img/velconnect_logo_1_square.webp" alt="Avatar"></figure>
                 <div class="panel-title h5 mt-10">Headset ID:</div>
                 <code class="panel-subtitle hw_id">---</code>
                 <br>
@@ -72,7 +72,8 @@
                         <div class="col-6">
                             <a href="/pair">
                                 <button class="btn btn-primary btn-lg tooltip tooltip-right" id="pair_new"
-                                        data-tooltip="Clear this headset and pair a new headset">Pair New
+                                        data-tooltip="Clear this headset and pair a new headset">
+                                    Pair New
                                 </button>
                             </a>
                         </div>
@@ -166,6 +167,15 @@
                 <div class="tile tile-centered">
                     <div class="tile-content">
                         <div class="tile-title text-bold">Current Room</div>
+                        <div class="tile-subtitle">
+                            <a id="shareable_link" href="" target="blank">
+                                Shareable Link
+                                <svg style="width:1em;height:1em" viewBox="0 0 24 24">
+                                    <path fill="currentColor"
+                                          d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
+                                </svg>
+                            </a>
+                        </div>
                         <input class="btn current_room" type="text" id="current_room" placeholder="----">
                         <input style="display: none;" class="btn current_app" type="text" id="current_app"
                                placeholder="----">
@@ -287,6 +297,9 @@
                     ]
                 });
 
+                document.getElementById('cover_image').src = `/static/img/cover_${respData['device']['current_app']}.png`
+                document.getElementById('shareable_link').href = `/join/${respData['device']['current_app']}/${respData['device']['current_room']}`
+
                 loading.style.display = "none";
                 headset_details.style.display = "block";
             }, (status) => {

velconnect/templates/join.html

@@ -54,7 +54,7 @@
     <div id="headset_details" style="display: none;">
         <div class="panel card">
             <div class="card-image">
-                <img class="img-responsive" src="/static/img/mini_landscape.png" alt="conVRged Logo">
+                <img id="cover_image" class="img-responsive" src="/static/img/cover_default.png">
             </div>
             <div class="panel-header text-center">
                 <figure class="avatar avatar-lg" style="background: none;"><img
@@ -148,6 +148,8 @@
 
         if (hw_id !== "" && hw_id !== undefined && hw_id !== "undefined") {
 
+            document.getElementById('cover_image').src = `/static/img/cover_{{app_id}}.png`
+
             setDeviceData({
                 "join_room_request_{{app_id}}": "{{link}}"
             }, () => {