v1.8.10: fix description length, solo peer detection, tab-close peer notify, lastHeartbeat guard, time interpolation stale guard

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

@@ -706,7 +706,9 @@ function handleServerEvent(event, data) {
                             if (!ignoreStatus) {
                                 peer.playbackState = data.playbackState !== undefined ? data.playbackState : peer.playbackState;
                                 peer.currentTime = data.currentTime !== undefined ? data.currentTime : peer.currentTime;
-                                peer.lastHeartbeat = Date.now();
+                                if (data.playbackState !== undefined || data.currentTime !== undefined) {
+                                    peer.lastHeartbeat = Date.now();
+                                }
                             }
                         } else {
                             // Migration: replace string peer with normalized object
@@ -1167,6 +1169,16 @@ 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 otherCount = currentRoom && Array.isArray(currentRoom.peers) ? currentRoom.peers.filter(p => (typeof p === 'object' ? p.peerId : p) !== peerId).length : 0;
+            const hasOtherPeers = otherCount > 0;
+            
+            if (isNonEssentialEvent && !hasOtherPeers) {
+                sendResponse({ status: 'ok_solo' });
+                return;
+            }
+            
             emit(message.action, { ...message.payload, peerId });
             sendResponse({ status: 'ok' });
         };
@@ -1375,11 +1387,41 @@ async function handleAsyncMessage(message, sender, sendResponse) {
 // Tab removal listener
 chrome.tabs.onRemoved.addListener((tabId) => {
     if (tabId === currentTabId) {
+        const wasInRoom = !!currentRoom;
         currentTabId = null;
         currentTabTitle = null;
         chrome.storage.session.set({ currentTabId: null, currentTabTitle: null });
         updateBadgeStatus();
         addLog('Target tab closed.', 'warn');
+
+        if (wasInRoom) {
+            const roomAtClose = currentRoom;
+            getSettings().then(settings => {
+                if (currentRoom !== roomAtClose) return;
+
+                emit(EVENTS.PEER_STATUS, {
+                    peerId,
+                    playbackState: 'paused',
+                    currentTime: null,
+                    mediaTitle: null,
+                    username: settings.username,
+                    tabTitle: null
+                });
+
+                if (currentRoom && Array.isArray(currentRoom.peers)) {
+                    const me = currentRoom.peers.find(p => (p.peerId || p) === peerId);
+                    if (me && typeof me === 'object') {
+                        me.playbackState = 'paused';
+                        me.currentTime = null;
+                        me.mediaTitle = null;
+                        me.tabTitle = null;
+                        me.lastHeartbeat = Date.now();
+                        if (storageInitialized) chrome.storage.session.set({ currentRoom });
+                        chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: currentRoom.peers }).catch(() => {});
+                    }
+                }
+            }).catch(() => {});
+        }
     }
 });
 

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.0",
-  "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, and HTML5 sites in real-time with friends.",
+  "version": "1.8.10",
+  "description": "Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
   "permissions": [
     "storage",
     "tabs",

extension/popup.html

@@ -27,15 +27,20 @@
             font-size: 14px;
         }
 
+        .header-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+
         h1 {
             font-size: 18px;
-            margin: 0 0 16px 0;
+            margin: 0;
             color: var(--accent);
             letter-spacing: 1px;
             text-transform: uppercase;
-            display: flex;
+            display: inline-flex;
             align-items: center;
-            justify-content: center;
             gap: 8px;
         }
 
@@ -46,6 +51,27 @@
             border-radius: 4px;
         }
 
+        .popup-version {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 10px;
+            color: var(--text-muted);
+            text-decoration: none;
+            opacity: 0.5;
+            transition: opacity 0.2s, color 0.2s;
+        }
+        .popup-version:hover {
+            opacity: 1;
+            color: var(--accent);
+        }
+        .popup-version svg {
+            width: 12px;
+            height: 12px;
+            display: block;
+        }
+
         /* Tabs */
         .tabs {
             display: flex;
@@ -237,16 +263,71 @@
             from { opacity: 1; }
             to { opacity: 0; transform: translateY(-10px); }
         }
