@devchitchat/chat 5.0.0 → 5.0.1

package/pages/public/client/views/CallView.js

@@ -14,17 +14,13 @@
 
 import { escHtml } from '../shared/messages.js'
 import { RtcPeerManager } from '../rtc-peer-manager.js'
-import { patchSettings } from '../settings-sync.js'
+import { patchSettings, getPref, setPref } from '../settings-sync.js'
 import { navigateTo } from '../router.js'
 import * as Ev from '../model/events.js'
 
-const DEVICES_KEY = 'devchitchat_devices'
-const LAYOUT_KEY  = 'devchitchat_tile_layout'
-
 export class CallView {
   #model
   #ws
-  #root         // .chat-panel
 
   // DOM refs
   #tilePanelEl
@@ -34,7 +30,6 @@ export class CallView {
   #callStatusAvatars
   #callControlsEl
   #peerCountEl
-  #btnStartCall
   #btnJoinCall
   #btnLeaveCall
   #ctrlMic
@@ -77,10 +72,9 @@ export class CallView {
    * @param {WsClient}   ws
    * @param {HTMLElement} rootEl   — .chat-panel
    */
-  constructor(model, ws, rootEl) {
+  constructor(model, ws) {
     this.#model = model
     this.#ws    = ws
-    this.#root  = rootEl
 
     this.#grabDomRefs()
     this.#buildRtcManager()
@@ -103,7 +97,6 @@ export class CallView {
     this.#callStatusAvatars = q('call-status-avatars')
     this.#callControlsEl    = q('call-controls-bar')
     this.#peerCountEl       = q('call-peer-count')
-    this.#btnStartCall      = q('btn-start-call')
     this.#btnJoinCall       = q('btn-join-call')
     this.#btnLeaveCall      = q('btn-leave-call')
     this.#ctrlMic           = q('ctrl-mic')
@@ -142,14 +135,12 @@ export class CallView {
   }
 
   #restoreLayoutState() {
-    try {
-      const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-      if (saved.collapsed) this.#tilePanelEl?.classList.add('collapsed')
-      if (saved.overlayRight && saved.overlayTop && this.#tilePanelEl) {
-        this.#tilePanelEl.style.right = saved.overlayRight
-        this.#tilePanelEl.style.top   = saved.overlayTop
-      }
-    } catch { /* ignore */ }
+    const saved = getPref('tile_layout', {})
+    if (saved.collapsed) this.#tilePanelEl?.classList.add('collapsed')
+    if (saved.overlayRight && saved.overlayTop && this.#tilePanelEl) {
+      this.#tilePanelEl.style.right = saved.overlayRight
+      this.#tilePanelEl.style.top   = saved.overlayTop
+    }
     this.#attachOverlayDrag(this.#tilePanelEl)
   }
 
@@ -158,12 +149,7 @@ export class CallView {
   // ─────────────────────────────────────────────────────────────────────────
 
   #bindControls() {
-    // Mobile "back to sidebar" button
-    this.#root.querySelector('.btn-back-mobile')?.addEventListener('click', () => {
-      document.body.classList.add('sidebar-open')
-    })
-
-    this.#btnStartCall?.addEventListener('click', () => {
+    document.addEventListener('call:start-requested', () => {
       const channelId = this.#model.currentChannelId
       this.#ws.send({ t: 'rtc.call_create', body: { channel_id: channelId, kind: 'mesh' } })
     })
@@ -188,8 +174,8 @@ export class CallView {
     document.getElementById('tile-panel-collapse')?.addEventListener('click', () => {
       const collapsed = this.#tilePanelEl?.classList.toggle('collapsed')
       try {
-        const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-        localStorage.setItem(LAYOUT_KEY, JSON.stringify({ ...saved, collapsed: !!collapsed }))
+        const saved = getPref('tile_layout', {})
+        setPref('tile_layout', { ...saved, collapsed: !!collapsed })
       } catch { /* ignore */ }
     })
   }
@@ -268,6 +254,11 @@ export class CallView {
       await this.#rtcManager.handleIceCandidate(from_peer_id, candidate)
     })
 
+    ws.on('rtc.stream_removed_event', ({ peer_id, kind }) => {
+      const slotName = kind === 'screen' ? 'screen' : 'cam'
+      this.#removeTile(`${peer_id}-${slotName}`)
+    })
+
     ws.on('rtc.call_end', ({ call_id }) => {
       if (call_id === this.#callId) this.#teardownCall()
     })
@@ -323,12 +314,12 @@ export class CallView {
   #showCallControls() {
     if (this.#callStatusEl) this.#callStatusEl.hidden = true
     this.#callControlsEl?.classList.add('active')
-    if (this.#btnStartCall) this.#btnStartCall.hidden = true
+    document.dispatchEvent(new CustomEvent('call:state-changed', { detail: { inCall: true } }))
   }
 
   #hideCallControls() {
     this.#callControlsEl?.classList.remove('active')
-    if (this.#btnStartCall) this.#btnStartCall.hidden = false
+    document.dispatchEvent(new CustomEvent('call:state-changed', { detail: { inCall: false } }))
   }
 
   #showTilePanel() {
@@ -384,6 +375,7 @@ export class CallView {
       this.#removeTile('local-cam')
       this.#videoStream = null
       this.#camOff = true
+      this.#ws.send({ t: 'rtc.stream_removed', body: { call_id: this.#callId, kind: 'camera' } })
       for (const peerId of this.#rtcManager.peerIds()) this.#rtcManager.negotiate(peerId)
       if (this.#ctrlCam) this.#ctrlCam.textContent = '📷'
       return
@@ -410,6 +402,7 @@ export class CallView {
       this.#removeTile('local-screen')
       this.#screenStream = null
       this.#screenSharing = false
+      this.#ws.send({ t: 'rtc.stream_removed', body: { call_id: this.#callId, kind: 'screen' } })
       for (const peerId of this.#rtcManager.peerIds()) this.#rtcManager.negotiate(peerId)
       if (this.#ctrlScreen) this.#ctrlScreen.textContent = '🖥'
       return
@@ -547,11 +540,11 @@ export class CallView {
   // ─────────────────────────────────────────────────────────────────────────
 
   #loadSavedDevices() {
-    try { return JSON.parse(localStorage.getItem(DEVICES_KEY) ?? '{}') } catch { return {} }
+    return getPref('devices', {})
   }
 
   #saveDevices(patch) {
-    localStorage.setItem(DEVICES_KEY, JSON.stringify({ ...this.#loadSavedDevices(), ...patch }))
+    setPref('devices', { ...this.#loadSavedDevices(), ...patch })
   }
 
   async #refreshDevices() {
@@ -740,8 +733,8 @@ export class CallView {
       document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup',   onEnd)
       document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend',  onEnd)
       try {
-        const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-        localStorage.setItem(LAYOUT_KEY, JSON.stringify({ ...saved, overlayRight: panel.style.right, overlayTop: panel.style.top }))
+        const saved = getPref('tile_layout', {})
+        setPref('tile_layout', { ...saved, overlayRight: panel.style.right, overlayTop: panel.style.top })
       } catch { /* ignore */ }
     }
 

package/pages/public/client/views/ChatHeaderView.js

@@ -0,0 +1,67 @@
+/**
+ * ChatHeaderView.js — owns the <header class="chat-header"> element.
+ *
+ * Responsibilities:
+ *   - Update channel title and topic on CHANNEL_SELECTED
+ *   - Dispatch 'call:start-requested' when the Start Call button is clicked
+ *   - Show/hide the Start Call button in response to 'call:state-changed'
+ *   - Handle the mobile back button (show sidebar)
+ */
+
+import * as Ev from '../model/events.js'
+
+export class ChatHeaderView {
+  #model
+  #headerEl
+  #titleEl
+  #topicEl
+  #startCallBtn
+
+  /**
+   * @param {AppModel}    model
+   * @param {HTMLElement} headerEl — <header class="chat-header">
+   */
+  constructor(model, headerEl) {
+    this.#model       = model
+    this.#headerEl    = headerEl
+    this.#titleEl     = headerEl.querySelector('.chat-title')
+    this.#topicEl     = headerEl.querySelector('.chat-topic')
+    this.#startCallBtn = headerEl.querySelector('#btn-start-call')
+
+    this.#bindModelEvents()
+    this.#bindInteractions()
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Model events
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #bindModelEvents() {
+    this.#model.addEventListener(Ev.CHANNEL_SELECTED, e => {
+      const { name = '', topic = '' } = e.detail.meta ?? {}
+      if (this.#titleEl) this.#titleEl.textContent = name
+      if (this.#topicEl) this.#topicEl.textContent = topic
+    })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // User interactions
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #bindInteractions() {
+    // Mobile: back to sidebar
+    this.#headerEl.querySelector('.btn-back-mobile')?.addEventListener('click', () => {
+      document.body.classList.add('sidebar-open')
+    })
+
+    // Start Call button → let CallView handle the WebRTC side
+    this.#startCallBtn?.addEventListener('click', () => {
+      document.dispatchEvent(new CustomEvent('call:start-requested'))
+    })
+
+    // CallView signals when a call is entered or left
+    document.addEventListener('call:state-changed', e => {
+      if (this.#startCallBtn) this.#startCallBtn.hidden = e.detail?.inCall ?? false
+    })
+  }
+}

package/pages/public/client/views/ComposerView.js

@@ -82,11 +82,14 @@ export class ComposerView {
         .filter(m => m.handle)
     })
 
-    this.#model.addEventListener(Ev.CHANNEL_SELECTED, () => {
+    this.#model.addEventListener(Ev.CHANNEL_SELECTED, e => {
       // Clear pending state on navigation
       this.#pendingAttachments = []
       this.#renderChips()
-      this.#textareaEl && (this.#textareaEl.value = '')
+      if (this.#textareaEl) {
+        this.#textareaEl.value = ''
+        this.#textareaEl.placeholder = `Message in ${e.detail?.meta?.name ?? ''}`
+      }
     })
   }
 

package/pages/public/client/views/MessageListView.js

@@ -180,7 +180,7 @@ export class MessageListView {
   // Event handlers
   // ─────────────────────────────────────────────────────────────────────────
 
-  #onChannelSelected({ channelId, prev }) {
+  #onChannelSelected({ channelId }) {
     this.#channelId = channelId
     cancelActiveEdit()
 
@@ -281,7 +281,7 @@ export class MessageListView {
     }
   }
 
-  #onLoadingMoreChanged({ loading }) {
+  #onLoadingMoreChanged(_e) {
     // The sentinel visibility is managed in #onMessagesPrepended.
     // Nothing to do here unless we want a loading spinner.
   }

package/pages/public/client/views/SidebarView.js

@@ -31,6 +31,7 @@ export class SidebarView {
   #ws
   #root               // <aside>
   #dmListEl           // #dm-list
+  #canManage = false  // false for Guests
   #mentionedChannels  = new Set()  // channelId → mentioned
   #urgentChannels     = new Set()  // channelId → urgent
   #dmUnread           = new Set()  // channelId → unread DM
@@ -46,6 +47,22 @@ export class SidebarView {
     this.#root   = rootEl
     this.#dmListEl = rootEl.querySelector('#dm-list')
 
+    const roles = document.querySelector('.chat-panel')?.dataset.userRoles ?? ''
+    this.#canManage = !roles.toLowerCase().includes('guest')
+
+    // Stamp data-channel-id / data-hub-id onto SSR-rendered <li> elements
+    // so drag-and-drop and context-menu handlers can read them before #renderHubs runs.
+    for (const li of rootEl.querySelectorAll('li.channel-item')) {
+      if (!li.dataset.channelId) {
+        const link = li.querySelector('[data-channel-id]')
+        if (link?.dataset.channelId) li.dataset.channelId = link.dataset.channelId
+      }
+      if (!li.dataset.hubId) {
+        const details = li.closest('details[data-hub-id]')
+        if (details?.dataset.hubId) li.dataset.hubId = details.dataset.hubId
+      }
+    }
+
     // Seed model from DOM on first load
     const hubs = _populateHubsFromDom(rootEl)
     const dms  = _populateDmsFromDom(rootEl)
@@ -193,20 +210,18 @@ export class SidebarView {
                data-channel-topic="${escHtml(ch.topic ?? '')}"
                data-channel-visibility="${escHtml(ch.visibility ?? 'public')}"
                data-hub-id="${escHtml(hub.hub_id)}">
-              # ${escHtml(ch.name)}
+              ${escHtml(ch.name)}
             </a>
-            <button class="btn-channel-gear btn-icon" type="button"
-                    title="Channel settings" aria-label="Channel settings">⚙</button>
           </li>`
       }).join('')
+      const addBtn = this.#canManage
+        ? `<button class="btn-hub-add btn-icon" type="button" title="Add channel" aria-label="Add channel">+</button>`
+        : ''
       return `
         <details class="hub-header" data-hub-id="${escHtml(hub.hub_id)}" ${open}>
           <summary class="hub-name" data-hub-id="${escHtml(hub.hub_id)}">
             <span>${escHtml(hub.name)}</span>
-            <button class="btn-hub-gear btn-icon" type="button"
-                    title="Hub settings" aria-label="Hub settings">⚙</button>
-            <button class="btn-hub-add btn-icon" type="button"
-                    title="Add channel" aria-label="Add channel">+</button>
+            ${addBtn}
           </summary>
           <ul class="channel-list">${channels}</ul>
         </details>`
@@ -326,56 +341,65 @@ export class SidebarView {
   // ─────────────────────────────────────────────────────────────────────────
 
   #bindAdminHandlers() {
-    const root = this.#root
-    const ws   = this.#ws
+    const root  = this.#root
+    const ws    = this.#ws
     const model = this.#model
 
-    // New hub button
+    // New hub button (always visible — creating a hub is not a management action)
     root.querySelector('#btn-new-hub')?.addEventListener('click', () => {
-      isTouch()
-        ? _openCreateHubSheet(ws)
-        : _openCreateHubModal(ws)
+      isTouch() ? _openCreateHubSheet(ws) : _openCreateHubModal(ws)
     })
 
-    // Delegated: hub gear, hub add-channel, channel gear
+    if (!this.#canManage) return
+
+    // Add-channel button (delegated — rendered only for non-guests)
     root.addEventListener('click', e => {
-      if (e.target.closest('.btn-hub-gear')) {
-        e.stopPropagation()
-        const summary = e.target.closest('.hub-name')
-        const hubId   = summary?.dataset.hubId
-        if (!hubId) return
-        const hub = model.hubs.find(h => h.hub_id === hubId)
-        _openHubModal(hubId, hub?.name ?? '', hub?.description ?? null, hub?.visibility ?? 'public', ws)
-        return
-      }
+      const btn = e.target.closest('.btn-hub-add')
+      if (!btn) return
+      e.stopPropagation()
+      const hubId = btn.closest('.hub-name')?.dataset.hubId
+      if (!hubId) return
+      const hub = model.hubs.find(h => h.hub_id === hubId)
+      isTouch()
+        ? (() => { showActionSheet({ label: `New channel in ${hub?.name ?? ''}`, items: [] }); _buildCreateChannelForm(getItemsContainer(), { hubId, ws, dismiss: dismissSheet }) })()
+        : _openCreateChannelModal(hubId, hub?.name ?? '', ws)
+    })
 
-      if (e.target.closest('.btn-hub-add')) {
-        e.stopPropagation()
+    // Desktop: right-click context menus
+    if (!isTouch()) {
+      root.addEventListener('contextmenu', e => {
         const summary = e.target.closest('.hub-name')
-        const hubId   = summary?.dataset.hubId
-        if (!hubId) return
-        const hub = model.hubs.find(h => h.hub_id === hubId)
-        _openCreateChannelModal(hubId, hub?.name ?? '', ws)
-        return
-      }
-
-      if (e.target.closest('.btn-channel-gear')) {
-        e.preventDefault()
-        const li        = e.target.closest('.channel-item')
-        const link      = li?.querySelector('.channel-link')
-        const channelId = link?.dataset.channelId
-        if (!channelId) return
-        let ch = null
-        for (const hub of model.hubs) {
-          ch = (hub.channels ?? []).find(c => c.channel_id === channelId)
-          if (ch) break
+        if (summary) {
+          e.preventDefault()
+          const hubId = summary.dataset.hubId
+          if (!hubId) return
+          const hub = model.hubs.find(h => h.hub_id === hubId)
+          _showSidebarPopover(e, [
+            { label: 'Edit hub', action: () => _openHubModal(hubId, hub?.name ?? '', hub?.description ?? null, hub?.visibility ?? 'public', ws) },
+            { label: 'New channel', action: () => _openCreateChannelModal(hubId, hub?.name ?? '', ws) },
+            { label: 'Delete hub', danger: true, action: () => { ws.send({ t: 'hub.delete', body: { hub_id: hubId } }) } },
+          ])
+          return
         }
-        _openChannelModal(channelId, ch?.name ?? '', ch?.topic ?? null, ch?.visibility ?? 'public', ws)
-        return
-      }
-    })
+        const li = e.target.closest('.channel-item')
+        if (li) {
+          e.preventDefault()
+          const channelId = li.dataset.channelId
+          if (!channelId) return
+          let ch = null
+          for (const hub of model.hubs) {
+            ch = (hub.channels ?? []).find(c => c.channel_id === channelId)
+            if (ch) break
+          }
+          _showSidebarPopover(e, [
+            { label: 'Edit channel', action: () => _openChannelModal(channelId, ch?.name ?? '', ch?.topic ?? null, ch?.visibility ?? 'public', ws) },
+            { label: 'Delete channel', danger: true, action: () => { ws.send({ t: 'channel.delete', body: { channel_id: channelId } }) } },
+          ])
+        }
+      })
+    }
 
-    // Long-press on touch (hub summary or channel link)
+    // Mobile: long-press → action sheet
     if (isTouch()) {
       addLongPress(root, e => {
         const target  = e.target ?? e.touches?.[0]?.target
@@ -850,6 +874,57 @@ function _buildCreateChannelForm(container, { hubId, ws, dismiss }) {
   requestAnimationFrame(() => container.querySelector('#new-ch-name')?.focus())
 }
 
+// ─── Desktop context-menu popover ────────────────────────────────────────────
+
+let _popoverEl       = null
+let _popoverCleanup  = null
+
+function _dismissSidebarPopover() {
+  _popoverEl?.remove()
+  _popoverEl = null
+  _popoverCleanup?.()
+  _popoverCleanup = null
+}
+
+function _showSidebarPopover(mouseEvent, items) {
+  _dismissSidebarPopover()
+
+  const el = document.createElement('div')
+  el.className = 'msg-context-menu'
+  el.setAttribute('role', 'menu')
+  for (const item of items) {
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = 'msg-context-menu-item' + (item.danger ? ' msg-context-menu-item--danger' : '')
+    btn.setAttribute('role', 'menuitem')
+    btn.textContent = item.label
+    btn.addEventListener('click', () => { _dismissSidebarPopover(); item.action() })
+    el.appendChild(btn)
+  }
+  document.body.appendChild(el)
+  _popoverEl = el
+
+  // Position at cursor, flip if needed
+  const gap = 4
+  let top  = mouseEvent.clientY + gap
+  let left = mouseEvent.clientX + gap
+  el.style.left = `${left}px`
+  el.style.top  = `${top}px`
+
+  const rect = el.getBoundingClientRect()
+  if (rect.right  > window.innerWidth  - 8) el.style.left = `${mouseEvent.clientX - rect.width  - gap}px`
+  if (rect.bottom > window.innerHeight - 8) el.style.top  = `${mouseEvent.clientY - rect.height - gap}px`
+
+  const onKey   = e => { if (e.key === 'Escape') _dismissSidebarPopover() }
+  const onClick = e => { if (!el.contains(e.target)) _dismissSidebarPopover() }
+  document.addEventListener('keydown', onKey,  { capture: true })
+  document.addEventListener('click',   onClick, { capture: true })
+  _popoverCleanup = () => {
+    document.removeEventListener('keydown', onKey,  { capture: true })
+    document.removeEventListener('click',   onClick, { capture: true })
+  }
+}
+
 // ─── Modal / sheet openers ────────────────────────────────────────────────────
 
 function _openCreateHubModal(ws) {

package/pages/public/client/views/shared/EmojiPickerSingleton.js

@@ -14,8 +14,8 @@
 
 import { CATEGORIES, EMOJI_NAMES } from '../../emoji-data.js'
 import { escHtml } from '../../shared/messages.js'
+import { getPref, setPref } from '../../settings-sync.js'
 
-const RECENT_KEY = 'devchitchat_recent_emoji'
 const RECENT_MAX = 24
 const QUICK_PICKS_COUNT = 4
 
@@ -29,14 +29,14 @@ let currentOnPick  = null
 // ── Public API ────────────────────────────────────────────────────────────────
 
 export function loadRecentEmoji() {
-  try { return JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') } catch { return [] }
+  return getPref('recent_emoji', [])
 }
 
 export function saveRecentEmoji(emoji) {
   let recents = loadRecentEmoji().filter(e => e !== emoji)
   recents.unshift(emoji)
   if (recents.length > RECENT_MAX) recents = recents.slice(0, RECENT_MAX)
-  localStorage.setItem(RECENT_KEY, JSON.stringify(recents))
+  setPref('recent_emoji', recents)
   refreshAllQuickPicks()
 }
 

package/pages/public/themes/base.css

@@ -19,6 +19,8 @@ input, textarea, select, button { font: inherit; }
   --radius-pill: 999px;
 
   --sidebar-width: 260px;
+  --thread-panel-width: 380px;
+  --tile-panel-width: 360px;
   --composer-height: 80px;
   --call-bar-height: 0px; /* expands when a call is active */
 
@@ -62,6 +64,8 @@ details summary {
   top: 0;
   z-index: 1;
   padding-top: env(safe-area-inset-top);
+  /* needed for the resize handle to anchor correctly */
+  overflow-x: visible;
 }
 
 .hub-group { padding: 0 0 4px; }
@@ -996,6 +1000,23 @@ details summary {
 .mention-option-name   { font-weight: 600; color: var(--text-primary); }
 .mention-option-handle { color: var(--text-secondary); font-size: 13px; }
 
+/* ── Resize handles ──────────────────────────────────────────────────────── */
+.resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 10;
+}
+.resize-handle--right { right: 0; }
+.resize-handle--left  { left: 0; }
+.resize-handle:hover,
+.resize-handle:active {
+  background: var(--accent);
+  opacity: 0.4;
+}
+
 /* ── Auth page — Apple-style centered card ───────────────────────────────── */
 .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
 .auth-shell { width: 100%; max-width: 420px; padding: 40px 32px; background: var(--bg-sidebar); border-radius: var(--radius-xl); border: none; box-shadow: var(--shadow-lg); }
@@ -1260,6 +1281,8 @@ mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: va
   background: var(--bg-sidebar);
   border-left: 1px solid var(--border);
   overflow: hidden;
+  /* position: relative so the .resize-handle--left child anchors to this element */
+  position: relative;
 }
 .tile-panel.active { display: flex; }
 
@@ -1293,7 +1316,7 @@ mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: va
     height: 100%;
   }
   .tile-panel {
-    width: 360px;
+    width: var(--tile-panel-width);
     flex-shrink: 0;
     height: 100vh;
     overflow-y: auto;
@@ -1440,7 +1463,7 @@ mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: va
   position: absolute;
   top: 0;
   right: 0;
-  width: 380px;
+  width: var(--thread-panel-width);
   height: 100%;
   z-index: 30;
   overflow: hidden;

package/src/ws/ChatServer.js

@@ -23,7 +23,7 @@ import { handleHello, handleInviteRedeem, handleSignIn, handleSignOut, handleAdm
 import { handleHubList, handleHubCreate, handleHubUpdate, handleHubDelete, handleHubAddMember, handleHubRemoveMember, handleHubListMembers, handleHubReorder } from './handlers/hubHandlers.js'
 import { handleChannelList, handleChannelCreate, handleChannelUpdate, handleChannelDelete, handleChannelJoin, handleChannelLeave, handleChannelReorder, handleChannelAddMember, handleChannelRemoveMember, handleChannelListMembers, handleUserList, handleBotList, handleDmOpen, handleDmList } from './handlers/channelHandlers.js'
 import { handleMsgSend, handleMsgList, handleMsgEdit, handleMsgDelete, handleThreadList, handleSearchQuery, handlePresenceSubscribe } from './handlers/messageHandlers.js'
-import { handleRtcCallCreate, handleRtcJoin, handleRtcOffer, handleRtcAnswer, handleRtcIce, handleRtcStreamPublish, handleRtcLeave, handleRtcEndCall } from './handlers/rtcHandlers.js'
+import { handleRtcCallCreate, handleRtcJoin, handleRtcOffer, handleRtcAnswer, handleRtcIce, handleRtcStreamPublish, handleRtcStreamRemoved, handleRtcLeave, handleRtcEndCall } from './handlers/rtcHandlers.js'
 import { handlePushSubscribe, handlePushUnsubscribe } from './handlers/pushHandlers.js'
 import { handleReactionAdd, handleReactionRemove } from './handlers/reactionHandlers.js'
 import { WebPushService } from '../services/WebPushService.js'
@@ -234,6 +234,7 @@ export class ChatServer {
       case 'rtc.answer':                 return handleRtcAnswer(ws, msg, ctx)
       case 'rtc.ice':                    return handleRtcIce(ws, msg, ctx)
       case 'rtc.stream_publish':         return handleRtcStreamPublish(ws, msg, ctx)
+      case 'rtc.stream_removed':         return handleRtcStreamRemoved(ws, msg, ctx)
       case 'rtc.leave':                  return handleRtcLeave(ws, msg, ctx)
       case 'rtc.end_call':               return handleRtcEndCall(ws, msg, ctx)
       // Web Push

package/src/ws/handlers/rtcHandlers.js

@@ -91,6 +91,13 @@ export function handleRtcStreamPublish(ws, msg, ctx) {
   publishCall(call_id, { t: 'rtc.stream_event', ok: true, body: { call_id, peer_id: ws.data.peerId, stream } })
 }
 
+export function handleRtcStreamRemoved(ws, msg, ctx) {
+  const { publishCall } = ctx
+  const { call_id, kind } = msg.body || {}
+  if (!ws.data.peerId || ws.data.callId !== call_id) return
+  publishCall(call_id, { t: 'rtc.stream_removed_event', ok: true, body: { call_id, peer_id: ws.data.peerId, kind } })
+}
+
 export function handleRtcLeave(ws, msg, ctx) {
   const { signalingService, sendWs, publishCall, publishChannel, publishCallState, peerConnections } = ctx
   const { call_id } = msg.body || {}