No cameras linked yet
-
- `;
- }).join('');
-
- // Show/hide main wrapper
- const viewerWrapper = $('clientStreamViewerWrapper');
- if (viewerWrapper) {
- if (state.activeCameraDeviceId) {
- viewerWrapper.classList.remove('hidden');
- const title = $('clientStreamViewerTitle');
- if (title) title.textContent = `Live Feed: ${getCameraLabel(state.activeCameraDeviceId)}`;
- } else {
- viewerWrapper.classList.add('hidden');
- }
- }
-
- if (state.activeCameraDeviceId) {
- // Find session ID for active camera if known
- let foundSessionId = state.activeStreamSessionId;
- const sessions = state.cameraSessions || {};
- if (!foundSessionId && sessions[state.activeCameraDeviceId]) {
- foundSessionId = sessions[state.activeCameraDeviceId];
- }
-
- const currentStream = foundSessionId ? remoteStreams.get(foundSessionId) : null;
- if (currentStream) {
- const videoEl = $('clientStreamVideo');
- if (videoEl && videoEl.srcObject !== currentStream) {
- videoEl.srcObject = currentStream;
- setClientStreamMode('video');
- $('clientLiveDot')?.classList.remove('hidden');
- // Only play if it's not already playing to prevent interruptions
- if (videoEl.paused) {
- void videoEl.play().catch(() => { });
- }
- }
- } else {
- $('clientLiveDot')?.classList.add('hidden');
- }
- } else {
- $('clientLiveDot')?.classList.add('hidden');
- }
-
- const imageEl = $('clientStreamImage');
- if (imageEl && !imageEl.dataset.errorBound) {
- imageEl.dataset.errorBound = '1';
- imageEl.addEventListener('error', () => {
- const videoEl = $('clientStreamVideo');
- if (videoEl) {
- videoEl.classList.add('hidden');
- }
- setClientStreamMode('unavailable');
- });
- }
- }
- }
-
- const recList = $('recordingsList');
- if (recList) {
- if (state.recordings.length === 0) {
- recList.innerHTML = `
- ${state.activeCameraDeviceId === link.cameraDeviceId
- ? `
-
-
-
-
- `
- : `
- Viewing
-
-
-
- `
- }
- ${Array.from(connectedPeers).includes(link.cameraDeviceId) ? 'Live Stream Active' : (requestedStreams.has(link.cameraDeviceId) ? 'Connecting...' : 'Click to view')}
-
-
-
-
-
-
-
-
-
-
- ${escapedCameraName}
-${cameraStatus}
-No recordings found
-
- `).join('');
- }
- }
- }
-
- if (state.screen === 'activity') {
- const activityFeed = $('activityFeedList');
- if (activityFeed) {
- if (state.motionNotifications.length === 0) {
- activityFeed.innerHTML = `
-
- ${new Date(rec.createdAt).toLocaleString()}
- ${rec.durationSeconds != null ? `${rec.durationSeconds}s duration` : 'Duration pending'} ยท ${rec.status ?? 'unknown'}
-
-
-
-
-
- `;
- } else {
- activityFeed.innerHTML = state.motionNotifications.map((notification) => `
-
- `).join('');
- }
- }
- }
-
- // 6. Settings Screen
- if (state.session?.user && state.screen === 'settings') {
- const profileName = $('profileName');
- const profileEmail = $('profileEmail');
- const profileInitials = $('profileInitials');
- if (profileName) profileName.textContent = state.session.user.name;
- if (profileEmail) profileEmail.textContent = state.session.user.email;
- if (profileInitials) profileInitials.textContent = state.session.user.name.charAt(0).toUpperCase();
- }
-};
-
-const addActivity = (type, msg) => {
- const list = $('activityFeedList');
- if (list) {
- const item = document.createElement('div');
- item.className = 'p-3 rounded-lg bg-gray-900/40 border border-white/5 flex flex-col gap-1';
- item.innerHTML = `
- No notifications yet
-
- ${type}
- ${new Date().toLocaleTimeString()}
-
- ${msg}
- `; - list.prepend(item); - } - - // Also update camera logs if applicable - if ($('cameraLogs')) { - const logLine = document.createElement('div'); - logLine.textContent = `[${new Date().toLocaleTimeString()}] ${type}: ${msg}`; - $('cameraLogs').prepend(logLine); - } -}; - -const updateNotificationDot = (show) => { - const dot = $('notificationDot'); - if (!dot) return; - if (show) dot.classList.remove('hidden'); - else dot.classList.add('hidden'); -}; - -// --- 6. Event Listeners --- - -const bind = (id, eventName, handler) => { - const element = $(id); - if (!element) return; - element.addEventListener(eventName, handler); -}; - -bind('toggleAuthModeBtn', 'click', Actions.toggleAuthMode); -bind('signInBtn', 'click', Actions.submitAuth); -bind('registerBtn', 'click', Actions.registerDevice); -bind('loadSavedBtn', 'click', () => { /* Handle legacy loading if needed */ }); -$$('#screen-onboarding [data-role]').forEach((btn) => { - btn.addEventListener('click', () => Actions.selectRole(btn.dataset.role)); -}); -bind('recordingsList', 'click', (event) => { - const target = event.target.closest('.download-recording-btn'); - if (!target || target.disabled) return; - const recordingId = target.dataset.recordingId; - if (!recordingId) return; - Actions.openRecording(recordingId); -}); -bind('activityFeedList', 'click', (event) => { - const target = event.target.closest('.motion-notification-btn'); - if (!target) return; - const notificationId = target.dataset.notificationId; - const cameraDeviceId = target.dataset.cameraDeviceId; - if (!notificationId || !cameraDeviceId) return; - Actions.openMotionNotificationTarget(notificationId, cameraDeviceId); -}); - -$('linkedCamerasList')?.addEventListener('click', (event) => { - const menuToggleBtn = event.target.closest('.linked-camera-menu-toggle'); - if (menuToggleBtn) { - event.stopPropagation(); - const linkId = menuToggleBtn.dataset.linkId; - if (!linkId) return; - - const { openLinkedCameraMenuId } = store.get(); - store.update({ - openLinkedCameraMenuId: openLinkedCameraMenuId === linkId ? null : linkId, - }); - return; - } - - const renameBtn = event.target.closest('.linked-camera-rename-btn'); - if (renameBtn) { - event.stopPropagation(); - const cameraId = renameBtn.dataset.cameraId; - if (cameraId) { - store.update({ openLinkedCameraMenuId: null }); - void Actions.renameLinkedCamera(cameraId); - } - return; - } - - const deleteBtn = event.target.closest('.linked-camera-delete-btn'); - if (deleteBtn) { - event.stopPropagation(); - const linkId = deleteBtn.dataset.linkId; - if (linkId) { - store.update({ openLinkedCameraMenuId: null }); - void Actions.deleteLinkedCamera(linkId); - } - return; - } - - const card = event.target.closest('.camera-card'); - if (!card) return; - const camId = card.dataset.cameraId; - if (camId) { - const sessions = store.get().cameraSessions || {}; - store.update({ - activeCameraDeviceId: camId, - activeStreamSessionId: sessions[camId] || null, - openLinkedCameraMenuId: null, - }); - // If not currently streamed or requested, kick off request - if (!requestedStreams.has(camId)) { - requestedStreams.add(camId); - Actions.requestStream(camId); - } else { - // Just re-render - store.notify(); - } - } -}); - -document.addEventListener('click', (event) => { - if (!event.target.closest('.linked-camera-menu')) { - const { openLinkedCameraMenuId } = store.get(); - if (openLinkedCameraMenuId) { - store.update({ openLinkedCameraMenuId: null }); - } - } -}); - -// Navbar -$$('.nav-btn').forEach(btn => { - btn.addEventListener('click', () => { - if (btn.dataset.target === 'activity') { - markAllNotificationsRead(); - } - if (navigateToScreen(btn.dataset.target)) return; - }); -}); - -// Camera Controls -bind('cameraGoOnlineBtn', 'click', async () => { - if (store.get().device?.role === 'camera') { - await startCameraPreview(); - } - connectSocket(); -}); -bind('startMotionBtn', 'click', Actions.startMotion); -bind('endMotionBtn', 'click', Actions.endMotion); - -// Client Controls -bind('linkCameraBtn', 'click', Actions.linkCamera); -bind('refreshClientBtn', 'click', startPolling); - -// Settings -bind('signOutBtn', 'click', Actions.signOut); -bind('clearActivityBtn', 'click', () => { - store.update({ motionNotifications: [] }); -}); -bind('recordingModalCloseBtn', 'click', Actions.closeRecordingModal); -bind('recordingModal', 'click', (event) => { - if (event.target === $('recordingModal')) { - Actions.closeRecordingModal(); - } -}); -$('closeStreamViewerBtn')?.addEventListener('click', () => { - store.update({ activeCameraDeviceId: null, activeStreamSessionId: null }); -}); - -// Init -store.subscribe(render); -init(); - -window.addEventListener('beforeunload', () => { - stopFrameRelay(); - void stopLocalRecording(); - teardownPeerConnection(); - stopCameraPreview(); -}); - -window.Actions = Actions; diff --git a/WebApp/src/lib/sim/screens/ActivityScreen.svelte b/WebApp/src/lib/sim/screens/ActivityScreen.svelte deleted file mode 100644 index c741915..0000000 --- a/WebApp/src/lib/sim/screens/ActivityScreen.svelte +++ /dev/null @@ -1,27 +0,0 @@ -
-
-
- Activity History
- -
-
-
-
-
-
-
- All quiet. No notifications yet.
-
-
-
-
-
-
- SecureCam Web
-Sign in to manage visual security from your browser.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- OR
-
-
-
-
- Camera Feed (Broadcasting)
-
-
-
-
-
-
-
-
-
-
-
- REC
-
-
-
-
- Camera Offline
- -
-
-
-
-
- Manual Controls
-
-
-
-
-
-
- System Logs
-
-
- Awaiting connection...
-
-
-
- Client Dashboard
-
-
-
-
-
-
-
- Your Cameras
-
-
-
-
- No cameras linked yet
-
-
-
-
-
-
-
-
- Recent Recordings
- -
-
-
- Configure Device
-Set up this browser simulator's role
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Settings
- -
-
-
-
- U
-
-
-
- User
-user@example.com
-
-
-
-
-
-
-