+
+        @keyframes fadeSlideIn {
+            from { opacity: 0; transform: translateX(5px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .tab-active-animate {
+            animation: fadeSlideIn 0.15s ease-out forwards;
+        }
+
+        /* Toggle Switch CSS */
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 36px;
+            height: 20px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #334155;
+            transition: .3s;
+            border-radius: 20px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: #94a3b8;
+            transition: .3s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--accent);
+        }
+        input:checked + .slider:before {
+            transform: translateX(16px);
+            background-color: white;
+        }
     </style>
 </head>
 <body>
     <div id="toast-container"></div>
-    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>
+    <div class="header-row">
+                    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>
+                    <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="popup-version">
+                        <svg viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                        </svg>
+                        <span id="popupVersion">v0.0.0</span>
+                    </a>
+                </div>
 
     <div class="tabs">
-        <button class="tab-btn active" data-tab="tab-room">Room</button>
-        <button class="tab-btn" data-tab="tab-sync">Sync</button>
-        <button class="tab-btn" data-tab="tab-settings">Settings</button>
+        <button class="tab-btn active" data-tab="tab-room" title="Room settings and connection">Room</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>
 
@@ -260,27 +341,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">Join Room</button>
+            <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>
@@ -293,14 +374,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>
@@ -308,7 +389,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>
@@ -323,28 +404,31 @@
         <!-- 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>
         </div>
         
-        <label>Remote Control</label>
+        <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: 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);">▶ Play</button>
-            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);">⏸ Pause</button>
+            <button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone">▶ Play</button>
+            <button id="pauseBtn" class="primary" style="flex:1; background: var(--error);" title="Send a Pause command to everyone">⏸ Pause</button>
         </div>
 
         <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
-            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;">⚡ Sync All Viewers</button>
-            <select id="forceSyncMode" style="width: auto; min-width: 130px; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
+            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1;" title="Force all users to sync up">⚡ SYNC</button>
+            <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target">
                 <option value="jump-to-others">Jump to Others</option>
                 <option value="jump-to-me">Jump to Me</option>
             </select>
         </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>
@@ -367,71 +451,83 @@
             <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;" title="Hides non-video sites like search engines or social media.">Hide Clutter Tabs ℹ️</label>
-            <input type="checkbox" id="filterNoise" style="width: auto;" checked>
+            <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>
+            </label>
         </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;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">Auto-Sync Next Episode ℹ️</label>
-            <input type="checkbox" id="autoSyncNextEpisode" style="width: auto;">
+            <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>
+            </label>
         </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;" title="Automatically copies the invite link to your clipboard when creating a new room.">Auto-Copy Invite Link ℹ️</label>
-            <input type="checkbox" id="autoCopyInvite" style="width: auto;" checked>
+            <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>
+            </label>
         </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;">Browser Notifications</label>
-            <input type="checkbox" id="browserNotifications" style="width: auto;">
+            <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>
+            </label>
         </div>
         
 
 
         <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>
         
@@ -444,14 +540,14 @@
     <script src="popup.js" type="module"></script>
 
     <!-- Onboarding Overlay -->
-    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:1000; align-items:center; justify-content:center;">
-        <div id="onboarding-card" style="background:var(--card); padding:24px; border-radius:16px; max-width:280px; width:90%; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.5); margin-top: 50px;">
+    <div id="onboarding-overlay" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index:1000; align-items:flex-end; justify-content:center; padding-bottom: 20px;">
+        <div id="onboarding-card" style="background:var(--card); padding:24px; border-radius:16px; max-width:280px; width:90%; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.5); ">
             <div id="onboarding-icon" style="font-size:48px; margin-bottom:12px;">\u{1F44B}</div>
             <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;
@@ -61,6 +62,26 @@ let populateTabsToken = null;
 let errorToken = 0;
 let forceSyncDone = false;
 
