- Implemented safe merge in root layout to preserve local timer overrides. - Added Native Sync Monitor UI to background sync component. - Exposed loop periods and hash prefix length in Launcher Config. - Ensured manual adjustments survive page refreshes.
189 lines
8.3 KiB
Svelte
189 lines
8.3 KiB
Svelte
<script lang="ts">
|
||
/**
|
||
* launcher_background_sync.svelte
|
||
* Exhaustive Background Pre-Caching Engine with Loop Monitoring.
|
||
*/
|
||
import { onMount, onDestroy } from 'svelte';
|
||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||
import { events_slct } from '$lib/stores/ae_events_stores';
|
||
import { db_events } from '$lib/ae_events/db_events';
|
||
import * as native from '$lib/electron/electron_relay';
|
||
|
||
let { log_lvl = 1 } = $props();
|
||
|
||
let currently_syncing: string | null = $state(null);
|
||
let sync_results: Record<string, 'success' | 'error' | 'pending'> = $state({});
|
||
let sync_stats = $state({ total: 0, cached: 0, missing: 0 });
|
||
|
||
// Loop Timings (Visible in UI)
|
||
let loop_info = $state({
|
||
event: 90000,
|
||
device: 60000,
|
||
location: 30000,
|
||
session: 10000
|
||
});
|
||
|
||
// Timer Handles
|
||
let timer__event: any = null;
|
||
let timer__device: any = null;
|
||
let timer__location: any = null;
|
||
let timer__session: any = null;
|
||
|
||
let is_syncing = false;
|
||
let show_monitor = $state(false);
|
||
|
||
onMount(() => {
|
||
if (!$ae_loc.is_native) return;
|
||
|
||
const dev = $ae_loc.native_device || {};
|
||
|
||
// Load timings from device config
|
||
loop_info.event = dev.check_event_loop_period || 90000;
|
||
loop_info.device = dev.check_event_device_loop_period || 60000;
|
||
loop_info.location = dev.check_event_location_loop_period || 30000;
|
||
loop_info.session = dev.check_event_session_loop_period || 10000;
|
||
|
||
timer__event = setInterval(() => run_sync_cycle(), loop_info.event);
|
||
timer__device = setInterval(() => { /* TODO: Heartbeat */ }, loop_info.device);
|
||
timer__location = setInterval(() => { /* TODO: Refresh Loc */ }, loop_info.location);
|
||
timer__session = setInterval(() => run_sync_cycle(), loop_info.session);
|
||
|
||
// Immediate first run
|
||
run_sync_cycle();
|
||
});
|
||
|
||
onDestroy(() => {
|
||
if (timer__event) clearInterval(timer__event);
|
||
if (timer__device) clearInterval(timer__device);
|
||
if (timer__location) clearInterval(timer__location);
|
||
if (timer__session) clearInterval(timer__session);
|
||
});
|
||
|
||
async function run_sync_cycle() {
|
||
const location_id = $events_slct.event_location_id;
|
||
const cache_root = $ae_loc.local_file_cache_path;
|
||
const prefix_len = $ae_loc.native_device?.hash_prefix_length || 2;
|
||
|
||
if (!location_id || !cache_root || is_syncing) return;
|
||
|
||
is_syncing = true;
|
||
try {
|
||
const sessions = await db_events.session.where('event_location_id').equals(location_id).toArray();
|
||
const session_ids = sessions.map(s => s.event_session_id);
|
||
if (session_ids.length === 0) return;
|
||
|
||
const presentations = await db_events.presentation.where('event_session_id').anyOf(session_ids).toArray();
|
||
const presentation_ids = presentations.map(p => p.event_presentation_id);
|
||
|
||
const presenters = await db_events.presenter.where('event_session_id').anyOf(session_ids).toArray();
|
||
const presenter_ids = presenters.map(p => p.event_presenter_id);
|
||
|
||
const all_for_ids = [...session_ids, ...presentation_ids, ...presenter_ids, $events_slct.event_id];
|
||
const files = await db_events.file.where('for_id').anyOf(all_for_ids).toArray();
|
||
|
||
sync_stats.total = files.length;
|
||
let cached_count = 0;
|
||
let missing_count = 0;
|
||
|
||
for (const file_obj of files) {
|
||
if (!file_obj.hash_sha256) continue;
|
||
if (sync_results[file_obj.event_file_id] === 'success') { cached_count++; continue; }
|
||
|
||
const exists = await native.check_hash_file_cache({
|
||
cache_root,
|
||
hash: file_obj.hash_sha256,
|
||
hash_prefix_length: prefix_len
|
||
});
|
||
|
||
if (exists) {
|
||
sync_results[file_obj.event_file_id] = 'success';
|
||
cached_count++;
|
||
continue;
|
||
}
|
||
|
||
missing_count++;
|
||
currently_syncing = file_obj.filename;
|
||
|
||
const url = `${$ae_api.base_url}/hosted_file/${file_obj.hosted_file_id}/download?return_file=true&filename=${encodeURIComponent(file_obj.filename)}`;
|
||
const result = await native.download_to_cache({
|
||
url, cache_root, hash: file_obj.hash_sha256,
|
||
api_key: $ae_api.api_secret_key, account_id: $ae_api.account_id,
|
||
hash_prefix_length: prefix_len
|
||
});
|
||
|
||
if (result.success) sync_results[file_obj.event_file_id] = 'success';
|
||
}
|
||
sync_stats.cached = cached_count;
|
||
sync_stats.missing = missing_count;
|
||
} catch (err) {
|
||
console.error('Sync Engine Error:', err);
|
||
} finally {
|
||
currently_syncing = null;
|
||
is_syncing = false;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- Monitor Overlay (Hidden by default, triggered by config modal or secret gesture) -->
|
||
<div class="fixed bottom-4 right-4 z-[9999] flex flex-col items-end gap-2 pointer-events-none">
|
||
{#if show_monitor}
|
||
<div class="bg-black/90 text-white p-3 rounded-lg border border-primary-500 shadow-2xl text-[10px] font-mono min-w-48 pointer-events-auto">
|
||
<div class="flex justify-between border-b border-primary-500 pb-1 mb-2">
|
||
<span class="font-bold text-primary-400">NATIVE SYNC MONITOR</span>
|
||
<button onclick={() => show_monitor = false} class="text-error-500 hover:text-error-400">×</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-x-4 gap-y-1 mb-2">
|
||
<span class="opacity-70 text-primary-300">Room Status:</span>
|
||
<span class="text-right">{sync_stats.cached} / {sync_stats.total} Files</span>
|
||
|
||
<span class="opacity-70 text-primary-300">Prefix Len:</span>
|
||
<span class="text-right">{$ae_loc.native_device?.hash_prefix_length || 2} chars</span>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10 pt-2 flex flex-col gap-1">
|
||
<div class="flex justify-between items-center">
|
||
<span class:text-primary-500={timer__event}>Event Loop:</span>
|
||
<span>{loop_info.event / 1000}s</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class:text-primary-500={timer__device}>Device Loop:</span>
|
||
<span>{loop_info.device / 1000}s</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class:text-primary-500={timer__location}>Location Loop:</span>
|
||
<span>{loop_info.location / 1000}s</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class:text-primary-500={timer__session}>Session Loop:</span>
|
||
<span>{loop_info.session / 1000}s</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
{#if currently_syncing}
|
||
<button
|
||
onclick={() => show_monitor = !show_monitor}
|
||
class="bg-black/80 text-white p-2 rounded-lg text-[10px] border border-primary-500 animate-pulse shadow-2xl pointer-events-auto transition-transform active:scale-95"
|
||
>
|
||
<div class="flex items-center gap-2 text-left">
|
||
<span class="fas fa-sync fa-spin text-primary-500 text-sm"></span>
|
||
<div class="flex flex-col">
|
||
<span class="font-bold">Syncing Room Files...</span>
|
||
<span class="opacity-70 truncate max-w-48">{currently_syncing}</span>
|
||
<span class="text-[8px] mt-1 text-primary-300">Monitor Ready (Click to View)</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
{:else}
|
||
<!-- Secret button area to toggle monitor when not syncing -->
|
||
<button
|
||
onclick={() => show_monitor = !show_monitor}
|
||
class="w-8 h-8 opacity-0 hover:opacity-20 bg-primary-500 rounded-full pointer-events-auto flex items-center justify-center transition-opacity"
|
||
title="Toggle Sync Monitor"
|
||
>
|
||
<span class="fas fa-microchip text-white text-[10px]"></span>
|
||
</button>
|
||
{/if}
|
||
</div> |