From aa111acdfb7526b3e7822cf7f5e29743a7a95795 Mon Sep 17 00:00:00 2001
From: knotteye <knotteye@airmail.cc>
Date: Fri, 15 Jan 2021 23:14:57 -0600
Subject: [PATCH] Add viewer count to web UI

---
 site/index.js      | 15 ++++++++++++++-
 src/http.ts        |  2 +-
 templates/user.njk | 16 ++++++++++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/site/index.js b/site/index.js
index 66214d2..374378e 100644
--- a/site/index.js
+++ b/site/index.js
@@ -80,9 +80,10 @@ async function render(path, s){
 			else var usr = path.substring(7);
 			var config = JSON.parse(await makeRequest("GET", '/api/'+usr+'/config'));
 			if(!config.title){document.body.innerHTML = nunjucks.render('404.njk', context); break;}
-			document.body.innerHTML = nunjucks.render('user.njk', Object.assign({about: config.about, title: config.title, username: config.username}, context));
+			document.body.innerHTML = nunjucks.render('user.njk', Object.assign({about: config.about, title: config.title, username: config.username, viewers: config.viewers}, context));
 			modifyLinks();
 			initPlayer(usr);
+			updateViewers();
 			break;
 		case (path.match(/^\/vods\/.+\/manage\/?$/) || {}).input: // /vods/:user/manage
 			var usr = path.substring(6, (path.length - 7));
@@ -177,6 +178,18 @@ function modifyLinks() {
 	}
 }
 
+async function updateViewers(){
+	let vc  = document.getElementById('viewercount');
+	if(!vc) return false;
+	let path = window.location.pathname;
+	if(path.substring(path.length - 1).indexOf('/') !== -1)
+	var usr = path.substring(7, path.length - 1);
+	else var usr = path.substring(7);
+	let viewers = JSON.parse(await makeRequest("GET", "/api/"+usr+"/config")).viewers;
+	vc.innerHTML = "[Viewers: "+viewers+"]";
+	setTimeout(updateViewers, 2000);
+}
+
 function internalLink(path){
 	this.render(path);
 	return false;
diff --git a/src/http.ts b/src/http.ts
index 697e378..4936c35 100644
--- a/src/http.ts
+++ b/src/http.ts
@@ -476,7 +476,7 @@ async function initSite(openReg) {
 		});
 	});
 	app.get('/users/:user', (req, res) => {
-		db.query('select username,title,about from user_meta where username='+db.raw.escape(req.params.user)).then((result) => {
+		db.query('select username,title,about,viewers from user_meta where username='+db.raw.escape(req.params.user)).then((result) => {
 			if(result[0]){
 				if(tryDecode(req.cookies.Authorization)) {
 					res.render('user.njk', Object.assign(result[0], {auth: {is: true, name: JWT.decode(req.cookies.Authorization)['username']}}, njkconf));
diff --git a/templates/user.njk b/templates/user.njk
index f6fc56c..29e048e 100644
--- a/templates/user.njk
+++ b/templates/user.njk
@@ -5,7 +5,6 @@
 shakaPolyFilled = false;
 var manifestUri = document.location.protocol+'//'+document.location.host+'/live/{{ username }}/index.mpd';
 async function initPlayer() {
-  console.log('Trying to initialize player.');
   if(!shakaPolyFilled){
   	shaka.polyfill.installAll();
   	shakaPolyFilled = true;
@@ -58,9 +57,22 @@ function newPopup(url) {
 	popupWindow = window.open(
 		url,'popUpWindow','height=700,width=450,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
 }
+async function updateViewers(){
+	let vc  = document.getElementById('viewercount');
+	if(!vc) return false;
+	let path = window.location.pathname;
+	if(path.substring(path.length - 1).indexOf('/') !== -1)
+	var usr = path.substring(7, path.length - 1);
+	else var usr = path.substring(7);
+	let viewers = JSON.parse(await makeRequest("GET", "/api/"+usr+"/config")).viewers;
+	vc.innerHTML = "[Viewers: "+viewers+"]";
+	setTimeout(updateViewers, 2000);
+}
 </script>
   </br>
-	<span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</a></span>
+	<span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}<span id="viewercount" onload="updateViewers">[Viewers: {{viewers}}]</span>
+	  <script>updateViewers()</script>
+	  </b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</a></span>
 	<div id="jscontainer">
 		<div id="jschild" style="width: 70%;height: 100%;position: relative;">
 			<image id="playbtn" src="/play.svg" alt="Play Stream" style="width:100%;height:100%;width: 950px;height: 534px;position: absolute;" onclick="document.getElementById('video').paused ? document.getElementById('video').play() : document.getElementById('video')	.pause();"></image>