fix: Firefox invite — cloneInto() for CustomEvent detail (XrayWrapper)

README.md

@@ -8,7 +8,7 @@
   <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc"><img src="https://img.shields.io/badge/Chrome-Download-blue?logo=googlechrome&logoColor=white" alt="Chrome Extension"></a>
 </p>
 
-<p align="center"><i>KoalaSync is a lightweight Browser Extension and Relay Server for synchronized video playback across any website—YouTube, Twitch, Netflix, and custom HTML5 players. Built with a focus on <b>Data Sovereignty</b> and <b>Performance</b>.</i></p>
+<p align="center"><i>KoalaSync is a lightweight Browser Extension and Relay Server for synchronized video playback on almost any website with a video element—YouTube, Twitch, Netflix, Emby, Jellyfin, and beyond. Built with a focus on <b>Data Sovereignty</b> and <b>Performance</b>.</i></p>
 
 ### 🌟 Why KoalaSync?
 

extension/background.js

@@ -1167,6 +1167,15 @@ async function handleAsyncMessage(message, sender, sendResponse) {
                 }, FORCE_SYNC_TIMEOUT);
             }
             addToHistory(message.action, 'You');
+            
+            const isNonEssentialEvent = message.action === EVENTS.PLAY || message.action === EVENTS.PAUSE || message.action === EVENTS.SEEK;
+            const hasOtherPeers = currentRoom && Array.isArray(currentRoom.peers) && currentRoom.peers.length > 0;
+            
+            if (isNonEssentialEvent && !hasOtherPeers) {
+                sendResponse({ status: 'ok_solo' });
+                return;
+            }
+            
             emit(message.action, { ...message.payload, peerId });
             sendResponse({ status: 'ok' });
         };

extension/bridge.js

@@ -22,12 +22,15 @@ window.addEventListener('KOALASYNC_JOIN_REQUEST', (e) => {
 // 3. Listen for Status Updates from the Extension and relay to Website
 chrome.runtime.onMessage.addListener((msg) => {
     if (msg.type === 'JOIN_STATUS') {
-        const event = new CustomEvent('KOALASYNC_STATUS', { 
-            detail: { 
-                success: msg.success, 
-                message: msg.message 
-            } 
-        });
-        window.dispatchEvent(event);
+        const detail = { success: msg.success, message: msg.message };
+        // Firefox MV3 content scripts run in an isolated world. When dispatching
+        // a CustomEvent with a detail object, Firefox wraps it in an XrayWrapper
+        // that the page's JavaScript cannot destructure (Permission denied).
+        // cloneInto() exposes the object to the page's context correctly.
+        // Chrome doesn't have this issue — cloneInto() is undefined there.
+        const safeDetail = typeof cloneInto === 'function'
+            ? cloneInto(detail, document.defaultView)
+            : detail;
+        window.dispatchEvent(new CustomEvent('KOALASYNC_STATUS', { detail: safeDetail }));
     }
 });

extension/content.js

@@ -417,6 +417,10 @@
             }
             return;
         }