+// --- Helpers ---
+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 '👤';
+}
+
 // --- Initialization ---
 async function init() {
     // Load Settings
@@ -84,10 +105,11 @@ async function init() {
     if (elements.autoCopyInvite) elements.autoCopyInvite.checked = data.autoCopyInvite !== false;
     
     // Set Version Info
+    const versionTxt = `v${chrome.runtime.getManifest().version}`;
     const versionEl = document.getElementById('appVersion');
-    if (versionEl) {
-        versionEl.textContent = `v${chrome.runtime.getManifest().version}`;
-    }
+    if (versionEl) versionEl.textContent = versionTxt;
+    const popupVerEl = document.getElementById('popupVersion');
+    if (popupVerEl) popupVerEl.textContent = versionTxt;
 
     if (data.useCustomServer) {
         setServerMode(true);
@@ -155,9 +177,11 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') {
     const inRoom = !!roomId;
     toggleUIState(inRoom);
     if (inRoom) {
-        const serverFlag = useCustomServer ? '1' : '0';
-        const encodedUrl = encodeURIComponent(serverUrl || '');
-        const invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}:${serverFlag}:${encodedUrl}`;
+        let invite = `${OFFICIAL_LANDING_PAGE_URL}/join.html#join:${roomId}:${password}`;
+        if (useCustomServer) {
+            const encodedUrl = encodeURIComponent(serverUrl || '');
+            invite += `:1:${encodedUrl}`;
+        }
         elements.inviteLink.value = invite;
         
         if (window.justCreatedRoom) {
@@ -253,6 +277,7 @@ function updateLastActionUI(state, peers) {
         const isAcked = safeAcks.includes(pId) || pId === state.senderId;
         const color = isAcked ? 'var(--success)' : '#475569';
         const icon = isAcked ? '✓' : '...';
+        const avatar = getAvatarForName(pName);
         
         const peerItem = document.createElement('div');
         peerItem.title = pName;
@@ -264,7 +289,7 @@ function updateLastActionUI(state, peers) {
         
         const nameSpan = document.createElement('span');
         nameSpan.style.cssText = 'font-size:7px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36px;';
-        nameSpan.textContent = pName;
+        nameSpan.textContent = `${avatar} ${pName}`;
         
         peerItem.appendChild(dot);
         peerItem.appendChild(nameSpan);
@@ -309,7 +334,9 @@ function startInterpolation() {
             const peer = activePeers.find(p => p.peerId === peerId);
             if (peer && peer.playbackState === 'playing' && peer.currentTime != null && peer.lastHeartbeat) {
                 const elapsed = (Date.now() - peer.lastHeartbeat) / 1000;
-                el.textContent = formatTime(peer.currentTime + elapsed);
+                if (elapsed < 45) {
+                    el.textContent = formatTime(peer.currentTime + elapsed);
+                }
             }
         });
     }, 1000);
@@ -383,10 +410,11 @@ function updatePeerList(peers) {
             header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding-right: 24px;';
 
             const nameSpan = document.createElement('span');
+            const avatar = getAvatarForName(pUsername || pId);
             if (pUsername) {
                 const u = document.createElement('span');
                 u.style.cssText = 'font-weight:600; color:white;';
-                u.textContent = pUsername;
+                u.textContent = `${avatar} ${pUsername}`;
                 const i = document.createElement('span');
                 i.style.cssText = 'font-size:10px; opacity:0.6; font-style:italic;';
                 i.textContent = ` (${pId})`;
@@ -394,7 +422,7 @@ function updatePeerList(peers) {
                 nameSpan.appendChild(i);
             } else {
                 nameSpan.style.fontWeight = '600';
-                nameSpan.textContent = `👤 ${pId}`;
+                nameSpan.textContent = `${avatar} ${pId}`;
             }
 
             header.appendChild(nameSpan);
@@ -451,7 +479,9 @@ function updatePeerList(peers) {
                 let displayTime = p.currentTime;
                 if (p.playbackState === 'playing' && p.lastHeartbeat && p.currentTime != null) {
                     const elapsed = (Date.now() - p.lastHeartbeat) / 1000;
-                    displayTime += elapsed;
+                    if (elapsed < 45) {
+                        displayTime += elapsed;
+                    }
                 }
                 timeSpan.textContent = formatTime(displayTime);
                 statusLine.appendChild(timeSpan);
@@ -583,7 +613,12 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
             option.style.color = 'var(--star)';
         }
         
+        if (tab.audible) {
+            label = `[🎬] ${label}`;
+        }
+        
         option.textContent = label;
+        option.dataset.originalTitle = tab.title;
         elements.targetTab.appendChild(option);
     });
 
@@ -616,7 +651,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 });
         }
     }
