diff --git a/extension/popup.js b/extension/popup.js
index 78067d4..a11f550 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -32,6 +32,7 @@ const elements = {
inviteLink: document.getElementById('inviteLink'),
filterNoise: document.getElementById('filterNoise'),
regenId: document.getElementById('regenId'),
+ lastActionCard: document.getElementById('lastActionCard'),
historyList: document.getElementById('historyList'),
copyLogs: document.getElementById('copyLogs'),
createRoomBtn: document.getElementById('createRoomBtn'),
@@ -82,6 +83,7 @@ async function init() {
localPeerId = res.peerId;
applyConnectionStatus(res.status);
updatePeerList(res.peers);
+ if (res.lastActionState) updateLastActionUI(res.lastActionState, res.peers);
}
});
@@ -119,6 +121,56 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
}
}
+function updateLastActionUI(state, peers) {
+ if (!state || !state.action) {
+ elements.lastActionCard.innerHTML = '
No recent commands
';
+ return;
+ }
+
+ const actionNames = {
+ 'play': 'PLAY',
+ 'pause': 'PAUSE',
+ 'seek': 'SEEK',
+ 'force_sync_prepare': 'SYNCING...',
+ 'force_sync_execute': 'FORCE PLAY'
+ };
+
+ let senderName = state.senderId === 'You' ? 'You' : state.senderId;
+ const senderPeer = peers.find(p => (p.peerId || p) === state.senderId);
+ if (senderPeer && senderPeer.username) senderName = senderPeer.username;
+
+ const timeStr = new Date(state.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+ let html = `
+
+ ${actionNames[state.action] || state.action.toUpperCase()}
+ ${senderName} @ ${timeStr}
+
+
+ `;
+
+ // Filter out "You" if we are the sender, but show status of other peers
+ peers.forEach(peer => {
+ const pId = typeof peer === 'object' ? peer.peerId : peer;
+ const pName = (typeof peer === 'object' && peer.username) ? peer.username : pId.substring(0, 4);
+ const isAcked = state.acks.includes(pId) || pId === state.senderId;
+ const color = isAcked ? 'var(--success)' : '#475569';
+ const icon = isAcked ? '✓' : '...';
+
+ html += `
+
+
+ ${icon}
+
+
${pName}
+
+ `;
+ });
+
+ html += `
`;
+ elements.lastActionCard.innerHTML = html;
+}
+
function updatePeerList(peers) {
if (!peers) return;
@@ -542,10 +594,20 @@ async function refreshLogs() {
chrome.runtime.onMessage.addListener((msg) => {
if (msg.type === 'LOG_UPDATE') {
refreshLogs();
+ } else if (msg.type === 'ACTION_UPDATE') {
+ chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (res) => {
+ if (res && res.peers) updateLastActionUI(msg.state, res.peers);
+ });
} else if (msg.type === 'PEER_UPDATE') {
updatePeerList(msg.peers);
} else if (msg.type === 'CONNECTION_STATUS') {
applyConnectionStatus(msg.status);
+ if (msg.status === 'connected') {
+ chrome.runtime.sendMessage({ type: 'GET_STATUS' }, (res) => {
+ if (res && res.peers) updatePeerList(res.peers);
+ if (res && res.lastActionState) updateLastActionUI(res.lastActionState, res.peers);
+ });
+ }
if (msg.status === 'disconnected' || msg.status === 'reconnect_failed') {
elements.joinBtn.disabled = false;
elements.joinBtn.textContent = 'Join / Create Room';
diff --git a/server/index.js b/server/index.js
index 03a862e..c3ec47b 100644
--- a/server/index.js
+++ b/server/index.js
@@ -326,6 +326,17 @@ io.on('connection', (socket) => {
}
});
+ socket.on(EVENTS.EVENT_ACK, (data) => {
+ if (!data.targetId) return;
+ const targetSocket = Array.from(io.sockets.sockets.values()).find(s => {
+ const roomData = socketToRoom.get(s.id);
+ return roomData && roomData.peerId === data.targetId;
+ });
+ if (targetSocket) {
+ targetSocket.emit(EVENTS.EVENT_ACK, { senderId: data.senderId });
+ }
+ });
+
socket.on('disconnect', () => {
eventCounts.delete(socket.id);
const mapping = socketToRoom.get(socket.id);
diff --git a/shared/constants.js b/shared/constants.js
index 2e3da01..790ed3a 100644
--- a/shared/constants.js
+++ b/shared/constants.js
@@ -26,6 +26,7 @@ export const EVENTS = {
FORCE_SYNC_PREPARE: "force_sync_prepare",
FORCE_SYNC_ACK: "force_sync_ack",
FORCE_SYNC_EXECUTE: "force_sync_execute",
+ EVENT_ACK: "event_ack",
GET_ROOMS: "get_rooms",
ROOM_LIST: "room_list"
};