Fix: problems with large fluctuation (#19)

Author: dorianim

web/src/routes/+page.ts

@@ -1,6 +1,7 @@
 import { error, type Load } from '@sveltejs/kit';
 import { get } from 'svelte/store';
 import { API_URL } from '../stores';
+import type { InstanceProperties } from '../types/instanceProperties';
 
 export const load: Load = async ({ fetch, url, params }) => {
 	const resp = await fetch(`${get(API_URL)}/instance`);

web/src/routes/t/[timerId]/+page.svelte

@@ -8,45 +8,69 @@
 	import { API_WS_URL } from '../../../stores';
 	import NoSleep from 'nosleep.js';
 	import { goto } from '$app/navigation';
-	import type { Segment } from '../../../types/segment';
+	import { onDestroy, onMount } from 'svelte';
 
 	export let data: PageData;
 
 	const noSleep = new NoSleep();
 
+	let currentOffset: number | undefined;
+	let currentFluctuation: number | undefined;
+	let latestOffsets: number[] = [];
+	let latestFluctuations: number[] = [];
+
 	let soundEnabled: boolean;
-	let timeOffset: number | undefined;
 	let timerData: TimerType | undefined;
 	let lastGetTimeSent = 0;
-	let latestOffsets: number[] = [];
 	let socket: WebSocket | undefined;
 
-	const isOffsetInMargin = (offset: number) => {
-		if (!timeOffset) {
-			return true;
+	const pushValueAndCaluclateAverage = (values: number[], newValue: number) => {
+		values.push(newValue);
+		if (values.length > 10) {
+			values.shift();
 		}
 
-		let margin = timeOffset * 0.3;
-		return offset > timeOffset - margin && offset < timeOffset + margin;
+		let sum = 0;
+		for (let i = 0; i < values.length; i++) {
+			sum += values[i];
+		}
+
+		return sum / values.length;
 	};
 
-	const handleNewOffset = (offset: number) => {
-		// check if we are in a 30% margin
-		if (!isOffsetInMargin(offset)) {
-			return;
+	const isOffsetInMargin = (newOffset: number) => {
+		if (!currentOffset) {
+			return true;
+		}
+
+		const fluctuation = Math.abs(currentOffset - newOffset);
+		console.log(fluctuation, currentFluctuation);
+
+		if (
+			currentFluctuation &&
+			latestFluctuations.length > 5 &&
+			fluctuation > currentFluctuation * 4
+		) {
+			return false;
 		}
 
-		latestOffsets.push(offset);
-		if (latestOffsets.length > 10) {
-			latestOffsets.shift();
+		currentFluctuation = pushValueAndCaluclateAverage(latestFluctuations, fluctuation);
+
+		if (latestFluctuations.length < 10) {
+			return true;
 		}
 
-		let sum = 0;
-		for (let i = 0; i < latestOffsets.length; i++) {
-			sum += latestOffsets[i];
+		return fluctuation < currentFluctuation * 2;
+	};
+
+	const handleNewOffset = (newOffset: number) => {
+		// check if we are in a 30% margin
+		if (!isOffsetInMargin(newOffset)) {
+			console.log('not in margin');
+			return;
 		}
 
-		timeOffset = sum / latestOffsets.length;
+		currentOffset = pushValueAndCaluclateAverage(latestOffsets, newOffset);
 	};
 
 	const enableSound = () => {
@@ -88,8 +112,8 @@
 				case 'Timestamp':
 					const now = performance.now();
 					const getTimeRoundTrip = now - lastGetTimeSent;
-					timeOffset = data.data + getTimeRoundTrip / 2 - now;
-					handleNewOffset(timeOffset);
+					let newOffset = data.data + getTimeRoundTrip / 2 - now;
+					handleNewOffset(newOffset);
 					break;
 				case 'Error':
 					throwError(data.data[0], data.data[1]);
@@ -134,6 +158,10 @@
 		}
 	}
 
+	onDestroy(() => {
+		socket?.close();
+	});
+
 	$: {
 		if (timerData && !soundEnabled && get(modalStore).length == 0) {
 			const d: ModalSettings = {
@@ -158,12 +186,15 @@
 	}
 </script>
 
-{#if timerData && timeOffset}
+{#if timerData && currentOffset}
 	<Timer
 		{timerData}
 		{soundEnabled}
-		{timeOffset}
-		displayOptionsOverride={{ clock: data.url.searchParams.get('clock') != 'false' }}
+		timeOffset={currentOffset}
+		displayOptionsOverride={{
+			...timerData.display_options,
+			clock: data.url.searchParams.get('clock') != 'false'
+		}}
 	/>
 {:else}
 	<div

web/src/routes/t/[timerId]/Timer.svelte

@@ -95,7 +95,7 @@
 		currentSegment = calculateCurrentSegment();
 		const { timerText, label, color, seconds } = currentSegment;
 
-		if (timerSpan.innerText !== timerText) {
+		if (timerSpan !== null && timerSpan.innerText !== timerText) {
 			timerSpan.innerText = timerText;
 			labelSpan.innerText = label;
 			backgroundDiv.style.setProperty(

web/src/stores.ts

@@ -1,7 +1,7 @@
 import { browser, dev } from '$app/environment';
 import { readable } from 'svelte/store';
 
-const API_HOST = dev ? 'localhost:3000' : browser ? window.location.host : '';
+const API_HOST = 'timer.itsblue.de'; //dev ? 'localhost:3000' : browser ? window.location.host : '';
 const API_SECURE = dev ? false : browser ? window.location.protocol === 'https:' : false;
 export const API_URL = readable(`${API_SECURE ? 'https' : 'http'}://${API_HOST}/api`);
 export const API_WS_URL = readable(`${API_SECURE ? 'wss' : 'ws'}://${API_HOST}/api/ws`);