kick-scroller(fix): infer user input (#684)

SevenTV · Jun 17, 2023 · 11863a4 · 11863a4
1 parent 1628432
commit 11863a4
Showing 1 changed file with 46 additions and 20 deletions.
diff --git a/src/site/kick.com/modules/chat/ChatObserver.vue b/src/site/kick.com/modules/chat/ChatObserver.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, watchEffect } from "vue";
+import { nextTick, onMounted, onUnmounted, reactive, ref, watchEffect } from "vue";
 import { useMutationObserver } from "@vueuse/core";
 import { ObserverPromise } from "@/common/Async";
 import ChatMessageVue, { ChatMessageBinding } from "./ChatMessage.vue";
@@ -88,33 +88,59 @@ async function onOpenUserCard(bind: ChatMessageBinding) {
 	});
 }
 
-let paused = false;
-let pausedTimeout: ReturnType<typeof setTimeout> | null = null;
+function patch(): void {
+	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
+	for (const el of Array.from(entries)) {
+		patchMessageElement(el as HTMLDivElement);
+	}
+}
+
+const expectPause = ref(false);
+const bounds = ref(props.listElement.getBoundingClientRect());
+let unpauseListenerAttached = false;
 
 function onMessageRendered() {
-	if (props.listElement.nextElementSibling) {
-		pausedTimeout = setTimeout(() => {
-			paused = true;
-		}, 1e3);
-	} else {
-		paused = false;
-		if (pausedTimeout) clearTimeout(pausedTimeout);
+	if (props.listElement.nextElementSibling && !unpauseListenerAttached) {
+		unpauseListenerAttached = true;
+		props.listElement.addEventListener("click", onUnpauseClick);
 	}
-	if (paused) return;
+	if (expectPause.value) return;
 
-	setTimeout(() => {
-		props.listElement.scrollTo({ top: props.listElement.scrollHeight });
-	}, 50);
+	props.listElement.scrollTo({ top: props.listElement.scrollHeight });
 }
 
-function patch(): void {
-	const entries = props.listElement.querySelectorAll("[data-chat-entry]");
-	for (const el of Array.from(entries)) {
-		patchMessageElement(el as HTMLDivElement);
-	}
+function onUnpauseClick(): void {
+	props.listElement.removeEventListener("click", onUnpauseClick);
+	expectPause.value = false;
+	unpauseListenerAttached = false;
 }
 
-watchEffect(patch);
+onMounted(() => {
+	const el = props.listElement;
+	if (!el) return;
+
+	el.addEventListener("wheel", () => {
+		const top = Math.floor(el.scrollTop);
+		const h = Math.floor(el.scrollHeight - bounds.value.height);
+
+		if (top >= h - 1) {
+			expectPause.value = false;
+			return;
+		}
+
+		expectPause.value = true;
+	});
+});
+
+onUnmounted(() => {
+	props.listElement.removeEventListener("click", onUnpauseClick);
+});
+
+watchEffect(() => {
+	patch();
+
+	bounds.value = props.listElement.getBoundingClientRect();
+});
 
 useMutationObserver(
 	props.listElement,