+
+        // Suppress only SEEK during visibility grace period (tab re-focus ghost jump).
+        // Play/Pause pass through — user may want to immediately pause after tabbing back.
+        if (Date.now() < visibilityGraceUntil && action === EVENTS.SEEK) return;
         
         chrome.runtime.sendMessage({
             type: 'CONTENT_EVENT',
@@ -433,6 +437,38 @@
         scheduleProactiveHeartbeat();
     }
 
+    // --- Tab Visibility Handling ---
+    // Browsers (especially Firefox) aggressively throttle background tabs.
+    // When the user returns to a video tab, the video element may have lost
+    // time-sync and fires spurious seek events as it recovers (jumping back).
+    // We suppress only SEEK for a short grace period after tab re-focus.
+    // Play/Pause are NOT suppressed — the user may legitimately want to
+    // pause immediately after switching back.
+    let pageVisible = !document.hidden;
+    let visibilityGraceUntil = 0;
+    const VISIBILITY_GRACE_MS = 1000;
+
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            pageVisible = false;
+        } else if (!pageVisible) {
+            pageVisible = true;
+            visibilityGraceUntil = Date.now() + VISIBILITY_GRACE_MS;
+            reportLog(`Tab re-focused — suppressing seeks for ${VISIBILITY_GRACE_MS / 1000}s to prevent ghost relay`, 'warn');
+        }
+    });
+
+    // Reset on page hide/show (bfcache, tab discard)
+    window.addEventListener('pagehide', () => { pageVisible = false; });
+    window.addEventListener('pageshow', (event) => {
+        // event.persisted is true ONLY when restored from bfcache, not on initial load
+        if (event.persisted && !pageVisible) {
+            pageVisible = true;
+            visibilityGraceUntil = Date.now() + VISIBILITY_GRACE_MS;
+            reportLog(`Page restored from cache — suppressing seeks for ${VISIBILITY_GRACE_MS / 1000}s`, 'warn');
+        }
+    });
+
     const handlePlay = () => reportEvent(EVENTS.PLAY);
     const handlePause = () => reportEvent(EVENTS.PAUSE);
 
@@ -444,7 +480,7 @@
         const current = video.currentTime;
         if (!Number.isFinite(current)) return;
 
-        // Step 1: Check expectedEvents (programmatic seek suppression)
+        // Step 1: Check expectedEvents (programmatic seek from remote peer — ALWAYS process)
         if (expectedEvents.has('seek')) {
             expectedEvents.delete('seek');
             if (expectedTimeouts['seek']) {
@@ -452,20 +488,22 @@
                 delete expectedTimeouts['seek'];
             }
             lastReportedSeekTime = current;
-            // No log — this is routine programmatic behavior (Force Sync, lobby, peer command)
             return;
         }
 
+        // Step 2: Suppress during visibility grace period (tab re-focus ghost events)
+        if (Date.now() < visibilityGraceUntil) return;
+
         const delta = lastReportedSeekTime !== null ? Math.abs(current - lastReportedSeekTime) : null;
         const deltaStr = delta !== null ? `Δ${delta.toFixed(2)}s` : 'Δ?';
 
-        // Step 2: Delta check — skip micro-seeks (buffering, chapter markers, etc.)
+        // Step 3: Delta check — skip micro-seeks (buffering, chapter markers, etc.)
         if (lastReportedSeekTime !== null && delta < MIN_SEEK_DELTA) {
             reportLog(`[Seek] Filtered (${deltaStr} < ${MIN_SEEK_DELTA}s threshold) @ ${current.toFixed(2)}s — not relayed`, 'warn');
             return;
         }
 
