smcgateway-sv 0.3.3 → 0.4.2

package/README.md

@@ -121,5 +121,5 @@ checkclean:
 ## Library development
 
 * `npm run dev` will run a local server
-* `npm build` to build the library
+* `npm run build` to build the library
 * `npm publish` to push the library to npm

package/dist/AudioTimeLinePlayer.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { recording } from './recording.svelte.js';
+	import InputDatetime from './InputDatetime.svelte';
+	import { colors } from './colours.js';
+
+	type Segment = {
+		url: string;
+		start: Date;
+		end: Date;
+		from: string;
+		to: string;
+		startPercent: number;
+		durPercent: number;
+		color: string;
+		style: string;
+	};
+
+	// Auto assign colours to devices
+	let nextColorIndex = 0;
+	let deviceColorMap: { [k: string]: string } = {};
+
+	const WINDOW_MS = 10 * 60 * 1000;
+	const STEP_MS = 10_000;
+	const TICK_MS = 200;
+
+	let windowStart = $state(new Date(Date.now() - WINDOW_MS));
+	let windowEnd = $derived(new Date(windowStart.getTime() + WINDOW_MS));
+	let segments: Segment[] = $state([]);
+	let audioEl: HTMLAudioElement;
+	let activeSegment: Segment | undefined = $state(undefined);
+	let playing = $state(false);
+	// svelte-ignore state_referenced_locally
+	let cursor = $state(windowStart.getTime());
+	let cursorStyle = $derived(
+		`left: ${((cursor - windowStart.getTime()) / (windowEnd.getTime() - windowStart.getTime())) * 100}%`
+	);
+	let playbackStartRealTime = 0;
+	let tickTimer = 0;
+	let isLoading = $state(false);
+	let error = $state('');
+
+	const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
+
+	function findSegmentIndex(tMs: number) {
+		return segments.findIndex((s) => tMs >= s.start.getTime() && tMs < s.end.getTime());
+	}
+
+	async function loadSegments() {
+		isLoading = true;
+		error = '';
+		try {
+			const ret = await recording.getRecordings(windowStart, windowEnd);
+			// console.log('getRecordings()', ret);
+			segments = ret.map((r) => {
+				let color = deviceColorMap[r.from];
+				if (!color) {
+					color = colors[nextColorIndex];
+					deviceColorMap[r.from] = color;
+					nextColorIndex++;
+				}
+				const startPercent = ((r.start.getTime() - windowStart.getTime()) / WINDOW_MS) * 100;
+				const durPercent = ((r.dur * 1000) / WINDOW_MS) * 100;
+				return {
+					url: `/api/recordings/${r.file}`,
+					start: r.start,
+					end: new Date(r.start.getTime() + r.dur * 1000),
+					from: r.from,
+					to: r.to,
+					startPercent,
+					durPercent,
+					color,
+					style: `left:${startPercent}%; width:${durPercent}%; background-color: ${color}`
+				};
+			});
+		} catch (e) {
+			error = 'Failed to fetch audio segments';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function ensureAudioForCursor() {
+		const segIdx = findSegmentIndex(cursor);
+		if (segIdx === -1) {
+			// console.log('ensureAudioForCursor: in a gap', segIdx);
+			activeSegment = undefined;
+			// in a gap → ensure audio is paused
+			if (!audioEl.paused) audioEl.pause();
+			return;
+		}
+
+		const seg = segments[segIdx];
+		const offsetSec = (cursor - seg.start.getTime()) / 1000;
+
+		if (!audioEl.src.endsWith(seg.url)) {
+			// console.log('LOAD', seg.url, audioEl.src);
+			activeSegment = seg;
+			audioEl.src = seg.url;
+			await audioEl.play().catch(console.error);
+		}
+
+		if (Math.abs(audioEl.currentTime - offsetSec) > 0.5) {
+			audioEl.currentTime = offsetSec;
+		}
+
+		if (audioEl.paused && playing) {
+			await audioEl.play().catch(console.error);
+		}
+	}
+
+	function play() {
+		playbackStartRealTime = Date.now() - (cursor - windowStart.getTime());
+		playing = true;
+		startTick();
+	}
+
+	function pause() {
+		playing = false;
+		stopTick();
+		audioEl?.pause();
+	}
+
+	function togglePlay() {
+		playing ? pause() : play();
+	}
+
+	function seekTo(ms: number) {
+		cursor = clamp(ms, windowStart.getTime(), windowEnd.getTime());
+		playbackStartRealTime = Date.now() - (cursor - windowStart.getTime());
+		ensureAudioForCursor();
+	}
+
+	function rewind(ms = STEP_MS) {
+		seekTo(cursor - ms);
+	}
+	function ffwd(ms = STEP_MS) {
+		seekTo(cursor + ms);
+	}
+
+	function startTick() {
+		stopTick();
+		tickTimer = setInterval(async () => {
+			if (!playing) return;
+			cursor = windowStart.getTime() + (Date.now() - playbackStartRealTime);
+			if (cursor >= windowEnd.getTime()) {
+				pause();
+				return;
+			}
+			await ensureAudioForCursor();
+		}, TICK_MS);
+	}
+	function stopTick() {
+		if (tickTimer) clearInterval(tickTimer);
+		tickTimer = 0;
+	}
+
+	function onScrub(e: MouseEvent) {
+		if (e && e.currentTarget) {
+			const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+			seekTo(windowStart.getTime() + pct * (windowEnd.getTime() - windowStart.getTime()));
+		}
+	}
+
+	async function onDateChange() {
+		// windowStart = fromLocalInputValue(dateTimeLocal);
+		windowEnd = new Date(windowStart.getTime() + WINDOW_MS);
+		cursor = windowStart.getTime();
+		await loadSegments();
+		ensureAudioForCursor();
+	}
+
+	function shiftWindow(delta: number) {
+		windowStart = new Date(windowStart.getTime() + delta);
+		windowEnd = new Date(windowStart.getTime() + WINDOW_MS);
+		// dateTimeLocal = toLocalInputValue(windowStart);
+		cursor = windowStart.getTime();
+		loadSegments();
+	}
+
+	onMount(() => {
+		loadSegments();
+	});
+	onDestroy(() => stopTick());
+</script>
+
+<div class="player">
+	{@render selector(shiftWindow)}
+	{@render timeline()}
+	{@render callInfo(activeSegment)}
+	{@render controls(rewind, ffwd)}
+
+	{#snippet selector(shiftWindow: (delta: number) => void)}
+		<div class="d-flex justify-content-start">
+			<div>
+				<div class="input-group">
+					<InputDatetime
+						class="form-control text-center"
+						bind:value={windowStart}
+						onchange={onDateChange}
+					></InputDatetime>
+					<button class="btn btn-outline-secondary" onclick={() => shiftWindow(-10 * 60000)}
+						>&lt;&lt; 10m</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => shiftWindow(-5 * 60000)}
+						>&lt;&lt; 5m</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => shiftWindow(5 * 60000)}
+						>5m &gt;&gt;</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => shiftWindow(10 * 60000)}
+						>10m &gt;&gt;</button
+					>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet controls(rewind: (delta: number) => void, ffwd: (delta: number) => void)}
+		<div class="d-flex justify-content-center mt-1">
+			<div>
+				<div class="input-group">
+					<button class="btn btn-outline-secondary" onclick={() => rewind(60000)}
+						>&lt;&lt; 60s</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => rewind(10000)}
+						>&lt;&lt; 10s</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => rewind(5000)}>&lt;&lt; 5s</button
+					>
+					<button class="btn btn-outline-secondary" onclick={togglePlay}
+						>{playing ? '⏸ Pause' : '▶️ Play'}</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => ffwd(5000)}>&gt;&gt; 5s</button>
+					<button class="btn btn-outline-secondary" onclick={() => ffwd(10000)}>&gt;&gt; 10s</button
+					>
+					<button class="btn btn-outline-secondary" onclick={() => ffwd(60000)}>&gt;&gt; 60s</button
+					>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet timeline()}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="timeline mt-1">
+			<div class="bar" onclick={onScrub}>
+				{@render calls(segments)}
+				<div class="cursor" style={cursorStyle}></div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div class="windowStartLabel">
+					{windowStart.toLocaleTimeString()}
+				</div>
+				<div>{new Date(cursor).toLocaleString()}</div>
+				<div class="windowEndLabel">
+					{windowEnd.toLocaleTimeString()}
+				</div>
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet callInfo(call: Segment | undefined)}
+		<div class="callinfo text-center mt-1">
+			{#if call}
+				Radio {call.from} [{call.to}]
+			{:else}
+				Idle
+			{/if}
+		</div>
+	{/snippet}
+
+	{#snippet calls(calls: Segment[])}
+		{#each calls as call}
+			<div class="call" title={call.from} style={call.style}></div>
+		{/each}
+	{/snippet}
+
+	<audio bind:this={audioEl} crossorigin="anonymous" preload="auto"></audio>
+
+	{#if isLoading}<p>Loading audio…</p>{/if}
+	{#if error}<p style="color:red;">{error}</p>{/if}
+</div>
+
+<!-- windowStart: {windowStart.toISOString()}<br />
+windowEnd: {windowEnd.toISOString()}<br />
+cursor: {new Date(cursor).toISOString()}<br /> -->
+
+<!-- <pre>Segments:
+{JSON.stringify(segments, null, 2)}
+</pre> -->
+
+<style>
+	.player {
+		padding: 1rem;
+		border: 1px solid black;
+		border-radius: 8px;
+	}
+	.bar {
+		height: 2em;
+		background: var(--bs-bosy-color-rgb);
+		border-top: 1px solid black;
+		border-bottom: 1px solid black;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+	}
+	.timeline {
+		border-left: 1px solid black;
+		border-right: 1px solid black;
+	}
+	.cursor {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		border-radius: 0;
+		border-right: 3px red solid;
+	}
+	.call {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		min-width: 2px;
+		border-radius: 0;
+	}
+</style>

package/dist/AudioTimeLinePlayer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AudioTimeLinePlayer: import("svelte").Component<Record<string, never>, {}, "">;
+type AudioTimeLinePlayer = ReturnType<typeof AudioTimeLinePlayer>;
+export default AudioTimeLinePlayer;

package/dist/InputDate.svelte

@@ -5,14 +5,14 @@
 		value = $bindable(),
 		class: className = '',
 		disabled = false,
-		nodate = new Date(1970,1,1),
+		nodate = "",
 		min = new Date(2000, 1, 1),
 		max = new Date()
 	}: {
-		value: Date;
+		value: Date | "";
 		class?: string;
 		disabled?: boolean;
-		nodate?: Date;
+		nodate?: Date | "";
 		min?: Date;
 		max?: Date;
 	} = $props();
@@ -25,7 +25,9 @@
 
 	onMount(() => {
 		value = fromInputFormat(toInputFormat(value));
-		nodate.setHours(0, -nodate.getTimezoneOffset(), 0, 0);
+		if (nodate instanceof Date) {
+			nodate.setHours(0, -nodate.getTimezoneOffset(), 0, 0);
+		}
 	});
 
 	// Sync internal when external date changes
@@ -36,7 +38,7 @@
 		}
 	});
 
-	function toInputFormat(date: Date): string {
+	function toInputFormat(date: Date | ""): string {
 		if (date instanceof Date && !isNaN(date.getTime())) {
 			let d = new Date(date);
 			// Remove timezone
@@ -58,6 +60,7 @@
 			value = fromInputFormat(target.value);
 		} else {
 			value = nodate
+			internal = ""
 		}
 	}
 </script>

package/dist/InputDate.svelte.d.ts

@@ -1,8 +1,8 @@
 type $$ComponentProps = {
-    value: Date;
+    value: Date | "";
     class?: string;
     disabled?: boolean;
-    nodate?: Date;
+    nodate?: Date | "";
     min?: Date;
     max?: Date;
 };

package/dist/InputDatetime.svelte

@@ -5,32 +5,44 @@
 		value = $bindable(),
 		class: className = '',
 		disabled = false,
-		nodate = new Date(1970,1,1),
+		nodate = '',
 		min = new Date(2000, 1, 1),
-		max = new Date()
+		max = new Date(),
+		onchange = (e:Event) => {}
 	}: {
-		value: Date;
+		value: Date | '';
 		class?: string;
 		disabled?: boolean;
-		nodate?: Date;
+		nodate?: Date | '';
 		min?: Date;
 		max?: Date;
+		onchange?: (e:Event) => void;
 	} = $props();
 
 	let minDate = $derived(toInputFormat(min));
 	let maxDate = $derived(toInputFormat(max));
 
 	// internal is a string so as to work with the "input type=datetime-local"
-	// let internal = $state('');
+	let internal: string | undefined = $state('');
 
 	onMount(() => {
 		value = fromInputFormat(toInputFormat(value));
-		nodate.setHours(0, -nodate.getTimezoneOffset(), 0, 0);
+		if (nodate instanceof Date) {
+			nodate.setHours(0, -nodate.getTimezoneOffset(), 0, 0);
+		}
 	});
 
-	let internal = $derived(toInputFormat(value))
+	// let internal = $derived(toInputFormat(value));
+
+	// Sync internal when external date changes
+	$effect(() => {
+		let v = toInputFormat(value);
+		if (v) {
+			internal = v;
+		}
+	});
 
-	function toInputFormat(date: Date): string {
+	function toInputFormat(date: Date | ''): string {
 		if (date instanceof Date && !isNaN(date.getTime())) {
 			// Remove timezone to make time local
 			let d = new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
@@ -46,11 +58,15 @@
 
 	function handleInput(event: Event) {
 		const target = event.target as HTMLInputElement;
+		console.log('handleInput', `[${target.value}]`);
 		if (target.value) {
 			value = fromInputFormat(target.value);
 		} else {
-			value = nodate
+			console.log('handleInput', `nodate`);
+			value = nodate;
+			internal = undefined;
 		}
+		onchange(event);
 	}
 </script>
 

package/dist/InputDatetime.svelte.d.ts

@@ -1,10 +1,11 @@
 type $$ComponentProps = {
-    value: Date;
+    value: Date | '';
     class?: string;
     disabled?: boolean;
-    nodate?: Date;
+    nodate?: Date | '';
     min?: Date;
     max?: Date;
+    onchange?: (e: Event) => void;
 };
 declare const InputDatetime: import("svelte").Component<$$ComponentProps, {}, "value">;
 type InputDatetime = ReturnType<typeof InputDatetime>;

package/dist/auth.svelte.d.ts

@@ -4,6 +4,9 @@ export type User = {
     name: string;
     groups: string[];
     roles: string[];
+    ident_uri: string;
+    created: Date | undefined;
+    modified: Date | undefined;
 };
 declare const auth: {
     user: User | undefined;
@@ -15,6 +18,6 @@ declare const auth: {
     fetchUser(): void;
     login(login: string, password: string): Promise<unknown>;
     logout(): void;
-    fetch: (url: string, method?: string, data?: any) => Promise<Response>;
+    fetch: (url: string, method?: string, data?: any, timeout?: number) => Promise<Response>;
 };
 export { auth };

package/dist/auth.svelte.js

@@ -10,6 +10,10 @@ const auth = $state({
             user.name = user.login;
         }
         this.user = user;
+        if (this.user) {
+            this.user.created = this.user?.created ? new Date(this.user.created) : undefined;
+            this.user.modified = this.user?.modified ? new Date(this.user.modified) : undefined;
+        }
         this.isAdmin = !!user && user.login === "admin";
         this.isUser = !!user && user.login != "";
     },
@@ -20,9 +24,7 @@ const auth = $state({
         this.fetchUser();
     },
     fetchUser() {
-        const controller = new AbortController();
-        setTimeout(() => controller.abort(), 2000);
-        fetch("/api/me", { signal: controller.signal })
+        fetch("/api/me", { signal: AbortSignal.timeout(5000) })
             .then((resp) => {
             switch (resp.status) {
                 case 200:
@@ -42,11 +44,9 @@ const auth = $state({
     },
     login(login, password) {
         return new Promise((resolve, reject) => {
-            const controller = new AbortController();
-            setTimeout(() => controller.abort("Timeout waiting for response"), 3000);
             fetch("/api/login", {
                 method: "post",
-                signal: controller.signal,
+                signal: AbortSignal.timeout(5000),
                 body: JSON.stringify({
                     login,
                     password
@@ -75,11 +75,11 @@ const auth = $state({
     },
     logout() {
         auth.setUser(undefined);
-        fetch("/api/logout").then((resp) => {
+        fetch("/api/logout", { signal: AbortSignal.timeout(5000) }).then((resp) => {
             auth.fetchUser();
         });
     },
-    fetch: (url, method = 'get', data = undefined) => {
+    fetch: (url, method = 'get', data = undefined, timeout = 5000) => {
         return new Promise((resolve, reject) => {
             let body;
             let headers = {
@@ -94,6 +94,7 @@ const auth = $state({
                 body,
                 mode: "cors",
                 headers,
+                signal: AbortSignal.timeout(timeout)
             }).then(response => {
                 // response only can be ok in range of 2XX
                 if (response.ok) {

package/dist/colours.d.ts

@@ -0,0 +1,2 @@
+export declare function getMidrangeWebSafeColors(): string[];
+export declare const colors: string[];

package/dist/colours.js

@@ -0,0 +1,61 @@
+export function getMidrangeWebSafeColors() {
+    // const steps = [0x00, 0x33, 0x66, 0x99, 0xCC, 0xFF];
+    const steps = [0x00, 0x33, 0x66, 0x99, 0xCC, 0xFF];
+    const colors = [];
+    // Generate all 216 web-safe colors
+    for (const r of steps) {
+        for (const g of steps) {
+            for (const b of steps) {
+                // Compute perceived luminance (0–255)
+                const lum = 0.299 * r + 0.587 * g + 0.114 * b;
+                // Keep midrange only (avoid very dark/light)
+                if (lum > 60 && lum < 200) {
+                    colors.push({
+                        hex: `#${r.toString(16).padStart(2, '0')}${g
+                            .toString(16)
+                            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`,
+                        lum,
+                    });
+                }
+            }
+        }
+    }
+    // Sort by luminance
+    colors.sort((a, b) => a.lum - b.lum);
+    // Reorder to maximize contrast — alternate from dark to light ends
+    const contrasted = [];
+    let left = 0;
+    let right = colors.length - 1;
+    while (left <= right) {
+        contrasted.push(colors[left++].hex);
+        if (left <= right)
+            contrasted.push(colors[right--].hex);
+    }
+    return contrasted;
+}
+// A map of different colours to use per radio ident
+export const colors = [
+    '#3300ff',
+    '#006600',
+    '#ff9900',
+    '#660066',
+    '#3399cc',
+    '#ffcccc',
+    '#ccff00',
+    '#996600',
+    '#ff6666',
+    '#003399',
+    '#00ffff',
+    '#66cc66',
+    '#00ff33',
+    '#9933cc',
+    '#009966',
+    '#66ffcc',
+    '#9999ff',
+    '#ff00ff',
+    '#00ff99',
+    '#666666',
+    '#66cc00',
+    '#990000',
+    '#cc0066'
+];

package/dist/geofence.svelte.d.ts

@@ -1,13 +1,12 @@
 export type GeoFence = {
-    id: number;
+    id?: number;
     name: string;
+    points?: string;
     size?: number;
 };
-/**
- * GeoFence store
- */
-declare const geofence: {
-    all: GeoFence[];
-    load: () => Promise<void>;
+export declare const geofence: {
+    readonly all: GeoFence[];
+    get: (id: number) => Promise<GeoFence>;
+    save: (g: GeoFence) => Promise<number>;
+    load: () => Promise<unknown>;
 };
-export { geofence, };

package/dist/geofence.svelte.js

@@ -1,17 +1,16 @@
-/**
- * GeoFence store
- */
-const geofence = $state({
-    all: [],
-    load: (() => {
+function createStore() {
+    let data = $state([]);
+    let loaded = false;
+    async function load() {
+        loaded = true;
         return new Promise((resolve, reject) => {
-            fetch('/api/module/entitygeofence?select=id,name,size&order=size desc')
+            fetch('/api/module/entitygeofence?select=id,name,size&order=size desc', { signal: AbortSignal.timeout(5000) })
                 .then(resp => {
                 switch (resp.status) {
                     case 200:
-                        resp.json().then(data => {
-                            geofence.all = data;
-                            resolve();
+                        resp.json().then(dat => {
+                            data = dat;
+                            resolve(data);
                         }).catch(err => {
                             reject(err);
                         });
@@ -24,7 +23,65 @@ const geofence = $state({
                 reject(err);
             });
         });
-    })
-});
-geofence.load();
-export { geofence, };
+    }
+    async function get(id) {
+        return new Promise((resolve, reject) => {
+            fetch(`/api/module/entitygeofence/${id}`, { signal: AbortSignal.timeout(5000) })
+                .then(resp => {
+                switch (resp.status) {
+                    case 200:
+                        return resp.json();
+                    default:
+                        return resp.text().then(t => {
+                            throw new Error(t);
+                        });
+                }
+            }).then(dat => {
+                resolve(dat);
+            })
+                .catch(err => {
+                console.log("err", err);
+                reject(err);
+            });
+        });
+    }
+    async function save(g) {
+        return new Promise((resolve, reject) => {
+            let url = `/api/module/entitygeofence`;
+            let method = "post";
+            if (g.id) {
+                url += `/${g.id}`;
+                method = "put";
+            }
+            fetch(url, { method, body: JSON.stringify(g), signal: AbortSignal.timeout(5000) })
+                .then(resp => {
+                switch (resp.status) {
+                    case 200:
+                        load();
+                        // api is not returning the new id
+                        return resp.text();
+                    default:
+                        return resp.text().then(t => {
+                            throw new Error(t);
+                        });
+                }
+            }).then(t => {
+                resolve(parseInt(t));
+            })
+                .catch(err => {
+                reject(err);
+            });
+        });
+    }
+    return {
+        get all() {
+            if (!loaded)
+                load();
+            return data;
+        },
+        get,
+        save,
+        load
+    };
+}
+export const geofence = createStore();

package/dist/ghistory.svelte.js

@@ -3,29 +3,21 @@ const ghistory = $state({
     state: [],
     loadState() {
         return new Promise((resolve, reject) => {
-            fetch(`/api/module/entityhistory/state`)
+            fetch(`/api/module/entityhistory/state`, { signal: AbortSignal.timeout(10000) })
                 .then(resp => {
-                switch (resp.status) {
-                    case 200:
-                        resp.json().then(data => {
-                            ghistory.state = data.map(s => {
-                                s.date = new Date(s.timestamp);
-                                if (s.data) {
-                                    try {
-                                        s.data = JSON.parse(s.data);
-                                    }
-                                    catch (e) { }
-                                }
-                                return s;
-                            });
-                            resolve();
-                        }).catch(err => {
-                            reject(err);
+                if (resp.status === 200) {
+                    resp.json().then(data => {
+                        ghistory.state = data.map(s => {
+                            s.date = new Date(s.timestamp);
+                            if (s.data) {
+                                s.data = JSON.parse(s.data);
+                            }
+                            return s;
                         });
-                        break;
-                    default:
-                        reject(resp.statusText);
-                        break;
+                        resolve();
+                    }).catch(err => {
+                        reject(err);
+                    });
                 }
             }).catch(err => {
                 reject(err);
@@ -50,28 +42,24 @@ const ghistory = $state({
             }
             fetch(`/api/module/entityhistory/log?${q.toString()}`)
                 .then(resp => {
-                switch (resp.status) {
-                    case 200:
-                        resp.json().then(data => {
-                            ghistory.log = data.map((l) => {
-                                l.date = new Date(l.timestamp);
-                                if (l.data) {
-                                    try {
-                                        l.data = JSON.parse(l.data);
-                                    }
-                                    catch (e) { }
+                if (resp.status === 200) {
+                    resp.json().then(data => {
+                        ghistory.log = data.map((l) => {
+                            l.date = new Date(l.timestamp);
+                            if (l.data) {
+                                try {
+                                    l.data = JSON.parse(l.data);
                                 }
-                                return l;
-                            });
-                            resolve();
-                        }).catch(err => {
-                            reject(err);
+                                catch (e) { }
+                            }
+                            return l;
                         });
-                        break;
-                    default:
-                        reject(resp.statusText);
-                        break;
+                        resolve();
+                    }).catch(err => {
+                        reject(err);
+                    });
                 }
+                reject(resp.statusText);
             }).catch(err => {
                 reject(err);
             });

package/dist/gtime.svelte.d.ts

@@ -6,4 +6,5 @@ declare let gtime: {
     diff: number;
     ok: boolean;
 };
-export { gtime, };
+declare const syncTimeToBrowser: () => Promise<string>;
+export { gtime, syncTimeToBrowser };

package/dist/gtime.svelte.js

@@ -8,11 +8,10 @@ let gtime = $state({
     ok: true,
 });
 let ticks = 0; // Number of ticks since last fetch
+let timer = 0;
 const fetchTime = () => {
     const start = new Date().getTime();
-    const controller = new AbortController();
-    setTimeout(() => controller.abort(), 2000);
-    fetch("/api/date", { signal: controller.signal })
+    fetch("/api/date", { signal: AbortSignal.timeout(2000) })
         .then((resp) => {
         gtime.ok = false;
         if (resp.ok) {
@@ -35,7 +34,17 @@ setInterval(() => {
     ticks++;
     if (ticks > fetchIntervalSecs) {
         ticks = 0;
-        setTimeout(fetchTime, 0);
+        timer = setTimeout(fetchTime, 0);
     }
 }, 1000);
-export { gtime, };
+const syncTimeToBrowser = async () => {
+    const body = JSON.stringify({ "timestamp": Math.round(new Date().getTime() / 1000) });
+    const resp = await fetch("/api/date", { method: "POST", body });
+    if (resp.status === 200) {
+        clearTimeout(timer);
+        timer = setTimeout(fetchTime, 0);
+        return "ok";
+    }
+    throw new Error(resp.statusText);
+};
+export { gtime, syncTimeToBrowser };

package/dist/index.d.ts

@@ -9,7 +9,8 @@ import InputDebounced from "./InputDebounced.svelte";
 import InputIdentUri from "./InputIdentUri.svelte";
 import LoginForm from "./LoginForm.svelte";
 import { recording, type Recording } from "./recording.svelte.js";
+import AudioTimeLinePlayer from "./AudioTimeLinePlayer.svelte";
 import VoicePlayer from "./VoicePlayer.svelte";
 import csv from "./csv.js";
-export { auth, gtime, geofence, device, ghistory, InputDate, InputDatetime, InputDebounced, InputIdentUri, LoginForm, recording, VoicePlayer, csv, };
+export { auth, gtime, geofence, device, ghistory, InputDate, InputDatetime, InputDebounced, InputIdentUri, LoginForm, recording, AudioTimeLinePlayer, VoicePlayer, csv, };
 export type { User, GeoFence, Device, Log, State, Recording };

package/dist/index.js

@@ -10,6 +10,7 @@ import InputDebounced from "./InputDebounced.svelte";
 import InputIdentUri from "./InputIdentUri.svelte";
 import LoginForm from "./LoginForm.svelte";
 import { recording } from "./recording.svelte.js";
+import AudioTimeLinePlayer from "./AudioTimeLinePlayer.svelte";
 import VoicePlayer from "./VoicePlayer.svelte";
 import csv from "./csv.js";
-export { auth, gtime, geofence, device, ghistory, InputDate, InputDatetime, InputDebounced, InputIdentUri, LoginForm, recording, VoicePlayer, csv, };
+export { auth, gtime, geofence, device, ghistory, InputDate, InputDatetime, InputDebounced, InputIdentUri, LoginForm, recording, AudioTimeLinePlayer, VoicePlayer, csv, };

package/dist/recording.svelte.d.ts

@@ -8,7 +8,9 @@ export type Recording = {
 };
 declare const recording: {
     all: Recording[];
+    loadedHours: string[];
     clear: () => void;
+    getRecordings: (start: Date, end: Date) => Promise<Recording[]>;
     loadHour: (date?: Date) => Promise<void>;
 };
 export { recording, };

package/dist/recording.svelte.js

@@ -1,17 +1,36 @@
 const recording = $state({
     all: [],
+    loadedHours: [], // Cache of hours loaded ["2025-10-19T19"]
     clear: () => {
         recording.all = [];
     },
+    getRecordings: async (start, end) => {
+        // Check we have the required hours loaded, befire
+        // before return the requested hours
+        // Calc the end date/time
+        // Set Start the begining of the hour
+        let d = new Date(start);
+        d.setMilliseconds(0);
+        d.setSeconds(0);
+        d.setMinutes(0);
+        for (; d < end; d = new Date(d.getTime() + 1000 * 60 * 60)) {
+            const hr = d.toISOString().slice(0, 13);
+            if (!recording.loadedHours.find(h => h == hr)) {
+                await recording.loadHour(d);
+            }
+        }
+        return recording.all.filter(r => r.start < end && (r.start.getTime() + r.dur * 1000) > start.getTime());
+    },
     loadHour: ((date) => {
         return new Promise((resolve, reject) => {
             if (!date)
                 date = new Date();
-            let [ymd, time] = date.toISOString().split("T");
-            let [year, month, day] = ymd.split("-");
-            let [hour, min, sec] = time.split(":");
+            const [ymd, time] = date.toISOString().split("T");
+            const [year, month, day] = ymd.split("-");
+            const [hour, min, sec] = time.split(":");
             fetch(`/api/recordings/${year}/${month}/${day}/${hour}`)
                 .then(resp => {
+                const hr = date.toISOString().slice(0, 13);
                 switch (resp.status) {
                     case 200:
                         resp.json().then(data => {
@@ -24,11 +43,17 @@ const recording = $state({
                                 .reduce((m, o) => m.set(o.file, o), new Map)
                                 .values());
                             recording.all.sort((a, b) => a.start.getTime() - b.start.getTime());
+                            if (!recording.loadedHours.find(h => h == hr)) {
+                                recording.loadedHours.push(hr);
+                            }
                             resolve();
                         }).catch(err => {
                             reject(err);
                         });
                         break;
+                    case 404:
+                        resolve();
+                        break;
                     default:
                         reject(resp.statusText);
                         break;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "smcgateway-sv",
-	"version": "0.3.3",
+	"version": "0.4.2",
 	"author": "Kevin Golding <kevin.golding@smc-gateway.com> (https://smc-gateway.com)",
 	"license": "MIT",
 	"scripts": {