import { api } from '../api.js'; import { on, off, requestScreenshot, startRemote, stopRemote, sendTouch, sendKey, sendCommand } from '../socket.js'; import { showToast } from '../components/toast.js'; let currentDevice = null; let statusHandler = null; let screenshotHandler = null; let playbackHandler = null; let screenshotInterval = null; let remoteActive = false; function formatBytes(mb) { if (mb === null || mb === undefined) return '--'; if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`; return `${mb} MB`; } function formatUptime(seconds) { if (!seconds) return '--'; const d = Math.floor(seconds / 86400); const h = Math.floor((seconds % 86400) / 3600); const m = Math.floor((seconds % 3600) / 60); if (d > 0) return `${d}d ${h}h ${m}m`; if (h > 0) return `${h}h ${m}m`; return `${m}m`; } export function render(container, deviceId) { container.innerHTML = `
Back to Displays

Loading...

`; loadDevice(deviceId); // Real-time updates statusHandler = (data) => { if (data.device_id !== deviceId) return; const badge = document.querySelector('.device-status-badge'); if (badge) { badge.className = `device-status-badge ${data.status}`; badge.textContent = data.status; } if (data.telemetry) updateTelemetryDisplay(data.telemetry); }; screenshotHandler = (data) => { if (data.device_id !== deviceId) return; // Use inline base64 data if available, otherwise fall back to URL const imgSrc = data.image_data || (() => { const token = localStorage.getItem('token'); return data.url + (data.url.includes('?') ? '&' : '?') + 'token=' + token; })(); // Update screenshot in Now Playing tab const screenshotEl = document.getElementById('currentScreenshot'); if (screenshotEl) { if (screenshotEl.tagName === 'IMG') { screenshotEl.src = imgSrc; } else { // Replace placeholder div with actual image const img = document.createElement('img'); img.id = 'currentScreenshot'; img.src = imgSrc; img.alt = 'Current screen'; img.style.cssText = 'width:100%;height:100%;object-fit:contain'; screenshotEl.replaceWith(img); } } // Update remote canvas const canvas = document.getElementById('remoteCanvas'); if (canvas && remoteActive) { const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); }; img.src = imgSrc; } }; playbackHandler = (data) => { if (data.device_id !== deviceId) return; const el = document.getElementById('nowPlayingInfo'); if (el && data.current_content_id) { el.textContent = `Playing: ${data.current_content_id}`; } }; on('device-status', statusHandler); on('screenshot-ready', screenshotHandler); on('playback-state', playbackHandler); } async function loadDevice(deviceId, activeTab = null) { const contentEl = document.getElementById('deviceContent'); try { const device = await api.getDevice(deviceId); currentDevice = device; const latestTelemetry = device.telemetry?.[0] || {}; contentEl.innerHTML = `

${device.name}

${device.status} ${device.owner_name || device.owner_email ? `Owner: ${device.owner_name || device.owner_email}` : ''}
Now Playing ?
Playlist ?
Device Info ?
Remote Control ?
${device.screenshot ? `Current screen` : `
No screenshot available. Click "Screenshot" to capture one.
` }

${device.assignments?.length ? `${device.assignments.length} item(s) in playlist` : 'No content assigned'}

Screen Layout

Playlist

${renderPlaylist(device.assignments || [])}
Status
${device.status}
IP Address
${device.ip_address || '--'}
${device.android_version && !device.android_version.startsWith('Web/') ? `
Battery
${latestTelemetry.battery_level != null ? latestTelemetry.battery_level + '%' : '--'}
${latestTelemetry.battery_level != null ? `
` : ''}
Storage
${latestTelemetry.storage_free_mb ? formatBytes(latestTelemetry.storage_free_mb) + ' free' : '--'}
${latestTelemetry.storage_total_mb ? `
` : ''}
` : `
Player Type
Web Player
`} ${device.android_version && !device.android_version.startsWith('Web/') ? `
WiFi
${latestTelemetry.wifi_ssid || '--'}
${latestTelemetry.wifi_rssi ? latestTelemetry.wifi_rssi + ' dBm' : ''}
` : ''}
Uptime
${formatUptime(latestTelemetry.uptime_seconds)}
${device.android_version && !device.android_version.startsWith('Web/') ? `
Android Version
${device.android_version}
App Version
${device.app_version || '--'}
` : ''}
Screen Resolution
${device.screen_width && device.screen_height ? device.screen_width + 'x' + device.screen_height : '--'}
${device.android_version && !device.android_version.startsWith('Web/') ? `
RAM
${latestTelemetry.ram_free_mb ? formatBytes(latestTelemetry.ram_free_mb) + ' free' : '--'}
CPU Usage
${latestTelemetry.cpu_usage != null ? latestTelemetry.cpu_usage.toFixed(1) + '%' : '--'}
` : ''}

Uptime Timeline (Last 24 Hours)

24h ago Now
Online Offline No data

Click "Start Remote" to begin

Requires one-time approval on device
`; // Global key/command handlers for remote window._sendKey = (keycode) => { if (currentDevice) sendKey(currentDevice.id, keycode); }; window._sendCmd = (type) => { if (currentDevice) sendCommand(currentDevice.id, type, {}); }; window._enableSystemView = () => { if (!currentDevice) return; sendCommand(currentDevice.id, 'enable_system_capture', {}); // Unlock the system controls after a short delay (user needs to tap "Start now" on device) const btn = document.getElementById('enableSystemCaptureBtn'); const hint = document.getElementById('systemViewHint'); if (btn) { btn.textContent = 'Waiting for device approval...'; btn.disabled = true; } // Check periodically if the device granted it (we'll know because screenshots keep coming even after Home) setTimeout(() => { const controls = document.getElementById('systemViewControls'); if (controls) { controls.style.opacity = '1'; controls.style.pointerEvents = 'auto'; } if (btn) { btn.textContent = 'System View Enabled'; btn.style.background = 'var(--success)'; } if (hint) hint.textContent = 'Navigation and system controls unlocked'; }, 5000); }; // Render uptime timeline renderUptimeTimeline(device.uptimeData || [], device.statusLog || []); setupTabs(); setupActions(device); setupRemote(device); setupPlaylistActions(device); // Restore active tab if specified (e.g. after layout change) if (activeTab) { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); const tab = document.querySelector(`.tab[data-tab="${activeTab}"]`); if (tab) tab.classList.add('active'); const content = document.getElementById(`tab-${activeTab}`); if (content) content.classList.add('active'); } // Request a fresh screenshot on page load if (device.status === 'online') { requestScreenshot(deviceId); } } catch (err) { contentEl.innerHTML = `

Failed to load device

${err.message}

`; } } function renderPlaylist(assignments) { if (!assignments.length) { return `

No content assigned

Add content from your library to this display's playlist.

`; } return assignments.map((a, i) => `
${a.widget_id && !a.content_id ? `
${{clock:'🕓',weather:'⛅',rss:'📰',text:'📝',webpage:'🌐',social:'💬'}[a.widget_type] || '⚙'}
` : a.thumbnail_path ? `` : `
` }
${a.filename || a.widget_name || 'Unknown'}
${a.widget_id && !a.content_id ? `Widget (${a.widget_type || 'custom'})` : a.mime_type === 'video/youtube' ? 'YouTube' : a.mime_type?.startsWith('video/') ? 'Video' : 'Image'} ${a.zone_id ? ` · Zone: ${a.zone_id.slice(0,8)}` : ''} ${a.content_duration ? ` · ${Math.floor(a.content_duration / 60)}:${String(Math.floor(a.content_duration % 60)).padStart(2, '0')}` : ''} ${!a.content_duration && !a.mime_type?.startsWith('video/') && a.duration_sec ? ` · ${a.duration_sec}s` : ''} ${a.schedule_start ? ` · ${a.schedule_start}-${a.schedule_end}` : ''}
`).join(''); } function setupTabs() { document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active')); tab.classList.add('active'); document.getElementById(`tab-${tab.dataset.tab}`).classList.add('active'); }); }); } async function setupActions(device) { // Screenshot button document.getElementById('screenshotBtn')?.addEventListener('click', () => { requestScreenshot(device.id); showToast('Screenshot requested', 'info'); }); // Rename document.getElementById('renameBtn')?.addEventListener('click', async () => { const name = prompt('Enter new name:', device.name); if (name && name !== device.name) { try { await api.updateDevice(device.id, { name }); document.getElementById('deviceName').textContent = name; currentDevice.name = name; showToast('Display renamed', 'success'); } catch (err) { showToast(err.message, 'error'); } } }); // Populate default content dropdown try { const content = await api.getContent(); const defaultSelect = document.getElementById('deviceDefaultContent'); if (defaultSelect) { content.forEach(c => { const opt = document.createElement('option'); opt.value = c.id; opt.textContent = c.filename; if (device.default_content_id === c.id) opt.selected = true; defaultSelect.appendChild(opt); }); } } catch {} // Save settings (notes + orientation + default content) document.getElementById('saveNotesBtn')?.addEventListener('click', async () => { try { await api.updateDevice(device.id, { notes: document.getElementById('deviceNotes').value, orientation: document.getElementById('deviceOrientation').value, default_content_id: document.getElementById('deviceDefaultContent').value || null, }); showToast('Settings saved', 'success'); } catch (err) { showToast(err.message, 'error'); } }); // Populate playlist picker const playlistPicker = document.getElementById('playlistPicker'); if (playlistPicker) { api.getPlaylists().then(playlists => { playlists.forEach(p => { const opt = document.createElement('option'); opt.value = p.id; opt.textContent = `${p.name}${p.is_auto_generated ? ' (auto)' : ''} — ${p.item_count} items`; if (p.id === device.playlist_id) opt.selected = true; playlistPicker.appendChild(opt); }); // If device has no playlist, keep "No playlist" selected if (!device.playlist_id) playlistPicker.value = ''; }).catch(() => {}); playlistPicker.addEventListener('change', async () => { const newPlaylistId = playlistPicker.value; if (!newPlaylistId) return; // Don't allow deselecting for now try { await api.assignPlaylistToDevice(newPlaylistId, device.id); device.playlist_id = newPlaylistId; const assignments = await api.getAssignments(device.id); document.getElementById('playlistContainer').innerHTML = renderPlaylist(assignments); attachRemoveHandlers(device); showToast('Playlist changed'); } catch (err) { showToast(err.message, 'error'); } }); } // Copy playlist to another device document.getElementById('copyPlaylistBtn')?.addEventListener('click', async () => { try { const devices = await api.getDevices(); const others = devices.filter(d => d.id !== device.id); if (!others.length) { showToast('No other devices to copy to', 'info'); return; } const targetId = prompt('Copy playlist to which device?\n\n' + others.map((d, i) => `${i + 1}. ${d.name}`).join('\n') + '\n\nEnter number:'); if (!targetId) return; const target = others[parseInt(targetId) - 1]; if (!target) { showToast('Invalid selection', 'error'); return; } const token = localStorage.getItem('token'); const res = await fetch(`/api/assignments/device/${device.id}/copy-to/${target.id}`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }, body: JSON.stringify({ replace: false }) }); const data = await res.json(); if (res.ok) showToast(`Copied ${data.copied} items to ${target.name}`, 'success'); else showToast(data.error, 'error'); } catch (err) { showToast(err.message, 'error'); } }); // Delete (double-click to confirm) const deleteBtn = document.getElementById('deleteDeviceBtn'); let deleteConfirming = false; let deleteTimeout = null; deleteBtn?.addEventListener('click', async () => { if (deleteConfirming) { try { deleteBtn.textContent = 'Removing...'; deleteBtn.disabled = true; await api.deleteDevice(device.id); showToast('Display removed', 'success'); window.location.hash = '/'; } catch (err) { showToast(err.message, 'error'); deleteBtn.textContent = 'Remove'; deleteBtn.disabled = false; deleteConfirming = false; } return; } deleteConfirming = true; deleteBtn.textContent = 'Click again to confirm'; deleteBtn.style.background = 'var(--danger)'; deleteBtn.style.color = 'white'; clearTimeout(deleteTimeout); deleteTimeout = setTimeout(() => { deleteConfirming = false; deleteBtn.textContent = 'Remove'; deleteBtn.style.background = ''; deleteBtn.style.color = ''; }, 3000); }); // Reboot (double-click to confirm) const rebootBtn = document.getElementById('rebootBtn'); let rebootConfirming = false; let rebootTimeout = null; rebootBtn?.addEventListener('click', () => { if (rebootConfirming) { sendCommand(device.id, 'reboot', {}); showToast('Reboot command sent', 'info'); rebootConfirming = false; rebootBtn.textContent = 'Reboot Device'; return; } rebootConfirming = true; rebootBtn.textContent = 'Click again to confirm'; clearTimeout(rebootTimeout); rebootTimeout = setTimeout(() => { rebootConfirming = false; rebootBtn.textContent = 'Reboot Device'; }, 3000); }); // Shutdown (double-click to confirm) const shutdownBtn = document.getElementById('shutdownBtn'); let shutdownConfirming = false; let shutdownTimeout = null; shutdownBtn?.addEventListener('click', () => { if (shutdownConfirming) { sendCommand(device.id, 'shutdown', {}); showToast('Shutdown command sent', 'info'); shutdownConfirming = false; shutdownBtn.textContent = 'Shutdown'; return; } shutdownConfirming = true; shutdownBtn.textContent = 'Click again to confirm'; shutdownBtn.style.background = 'var(--danger)'; shutdownBtn.style.color = 'white'; clearTimeout(shutdownTimeout); shutdownTimeout = setTimeout(() => { shutdownConfirming = false; shutdownBtn.textContent = 'Shutdown'; shutdownBtn.style.background = ''; shutdownBtn.style.color = ''; }, 3000); }); // Screen Off document.getElementById('screenOffBtn')?.addEventListener('click', () => { sendCommand(device.id, 'screen_off', {}); showToast('Screen off command sent', 'info'); }); // Screen On document.getElementById('screenOnBtn')?.addEventListener('click', () => { sendCommand(device.id, 'screen_on', {}); showToast('Screen on command sent', 'info'); }); // Launch Player document.getElementById('launchAppBtn')?.addEventListener('click', () => { sendCommand(device.id, 'launch', {}); showToast('Launch command sent', 'info'); }); // Force Update document.getElementById('forceUpdateBtn')?.addEventListener('click', () => { sendCommand(device.id, 'update', {}); showToast('Update check triggered', 'info'); }); } function setupRemote(device) { const startBtn = document.getElementById('startRemoteBtn'); const stopBtn = document.getElementById('stopRemoteBtn'); const overlay = document.getElementById('remoteOverlay'); const canvas = document.getElementById('remoteCanvas'); startBtn?.addEventListener('click', () => { console.log('Start Remote clicked for device:', device.id); remoteActive = true; startRemote(device.id); requestScreenshot(device.id); startBtn.style.display = 'none'; stopBtn.style.display = ''; overlay.style.display = 'none'; showToast('Remote session started', 'info'); }); stopBtn?.addEventListener('click', () => { remoteActive = false; stopRemote(device.id); stopBtn.style.display = 'none'; startBtn.style.display = ''; overlay.style.display = 'flex'; }); // Touch forwarding on canvas canvas?.addEventListener('click', (e) => { if (!remoteActive) return; const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; sendTouch(device.id, x, y, 'tap'); // Visual feedback const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(e.clientX - rect.left, e.clientY - rect.top, 10, 0, Math.PI * 2); ctx.fillStyle = 'rgba(59, 130, 246, 0.5)'; ctx.fill(); setTimeout(() => { // Redraw will happen on next screenshot }, 200); }); } async function setupPlaylistActions(device) { // Load layouts into selector try { const layoutsRes = await fetch('/api/layouts', { headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }}); const layouts = await layoutsRes.json(); const select = document.getElementById('deviceLayoutSelect'); if (select) { layouts.filter(l => !l.is_template).forEach(l => { const opt = document.createElement('option'); opt.value = l.id; opt.textContent = `${l.name} (${l.zones?.length || 0} zones)`; if (device.layout_id === l.id) opt.selected = true; select.appendChild(opt); }); // Add templates too layouts.filter(l => l.is_template).forEach(l => { const opt = document.createElement('option'); opt.value = l.id; opt.textContent = `[Template] ${l.name} (${l.zones?.length || 0} zones)`; if (device.layout_id === l.id) opt.selected = true; select.appendChild(opt); }); } } catch (err) { console.warn('Failed to load layouts:', err); } // Apply layout button document.getElementById('applyLayoutBtn')?.addEventListener('click', async () => { const layoutId = document.getElementById('deviceLayoutSelect').value; try { await fetch(`/api/layouts/device/${device.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}` }, body: JSON.stringify({ layout_id: layoutId || null }) }); showToast(layoutId ? 'Layout applied' : 'Switched to fullscreen', 'success'); // Reload the device page to show updated zone selectors, stay on playlist tab loadDevice(device.id, 'playlist'); } catch (err) { showToast(err.message, 'error'); } }); // Add content button document.getElementById('addContentBtn')?.addEventListener('click', async () => { const token = localStorage.getItem('token'); const headers = { Authorization: `Bearer ${token}` }; try { const [content, widgets, kioskPages] = await Promise.all([ api.getContent(), fetch('/api/widgets', { headers }).then(r => r.json()), fetch('/api/kiosk', { headers }).then(r => r.json()), ]); // Get layout zones if device has a layout assigned let zones = []; if (device.layout_id) { try { const layout = await fetch(`/api/layouts/${device.layout_id}`, { headers }).then(r => r.json()); zones = layout.zones || []; } catch {} } if (!content.length && !widgets.length && !kioskPages.length) { showToast('No content, widgets, or kiosk pages yet. Create something first!', 'error'); return; } const modal = document.createElement('div'); modal.className = 'modal-overlay'; modal.innerHTML = `

Add to Playlist

${zones.length > 0 ? `
` : ''}
Media (${content.length})
Widgets (${widgets.length})
Kiosk (${kioskPages.length})
${content.map(c => `
${c.thumbnail_path ? `` : c.remote_url ? `
` : `
` }
${c.filename}
`).join('') || '

No media uploaded yet

'}
`; document.body.appendChild(modal); // Tab switching modal.querySelectorAll('.assign-tab').forEach(tab => { tab.onclick = () => { modal.querySelectorAll('.assign-tab').forEach(t => { t.style.borderBottomColor = 'transparent'; t.style.color = 'var(--text-secondary)'; }); tab.style.borderBottomColor = 'var(--accent)'; tab.style.color = 'var(--accent)'; document.getElementById('assignMedia').style.display = tab.dataset.tab === 'media' ? '' : 'none'; document.getElementById('assignWidgets').style.display = tab.dataset.tab === 'widgets' ? '' : 'none'; document.getElementById('assignKiosk').style.display = tab.dataset.tab === 'kiosk' ? '' : 'none'; }; }); let selectedId = null; let selectedType = null; modal.querySelectorAll('.assign-content-item').forEach(item => { item.addEventListener('click', () => { modal.querySelectorAll('.assign-content-item').forEach(i => i.classList.remove('selected')); item.classList.add('selected'); selectedId = item.dataset.contentId; selectedType = item.dataset.type; }); }); modal.querySelector('#closeAssignModal').onclick = () => modal.remove(); modal.querySelector('#cancelAssign').onclick = () => modal.remove(); modal.querySelector('#confirmAssign').onclick = async () => { if (!selectedId) { showToast('Select something first', 'error'); return; } const duration = parseInt(modal.querySelector('#assignDuration').value) || 10; const zoneId = modal.querySelector('#assignZone')?.value || null; try { if (selectedType === 'content') { await api.addAssignment(device.id, { content_id: selectedId, duration_sec: duration, zone_id: zoneId }); } else if (selectedType === 'widget') { await api.addAssignment(device.id, { widget_id: selectedId, duration_sec: duration, zone_id: zoneId }); } else if (selectedType === 'kiosk') { // For kiosk pages, create a webpage widget pointing to the kiosk render URL const serverUrl = window.location.origin; const wRes = await fetch('/api/widgets', { method: 'POST', headers: { ...headers, 'Content-Type': 'application/json' }, body: JSON.stringify({ widget_type: 'webpage', name: `Kiosk: ${kioskPages.find(k => k.id === selectedId)?.name || 'Page'}`, config: { url: `${serverUrl}/api/kiosk/${selectedId}/render` } }) }); const widget = await wRes.json(); await api.addAssignment(device.id, { widget_id: widget.id, duration_sec: 0 }); } modal.remove(); showToast('Added to playlist', 'success'); const assignments = await api.getAssignments(device.id); document.getElementById('playlistContainer').innerHTML = renderPlaylist(assignments); attachRemoveHandlers(device); } catch (err) { showToast(err.message, 'error'); } }; } catch (err) { showToast(err.message, 'error'); } }); attachRemoveHandlers(device); } function attachRemoveHandlers(device) { // Populate zone selectors if device has a layout if (device.layout_id) { const token = localStorage.getItem('token'); fetch(`/api/layouts/${device.layout_id}`, { headers: { Authorization: `Bearer ${token}` }}) .then(r => r.json()) .then(layout => { const zones = layout.zones || []; document.querySelectorAll('.zone-select').forEach(select => { select.style.display = ''; const assignmentId = select.dataset.assignmentId; // Find current zone_id from the playlist item's data const zoneText = select.closest('.playlist-item')?.querySelector('[style*="color:var(--accent)"]')?.textContent || ''; zones.forEach(z => { const opt = document.createElement('option'); opt.value = z.id; opt.textContent = z.name; select.appendChild(opt); }); // Set current value by matching zone_id from the meta text const currentAssignment = document.querySelector(`.playlist-item[data-assignment-id="${assignmentId}"]`); if (currentAssignment) { const meta = currentAssignment.querySelector('.playlist-item-meta')?.innerHTML || ''; const zoneMatch = zones.find(z => meta.includes(z.id.slice(0, 8))); if (zoneMatch) select.value = zoneMatch.id; } select.onchange = async () => { try { await api.updateAssignment(assignmentId, { zone_id: select.value || null }); showToast(`Zone updated`, 'success'); } catch (err) { showToast(err.message, 'error'); } }; }); }).catch(() => {}); } // Mute toggle buttons document.querySelectorAll('.mute-toggle').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const id = btn.dataset.muteAssignment; const currentlyMuted = btn.dataset.muted === '1'; try { await api.updateAssignment(id, { muted: !currentlyMuted }); showToast(currentlyMuted ? 'Unmuted' : 'Muted', 'success'); const assignments = await api.getAssignments(device.id); document.getElementById('playlistContainer').innerHTML = renderPlaylist(assignments); attachRemoveHandlers(device); } catch (err) { showToast(err.message, 'error'); } }); }); // Remove buttons document.querySelectorAll('[data-remove-assignment]').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const id = btn.dataset.removeAssignment; try { await api.deleteAssignment(id); showToast('Content removed from playlist', 'success'); const assignments = await api.getAssignments(device.id); document.getElementById('playlistContainer').innerHTML = renderPlaylist(assignments); attachRemoveHandlers(device); } catch (err) { showToast(err.message, 'error'); } }); }); // Drag-and-drop reorder const container = document.getElementById('playlistContainer'); if (!container) return; let dragItem = null; container.querySelectorAll('.playlist-item[draggable]').forEach(item => { item.addEventListener('dragstart', (e) => { dragItem = item; item.style.opacity = '0.4'; e.dataTransfer.effectAllowed = 'move'; }); item.addEventListener('dragend', () => { item.style.opacity = '1'; dragItem = null; container.querySelectorAll('.playlist-item').forEach(i => i.style.borderTop = ''); }); item.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; container.querySelectorAll('.playlist-item').forEach(i => i.style.borderTop = ''); if (item !== dragItem) item.style.borderTop = '2px solid var(--accent)'; }); item.addEventListener('drop', async (e) => { e.preventDefault(); item.style.borderTop = ''; if (!dragItem || dragItem === item) return; // Get new order const items = [...container.querySelectorAll('.playlist-item[data-assignment-id]')]; const fromIdx = items.indexOf(dragItem); const toIdx = items.indexOf(item); if (fromIdx < 0 || toIdx < 0) return; // Reorder in DOM if (fromIdx < toIdx) item.after(dragItem); else item.before(dragItem); // Get new order of assignment IDs const newOrder = [...container.querySelectorAll('.playlist-item[data-assignment-id]')] .map(el => parseInt(el.dataset.assignmentId)); try { await api.reorderAssignments(device.id, newOrder); showToast('Playlist reordered', 'success'); } catch (err) { showToast(err.message, 'error'); // Reload to revert const assignments = await api.getAssignments(device.id); container.innerHTML = renderPlaylist(assignments); attachRemoveHandlers(device); } }); }); } function renderUptimeTimeline(uptimeData, statusLog = []) { const timeline = document.getElementById('uptimeTimeline'); const percentEl = document.getElementById('uptimePercent'); if (!timeline) return; const now = Math.floor(Date.now() / 1000); const dayAgo = now - 86400; const slots = 96; // 15-minute slots over 24 hours const slotDuration = 86400 / slots; // 900 seconds = 15 min // Build slot status: 'online', 'offline', or 'unknown' const slotStatus = new Array(slots).fill('unknown'); // First pass: mark slots that have heartbeat telemetry as online for (const ts of uptimeData) { const slotIdx = Math.floor((ts - dayAgo) / slotDuration); if (slotIdx >= 0 && slotIdx < slots) slotStatus[slotIdx] = 'online'; } // Second pass: use status log events to paint ranges // Walk through events and fill slots between online/offline transitions for (let i = 0; i < statusLog.length; i++) { const event = statusLog[i]; const nextEvent = statusLog[i + 1]; const startSlot = Math.max(0, Math.floor((event.timestamp - dayAgo) / slotDuration)); const endSlot = nextEvent ? Math.min(slots - 1, Math.floor((nextEvent.timestamp - dayAgo) / slotDuration)) : (event.status === 'online' ? slots - 1 : startSlot); const isOnline = event.status === 'online'; for (let s = startSlot; s <= endSlot && s < slots; s++) { if (s >= 0) slotStatus[s] = isOnline ? 'online' : 'offline'; } } // Mark future slots as unknown const nowSlot = Math.floor((now - dayAgo) / slotDuration); for (let i = nowSlot + 1; i < slots; i++) slotStatus[i] = 'unknown'; // Calculate uptime percentage (only over known slots) const knownSlots = slotStatus.filter(s => s !== 'unknown').length; const onlineSlots = slotStatus.filter(s => s === 'online').length; const uptimePct = knownSlots > 0 ? Math.round((onlineSlots / knownSlots) * 100) : 0; if (percentEl) percentEl.textContent = `${uptimePct}% uptime (${knownSlots > 0 ? knownSlots * 15 + 'min tracked' : 'no data'})`; // Color map const colors = { online: 'var(--success)', offline: 'var(--danger)', unknown: 'var(--bg-secondary)' }; const opacities = { online: 0.8, offline: 0.6, unknown: 0.3 }; // Render bars timeline.innerHTML = slotStatus.map((status, i) => { const time = new Date((dayAgo + i * slotDuration) * 1000); const label = time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); const statusLabel = status === 'unknown' ? 'No data' : status.charAt(0).toUpperCase() + status.slice(1); return `
`; }).join(''); } function updateTelemetryDisplay(telemetry) { const update = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; }; if (telemetry.battery_level != null) update('telBattery', telemetry.battery_level + '%'); if (telemetry.storage_free_mb) update('telStorage', formatBytes(telemetry.storage_free_mb) + ' free'); if (telemetry.wifi_ssid) update('telWifi', telemetry.wifi_ssid); if (telemetry.wifi_rssi) update('telRssi', telemetry.wifi_rssi + ' dBm'); if (telemetry.uptime_seconds) update('telUptime', formatUptime(telemetry.uptime_seconds)); if (telemetry.ram_free_mb) update('telRam', formatBytes(telemetry.ram_free_mb) + ' free'); if (telemetry.cpu_usage != null) update('telCpu', telemetry.cpu_usage.toFixed(1) + '%'); } export function cleanup() { if (statusHandler) off('device-status', statusHandler); if (screenshotHandler) off('screenshot-ready', screenshotHandler); if (playbackHandler) off('playback-state', playbackHandler); if (screenshotInterval) clearInterval(screenshotInterval); if (remoteActive && currentDevice) stopRemote(currentDevice.id); remoteActive = false; currentDevice = null; window._sendKey = null; }