lavender/watch-party
7
4
Fork 5
Code Issues Pull requests 1 Projects Releases Wiki Activity

Compare commits

base: lavender:d1d030ede6363fad90305b4071d4c7ac628644bc
Branches Tags
lavender:main
lavender:votekiss
lavender:experimental
...
compare: lavender:048af96a1960c9f7b6873a30a24f386096f8d99d
Branches Tags
lavender:main
lavender:votekiss
lavender:experimental

4 commits
d1d030ede6 ... 048af96a19

Author SHA1 Message Date
easrng
048af96a19 Merge branch 'main' of lavender.software:lavender/watch-party 2022-02-18 14:22:01 -05:00
easrng
ae87f2abe0 actually fix perf 2022-02-18 14:21:54 -05:00
easrng
98e1393441 tweak append stuff 2022-02-18 14:11:54 -05:00
easrng
7b1defe010 yield between appending 100 item chunks 2022-02-18 14:04:55 -05:00
1 changed files with 50 additions and 37 deletions
Show stats Expand all files Collapse all files

23
frontend/lib/chat.mjs
View file

@ -45,7 +45,7 @@ const setupChatboxEvents = (socket) => {
const search = text.slice(match.index + 1); const search = text.slice(match.index + 1);
if (search.length < 1 && !fromListTimeout) { if (search.length < 1 && !fromListTimeout) {
autocompleting = false; autocompleting = false;
showListTimer = setTimeout(() => autocomplete(true), 1000); showListTimer = setTimeout(() => autocomplete(true), 500);
return; return;
} }
const suffix = messageInput.value.slice(messageInput.selectionStart); const suffix = messageInput.value.slice(messageInput.selectionStart);
@ -55,14 +55,21 @@ const setupChatboxEvents = (socket) => {
selected = button; selected = button;
button.classList.add("selected"); button.classList.add("selected");
}; };
emojiAutocomplete.append( let results = await findEmojis(search);
...(await findEmojis(search)).map(([name, replaceWith, ext], i) => { let yieldAt = performance.now() + 13;
for (let i = 0; i < results.length; i += 100) {
emojiAutocomplete.append.apply(
emojiAutocomplete,
results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
const button = Object.assign(document.createElement("button"), { const button = Object.assign(document.createElement("button"), {
className: "emoji-option", className: "emoji-option",
onmousedown: (e) => e.preventDefault(), onmousedown: (e) => e.preventDefault(),
onclick: () => { onclick: () => {
messageInput.value = prefix + replaceWith + " " + suffix; messageInput.value = prefix + replaceWith + " " + suffix;
setCaretPosition(messageInput, (prefix + " " + replaceWith).length); setCaretPosition(
messageInput,
(prefix + " " + replaceWith).length
);
}, },
onmouseover: () => select(button), onmouseover: () => select(button),
onfocus: () => select(button), onfocus: () => select(button),
@ -88,10 +95,16 @@ const setupChatboxEvents = (socket) => {
return button; return button;
}) })
); );
if (emojiAutocomplete.children[0]) { if (i == 0 && emojiAutocomplete.children[0]) {
emojiAutocomplete.children[0].scrollIntoView(); emojiAutocomplete.children[0].scrollIntoView();
select(emojiAutocomplete.children[0]); select(emojiAutocomplete.children[0]);
} }
const now = performance.now();
if (now > yieldAt) {
yieldAt = now + 13;
await new Promise((cb) => setTimeout(cb, 0));
}
}
autocompleting = false; autocompleting = false;
} }
messageInput.addEventListener("input", () => autocomplete()); messageInput.addEventListener("input", () => autocomplete());