Add version number to UI

diff --git a/app/styles/base.css b/app/styles/base.css
index 3ca9894dc74234dacd532f264a629215dd615651..4aa3f1b2c378a00818e63f06fed3cfaf65a97f13 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -631,6 +631,16 @@ select:active {
   width: 100px;
 }
 
+/* Version */
+
+.noVNC_version_wrapper {
+  font-size: small;
+}
+
+.noVNC_version {
+  margin-left: 1rem;
+}
+
 /* Connection Controls */
 :root:not(.noVNC_connected) #noVNC_disconnect_button {
   display: none;

diff --git a/app/ui.js b/app/ui.js
index 55d5cbe073b8b608f897a3d3dc91444f1c4994a4..475896183c3979b7e4f7814d8d0e3844c565e05e 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -59,6 +59,17 @@ const UI = {
         // Translate the DOM
         l10n.translateDOM();
 
+        WebUtil.fetchJSON('../package.json')
+            .then((packageInfo) => {
+                Array.from(document.getElementsByClassName('noVNC_version')).forEach(el => el.innerText = packageInfo.version);
+            })
+            .catch(err => {
+                Log.Error("Couldn't fetch package.json: " + err);
+                Array.from(document.getElementsByClassName('noVNC_version_wrapper'))
+                    .concat(Array.from(document.getElementsByClassName('noVNC_version_separator')))
+                    .forEach(el => el.style.display = 'none');
+            });
+
         // Adapt the interface for touch screen devices
         if (isTouchDevice) {
             document.documentElement.classList.add("noVNC_touch");

diff --git a/vnc.html b/vnc.html
index 212321bd7ffb11d843f2b8d16906a557750d8ccf..b98bb6f3ca1b860525f754a62398925077152454 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -259,6 +259,11 @@
                             </li>
                         </ul></div>
                     </li>
+                    <li class="noVNC_version_separator"><hr></li>
+                    <li class="noVNC_version_wrapper">
+                        <span>Version:</span>
+                        <span class="noVNC_version"></span>
+                    </li>
                 </ul>
             </div>
             </div>