add poll support

src/webpage/channel.ts

@@ -9,6 +9,7 @@ import {InfiniteScroller} from "./infiniteScroller.js";
 import {SnowFlake} from "./snowflake.js";
 import {
 	channeljson,
+	creatPollJSON,
 	embedjson,
 	filejson,
 	memberjson,
@@ -3619,12 +3620,14 @@ class Channel extends SnowFlake {
 			embeds = [],
 			sticker_ids = [],
 			nonce = undefined,
+			poll = undefined,
 		}: {
-			attachments: Blob[];
-			embeds: embedjson[];
-			replyingto: Message | null;
-			sticker_ids: string[];
+			attachments?: Blob[];
+			embeds?: embedjson[];
+			replyingto?: Message | null;
+			sticker_ids?: string[];
 			nonce?: string;
+			poll?: creatPollJSON;
 		},
 		onRes = (_e: "Ok" | "NotOk") => {},
 	) {
@@ -3634,7 +3637,8 @@ class Channel extends SnowFlake {
 			content.trim() === "" &&
 			attachments.length === 0 &&
 			embeds.length == 0 &&
-			sticker_ids.length === 0
+			sticker_ids.length === 0 &&
+			!poll
 		) {
 			return;
 		}
@@ -3717,6 +3721,7 @@ class Channel extends SnowFlake {
 				message_reference: undefined,
 				sticker_ids,
 				embeds,
+				poll,
 			};
 			if (replyjson) {
 				body.message_reference = replyjson;
@@ -3758,6 +3763,7 @@ class Channel extends SnowFlake {
 				message_reference: undefined,
 				sticker_ids,
 				embeds,
+				poll,
 			};
 			if (replyjson) {
 				body.message_reference = replyjson;
@@ -3974,4 +3980,3 @@ class Channel extends SnowFlake {
 }
 Channel.setupcontextmenu();
 export {Channel};
-

src/webpage/contextmenu.ts

@@ -235,15 +235,17 @@ type contextCluster<X, Y> = [Contextmenu<X, Y>, X, Y];
 class LayeredEvent extends CustomEvent<unknown> {
 	menus: contextCluster<unknown, unknown>[];
 	primary?: contextCluster<unknown, unknown>;
-	constructor(mouse: MouseEvent, menus: LayeredEvent["menus"]) {
+	side: "top" | "bottom";
+	constructor(mouse: MouseEvent, menus: LayeredEvent["menus"], side: "top" | "bottom") {
 		super("layered", {bubbles: true});
+		this.side = side;
 		this.menus = menus;
 		queueMicrotask(() => {
 			console.log(this);
 			const pop = this.primary || menus.pop();
 			if (!pop) return;
 			const [menu, addinfo, other] = pop;
-			menu.makemenu(mouse.clientX, mouse.clientY, addinfo, other, undefined, menus);
+			menu.makemenu(mouse.clientX, mouse.clientY, addinfo, other, undefined, menus, this.side);
 		});
 	}
 }
@@ -340,7 +342,11 @@ class Contextmenu<x, y> {
 		other: y,
 		keep: boolean | HTMLElement = false,
 		layered: LayeredEvent["menus"] = [],
+		side: "top" | "bottom" = "top",
 	) {
+		if (side === "bottom") {
+			y = y - window.innerHeight;
+		}
 		const div = document.createElement("div");
 		div.classList.add("contextmenu", "flexttb");
 		const processed = new WeakSet<menuPart<unknown, unknown>>();
@@ -386,6 +392,7 @@ class Contextmenu<x, y> {
 		touchDrag: (x: number, y: number) => unknown = () => {},
 		touchEnd: (x: number, y: number) => unknown = () => {},
 		click: "right" | "left" = "right",
+		side: "top" | "bottom" = "top",
 	) {
 		const func = (event: MouseEvent) => {
 			const selectedText = window.getSelection();
@@ -406,7 +413,7 @@ class Contextmenu<x, y> {
 			}
 			event.stopImmediatePropagation();
 			event.preventDefault();
-			const layered = new LayeredEvent(event, []);
+			const layered = new LayeredEvent(event, [], side);
 			obj.dispatchEvent(layered);
 		};
 		obj.addEventListener("layered", (layered) => {

src/webpage/index.ts

@@ -423,7 +423,17 @@ if (window.location.pathname.startsWith("/channels")) {
 		e.preventDefault();
 		e.stopImmediatePropagation();
 	};
-	(document.getElementById("upload") as HTMLElement).onclick = () => {
+	const umenu = new Contextmenu<void, void>("upload");
+	umenu.addButton(
+		I18n.makePoll(),
+		() => {
+			thisUser.makePoll();
+		},
+		{
+			visible: () => !!thisUser.channelfocus?.hasPermission("SEND_POLLS"),
+		},
+	);
+	umenu.addButton(I18n.upload(), () => {
 		const input = document.createElement("input");
 		input.type = "file";
 		input.click();
@@ -441,7 +451,16 @@ if (window.location.pathname.startsWith("/channels")) {
 				}
 			}
 		};
-	};
+	});
+	umenu.bindContextmenu(
+		document.getElementById("upload")!,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		"left",
+		"bottom",
+	);
 	const emojiTB = document.getElementById("emojiTB") as HTMLElement;
 	emojiTB.onmousedown = (e) => e.stopImmediatePropagation();
 	emojiTB.onclick = (e) => {

src/webpage/jsontypes.ts

@@ -448,6 +448,37 @@ type emojijson = {
 	animated?: boolean;
 	emoji?: string;
 };
+interface pollMedia {
+	text: string;
+	emoji?: emojijson;
+}
+export interface creatPollJSON {
+	question: pollMedia;
+	answers: {
+		id?: number;
+		poll_media: pollMedia;
+	}[];
+	duration: number;
+	allow_multiselect?: boolean;
+}
+export interface polljson {
+	question: pollMedia;
+	answers: {
+		answer_id?: number;
+		poll_media: pollMedia;
+	}[];
+	expiry: string;
+	allow_multiselect?: boolean;
+	layout_type: 1;
+	results?: {
+		is_finalized: boolean;
+		answer_counts: {
+			id: number;
+			count: number;
+			me_voted: boolean;
+		}[];
+	};
+}
 type emojipjson = emojijson & {
 	available: boolean;
 	guild_id: string;
@@ -835,6 +866,7 @@ type messagejson = {
 	sticker_items: stickerJson[];
 	message_reference?: string;
 	referenced_message?: messagejson;
+	poll?: polljson;
 };
 
 export interface threadMetadata {
@@ -939,6 +971,18 @@ type messageCreateJson = {
 	s: number;
 	t: "MESSAGE_CREATE";
 };
+export type pollUpdateJson = {
+	op: 0;
+	d: {
+		user_id: string;
+		channel_id: string;
+		message_id: string;
+		guild_id?: string;
+		answer_id: number;
+	};
+	s: number;
+	t: "MESSAGE_POLL_VOTE_ADD" | "MESSAGE_POLL_VOTE_REMOVE";
+};
 export interface relationJson {
 	id: string;
 	type: 0 | 1 | 2 | 3 | 4;
@@ -1018,6 +1062,7 @@ type wsjson =
 	  }
 	| messageCreateJson
 	| readyjson
+	| pollUpdateJson
 	| {
 			op: 11;
 			s: undefined;

src/webpage/localuser.ts

@@ -19,6 +19,7 @@ import {
 	readyjson,
 	startTypingjson,
 	wsjson,
+	pollUpdateJson,
 } from "./jsontypes.js";
 import {Member} from "./member.js";
 import {Dialog, Form, FormError, Options, Settings} from "./settings.js";
@@ -773,6 +774,14 @@ class Localuser {
 					this.conectionChange();
 					break;
 				}
+				case "MESSAGE_POLL_VOTE_ADD":
+				case "MESSAGE_POLL_VOTE_REMOVE": {
+					const m = this.messages.get(temp.d.message_id);
+					m?.pollUpdate(temp);
+					const f = this.pollUpdateSubMap.get(temp.d.message_id);
+					f?.(temp);
+					break;
+				}
 				case "MESSAGE_DELETE": {
 					temp.d.guild_id ??= "@me";
 					const channel = this.channelids.get(temp.d.channel_id);
@@ -4527,7 +4536,77 @@ class Localuser {
 		const searchBox = document.getElementById("searchBox") as HTMLDivElement;
 		searchBox.style.setProperty("--hint-text", JSON.stringify(I18n.search.search()));
 	}
+	makePoll() {
+		const d = new Dialog(I18n.makePoll());
+		const opt = d.options;
+		const q = opt.addTextInput(I18n.poll.question(), () => {});
+		opt.addText(I18n.poll.answers());
+		const ansField = document.createElement("div");
+		ansField.classList.add("flexttb", "pollAnsM");
+		const answers = ["", ""] as string[];
+		const genAnswerField = () => {
+			ansField.textContent = "";
+			for (let i = 0; i < answers.length; i++) {
+				const si = i;
+				const div = document.createElement("div");
+				div.classList.add("flexltr");
+				const input = document.createElement("input");
+				input.type = "text";
+				input.value = answers[i];
+				input.onchange = () => {
+					answers[si] = input.value;
+				};
+
+				const del = document.createElement("span");
+				del.classList.add("svg-delete", "svgicon");
+				div.append(input, del);
+				del.onclick = () => {
+					answers.splice(si, 1);
+					genAnswerField();
+				};
+				ansField.append(div);
+			}
+		};
+		genAnswerField();
+		opt.addHTMLArea(ansField);
+		opt.addButtonInput("", I18n.poll.newAnswer(), () => {
+			answers.push("");
+			genAnswerField();
+		});
+		const hours = [1, 4, 8, 24, 72, 168, 336] as const;
+		const h = opt.addSelect(
+			I18n.poll.duration(),
+			() => {},
+			//@ts-ignore-error this is fine :P
+			hours.map((_) => I18n.poll.durCount[_ + ""]()),
+			{
+				defaultIndex: 3,
+			},
+		);
+		const c = opt.addCheckboxInput(I18n.poll.mult(), () => {});
+		opt.addButtonInput("", I18n.submit(), () => {
+			const chan = this.channelfocus;
+			if (!chan) return;
+			chan.sendMessage("", {
+				poll: {
+					question: {
+						text: q.value,
+					},
+					answers: answers.map((_) => ({poll_media: {text: _}})),
+					duration: hours[h.index] as number,
+					allow_multiselect: c.value,
+				},
+			});
+			d.hide();
+		});
+		d.show();
+	}
 	curSearch?: Symbol;
+	pollUpdateSubMap = new Map<string, (u: pollUpdateJson) => void>();
+	subToPollUpdate(m: string, func: ((u: pollUpdateJson) => void) | null) {
+		if (func) this.pollUpdateSubMap.set(m, func);
+		else this.pollUpdateSubMap.delete(m);
+	}
 	mSearch(query: string) {
 		const searchy = Symbol("search");
 		this.curSearch = searchy;

src/webpage/markdown.ts

@@ -968,7 +968,10 @@ class MarkDown {
 		return span;
 	}
 	static relTime(date: Date, nextUpdate?: () => void): string {
-		const time = Date.now() - +date;
+		const r = Date.now() - +date;
+		if (isNaN(r)) return "NaN";
+		const up = r < 0;
+		const time = Math.abs(r);
 
 		let seconds = Math.round(time / 1000);
 		const round = time % 1000;
@@ -983,25 +986,32 @@ class MarkDown {
 
 		const formatter = new Intl.RelativeTimeFormat(I18n.lang, {style: "short"});
 		if (years) {
-			if (nextUpdate)
-				setTimeout(
-					nextUpdate,
-					round + (seconds + (minutes + (hours + days * 24) * 60) * 60) * 1000,
-				);
-			return formatter.format(-years, "year");
+			if (nextUpdate) {
+				const ti = round + (seconds + (minutes + (hours + days * 24) * 60) * 60) * 1000;
+				setTimeout(nextUpdate, up ? 1000 * 60 * 60 * 24 * 365 - ti : ti);
+			}
+			return formatter.format(up ? years : -years, "year");
 		} else if (days) {
-			if (nextUpdate)
-				setTimeout(nextUpdate, round + (seconds + (minutes + hours * 60) * 60) * 1000);
-			return formatter.format(-days, "days");
+			if (nextUpdate) {
+				const ti = round + (seconds + (minutes + hours * 60) * 60) * 1000;
+				setTimeout(nextUpdate, up ? 1000 * 60 * 60 * 24 - ti : ti);
+			}
+			return formatter.format(up ? days : -days, "days");
 		} else if (hours) {
-			if (nextUpdate) setTimeout(nextUpdate, round + (seconds + minutes * 60) * 1000);
-			return formatter.format(-hours, "hours");
+			if (nextUpdate) {
+				const ti = round + (seconds + minutes * 60) * 1000;
+				setTimeout(nextUpdate, up ? 1000 * 60 * 60 - ti : ti);
+			}
+			return formatter.format(up ? hours : -hours, "hours");
 		} else if (minutes) {
-			if (nextUpdate) setTimeout(nextUpdate, round + seconds * 1000);
-			return formatter.format(-minutes, "minutes");
+			if (nextUpdate) {
+				const ti = round + seconds * 1000;
+				setTimeout(nextUpdate, up ? 1000 * 60 - ti : ti);
+			}
+			return formatter.format(up ? minutes : -minutes, "minutes");
 		} else {
-			if (nextUpdate) setTimeout(nextUpdate, round);
-			return formatter.format(-seconds, "seconds");
+			if (nextUpdate) setTimeout(nextUpdate, up ? 1000 - round : round);
+			return formatter.format(up ? seconds : -seconds, "seconds");
 		}
 	}
 	static unspoil(e: any): void {