Use smooth scrolling for chatbox (#27)

* Use smooth scrolling for chatbox

* Check correct direction LULE

* Added standard setting component slider

* Added setting to controll smooth scroll

src/app.d.ts

@@ -74,7 +74,7 @@ declare namespace SevenTV {
 	type SettingType = boolean | number | string | object;
 
 	namespace SettingNode {
-		type ComponentType = "SELECT" | "DROPDOWN" | "CHECKBOX" | "INPUT" | "TOGGLE" | "CUSTOM";
+		type ComponentType = "SELECT" | "DROPDOWN" | "CHECKBOX" | "INPUT" | "TOGGLE" | "SLIDER" | "CUSTOM";
 	}
 
 	interface ActiveEmote {

src/site/twitch.tv/ChatAPI.ts

@@ -1,7 +1,10 @@
 import { Ref, computed, nextTick, reactive, ref, toRefs, watchEffect } from "vue";
 import { useStore } from "@/store/main";
+import { useConfig } from "@/composable/useSettings";
 import UiScrollableVue from "@/ui/UiScrollable.vue";
 
+const scrollduration = useConfig<number>("chat.smooth_scroll_duration");
+
 const data = reactive({
 	// Message Data
 	messages: [] as Twitch.ChatMessage[],
@@ -36,7 +39,12 @@ const data = reactive({
 	sys: true,
 	visible: true,
 	paused: false, // whether or not scrolling is paused
+	duration: scrollduration,
+
 	scrollBuffer: [] as Twitch.ChatMessage[], // twitch chat message buffe when scrolling is paused
+	scrollClear: () => {
+		return;
+	},
 
 	// Functions
 	sendMessage: (() => {
@@ -111,7 +119,7 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 					}
 				}
 
-				nextTick(() => scrollToLive());
+				nextTick(() => scrollToLive(data.duration));
 
 				flushTimeout = undefined;
 			}, 25);
@@ -121,14 +129,35 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 	/**
 	 * Scrolls the chat to the bottom
 	 */
-	function scrollToLive(): void {
+	function scrollToLive(duration = 0): void {
 		if (!container.value || !bounds?.value || data.paused) return;
 
+		data.scrollClear();
+
 		data.sys = true;
 
-		container.value.scrollTo({ top: container.value.scrollHeight });
+		const from = container.value.scrollTop;
+		const start = Date.now();
+
+		let shouldClear = false;
+
+		function scroll() {
+			if (!container.value || !bounds?.value || data.paused || shouldClear) return;
+
+			const currentTime = Date.now();
+			const time = Math.min(1, (currentTime - start) / duration);
+			container.value.scrollTop = time * (container.value.scrollHeight - from) + from;
+
+			if (time < 1) requestAnimationFrame(scroll);
+			else bounds.value = container.value.getBoundingClientRect();
+		}
+
+		data.scrollClear = () => (shouldClear = true);
 
-		bounds.value = container.value.getBoundingClientRect();
+		if (duration < 1) {
+			container.value.scrollTo({ top: container.value.scrollHeight });
+			bounds.value = container.value.getBoundingClientRect();
+		} else requestAnimationFrame(scroll);
 	}
 
 	/**
@@ -182,8 +211,8 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		}
 	}
 
-	function onWheel() {
-		data.userInput++;
+	function onWheel(e: WheelEvent) {
+		if (e.deltaY < 0) data.userInput++;
 	}
 
 	const {
@@ -199,6 +228,7 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		init,
 		scrollBuffer,
 		paused,
+		duration,
 		isModerator,
 		isVIP,
 		sendMessage,
@@ -223,6 +253,7 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		scrollInit: init,
 		scrollBuffer: scrollBuffer,
 		scrollPaused: paused,
+		scrollDuration: duration,
 
 		sendMessage,
 		clear,

src/site/twitch.tv/modules/chat/ChatModule.vue

@@ -22,6 +22,14 @@ const { dependenciesMet, markAsReady } = useModule("chat", {
 			options: ["Show", "Blur"],
 			defaultValue: false,
 		},
+		{
+			key: "chat.smooth_scroll_duration",
+			label: "Smooth scroll chat",
+			hint: "How smooth should the chat scroll on new messages. 0 is instant",
+			type: "SLIDER",
+			options: [0, 3000, "ms"],
+			defaultValue: 0,
+		},
 	],
 });
 

src/site/twitch.tv/modules/settings/components/Slider.vue

@@ -0,0 +1,24 @@
+<template>
+	<div>
+		<input
+			:id="node.key"
+			v-model="setting"
+			type="range"
+			:min="(node.options?.at(0) as number)"
+			:max="(node.options?.at(1) as number)"
+			class="slider"
+		/>
+		{{ setting }}
+		{{ node.options?.at(2) }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from "@/composable/useSettings";
+
+const props = defineProps<{
+	node: SevenTV.SettingNode<number>;
+}>();
+
+const setting = useConfig<number>(props.node.key);
+</script>

src/site/twitch.tv/modules/settings/components/index.ts

@@ -2,6 +2,7 @@ import Checkbox from "./Checkbox.vue";
 import Dropdown from "./Dropdown.vue";
 import Input from "./Input.vue";
 import Select from "./Select.vue";
+import Slider from "./Slider.vue";
 import Toggle from "./Toggle.vue";
 
 const standard = {
@@ -10,6 +11,7 @@ const standard = {
 	CHECKBOX: Checkbox,
 	INPUT: Input,
 	TOGGLE: Toggle,
+	SLIDER: Slider,
 	CUSTOM: undefined,
 };