fix(popup): polish custom-server, host-control card & co-host UX

- Manual Connect: split the server picker into its own inset panel, visually separated from the Room ID / Password fields (they were welded together in one flat list). - Custom server URL: stop auto-prepending ws:// — default to wss:// for real hosts, ws:// only for localhost/127.0.0.1 (matches what the background already enforces; the displayed URL no longer lies). - Host Control card: replace the raw native checkbox with the proper .toggle-switch slider used in Options; move the toggle row from a <label> to a <div> to avoid an illegally nested label. - Co-host discoverability: owner-only hint in the Host Control card pointing to the participant list (new NOTICE_COHOST_HINT across all 15 locales). Shown only when actionable: owner + co-host-capable relay + host-only active. - Peer row: group right-side badges/actions into one container so they no longer scatter via space-between or collide with long names; restyle the give/revoke button (padding, weight, hover fill, tooltip). - Gate promote/demote (and role badges) on host-only mode being ON, in addition to the existing owner-privilege check — roles are moot in 'everyone' mode, so no badge/button noise there. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-26 12:08:15 +00:00 · 2026-06-29 02:43:28 +02:00
parent adab684ed0
commit 1f48e9df47
17 changed files with 73 additions and 22 deletions
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Festlegen, wer die Wiedergabe in diesem Raum steuern darf",
  "LABEL_HOST_ONLY_TOGGLE": "Nur ich darf die Wiedergabe steuern",
  "NOTICE_HOST_CONTROLS": "Der Host steuert die Wiedergabe für alle.",
+  "NOTICE_COHOST_HINT": "Tipp: Gib einzelnen Teilnehmern unten in der Teilnehmerliste die Steuerung.",
  "BADGE_HOST": "Host",
  "BADGE_GUEST": "Gast",
  "BADGE_CONTROLLER": "Controller",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Restrict who can control playback in this room",
  "LABEL_HOST_ONLY_TOGGLE": "Only I can control playback",
  "NOTICE_HOST_CONTROLS": "The host controls playback for everyone.",
+  "NOTICE_COHOST_HINT": "Tip: grant control to individual viewers in the participant list below.",
  "BADGE_HOST": "Host",
  "BADGE_GUEST": "Guest",
  "BADGE_CONTROLLER": "Controller",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quién puede controlar la reproducción en esta sala",
  "LABEL_HOST_ONLY_TOGGLE": "Solo yo puedo controlar la reproducción",
  "NOTICE_HOST_CONTROLS": "El anfitrión controla la reproducción para todos.",
+  "NOTICE_COHOST_HINT": "Consejo: concede el control a usuarios concretos en la lista de participantes de abajo.",
  "BADGE_HOST": "Anfitrión",
  "BADGE_GUEST": "Invitado",
  "BADGE_CONTROLLER": "Controlador",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Définir qui peut contrôler la lecture dans ce salon",
  "LABEL_HOST_ONLY_TOGGLE": "Moi seul peux contrôler la lecture",
  "NOTICE_HOST_CONTROLS": "L'hôte contrôle la lecture pour tout le monde.",
+  "NOTICE_COHOST_HINT": "Astuce : donnez le contrôle à des participants précis dans la liste ci-dessous.",
  "BADGE_HOST": "Hôte",
  "BADGE_GUEST": "Invité",
  "BADGE_CONTROLLER": "Contrôleur",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Limita chi può controllare la riproduzione in questa stanza",
  "LABEL_HOST_ONLY_TOGGLE": "Solo io posso controllare la riproduzione",
  "NOTICE_HOST_CONTROLS": "L'host controlla la riproduzione per tutti.",
+  "NOTICE_COHOST_HINT": "Suggerimento: concedi il controllo ai singoli partecipanti nell'elenco qui sotto.",
  "BADGE_HOST": "Host",
  "BADGE_GUEST": "Ospite",
  "BADGE_CONTROLLER": "Controller",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "このルームで再生を操作できる人を制限します",
  "LABEL_HOST_ONLY_TOGGLE": "再生を操作できるのは自分だけ",
  "NOTICE_HOST_CONTROLS": "ホストが全員の再生を操作します。",
