basic VC gui

Author: MathMan05

src/webpage/app.html

@@ -89,7 +89,8 @@ <h2 id="serverName" class="ellipsis">Server Name</h2>
 					<input type="checkbox" id="memberlisttoggle" checked />
 				</div>
 				<div class="flexltr flexgrow">
-					<div class="flexttb flexgrow">
+					<div class="flexttb flexgrow" id="voiceArea"></div>
+					<div class="flexttb flexgrow" id="chatArea">
 						<div id="channelw" class="flexltr">
 							<div id="loadingdiv"></div>
 						</div>

src/webpage/channel.ts

@@ -729,6 +729,17 @@ class Channel extends SnowFlake {
 			if (typeof memb !== "string") {
 				await Member.new(memb, this.guild);
 			}
+
+			const users = this.usersDiv.deref();
+			if (users) {
+				const user = await this.localuser.getUser(typeof memb === "string" ? memb : memb.id);
+				if (joined) {
+					this.makeUserBox(user, users);
+				} else {
+					this.destUserBox(user);
+				}
+			}
+
 			this.updateVoiceUsers();
 			if (this.voice === this.localuser.currentVoice) {
 				AVoice.noises("join");
@@ -1060,7 +1071,124 @@ class Channel extends SnowFlake {
 		if (!this.last_pin_timestamp && !this.lastpin) return false;
 		return this.last_pin_timestamp !== this.lastpin;
 	}
-	async getHTML(addstate = true, getMessages = true) {
+	boxMap = new Map<string, HTMLElement>();
+	destUserBox(user: User) {
+		const box = this.boxMap.get(user.id);
+		if (!box) return;
+		box.remove();
+		this.boxMap.delete(user.id);
+	}
+	async makeUserBox(user: User, users: HTMLElement) {
+		const memb = Member.resolveMember(user, this.guild);
+		const box = document.createElement("div");
+		this.boxMap.set(user.id, box);
+		if (user.accent_color != undefined) {
+			box.style.setProperty(
+				"--accent_color",
+				`#${user.accent_color.toString(16).padStart(6, "0")}`,
+			);
+		}
+		memb.then((_) => {
+			if (!_) return;
+			if (_.accent_color !== undefined) {
+				box.style.setProperty("--accent_color", `#${_.accent_color.toString(16).padStart(6, "0")}`);
+			}
+		});
+
+		box.append(user.buildpfp(this.guild));
+
+		const span = document.createElement("span");
+		span.textContent = user.name;
+		memb.then((_) => {
+			if (!_) return;
+			span.textContent = _.name;
+		});
+		span.classList.add("voiceUsername");
+		box.append(span);
+		users.append(box);
+	}
+	usersDiv = new WeakRef(document.createElement("div"));
+	async setUpVoiceArea() {
+		if (!this.voice) throw new Error("voice not found?");
+		const voiceArea = document.getElementById("voiceArea") as HTMLElement;
+		const buttonRow = document.createElement("div");
+		buttonRow.classList.add("flexltr", "buttonRow");
+		const updateMicIcon = () => {
+			mspan.classList.remove("svg-micmute", "svg-mic");
+			mspan.classList.add(this.localuser.mute ? "svg-micmute" : "svg-mic");
+		};
+
+		const mute = document.createElement("div");
+		const mspan = document.createElement("span");
+		mute.append(mspan);
+		updateMicIcon();
+		this.localuser.updateOtherMic = updateMicIcon;
+		mute.onclick = () => {
+			this.localuser.mute = !this.localuser.mute;
+			this.localuser.updateMic();
+		};
+		mute.classList.add("muteVoiceIcon");
+
+		const updateCallIcon = () => {
+			cspan.classList.remove("svg-call", "svg-hangup");
+			cspan.classList.add(this.voice?.open ? "svg-hangup" : "svg-call");
+		};
+		const call = document.createElement("div");
+		const cspan = document.createElement("span");
+		call.append(cspan);
+		updateCallIcon();
+		call.onclick = async () => {
+			if (this.voice?.userids.has(this.localuser.user.id)) {
+				this.voice.leave();
+			} else if (this.voice) {
+				await this.localuser.joinVoice(this);
+			}
+			updateCallIcon();
+		};
+		call.classList.add("callVoiceIcon");
+
+		buttonRow.append(mute, call);
+
+		const users = document.createElement("div");
+		users.classList.add("voiceUsers");
+		this.voice.userids.forEach(async (_, id) => {
+			const user = await this.localuser.getUser(id);
+			this.makeUserBox(user, users);
+		});
+		this.usersDiv = new WeakRef(users);
+		this.voice.onSpeakingChange = (id, speaking) => {
+			const box = this.boxMap.get(id);
+			if (!box) return;
+			if (speaking) {
+				box.classList.add("speaking");
+			} else {
+				box.classList.remove("speaking");
+			}
+		};
+
+		voiceArea.append(users, buttonRow);
+	}
+	async getHTML(addstate = true, getMessages: boolean | void = undefined) {
+		if (getMessages === undefined) {
+			getMessages = this.type !== 2 || !this.localuser.voiceAllowed;
+		}
+
+		const messages = document.getElementById("channelw") as HTMLDivElement;
+		const messageContainers = Array.from(messages.getElementsByClassName("messagecontainer"));
+		for (const thing of messageContainers) {
+			thing.remove();
+		}
+		const chatArea = document.getElementById("chatArea") as HTMLElement;
+
+		const voiceArea = document.getElementById("voiceArea") as HTMLElement;
+		voiceArea.innerHTML = "";
+		if (getMessages) {
+			chatArea.style.removeProperty("display");
+		} else {
+			chatArea.style.setProperty("display", "none");
+			this.setUpVoiceArea();
+		}
+
 		const pinnedM = document.getElementById("pinnedMDiv");
 		if (pinnedM) {
 			if (this.unreadPins()) {
@@ -1069,11 +1197,6 @@ class Channel extends SnowFlake {
 				pinnedM.classList.remove("unreadPin");
 			}
 		}
-		const ghostMessages = document.getElementById("ghostMessages") as HTMLElement;
-		ghostMessages.innerHTML = "";
-		for (const thing of this.fakeMessages) {
-			ghostMessages.append(thing[1]);
-		}
 		if (addstate) {
 			history.pushState([this.guild_id, this.id], "", "/channels/" + this.guild_id + "/" + this.id);
 		}
@@ -1095,6 +1218,7 @@ class Channel extends SnowFlake {
 		if (this.guild !== this.localuser.lookingguild) {
 			this.guild.loadGuild();
 		}
+
 		if (this.localuser.channelfocus && this.localuser.channelfocus.myhtml) {
 			this.localuser.channelfocus.myhtml.classList.remove("viewChannel");
 		}
@@ -1117,15 +1241,22 @@ class Channel extends SnowFlake {
 			return;
 		}
 
-		const prom = this.infinite.delete();
+		const ghostMessages = document.getElementById("ghostMessages") as HTMLElement;
+		ghostMessages.innerHTML = "";
+		for (const thing of this.fakeMessages) {
+			ghostMessages.append(thing[1]);
+		}
 
-		const loading = document.getElementById("loadingdiv") as HTMLDivElement;
-		Channel.regenLoadingMessages();
-		loading.classList.add("loading");
+		const prom = this.infinite.delete();
+		if (getMessages) {
+			const loading = document.getElementById("loadingdiv") as HTMLDivElement;
+			Channel.regenLoadingMessages();
+			loading.classList.add("loading");
+		}
 		this.rendertyping();
 		this.localuser.getSidePannel();
 		if (this.voice && this.localuser.voiceAllowed) {
-			this.localuser.joinVoice(this);
+			//this.localuser.joinVoice(this);
 		}
 		(document.getElementById("typebox") as HTMLDivElement).contentEditable = "" + this.canMessage;
 		(document.getElementById("upload") as HTMLElement).style.visibility = this.canMessage

src/webpage/direct.ts

@@ -54,6 +54,8 @@ class Direct extends Guild {
 		}
 	}
 	getHTML() {
+		const voiceArea = document.getElementById("voiceArea") as HTMLElement;
+		voiceArea.innerHTML = "";
 		const sideContainDiv = document.getElementById("sideContainDiv");
 		if (sideContainDiv) {
 			sideContainDiv.classList.remove("searchDiv");

src/webpage/icons/call.svg

@@ -249,9 +249,12 @@ class Localuser {
 	}
 	mute = true;
 	deaf = false;
-	updateMic() {
+	updateOtherMic = () => {};
+	updateMic(updateVoice: boolean = true) {
+		this.updateOtherMic();
 		const mic = document.getElementById("mic") as HTMLElement;
 		mic.classList.remove("svg-mic", "svg-micmute");
+		if (this.voiceFactory && updateVoice) this.voiceFactory.mute = this.mute;
 		if (this.mute) {
 			mic.classList.add("svg-micmute");
 		} else {
@@ -271,7 +274,11 @@ class Localuser {
 
 		this.mdBox();
 
-		this.voiceFactory = new VoiceFactory({id: this.user.id});
+		this.voiceFactory = new VoiceFactory({id: this.user.id}, (g) => {
+			if (this.ws) {
+				this.ws.send(JSON.stringify(g));
+			}
+		});
 		this.handleVoice();
 		this.mfa_enabled = ready.d.user.mfa_enabled as boolean;
 		this.userinfo.username = this.user.username;
@@ -757,6 +764,10 @@ class Localuser {
 					}
 					break;
 				case "VOICE_STATE_UPDATE":
+					if (this.user.id === temp.d.user_id) {
+						this.mute = temp.d.self_mute;
+						this.updateMic(false);
+					}
 					if (this.voiceFactory) {
 						this.voiceFactory.voiceStateUpdate(temp.d);
 					}

src/webpage/icons/hangup.svg

@@ -184,6 +184,69 @@ body {
 	position: relative;
 	width: 100%;
 }
+#voiceArea:empty {
+	display: none;
+}
+#voiceArea {
+	background: var(--black);
+	position: relative;
+}
+.voiceUsers {
+	padding: 20px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.speaking {
+	border: solid var(--green) 3px;
+	padding: 77px 137px !important;
+}
+.voiceUsers > * {
+	background: var(--accent_color, var(--primary-bg));
+	padding: 80px 140px;
+	width: fit-content;
+	border-radius: 8px;
+	position: relative;
+	box-sizing: border-box;
+	margin: 8px;
+
+	img {
+		width: 60px;
+		height: 60px;
+		cursor: unset;
+	}
+}
+.buttonRow > * {
+	margin-right: 6px;
+	width: 54px;
+	height: 54px;
+	background: var(--secondary-hover);
+	border-radius: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	* {
+		width: 32px !important;
+		height: 32px !important;
+		background: var(--primary-text);
+	}
+}
+.buttonRow {
+	position: absolute;
+	bottom: 20px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+.voiceUsername {
+	position: absolute;
+	bottom: 10px;
+	left: 14px;
+	background: var(--secondary-bg);
+	padding: 4px;
+	border-radius: 6px;
+}
 .flexgrow {
 	flex-grow: 1;
 	min-height: 0;
@@ -415,6 +478,15 @@ textarea {
 	display: block;
 	mask-size: cover !important;
 }
+.svg-call {
+	mask: url(/icons/call.svg);
+	mask-size: contain !important;
+}
+.svg-hangup {
+	mask: url(/icons/hangup.svg);
+	mask-size: contain !important;
+	background: var(--red);
+}
 .svg-plainx {
 	mask: url(/icons/plainx.svg);
 	mask-size: contain !important;

src/webpage/localuser.ts

@@ -499,14 +499,14 @@ class User extends SnowFlake {
 		this.bind(div, guild);
 		return div;
 	}
-	async buildstatuspfp(guild: Guild | void | Member | null): Promise<HTMLDivElement> {
+	buildstatuspfp(guild: Guild | void | Member | null): HTMLDivElement {
 		const div = document.createElement("div");
 		div.classList.add("pfpDiv");
 		const pfp = this.buildpfp(guild, div);
 		div.append(pfp);
 		const status = document.createElement("div");
 		status.classList.add("statusDiv");
-		switch (await this.getStatus()) {
+		switch (this.getStatus()) {
 			case "offline":
 			case "invisible":
 				status.classList.add("offlinestatus");
@@ -785,7 +785,7 @@ class User extends SnowFlake {
 				badgediv.append(badge);
 			}
 		})();
-		const pfp = await this.buildstatuspfp(guild);
+		const pfp = this.buildstatuspfp(guild);
 		div.appendChild(pfp);
 		const userbody = document.createElement("div");
 		userbody.classList.add("flexttb", "infosection");