Add call counter

assets/css/components/calls/window.css

@@ -64,6 +64,10 @@
 	color: inherit;
 }
 
+.call-window .head .time {
+	font-size: 80%;
+}
+
 .call-window .record-label {
 	color: red;
 	margin-left: 10px;

assets/js/common/utils.js

@@ -818,4 +818,19 @@ function requestUserScreen() {
 		});
 	})
 	
+}
+
+/**
+ * Rpad function
+ * 
+ * @param {String} str The string
+ * @param {number} len Expected length
+ * @param {string} fill Fill character
+ */
+function rpad(str, len, fill) {
+	str = String(str)
+	fill = String(fill)
+	while(str.length < len)
+		str = fill + str
+	return str
 }

assets/js/components/calls/window.js

@@ -66,6 +66,14 @@ class CallWindow extends CustomEvents {
 					" <span class='pull-right'></span>"
 			})
 
+			// Add counter
+			this.timeEl = createElem2({
+				insertBefore: this.windowHead.querySelector(".pull-right"),
+				type: "span",
+				class: "time",
+				innerHTML: "00:00:00"
+			})
+
 			// Close button
 			this.closeButton = createElem2({
 				appendTo: this.windowHead.querySelector(".pull-right"),
@@ -74,6 +82,20 @@ class CallWindow extends CustomEvents {
 				onclick: () => this.Close()
 			})
 
+			// Make counter lives
+			this.callDuration = 0;
+			const interval = setInterval(() => {
+
+				if(!this.timeEl.isConnected)
+					clearInterval(interval)
+
+				this.callDuration++;
+				this.timeEl.innerHTML = rpad(Math.floor(this.callDuration/3600), 2, 0) + ":" 
+					+ rpad(Math.floor((this.callDuration/60)%60), 2, 0) + ":"
+					+ rpad(this.callDuration%60, 2, 0)
+			}, 1000);
+
+
 			this.makeWindowDraggable();