+  "NOTICE_COHOST_HINT": "ヒント: 下の参加者リストで個別の参加者に操作権限を付与できます。",
  "BADGE_HOST": "ホスト",
  "BADGE_GUEST": "ゲスト",
  "BADGE_CONTROLLER": "操作権あり",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "이 방에서 재생을 제어할 수 있는 사람 제한",
  "LABEL_HOST_ONLY_TOGGLE": "나만 재생을 제어할 수 있음",
  "NOTICE_HOST_CONTROLS": "호스트가 모두의 재생을 제어합니다.",
+  "NOTICE_COHOST_HINT": "팁: 아래 참가자 목록에서 개별 참가자에게 제어 권한을 부여하세요.",
  "BADGE_HOST": "호스트",
  "BADGE_GUEST": "게스트",
  "BADGE_CONTROLLER": "제어자",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Bepaal wie de weergave in deze kamer mag bedienen",
  "LABEL_HOST_ONLY_TOGGLE": "Alleen ik mag de weergave bedienen",
  "NOTICE_HOST_CONTROLS": "De host bedient de weergave voor iedereen.",
+  "NOTICE_COHOST_HINT": "Tip: geef afzonderlijke deelnemers de besturing in de lijst hieronder.",
  "BADGE_HOST": "Host",
  "BADGE_GUEST": "Gast",
  "BADGE_CONTROLLER": "Bediener",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Określ, kto może sterować odtwarzaniem w tym pokoju",
  "LABEL_HOST_ONLY_TOGGLE": "Tylko ja mogę sterować odtwarzaniem",
  "NOTICE_HOST_CONTROLS": "Host steruje odtwarzaniem dla wszystkich.",
+  "NOTICE_COHOST_HINT": "Wskazówka: przyznaj sterowanie wybranym uczestnikom na liście poniżej.",
  "BADGE_HOST": "Host",
  "BADGE_GUEST": "Gość",
  "BADGE_CONTROLLER": "Sterujący",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quem pode controlar a reprodução nesta sala",
  "LABEL_HOST_ONLY_TOGGLE": "Somente eu posso controlar a reprodução",
  "NOTICE_HOST_CONTROLS": "O anfitrião controla a reprodução para todos.",
+  "NOTICE_COHOST_HINT": "Dica: conceda o controle a participantes específicos na lista abaixo.",
  "BADGE_HOST": "Anfitrião",
  "BADGE_GUEST": "Convidado",
  "BADGE_CONTROLLER": "Controlador",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Restringir quem pode controlar a reprodução nesta sala",
  "LABEL_HOST_ONLY_TOGGLE": "Só eu posso controlar a reprodução",
  "NOTICE_HOST_CONTROLS": "O anfitrião controla a reprodução para todos.",
+  "NOTICE_COHOST_HINT": "Dica: conceda o controlo a participantes específicos na lista abaixo.",
  "BADGE_HOST": "Anfitrião",
  "BADGE_GUEST": "Convidado",
  "BADGE_CONTROLLER": "Controlador",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Ограничить, кто может управлять воспроизведением в этой комнате",
  "LABEL_HOST_ONLY_TOGGLE": "Только я могу управлять воспроизведением",
  "NOTICE_HOST_CONTROLS": "Ведущий управляет воспроизведением для всех.",
+  "NOTICE_COHOST_HINT": "Совет: предоставьте управление отдельным участникам в списке ниже.",
  "BADGE_HOST": "Ведущий",
  "BADGE_GUEST": "Гость",
  "BADGE_CONTROLLER": "Управляющий",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Bu odada oynatmayı kimin kontrol edebileceğini belirleyin",
  "LABEL_HOST_ONLY_TOGGLE": "Oynatmayı yalnızca ben kontrol edebilirim",
  "NOTICE_HOST_CONTROLS": "Oynatmayı herkes için sunucu kontrol eder.",