@@ -665,7 +700,7 @@ function applyConnectionStatus(status) {
 
     if (elements.playBtn) elements.playBtn.textContent = '▶ Play';
     if (elements.pauseBtn) elements.pauseBtn.textContent = '⏸ Pause';
-    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ Force Sync';
+    if (elements.forceSyncBtn) elements.forceSyncBtn.textContent = '⚡ SYNC';
 }
 
 function updateHistory(history) {
@@ -869,7 +904,14 @@ elements.tabs.forEach(btn => {
         elements.tabs.forEach(b => b.classList.remove('active'));
         elements.contents.forEach(c => c.classList.remove('active'));
         btn.classList.add('active');
-        document.getElementById(btn.dataset.tab).classList.add('active');
+        
+        const targetContent = document.getElementById(btn.dataset.tab);
+        targetContent.classList.add('active');
+        
+        targetContent.classList.remove('tab-active-animate');
+        void targetContent.offsetWidth; // Force reflow to restart animation
+        targetContent.classList.add('tab-active-animate');
+        
         isDevTabVisible = btn.dataset.tab === 'tab-dev';
         if (isDevTabVisible) refreshLogs();
         if (btn.dataset.tab === 'tab-sync') refreshHistory();
@@ -994,7 +1036,7 @@ elements.retryBtn.addEventListener('click', () => {
 elements.targetTab.addEventListener('change', () => {
     const val = elements.targetTab.value;
     const tabId = val ? parseInt(val) : null;
-    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.text.replace('⭐ MATCH: ', '') || null;
+    const tabTitle = elements.targetTab.options[elements.targetTab.selectedIndex]?.dataset.originalTitle || null;
     chrome.runtime.sendMessage({ type: 'SET_TARGET_TAB', tabId, tabTitle });
 });
 
@@ -1031,13 +1073,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) => {
@@ -1083,13 +1127,25 @@ 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: {}
+    }, (response) => {
+        if (response && response.status === 'ok_solo') {
+            elements.playBtn.textContent = '▶ Play';
+            elements.playBtn.disabled = false;
+        }
     });
+    // 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', () => {
@@ -1097,13 +1153,25 @@ 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: {}
+    }, (response) => {
+        if (response && response.status === 'ok_solo') {
+            elements.pauseBtn.textContent = '⏸ Pause';
+            elements.pauseBtn.disabled = false;
+        }
     });
+    // 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', () => {
@@ -1129,6 +1197,21 @@ elements.copyInvite.addEventListener('click', () => {
     });
 });
 
