From c0a6f0adc2de65794a67f7d867e4b27df596f6e7 Mon Sep 17 00:00:00 2001
From: Koala <6156589+Shik3i@users.noreply.github.com>
Date: Mon, 25 May 2026 23:49:32 +0200
Subject: [PATCH] ui: clipboard emoji for invite button, movie emoji for
 audible tab indicator

---
 extension/manifest.base.json |  2 +-
 extension/popup.html         |  2 +-
 extension/popup.js           | 27 ++++++++++++++++++++++-----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/extension/manifest.base.json b/extension/manifest.base.json
index 6cd069e..cf8c23b 100644
--- a/extension/manifest.base.json
+++ b/extension/manifest.base.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "KoalaSync",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "Watch party extension to synchronize video playback on YouTube, Twitch, Netflix, and HTML5 sites in real-time with friends.",
   "permissions": [
     "storage",
diff --git a/extension/popup.html b/extension/popup.html
index 9543a91..0a42a92 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -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>
diff --git a/extension/popup.js b/extension/popup.js
index 4909818..0de417d 100644
--- a/extension/popup.js
+++ b/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;
@@ -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', () => {