+  "NOTICE_COHOST_HINT": "İpucu: aşağıdaki katılımcı listesinde tek tek katılımcılara kontrol verin.",
  "BADGE_HOST": "Sunucu",
  "BADGE_GUEST": "Misafir",
  "BADGE_CONTROLLER": "Kontrolcü",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "Обмежити, хто може керувати відтворенням у цій кімнаті",
  "LABEL_HOST_ONLY_TOGGLE": "Лише я можу керувати відтворенням",
  "NOTICE_HOST_CONTROLS": "Ведучий керує відтворенням для всіх.",
+  "NOTICE_COHOST_HINT": "Порада: надайте керування окремим учасникам у списку нижче.",
  "BADGE_HOST": "Ведучий",
  "BADGE_GUEST": "Гість",
  "BADGE_CONTROLLER": "Керуючий",
@@ -48,6 +48,7 @@
  "LABEL_HOST_CONTROL_TOOLTIP": "限制谁可以在此房间中控制播放",
  "LABEL_HOST_ONLY_TOGGLE": "仅我可以控制播放",
  "NOTICE_HOST_CONTROLS": "由主持人为所有人控制播放。",
+  "NOTICE_COHOST_HINT": "提示：在下方的参与者列表中将控制权授予单个参与者。",
  "BADGE_HOST": "主持人",
  "BADGE_GUEST": "访客",
  "BADGE_CONTROLLER": "控制者",
@@ -402,14 +402,18 @@
            <details style="margin-bottom: 12px; background: var(--card); border: 1px solid #334155; border-radius: 8px; padding: 8px;">
                <summary style="font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; cursor: pointer; outline: none;" data-i18n="MANUAL_CONNECT_HEADER">Manual Connect / Advanced</summary>
                <div style="margin-top: 12px;">
-            <div class="form-group">
-                <label title="Select which KoalaSync server to use" data-i18n="LABEL_SERVER">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;" data-i18n="BTN_SERVER_OFFICIAL" data-i18n-title="BTN_SERVER_OFFICIAL_TOOLTIP" title="Use the official reliable server">Official</button>
-                    <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_CUSTOM" data-i18n-title="BTN_SERVER_CUSTOM_TOOLTIP" title="Connect to your own self-hosted server">Custom</button>
+            <!-- Server selection — its own concern, kept visually separate from the room fields. -->
+            <div style="background: var(--bg); border: 1px solid #334155; border-radius: 8px; padding: 10px; margin-bottom: 14px;">
+                <div class="form-group" style="margin-bottom:0;">
+                    <label title="Select which KoalaSync server to use" data-i18n="LABEL_SERVER">Server</label>
+                    <div style="display:flex; gap:4px; margin-bottom:0;">
+                        <button id="serverOfficial" class="tab-btn active" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_OFFICIAL" data-i18n-title="BTN_SERVER_OFFICIAL_TOOLTIP" title="Use the official reliable server">Official</button>
+                        <button id="serverCustom" class="tab-btn" style="flex:1; padding:6px; font-size:11px;" data-i18n="BTN_SERVER_CUSTOM" data-i18n-title="BTN_SERVER_CUSTOM_TOOLTIP" title="Connect to your own self-hosted server">Custom</button>
+                    </div>
+                    <input type="text" id="serverUrl" data-i18n-placeholder="PLACEHOLDER_SERVER_URL" placeholder="wss://your-server:3000" style="display:none; margin-top:8px;">
                </div>
-                <input type="text" id="serverUrl" data-i18n-placeholder="PLACEHOLDER_SERVER_URL" placeholder="wss://your-server:3000" style="display:none;">
            </div>
+            <!-- Room credentials — distinct group below the server picker. -->
            <div class="form-group">
                <label title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
                <input type="text" id="roomId" data-i18n-placeholder="PLACEHOLDER_ROOM_ID" data-i18n-title="PLACEHOLDER_ROOM_ID_TOOLTIP" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
@@ -455,10 +459,14 @@
                    <label style="margin:0;" title="Restrict who can control playback in this room" data-i18n="LABEL_HOST_CONTROL" data-i18n-title="LABEL_HOST_CONTROL_TOOLTIP">Host Control</label>
                    <span id="hostRoleBadge" style="font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; background:var(--accent); color:#fff;"></span>
                </div>