-        // Step 3: Debounce rapid consecutive seeks (e.g. scrubbing)
+        // Step 4: Debounce rapid consecutive seeks (e.g. scrubbing)
         // — wait 800ms for the user to settle before relaying
         if (seekDebounceTimer) clearTimeout(seekDebounceTimer);
         seekDebounceTimer = setTimeout(() => {

extension/manifest.base.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "KoalaSync",
-  "version": "1.8.1",
-  "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, and HTML5 sites in real-time with friends.",
+  "version": "1.8.7",
+  "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
   "permissions": [
     "storage",
     "tabs",

extension/popup.html

@@ -292,7 +292,7 @@
 
     <div class="tabs">
         <button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</button>
-        <button class="tab-btn" data-tab="tab-sync">Sync</button>
+        <button class="tab-btn" data-tab="tab-sync" title="Video sync controls and remote actions">Sync</button>
         <button class="tab-btn" data-tab="tab-settings" title="Extension preferences">Settings</button>
         <button class="tab-btn" data-tab="tab-dev" title="Advanced Diagnostics & Logs">Status</button>
     </div>
@@ -307,27 +307,27 @@
                 <summary style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; cursor: pointer; outline: none;">Manual Connect / Advanced</summary>
                 <div style="margin-top: 12px;">
             <div class="form-group">
-                <label>Server</label>
+                <label title="Select which KoalaSync server to use">Server</label>
                 <div style="display:flex; gap:4px; margin-bottom:8px;">
-                    <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;">Official</button>
-                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;">Custom</button>
+                    <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;" title="Use the official reliable server">Official</button>
+                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" title="Connect to your own self-hosted server">Custom</button>
                 </div>
                 <input type="text" id="serverUrl" placeholder="wss://your-server:3000" style="display:none;">
             </div>
             <div class="form-group">
-                <label>Room ID</label>
-                <input type="text" id="roomId" placeholder="Leave empty to create">
+                <label title="The unique identifier for your sync room">Room ID</label>
+                <input type="text" id="roomId" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
             </div>
             <div class="form-group">
-                <label>Password (Optional)</label>
-                <input type="password" id="password" placeholder="Room password">
+                <label title="Optional password to restrict room access">Password (Optional)</label>
+                <input type="password" id="password" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">
             </div>
             <div id="roomError" style="display:none; color:var(--error); font-size:11px; margin-bottom:8px; text-align:center;"></div>
             <button id="joinBtn" class="primary" title="Connect to the room">Join Room</button>
             
             <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; margin-bottom: 8px;">
-                <label style="margin:0;">Public Rooms</label>
-                <button id="refreshRooms" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;">REFRESH</button>
+                <label style="margin:0;" title="List of publicly available rooms on this server">Public Rooms</label>
+                <button id="refreshRooms" class="secondary" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;" title="Refresh the list of public rooms">REFRESH</button>
             </div>
             <div id="publicRooms" class="info-card" style="max-height: 120px; overflow-y: auto; padding: 4px;">
                 <div style="text-align:center; color: var(--text-muted); font-size: 11px; padding: 10px;">Refreshing...</div>
@@ -340,14 +340,14 @@
         <div id="section-active" style="display:none;">
             <div class="info-card" style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent);">
                 <div>
-                    <label style="margin-bottom: 0;">Active Room</label>
+                    <label style="margin-bottom: 0;" title="The room you are currently connected to">Active Room</label>
                     <div id="activeRoomId" style="font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: 1px;">NONE</div>
                 </div>
                 <div id="activeServer" style="font-size: 10px; color: var(--text-muted); text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Official Server</div>
             </div>
 
             <div class="info-card" style="margin-bottom: 20px;">
-                <label>Invite Link</label>
+                <label title="Share this link with friends so they can join">Invite Link</label>
                 <div class="invite-box">
                     <input type="text" id="inviteLink" readonly>
                     <button id="copyInvite" class="secondary">📋</button>
@@ -355,7 +355,7 @@
             </div>
 
             <div style="margin-bottom: 20px;">
-                <label>Peers in Room</label>
+                <label title="Other users currently connected to this room">Peers in Room</label>
                 <div id="peerList" class="info-card">
                     <div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>
                 </div>
@@ -370,7 +370,7 @@
         <!-- SYNC ACTIVE: Visible when in a room -->
         <div id="sync-active">
         <div class="form-group">
-            <label>Select Video</label>
+            <label title="Choose the browser tab containing the video to sync">Select Video</label>
             <select id="targetTab">
                 <option value="">-- Select a Tab --</option>
             </select>
@@ -378,7 +378,7 @@
         
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
             <label style="margin: 0;">Remote Control</label>
-            <button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border:none; padding:4px; font-size:14px; cursor:pointer; opacity:0.8; transition: opacity 0.2s;">🔗</button>
+            <button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;">📋 Invite Link</button>
         </div>
         <div style="display: flex; gap: 8px; margin-bottom: 12px;">
             <button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>
@@ -394,7 +394,7 @@
         </div>
 
         <!-- NEW: Last Action Status Card -->
-        <label>Last Activity Status</label>
+        <label title="Shows the most recent play, pause, or seek command">Last Activity Status</label>
         <div id="lastActionCard" class="info-card" style="margin-bottom: 15px; max-height: 120px; overflow-y: auto;">
             <div style="text-align:center; color: var(--text-muted); font-size: 10px;">No recent commands</div>
         </div>
@@ -417,19 +417,19 @@
             <div style="font-size: 32px; margin-bottom: 12px;">🔒</div>
             <h3 style="margin: 0 0 8px 0; color: var(--accent); font-size: 15px;">Connect to a room first</h3>
             <p style="color: var(--text-muted); font-size: 12px; margin-bottom: 20px;">You need to join a room via an invite link or create a new one to sync videos.</p>
-            <button id="syncTabCreateRoomBtn" class="primary" style="padding: 12px; font-size: 14px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);">Create New Room</button>
+            <button id="syncTabCreateRoomBtn" class="primary" style="padding: 12px; font-size: 14px; background: linear-gradient(135deg, #6366f1, #a855f7); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);" title="Create a new random room and join it">Create New Room</button>
         </div>
     </div>
     
     <!-- Settings Tab -->
     <div id="tab-settings" class="tab-content">
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0;" title="Username helps others identify you.">Your Username ℹ️</label>
+            <label style="margin-bottom: 0;" title="Username helps others identify you.">Your Username</label>
             <input type="text" id="username" placeholder="Anonymous Koala" maxlength="20" style="width: 150px;">
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0; cursor: help;" title="Hides non-video sites like search engines or social media." title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs</label>
+            <label style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="filterNoise" checked>
                 <span class="slider"></span>
@@ -437,7 +437,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." title="Automatically clicks 'Next Episode' on supported sites like Netflix when others do">Auto-Sync Next Episode</label>
+            <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="autoSyncNextEpisode">
                 <span class="slider"></span>
@@ -445,7 +445,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label>
+            <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="autoCopyInvite" checked>
                 <span class="slider"></span>
@@ -453,7 +453,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-            <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications</label>
+            <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="browserNotifications">
                 <span class="slider"></span>
@@ -463,37 +463,37 @@
 
 
         <div style="margin-top: 15px; padding: 8px; border-top: 1px solid var(--card);">
-            <label>Troubleshooting</label>
-            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;">Regenerate Peer ID</button>
+            <label title="Tools for fixing connection issues">Troubleshooting</label>
+            <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;" title="Regenerate your internal ID and reconnect">Regenerate Peer ID</button>
             <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center;">Use this if you see "Duplicate Identity" errors.</p>
         </div>
     </div>
 
     <!-- Dev Tab -->
     <div id="tab-dev" class="tab-content">
-        <label>Connection Status</label>
+        <label title="Current WebSocket connection state">Connection Status</label>
         <div id="connStatus" class="info-card" style="display:flex; align-items:center; gap: 10px;">
             <span id="connDot" class="status-dot status-offline"></span>
             <span id="connText" style="flex:1;">Disconnected</span>
-            <button id="retryBtn" class="secondary" style="display:none; width: auto; padding: 4px 8px; font-size: 10px; margin: 0;">RETRY</button>
-            <button id="copyLogs" class="btn secondary" style="width: auto; padding: 4px 10px; font-size: 11px;">Copy Logs</button>
+            <button id="retryBtn" class="secondary" style="display:none; width: auto; padding: 4px 8px; font-size: 10px; margin: 0;" title="Attempt to reconnect to the server">RETRY</button>
+            <button id="copyLogs" class="btn secondary" style="width: auto; padding: 4px 10px; font-size: 11px;" title="Copy logs to clipboard for sharing">Copy Logs</button>
         </div>
 
-        <label>Video Debug Info</label>
+        <label title="Technical details about the currently selected video element">Video Debug Info</label>
         <div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); max-height: 250px; overflow-y: auto; line-height: 1.4;">
             No tab selected or video detected.
         </div>
 
         <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;">
-            <label>Full Action History</label>
+            <label title="Chronological log of all sync commands in the room">Full Action History</label>
         </div>
         <div id="historyList" class="info-card" style="max-height: 120px; overflow-y: auto; font-size: 10px; margin-bottom: 15px;">
             <div style="text-align:center; color: var(--text-muted); font-size: 11px;">No activity yet</div>
         </div>
 
         <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;">
-            <label>Logs (Last 50)</label>
-            <button id="clearLogs" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;">CLEAR</button>
+            <label title="Technical connection logs for debugging">Logs (Last 50)</label>
+            <button id="clearLogs" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:pointer;" title="Clear log output">CLEAR</button>
         </div>
         <div id="logList"></div>
         
@@ -512,8 +512,8 @@
             <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 8px; font-size:16px;">Welcome to KoalaSync!</h2>
             <p id="onboarding-text" style="color:var(--text-muted); font-size:13px; margin:0 0 16px; line-height:1.4;">Let's get you started.</p>
             <div style="display:flex; gap:8px; justify-content:center;">
-                <button id="onboarding-skip" class="secondary" style="width:auto; padding:8px 16px;">Skip</button>
-                <button id="onboarding-next" class="primary" style="width:auto; padding:8px 16px;">Next</button>
+                <button id="onboarding-skip" class="secondary" style="width:auto; padding:8px 16px;" title="Skip the tutorial">Skip</button>
+                <button id="onboarding-next" class="primary" style="width:auto; padding:8px 16px;" title="Go to next step">Next</button>
             </div>
             <div id="onboarding-dots" style="margin-top:12px; display:flex; gap:6px; justify-content:center;"></div>
         </div>

extension/popup.js

@@ -47,7 +47,8 @@ const elements = {
     lobbyTitle: document.getElementById('lobbyTitle'),
     lobbyPeerStatus: document.getElementById('lobbyPeerStatus'),
     browserNotifications: document.getElementById('browserNotifications'),
-    autoCopyInvite: document.getElementById('autoCopyInvite')
+    autoCopyInvite: document.getElementById('autoCopyInvite'),
+    syncTabCopyInvite: document.getElementById('syncTabCopyInvite')
 };
 
 let localPeerId = null;
@@ -608,7 +609,7 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
         }
         
         if (tab.audible) {
-            label = `[🔊] ${label}`;
+            label = `[🎬] ${label}`;
         }
         
         option.textContent = label;
