Prototype of latency reducer, only for Kick

src/platforms/kick/kick.constants.ts

@@ -10,6 +10,11 @@ export const KICK_DEFAULT_SETTINGS: KickSettings = {
 	chatMessageMenuEnabled: true,
 	quickAccessLinks: [{ title: "Streams Charts", url: "https://streamscharts.com/channels/%username%?platform=kick" }],
 	streamLatencyEnabled: true,
+	streamLatencyReducerEnabled: false,
+	streamLatencyReducerMinRate: 1.05,
+	streamLatencyReducerMaxRate: 1.1,
+	streamLatencyReducerMinThreshold: 3,
+	streamLatencyReducerMaxThreshold: 6,
 	realVideoTimeEnabled: true,
 	realVideoTimeFormat12h: false,
 	channelSection: true,

src/platforms/kick/kick.platform.ts

@@ -16,6 +16,7 @@ import LocalWatchtimeCounterModule from "$kick/modules/local-watchtime-counter/l
 import RealVideoTimeModule from "$kick/modules/real-video-time/real-video-time.module.tsx";
 import SettingsButtonModule from "$kick/modules/settings-button/settings-button.module.tsx";
 import SettingsModule from "$kick/modules/settings/settings.module.tsx";
+import StreamLatencyReducerModule from "$kick/modules/stream-latency-reducer/stream-latency-reducer.module.tsx";
 import StreamLatencyModule from "$kick/modules/stream-latency/stream-latency.module.tsx";
 import Platform from "$shared/platform/platform.ts";
 import type { KickEvents } from "$types/platforms/kick/kick.events.types.ts";
@@ -49,6 +50,7 @@ export default class KickPlatform extends Platform<KickModule, KickEvents, KickS
 			new SettingsModule(...dependencies),
 			new ChatNicknameCustomizationModule(...dependencies),
 			new StreamLatencyModule(...dependencies),
+			new StreamLatencyReducerModule(...dependencies),
 			new RealVideoTimeModule(...dependencies),
 			new ChannelSectionModule(...dependencies),
 			new LocalWatchtimeCounterModule(...dependencies),

src/platforms/kick/kick.utils.ts

@@ -118,6 +118,14 @@ export default class KickUtils {
 		return video.duration === Number.POSITIVE_INFINITY || video.duration > KickUtils.FIREFOX_LIVE_VIDEO_THRESHOLD;
 	}
 
+	getLatency(video: HTMLVideoElement): number {
+		const { currentTime, buffered } = video;
+		if (buffered.length === 0) return -1;
+		const bufferEnd = buffered.end(buffered.length - 1);
+
+		return bufferEnd - currentTime;
+	}
+
 	async scrollToBottomOnChat() {
 		const chatRoom = this.getChannelChatRoom();
 		if (!chatRoom) return;

src/platforms/kick/modules/settings/settings.module.tsx

@@ -57,6 +57,10 @@ export default class SettingsModule extends KickModule {
 				title: "Channel",
 				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/channel.svg"),
 			},
+			{
+				title: "Latency",
+				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/latency.svg"),
+			},
 			{
 				title: "Experimental",
 				iconUrl: await this.commonUtils().getAssetFile(this.workerService(), "settings/experimental.svg"),
@@ -74,14 +78,6 @@ export default class SettingsModule extends KickModule {
 			discord: await this.commonUtils().getAssetFile(this.workerService(), "brands/discord.svg"),
 		} as const;
 		this.SETTING_DEFINITIONS = [
-			{
-				id: "streamLatencyEnabled",
-				title: "Enable Stream Latency",
-				description: "Shows the current stream delay on top of the chat.",
-				type: "toggle",
-				tabIndex: tabIndexes.General,
-				requiresRefreshToDisable: true,
-			},
 			{
 				id: "realVideoTimeEnabled",
 				title: "Enable Real Video Time",
@@ -187,6 +183,56 @@ export default class SettingsModule extends KickModule {
 				},
 				hideInfo: true,
 			},
+			{
+				id: "streamLatencyEnabled",
+				title: "Enable Stream Latency",
+				description: "Shows the current stream delay on top of the chat.",
+				type: "toggle",
+				tabIndex: tabIndexes.Latency,
+				requiresRefreshToDisable: true,
+			},
+			{
+				id: "streamLatencyReducerEnabled",
+				title: "Enable Stream Latency Reducer",
+				description: "Reduces stream latency by adjusting playback rate.",
+				type: "toggle",
+				tabIndex: tabIndexes.Experimental,
+				requiresRefreshToDisable: true,
+			},
+			{
+				id: "streamLatencyReducerMinRate",
+				title: "Minimum Playback Rate",
+				description: "The minimum playback rate the stream will be speeded up to.",
+				type: "number",
+				tabIndex: tabIndexes.Experimental,
+				requiresRefreshToDisable: true,
+			},
+			{
+				id: "streamLatencyReducerMaxRate",
+				title: "Maximum Playback Rate",
+				description: "The maximum playback rate the stream will be speeded up to.",
+				type: "number",
+				tabIndex: tabIndexes.Experimental,
+				requiresRefreshToDisable: true,
+			},
+			{
+				id: "streamLatencyReducerMinThreshold",
+				title: "Minimum Latency Threshold",
+				description:
+					"The latency threshold (in seconds) at which the playback rate will be speeded up to the minimum rate.",
+				type: "number",
+				tabIndex: tabIndexes.Experimental,
+				requiresRefreshToDisable: true,
+			},
+			{
+				id: "streamLatencyReducerMaxThreshold",
+				title: "Maximum Latency Threshold",
+				description:
+					"The latency threshold (in seconds) at which the playback rate will be speeded up to the maximum rate.",
+				type: "number",
+				tabIndex: tabIndexes.Experimental,
+				requiresRefreshToDisable: true,
+			},
 			{
 				id: "about",
 				title: "About This Extension",

src/platforms/kick/modules/stream-latency-reducer/stream-latency-reducer.module.tsx

@@ -0,0 +1,135 @@
+import KickModule from "$kick/kick.module.ts";
+import type { KickModuleConfig } from "$types/shared/module/module.types.ts";
+import { signal } from "@preact/signals";
+
+export default class StreamLatencyReducerModule extends KickModule {
+	private updateInterval: NodeJS.Timeout | undefined;
+	private latencyTimings = signal<number[]>([]);
+
+	readonly config: KickModuleConfig = {
+		name: "stream-latency-reducer",
+		appliers: [
+			{
+				type: "selector",
+				key: "stream-latency-reducer",
+				selectors: ["#channel-chatroom"],
+				callback: this.run.bind(this),
+				validateUrl: (url) => {
+					return !url.includes("/videos/") && !url.includes("/clips/");
+				},
+				once: true,
+			},
+		],
+		isModuleEnabledCallback: async () => await this.settingsService().getSettingsKey("streamLatencyReducerEnabled"),
+	};
+
+	private run(): void {
+		if (this.updateInterval) clearInterval(this.updateInterval);
+		this.updateInterval = setInterval(async () => {
+			const status = await this.getPlaybackRateStatus();
+
+			if (status === "catchingUpMax") {
+				this.setPlaybackRateMode("catchUpMax");
+			} else if (status === "catchingUpMin") {
+				this.setPlaybackRateMode("catchUpMin");
+			} else {
+				this.setPlaybackRateMode("reset");
+			}
+		}, 1000);
+	}
+
+	private changePlaybackSpeed(video: HTMLVideoElement, rate: number) {
+		video.playbackRate = rate;
+	}
+
+	private async setPlaybackRateMode(mode: "catchUpMin" | "catchUpMax" | "reset") {
+		const videoPlayer = this.getPlayer();
+		if (!videoPlayer) return;
+
+		let targetRate = 1;
+		const latency = this.computeLatency(videoPlayer);
+
+		// Always reset playback speed in reset mode, regardless of latency.
+		if (mode === "reset") {
+			this.changePlaybackSpeed(videoPlayer, 1);
+			return;
+		}
+
+		// When latency is zero, negative, or otherwise invalid, ensure playback speed is reset.
+		if (!latency || latency <= 0) {
+			this.changePlaybackSpeed(videoPlayer, 1);
+			return;
+		}
+		const {
+			minRate,
+			maxRate,
+			minThreshold: minSpeedThreshold,
+			maxThreshold: maxSpeedThreshold,
+		} = await this.getSettings();
+
+		if (mode === "catchUpMax") {
+			targetRate = maxRate;
+		} else if (mode === "catchUpMin") {
+			if (maxSpeedThreshold === minSpeedThreshold) {
+				// Avoid division by zero when thresholds are equal; fall back to a step between minRate and maxRate.
+				targetRate = latency >= maxSpeedThreshold ? maxRate : minRate;
+			} else {
+				targetRate =
+					minRate + ((maxRate - minRate) * (latency - minSpeedThreshold)) / (maxSpeedThreshold - minSpeedThreshold);
+			}
+		}
+
+		this.changePlaybackSpeed(videoPlayer, targetRate);
+	}
+
+	private async getPlaybackRateStatus() {
+		const videoPlayer = this.getPlayer();
+		if (!videoPlayer) return;
+		const latency = this.computeLatency(videoPlayer);
+		if (!latency) return "invalid";
+
+		const { maxThreshold, minThreshold } = await this.getSettings();
+		if (latency >= maxThreshold) return "catchingUpMax";
+		if (latency > minThreshold) return "catchingUpMin";
+		if (latency <= minThreshold) return "caughtUp";
+		return "invalid";
+	}
+
+	private async getSettings() {
+		const minRate = await this.settingsService().getSettingsKey("streamLatencyReducerMinRate");
+		const maxRate = await this.settingsService().getSettingsKey("streamLatencyReducerMaxRate");
+		const minThreshold = await this.settingsService().getSettingsKey("streamLatencyReducerMinThreshold");
+		const maxThreshold = await this.settingsService().getSettingsKey("streamLatencyReducerMaxThreshold");
+		return { minRate, maxRate, minThreshold, maxThreshold };
+	}
+
+	// Calculates latency based on average of past latency snapshots
+	private computeLatency(video: HTMLVideoElement): number {
+		const computedLatency = this.kickUtils().getLatency(video);
+		this.latencyTimings.value.push(computedLatency);
+
+		// Reset timings array if experiences sudden increase in latency
+		if (
+			this.latencyTimings.value.length > 1 &&
+			computedLatency - this.latencyTimings.value[this.latencyTimings.value.length - 2] > 2
+		) {
+			this.latencyTimings.value = [computedLatency];
+		}
+
+		const numberOfSamples = 10;
+		if (this.latencyTimings.value.length > numberOfSamples) this.latencyTimings.value.shift();
+
+		return (
+			this.latencyTimings.value.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
+			this.latencyTimings.value.length
+		);
+	}
+
+	private getPlayer() {
+		const video = document.querySelector("video");
+		if (!video || !this.kickUtils().isLiveVideo(video)) {
+			return null;
+		}
+		return video;
+	}
+}

src/platforms/kick/modules/stream-latency/stream-latency.module.tsx

@@ -8,6 +8,8 @@ export default class StreamLatencyModule extends KickModule {
 	private latencyCounter = signal(-1);
 	private isLiveState = signal(false);
 	private updateInterval: NodeJS.Timeout | undefined;
+	private playbackRate = signal(1);
+	private latencyTimings = signal<number[]>([]);
 
 	readonly config: KickModuleConfig = {
 		name: "stream-latency",
@@ -31,6 +33,8 @@ export default class StreamLatencyModule extends KickModule {
 			this.logger.debug("Found multiple elements of chat room");
 		}
 
+		this.watchPlaybackRate();
+
 		if (this.updateInterval) clearInterval(this.updateInterval);
 		this.updateInterval = setInterval(() => this.updateLatency(), 1000);
 
@@ -43,6 +47,7 @@ export default class StreamLatencyModule extends KickModule {
 				<LatencyComponent
 					isLive={this.isLiveState}
 					latencyCounter={this.latencyCounter}
+					playbackRate={this.playbackRate}
 					click={this.resetPlayer.bind(this)}
 				/>,
 				span,
@@ -62,10 +67,32 @@ export default class StreamLatencyModule extends KickModule {
 	}
 
 	private computeLatency(video: HTMLVideoElement): number {
-		const { currentTime, buffered } = video;
-		if (buffered.length === 0) return -1;
-		const bufferEnd = buffered.end(buffered.length - 1);
-		return bufferEnd - currentTime;
+		const computedLatency = this.kickUtils().getLatency(video);
+		this.latencyTimings.value.push(computedLatency);
+
+		// Reset timings array if experiences sudden increase in latency
+		if (
+			this.latencyTimings.value.length > 1 &&
+			computedLatency - this.latencyTimings.value[this.latencyTimings.value.length - 2] > 2
+		) {
+			this.latencyTimings.value = [computedLatency];
+		}
+
+		const numberOfSamples = 10;
+		if (this.latencyTimings.value.length > numberOfSamples) this.latencyTimings.value.shift();
+
+		return (
+			this.latencyTimings.value.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
+			this.latencyTimings.value.length
+		);
+	}
+
+	private watchPlaybackRate() {
+		const video = this.getVideoElement();
+		if (!video) return;
+		video.addEventListener("ratechange", () => {
+			this.playbackRate.value = video.playbackRate;
+		});
 	}
 
 	private resetPlayer(): void {