nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Better chat stats on landing page

Browse Source
This commit is contained in:
Noah Petherbridge 2023-06-10 13:25:06 -07:00
parent d6c4512cee
commit b262ac4be6
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/worker/barertc.go
View File

@ -15,6 +15,10 @@ import (
type ChatStatistics struct { type ChatStatistics struct {
UserCount int UserCount int
Usernames []string Usernames []string
Cameras struct {
Blue int
Red int
}
} }
// GetChatStatistics returns the latest (cached) chat statistics. // GetChatStatistics returns the latest (cached) chat statistics.

30
web/templates/chat.html
View File

@ -45,7 +45,17 @@
<div class="notification is-success is-light" id="chatStatsBanner" style="display: none"> <div class="notification is-success is-light" id="chatStatsBanner" style="display: none">
<span id="usersOnline"></span> <span id="usersOnline"></span>
<a id="whoLink" href="#" style="visibility: hidden">Who?</a> <a id="whoLink" href="#" style="visibility: hidden">Who?</a>
<span id="whoList" style="visibility: hidden"></span> <span id="whoList" style="display: none"></span>
<!-- Camera stats if active -->
<div id="cameraStats" style="display: none" class="mt-2">
<i class="fa fa-camera"></i>
<span id="cameraCount">0 people are on camera</span>
<span class="is-size-7">
(<i class="fa fa-video has-text-info"></i> <span id="cameraBlue" class="has-text-info">0</span> /
<i class="fa fa-video has-text-danger"></i> <span id="cameraRed" class="has-text-danger">0</span>).
</span>
</div>
</div> </div>
<p> <p>
@ -132,11 +142,14 @@ function showWhoBanner(chatStatistics) {
const $banner = document.querySelector("#chatStatsBanner"), const $banner = document.querySelector("#chatStatsBanner"),
$whoLink = document.querySelector("#whoLink"), $whoLink = document.querySelector("#whoLink"),
$whoList = document.querySelector("#whoList"), $whoList = document.querySelector("#whoList"),
$usersOnline = document.querySelector("#usersOnline"); $usersOnline = document.querySelector("#usersOnline")
$cameraStats = document.querySelector("#cameraStats")
$cameraCount = document.querySelector("#cameraCount")
$cameraRed = document.querySelector("#cameraRed")
$cameraBlue = document.querySelector("#cameraBlue");
$banner.style.display = "block"; $banner.style.display = "block";
console.log(chatStatistics);
let people = chatStatistics.UserCount === 1 ? 'person' : 'people'; let people = chatStatistics.UserCount === 1 ? 'person' : 'people';
let isAre = chatStatistics.UserCount === 1 ? 'is' : 'are'; let isAre = chatStatistics.UserCount === 1 ? 'is' : 'are';
$usersOnline.innerHTML = `There ${isAre} currently <strong>${chatStatistics.UserCount}</strong> ${people}</span> in the chat room`; $usersOnline.innerHTML = `There ${isAre} currently <strong>${chatStatistics.UserCount}</strong> ${people}</span> in the chat room`;
@ -149,6 +162,15 @@ function showWhoBanner(chatStatistics) {
} else { } else {
$usersOnline.innerHTML += "."; $usersOnline.innerHTML += ".";
} }
// Camera stats too?
if (chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red > 0) {
let count = chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red;
$cameraStats.style.display = "block";
$cameraCount.innerHTML = `<strong>${count} webcam${count === 1 ? '</strong> is' : 's</strong> are'} active`;
$cameraRed.innerHTML = chatStatistics.Cameras.Red;
$cameraBlue.innerHTML = chatStatistics.Cameras.Blue;
}
} }
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
let url = "{{.ChatAPI}}", let url = "{{.ChatAPI}}",
@ -166,7 +188,7 @@ window.addEventListener("DOMContentLoaded", () => {
$whoLink.addEventListener("click", (e) => { $whoLink.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
$whoLink.style.display = "none"; $whoLink.style.display = "none";
$whoList.style.visibility = "visible"; $whoList.style.display = "";
}); });
fetch(url, { fetch(url, {