+if (elements.syncTabCopyInvite) {
+    elements.syncTabCopyInvite.addEventListener('click', () => {
+        navigator.clipboard.writeText(elements.inviteLink.value).then(() => {
+            const original = elements.syncTabCopyInvite.textContent;
+            elements.syncTabCopyInvite.textContent = '✓';
+            elements.syncTabCopyInvite.style.color = 'var(--success)';
+            showToast('Invite link copied!', 'success', 2000);
+            setTimeout(() => {
+                elements.syncTabCopyInvite.textContent = original;
+                elements.syncTabCopyInvite.style.color = '';
+            }, 2000);
+        });
+    });
+}
+
 // --- Logs & Status ---
 async function refreshLogs() {
     chrome.runtime.sendMessage({ type: 'GET_LOGS' }, (logs) => {
@@ -1162,8 +1245,8 @@ chrome.runtime.onMessage.addListener((msg) => {
                 'play': '▶ Play',
                 'pause': '⏸ Pause',
                 'seek': '⏩ Seek',
-                'force_sync_prepare': '⚡ Force Sync',
-                'force_sync_execute': '⚡ Force Play'
+                'force_sync_prepare': '⚡ Sync',
+                'force_sync_execute': '⚡ Sync Play'
             };
             const action = actionNames[state.action] || state.action;
             showToast(`${state.senderId} ${action}`, 'info', 2000);
@@ -1195,7 +1278,7 @@ chrome.runtime.onMessage.addListener((msg) => {
                 elements.forceSyncBtn.disabled = false;
                 elements.forceSyncBtn.textContent = '✅ Synced!';
                 setTimeout(() => {
-                    elements.forceSyncBtn.textContent = '⚡ Sync All Viewers';
+                    elements.forceSyncBtn.textContent = '⚡ SYNC';
                 }, 2000);
             }
         }
@@ -1383,10 +1466,11 @@ function updateLobbyUI(lobby, peers) {
         peers.forEach(p => {
             const pId = typeof p === 'object' ? p.peerId : p;
             const pName = (typeof p === 'object' && p.username) ? p.username : pId;
+            const avatar = getAvatarForName(pName);
             const isReady = readySet.has(pId);
             const icon = isReady ? '\u2705' : '\u23f3';
             const label = isReady ? 'Ready' : 'Loading...';
-            peerLines.push(`${icon} ${pName} \u2014 ${label}`);
+            peerLines.push(`${icon} ${avatar} ${pName} \u2014 ${label}`);
         });
     }
 
@@ -1417,6 +1501,7 @@ let onboardingStep = 0;
 function showOnboarding() {
     const overlay = document.getElementById('onboarding-overlay');
     if (!overlay) return;
+    document.body.style.minHeight = '400px';
     overlay.style.display = 'flex';
     renderOnboardingStep();
 }
@@ -1464,6 +1549,7 @@ function renderOnboardingStep() {
 function completeOnboarding() {
     const overlay = document.getElementById('onboarding-overlay');
     if (overlay) overlay.style.display = 'none';
+    document.body.style.minHeight = '';
     chrome.storage.sync.set({ onboardingComplete: true });
     
     const inRoom = elements.sectionActive && elements.sectionActive.style.display === 'block';

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koalasync",
-  "version": "1.8.0",
+  "version": "1.8.9",
   "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>
@@ -100,7 +103,7 @@
                                 <div class="mock-label"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
                                 <div class="mock-invite-box">
                                     <input type="text" class="mock-input" value="https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass" readonly>
-                                    <button class="mock-btn" style="padding: 0.35rem 0.5rem;" onclick="navigator.clipboard.writeText('https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass')"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
+                                    <button class="mock-btn" style="padding: 0.35rem 0.5rem;"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
@@ -454,7 +457,7 @@
       <span class="t-key">-</span> <span class="t-str">MAX_PEERS_PER_ROOM=50</span>
     <span class="t-key">pids_limit:</span> <span class="t-val">2048</span></code></pre>
                         <div style="margin-top: 1rem; font-size: 0.75rem; text-align: right; padding-right: 0.5rem;">
-                            <a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.85'">
+                            <a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;">
                                 📦 <span lang="en">View all image tags on GitHub Packages</span><span lang="de">Alle Image-Tags auf GitHub Packages ansehen</span> →
                             </a>
                         </div>

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.7.5",
-  "date": "2026-05-25T11:26:16Z"
+  "version": "1.8.9",
+  "date": "2026-05-26T01:07:16Z"
 }