-                <label id="hostControlToggleRow" style="display:none; align-items:center; gap:8px; margin-top:10px; cursor:pointer; font-size:12px; color:var(--text-muted);">
-                    <input type="checkbox" id="hostControlToggle">
-                    <span data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
-                </label>
+                <div id="hostControlToggleRow" style="display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;">
+                    <span style="font-size:12px; color:var(--text); line-height:1.3;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
+                    <label class="toggle-switch" style="flex:none;">
+                        <input type="checkbox" id="hostControlToggle">
+                        <span class="slider"></span>
+                    </label>
+                </div>
+                <div id="hostControlCohostHint" style="display:none; margin-top:10px; padding-top:10px; border-top:1px solid #334155; font-size:11px; color:var(--text-muted); line-height:1.4;" data-i18n="NOTICE_COHOST_HINT">Tip: grant control to individual viewers in the participant list below.</div>
                <div id="hostControlGuestNote" style="display:none; margin-top:10px; font-size:12px; color:var(--text-muted);" data-i18n="NOTICE_HOST_CONTROLS">The host controls playback for everyone.</div>
            </div>

@@ -46,6 +46,7 @@ const elements = {
    hostControlToggleRow: document.getElementById('hostControlToggleRow'),
    hostControlToggle: document.getElementById('hostControlToggle'),
    hostControlGuestNote: document.getElementById('hostControlGuestNote'),
+    hostControlCohostHint: document.getElementById('hostControlCohostHint'),
    activeRoomId: document.getElementById('activeRoomId'),
    activeServer: document.getElementById('activeServer'),
    peerListSync: document.getElementById('peerListSync'),
@@ -361,6 +362,11 @@ function updateHostControlUI(state) {
    if (elements.hostControlToggleRow) elements.hostControlToggleRow.style.display = amHost ? 'flex' : 'none';
    if (elements.hostControlToggle) elements.hostControlToggle.checked = hostOnly;
    if (elements.hostControlGuestNote) elements.hostControlGuestNote.style.display = (!amController && hostOnly) ? 'block' : 'none';
+    // Owner-only discoverability hint: co-hosting is granted down in the peer list,
+    // which isn't obvious from this card. Only show it when it's actionable — owner,
+    // relay supports co-host, and the room is locked to host-only (the buttons only
+    // render in that mode).
+    if (elements.hostControlCohostHint) elements.hostControlCohostHint.style.display = (amHost && !!s.coHostSupported && hostOnly) ? 'block' : 'none';

    // Only a non-controller is locked out of the remote controls.
    hcmGuestLocked = (!amController && hostOnly);
@@ -670,6 +676,11 @@ function updatePeerList(peers) {

            header.appendChild(nameSpan);

+            // Right-side badges + actions, kept in one group so they sit together
+            // on the right instead of being scattered by the header's space-between.
+            const rightGroup = document.createElement('div');
+            rightGroup.style.cssText = 'display:flex; align-items:center; gap:6px; flex-shrink:0;';
+
            // Volume Icon (Top Right)
            if (p.volume !== undefined && p.volume !== null) {
                const volIcon = document.createElement('div');
@@ -683,7 +694,7 @@ function updatePeerList(peers) {
                const you = document.createElement('span');
                you.style.cssText = 'font-size:10px; color:var(--accent); font-weight:bold;';
                you.textContent = getMessage('LABEL_YOU') || 'YOU';
-                header.appendChild(you);
+                rightGroup.appendChild(you);
            }

            // Host Control Mode: show "Solo" badge for peers watching on their own.
@@ -693,13 +704,14 @@ function updatePeerList(peers) {
                const soloText = getMessage('BADGE_DESYNCED') || 'Solo';
                solo.textContent = soloText;
                solo.title = getMessage('TOOLTIP_PEER_DESYNCED') || soloText;
-                header.appendChild(solo);
+                rightGroup.appendChild(solo);
            }

-            // Co-Host: role badges + the owner's promote/demote control. Shown when the
-            // feature is active and either the room is host-only or we're the owner
-            // (so a guest in a normal room sees no role noise).
-            const showRoles = !!hcmOwnerPeerId && (hcmRoomIsHostOnly || hcmAmOwner);
+            // Co-Host: role badges + the owner's promote/demote control. Only meaningful
+            // once the room is locked to host-only — in 'everyone' mode anyone can already
+            // control, so roles are moot and we show nothing (no badge/button noise).
+            // The promote/demote button additionally requires owner privileges (below).
+            const showRoles = !!hcmOwnerPeerId && hcmRoomIsHostOnly;
            if (showRoles) {
                const isOwner = pId === hcmOwnerPeerId;
                const isController = !isOwner && hcmControllers.includes(pId);
@@ -707,20 +719,32 @@ function updatePeerList(peers) {
                    const roleBadge = document.createElement('span');
                    roleBadge.style.cssText = 'font-size:10px; color:#fff; background:var(--accent); padding:2px 6px; border-radius:6px; font-weight:600;';
                    roleBadge.textContent = isOwner ? (getMessage('BADGE_HOST') || 'Host') : (getMessage('BADGE_CONTROLLER') || 'Controller');
-                    header.appendChild(roleBadge);
+                    rightGroup.appendChild(roleBadge);
                }
                // Owner can promote/demote any non-owner peer.
                if (hcmAmOwner && hcmCoHostSupported && !isOwner) {
                    const btn = document.createElement('button');
-                    btn.style.cssText = 'font-size:10px; padding:2px 8px; border-radius:6px; cursor:pointer; border:1px solid var(--accent); background:transparent; color:var(--accent); white-space:nowrap;';
-                    btn.textContent = isController ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    const revoke = isController;
+                    btn.style.cssText = `font-size:10px; padding:3px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; font-weight:600; transition:background .15s,color .15s; border:1px solid ${revoke ? 'var(--text-muted)' : 'var(--accent)'}; background:transparent; color:${revoke ? 'var(--text-muted)' : 'var(--accent)'};`;
+                    btn.textContent = revoke ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    btn.title = revoke ? (getMessage('BTN_REVOKE_CONTROL') || 'Revoke') : (getMessage('BTN_GIVE_CONTROL') || 'Give control');
+                    btn.addEventListener('mouseenter', () => {
+                        btn.style.background = revoke ? 'var(--text-muted)' : 'var(--accent)';
+                        btn.style.color = '#fff';
+                    });
+                    btn.addEventListener('mouseleave', () => {
+                        btn.style.background = 'transparent';
+                        btn.style.color = revoke ? 'var(--text-muted)' : 'var(--accent)';
+                    });
                    btn.addEventListener('click', () => {
                        chrome.runtime.sendMessage({ type: 'SET_PEER_ROLE', peerId: pId, controller: !isController }, () => {});
                    });
-                    header.appendChild(btn);
+                    rightGroup.appendChild(btn);
                }
            }

+            if (rightGroup.childNodes.length) header.appendChild(rightGroup);
+
            peerItem.appendChild(header);

            // Media Info
@@ -1273,7 +1297,11 @@ if (elements.langSelector) {
 elements.serverUrl.addEventListener('change', () => {
    let url = elements.serverUrl.value.trim();
    if (url && !url.includes('://')) {
-        url = 'ws://' + url;
+        // Default to secure wss:// — plain ws:// is only valid for a local relay
+        // (and the background rejects/upgrades ws:// for any remote host anyway).
+        const host = url.split('/')[0].split(':')[0].toLowerCase();
+        const isLocal = host === 'localhost' || host === '127.0.0.1';
+        url = (isLocal ? 'ws://' : 'wss://') + url;
        elements.serverUrl.value = url;
        chrome.storage.local.set({ serverUrl: url });
    }
@@ -1390,7 +1418,7 @@ elements.joinBtn.addEventListener('click', async () => {
    }
    if (useCustom && serverUrl) {
        try {
-            const urlToCheck = serverUrl.includes('://') ? serverUrl : 'ws://' + serverUrl;
+            const urlToCheck = serverUrl.includes('://') ? serverUrl : 'wss://' + serverUrl;
            new URL(urlToCheck);
        } catch (_e) {
            showError(getMessage('ERR_INVALID_SERVER_URL'));