@@ -645,7 +646,7 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
         const matchOpt = options.find(o => o.textContent.includes('⭐ MATCH:'));
         if (matchOpt && elements.targetTab.options.length > 1) {
             elements.targetTab.value = matchOpt.value;
-            const tabTitle = matchOpt.text.replace('⭐ MATCH: ', '') || null;
+            const tabTitle = matchOpt.dataset.originalTitle || null;
             chrome.runtime.sendMessage({ type: 'SET_TARGET_TAB', tabId: parseInt(matchOpt.value), tabTitle });
         }
     }
@@ -1067,13 +1068,15 @@ elements.forceSyncBtn.addEventListener('click', async () => {
     elements.forceSyncBtn.disabled = true;
     elements.forceSyncBtn.textContent = mode === 'jump-to-others' ? `Syncing to group (${formatTime(targetTime)})...` : 'Syncing...';
     forceSyncDone = false;
+    const peerCount = (status.peers || []).filter(p => (typeof p === 'object' ? p.peerId : p) !== localPeerId).length;
+    const syncTimeoutMs = peerCount === 0 ? 3000 : 12000;
     const forceSyncReset = () => {
         if (!forceSyncDone) {
             elements.forceSyncBtn.disabled = false;
             elements.forceSyncBtn.textContent = originalText;
         }
     };
-    forceSyncResetTimer = setTimeout(forceSyncReset, 12000);
+    forceSyncResetTimer = setTimeout(forceSyncReset, syncTimeoutMs);
     const tabId = parseInt(status.targetTabId);
 
     const sendForceSync = (time) => {
@@ -1119,13 +1122,20 @@ elements.playBtn.addEventListener('click', () => {
         showToast('Please select a video first!', 'warning');
         return;
     }
-    elements.playBtn.textContent = 'Playing...';
+    elements.playBtn.textContent = '▶ Playing...';
     elements.playBtn.disabled = true;
     chrome.runtime.sendMessage({
         type: 'CONTENT_EVENT',
         action: EVENTS.PLAY,
         payload: {}
     });
+    // Safety reset: restore button after 2.5s in case no peers respond
+    setTimeout(() => {
+        if (elements.playBtn.disabled) {
+            elements.playBtn.textContent = '▶ Play';
+            elements.playBtn.disabled = false;
+        }
+    }, 2500);
 });
 
 elements.pauseBtn.addEventListener('click', () => {
@@ -1133,13 +1143,20 @@ elements.pauseBtn.addEventListener('click', () => {
         showToast('Please select a video first!', 'warning');
         return;
     }
-    elements.pauseBtn.textContent = 'Pausing...';
+    elements.pauseBtn.textContent = '⏸ Pausing...';
     elements.pauseBtn.disabled = true;
     chrome.runtime.sendMessage({
         type: 'CONTENT_EVENT',
         action: EVENTS.PAUSE,
         payload: {}
     });
+    // Safety reset: restore button after 2.5s in case no peers respond
+    setTimeout(() => {
+        if (elements.pauseBtn.disabled) {
+            elements.pauseBtn.textContent = '⏸ Pause';
+            elements.pauseBtn.disabled = false;
+        }
+    }, 2500);
 });
 
 elements.clearLogs.addEventListener('click', () => {

fix_ui.js

@@ -1,61 +0,0 @@
-const fs = require('fs');
-let html = fs.readFileSync('extension/popup.html', 'utf8');
-
-// Tooltips for inputs
-html = html.replace('<input type="text" id="username" placeholder="Leave empty for random name">', '<input type="text" id="username" placeholder="Leave empty for random name" title="Your display name in the room">');
-html = html.replace('<input type="text" id="roomId" placeholder="Enter Room ID">', '<input type="text" id="roomId" placeholder="Enter Room ID" title="The unique ID of the room you want to join">');
-html = html.replace('<input type="password" id="password" placeholder="Room Password (optional)">', '<input type="password" id="password" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">');
-
-// Tooltips for buttons
-html = html.replace('<button id="joinBtn" class="primary">Join Room</button>', '<button id="joinBtn" class="primary" title="Connect to the room">Join Room</button>');
-html = html.replace('<button id="leaveBtn" class="primary" style="display:none; background: var(--error);">Leave Room</button>', '<button id="leaveBtn" class="primary" style="display:none; background: var(--error);" title="Disconnect from the room">Leave Room</button>');
-html = html.replace('<button id="createRoomBtn" class="primary">Create New Room</button>', '<button id="createRoomBtn" class="primary" title="Create a new random room and join it">Create New Room</button>');
-html = html.replace('<button id="refreshRooms" class="secondary">↻ Refresh List</button>', '<button id="refreshRooms" class="secondary" title="Refresh the list of public rooms">↻ Refresh List</button>');
-html = html.replace('<button id="playBtn" class="primary" style="flex:1; background: var(--success);">▶ Play</button>', '<button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>');
-html = html.replace('<button id="pauseBtn" class="primary" style="flex:1; background: var(--error);">⏸ Pause</button>', '<button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone">⏸ Pause</button>');
-html = html.replace('<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;">⚡ SYNC</button>', '<button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up">⚡ SYNC</button>');
-html = html.replace('<button id="copyInvite" class="secondary" style="margin-top: 0; white-space: nowrap;">Copy Invite</button>', '<button id="copyInvite" class="secondary" style="margin-top: 0; white-space: nowrap;" title="Copy the room invite link to clipboard">Copy Invite</button>');
-
-// Tooltips for tabs
-html = html.replace('<button class="tab-btn active" data-tab="tab-room">Room</button>', '<button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</button>');
-html = html.replace('<button class="tab-btn" data-tab="tab-sync" id="tabSyncBtn" style="display:none;">Sync</button>', '<button class="tab-btn" data-tab="tab-sync" id="tabSyncBtn" style="display:none;" title="Remote control and video selection">Sync</button>');
-html = html.replace('<button class="tab-btn" data-tab="tab-settings">Settings</button>', '<button class="tab-btn" data-tab="tab-settings" title="Extension preferences">Settings</button>');
-html = html.replace('<button class="tab-btn" data-tab="tab-dev">Status</button>', '<button class="tab-btn" data-tab="tab-dev" title="Connection status and debug logs">Status</button>');
-
-// Remove explicit ℹ️ where not needed since it's hidden now
-html = html.replace('>Hide Clutter Tabs ℹ️<', ' title="Filters out non-video tabs and unrelated domains to keep the list clean">Hide Clutter Tabs<');
-html = html.replace('>Auto-Sync Next Episode ℹ️<', ' title="Automatically clicks \'Next Episode\' on supported sites like Netflix when others do">Auto-Sync Next Episode<');
-html = html.replace('>Auto-copy invite on Create ℹ️<', ' title="Automatically copies the invite link to your clipboard when you create a new room">Auto-copy invite on Create<');
-html = html.replace('>Browser Notifications ℹ️<', ' title="Shows native system notifications when someone joins/leaves or plays/pauses.">Browser Notifications<');
-
-// Fix onboarding layout
-html = html.replace('align-items:center; justify-content:center;">', 'align-items:flex-end; justify-content:center; padding-bottom: 20px;">');
-html = html.replace('margin-top: 50px;', '');
-
-fs.writeFileSync('extension/popup.html', html, 'utf8');
-
-let js = fs.readFileSync('extension/popup.js', 'utf8');
-
-const newAvatarFn = `function getAvatarForName(username) {
-    if (!username) return '👤';
-    const lower = username.toLowerCase();
-    const map = {
-        'koala': '🐨', 'panda': '🐼', 'tiger': '🐯', 'eagle': '🦅',
-        'fox': '🦊', 'bear': '🐻', 'wolf': '🐺', 'lion': '🦁',
-        'hawk': '🦅', 'seal': '🦭', 'owl': '🦉', 'shark': '🦈',
-        'dragon': '🐉', 'phoenix': '🐦', 'falcon': '🦅', 'panther': '🐆',
-        'raven': '🐦‍⬛', 'cobra': '🐍', 'lynx': '🐈', 'jaguar': '🐆',
-        'orca': '🐋', 'mantis': '🦗', 'viper': '🐍', 'condor': '🦅',
-        'badger': '🦡', 'otter': '🦦', 'rhino': '🦏', 'crane': '🦩',
-        'mongoose': '🦦', 'specter': '👻'
-    };
-    for (const [key, emoji] of Object.entries(map)) {
-        if (lower.includes(key)) return emoji;
-    }
-    return '👤';
-}`;
-
-js = js.replace(/function getAvatarForName\(username\) \{[\s\S]*?return '👤';\n\}/, newAvatarFn);
-
-fs.writeFileSync('extension/popup.js', js, 'utf8');
-console.log("Fixed UI");

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "koalasync",
-  "version": "1.8.2",
+  "version": "1.8.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "koalasync",
-      "version": "1.8.2",
+      "version": "1.8.5",
       "devDependencies": {
         "archiver": "^7.0.1",
         "eslint": "^10.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koalasync",
-  "version": "1.8.2",
+  "version": "1.8.8",
   "description": "KoalaSync Build Scripts",
   "private": true,
   "scripts": {

server/index.js

@@ -44,9 +44,10 @@ const httpServer = createServer(app);
 const io = new Server(httpServer, {
     cors: {
         origin: (origin, callback) => {
-            if (!origin || origin === 'https://sync.koalastuff.net' || origin.startsWith('chrome-extension://')) {
+            if (!origin || origin === 'https://sync.koalastuff.net' || origin.startsWith('chrome-extension://') || origin.startsWith('moz-extension://')) {
                 callback(null, true);
             } else {
+                log('CORS', `Rejected origin: ${origin}`);
                 callback(new Error('Not allowed by CORS'));
             }
         },
@@ -296,6 +297,7 @@ io.on('connection', (socket) => {
 
             const ip = socket._clientIp || socket.handshake.address;
             if (!checkAuthRate(ip, roomId)) {
+                log('AUTH', `Auth rate limit blocked ${ip} from room ${roomId.substring(0, 3)}***`);
                 socket.emit(EVENTS.ERROR, { message: "Too many failed attempts. Try again later." });
                 return;
             }
@@ -317,6 +319,7 @@ io.on('connection', (socket) => {
                     roomCreationLocks.set(roomId, lockPromise);
                     try {
                         if (rooms.size >= MAX_ROOMS) {
+                            log('ROOM', `Server at capacity: ${rooms.size}/${MAX_ROOMS} rooms — rejecting join`);
                             socket.emit(EVENTS.ERROR, { message: "Server capacity reached" });
                             return;
                         }
@@ -343,11 +346,13 @@ io.on('connection', (socket) => {
                 if (room.passwordHash) {
                     if (!password || !(await bcrypt.compare(password, room.passwordHash))) {
                         recordAuthFailure(ip, roomId);
+                        log('AUTH', `Invalid password from ${ip} for room ${roomId.substring(0, 3)}***`);
                         socket.emit(EVENTS.ERROR, { message: "Invalid password" });
                         return;
                     }
                 }
                 if (room.peers.size >= MAX_PEERS_PER_ROOM) {
+                    log('ROOM', `Room full (${room.peers.size}/${MAX_PEERS_PER_ROOM}): ${roomId.substring(0, 3)}***`);
                     socket.emit(EVENTS.ERROR, { message: "Room full" });
                     return;
                 }

shared/constants.js

@@ -7,7 +7,7 @@
  */
 
 export const PROTOCOL_VERSION = "1.0.0";
-export const APP_VERSION = "1.3.1";
+export const APP_VERSION = "1.8.6";
 
 export const OFFICIAL_SERVER_URL = 'wss://syncserver.koalastuff.net';
 export const OFFICIAL_LANDING_PAGE_URL = 'https://sync.koalastuff.net';

website/index.html

@@ -3,15 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KoalaSync | Real-time Video Synchronization for Friends</title>
-    <meta name="description" content="Watch YouTube, Twitch, and HTML5 videos in sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox.">
+    <title>KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension</title>
+    <meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
     
     <link rel="stylesheet" href="style.css">
     <link rel="icon" type="image/png" href="assets/logo.png">
-    <meta property="og:title" content="KoalaSync | Sync your videos">
-    <meta property="og:description" content="Watch together, stay in sync. Privacy-first video synchronization.">
+    <link rel="canonical" href="https://sync.koalastuff.net/">
+    <meta name="robots" content="index, follow">
+    <meta property="og:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends">
+    <meta property="og:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.">
     <meta property="og:image" content="https://sync.koalastuff.net/assets/logo.png">
     <meta property="og:type" content="website">
+    <meta property="og:url" content="https://sync.koalastuff.net/">
 
     <script src="lang-init.js"></script>
 </head>

website/robots.txt

@@ -1,4 +1,6 @@
+# KoalaSync Website — Allow all crawlers, full indexing
 User-agent: *
 Allow: /
 
+# Sitemap for search engines
 Sitemap: https://sync.koalastuff.net/sitemap.xml

website/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "1.8.0",
-  "date": "2026-05-25T21:09:07Z"
+  "version": "1.8.7",
+  "date": "2026-05-26T00:06:38Z"
 }