feat: auto-pause chat on scroll, resume at bottom

This commit is contained in:
2026-04-10 13:21:18 -07:00
parent ad6e9ef270
commit 215dfc827e
2 changed files with 238 additions and 218 deletions
-2
View File
@@ -64,7 +64,6 @@ export interface AppConfig {
matchmaker: Keybind;
matchmakerAccept: Keybind;
matchmakerCancel: Keybind;
pauseChat: Keybind;
fullscreenToggle: Keybind;
};
userscripts: {
@@ -120,7 +119,6 @@ export const DEFAULT_KEYBINDS: AppConfig['keybinds'] = {
matchmaker: { key: 'F6', ctrl: false, shift: false, alt: false },
matchmakerAccept: { key: 'Enter', ctrl: false, shift: false, alt: false },
matchmakerCancel: { key: 'Escape', ctrl: false, shift: false, alt: false },
pauseChat: { key: 'F10', ctrl: false, shift: false, alt: false },
fullscreenToggle: { key: 'F11', ctrl: false, shift: false, alt: false },
};
+24 -2
View File
@@ -16,8 +16,11 @@ let observer: MutationObserver | null = null;
let historyMax = 0;
let betterChatEnabled = false;
let reInsertGuard = false;
let scrollPaused = false;
let _con: SavedConsole | null = null;
const SCROLL_BOTTOM_THRESHOLD = 30; // px from bottom to consider "at bottom"
function isChatMessage(node: Node): node is HTMLElement {
return node.nodeType === 1 && (node as HTMLElement).id?.startsWith('chatMsg_');
}
@@ -83,18 +86,37 @@ function handleMutations(mutations: MutationRecord[]): void {
}
}
// Auto-scroll unless paused
if (chatList && !chatList.classList.contains('kpc-chat-paused')) {
// Auto-scroll to bottom unless the user has scrolled up
if (chatList && !scrollPaused) {
chatList.scrollTop = chatList.scrollHeight;
}
}
function isNearBottom(el: HTMLElement): boolean {
return el.scrollHeight - el.scrollTop - el.clientHeight <= SCROLL_BOTTOM_THRESHOLD;
}
function updatePauseState(): void {
if (!chatList) return;
const atBottom = isNearBottom(chatList);
if (scrollPaused && atBottom) {
scrollPaused = false;
chatList.classList.remove('kpc-chat-paused');
} else if (!scrollPaused && !atBottom) {
scrollPaused = true;
chatList.classList.add('kpc-chat-paused');
}
}
function tryAttach(): boolean {
chatList = document.getElementById('chatList');
if (!chatList) return false;
observer = new MutationObserver(handleMutations);
observer.observe(chatList, { childList: true });
chatList.addEventListener('scroll', updatePauseState, { passive: true });
_con?.log('[KCC-Chat] Observer attached to #chatList');
return true;
}